Let's Build a Portfolio!
Sarah Frostenson
Twitter: @sfrostenson @sfrostenson frostenson.com/talks/ github.com/sfrostenson/portfolio-workshop
To copy and paste code snippets, all participants should follow along w/ the slides by navigating to frostenson.com/talks/ and clicking on the Let's Build a Porfolio slidedeck. To launch speaker notes simply type S on your keyboard.
What we're going to build
A one page, responsively designed website that showcases your work.
Portfolios are a great way to visually show employers what you've done, especially if you're applying for a technical position that requires coding skills.
What we're going to learn
1: Structuring Our Workspace
Create a new folder/directory on your desktop called site.
Within your site directory create an index.html file.
Create one additional directory within your site directory called styles.
Within your styles directory create a main.css file
Every website you build needs a root or project directory, which in this case is site. Our index.html file will form the backbone of our website and our styles directory will host our code that customizes our website's look and feel.
2: Structure it in Your Terminal
sfrostenso@GCI-SFROSTEN2-M:~|⇒ cd Desktop
sfrostenso@GCI-SFROSTEN2-M:~/Desktop|
⇒ mkdir site && cd $_
sfrostenso@GCI-SFROSTEN2-M:~/Desktop/site|
⇒ touch index.html
sfrostenso@GCI-SFROSTEN2-M:~/Desktop/site|
⇒ mkdir styles && cd $_
sfrostenso@GCI-SFROSTEN2-M:~/Desktop/site/styles|
⇒ touch main.css
sfrostenso@GCI-SFROSTEN2-M:~/Desktop/site/styles|
⇒ cd ..
sfrostenso@GCI-SFROSTEN2-M:~/Desktop/site|
⇒
First we want to "cd" or change directory into our Desktop folder so we are all building from the same place on our computers. Once we're at the desktop, we'll make our directory site and change directly into it. From there we'll use touch to create a single file. And we'll use mkdir to make one more directory, called styles. In the styles directory, we'll want to create a main.css file. Once you've done this cd back to the root directory--site.
3: HTML Setup
Because this slide presentation is one big html document, I had some issues including the doctype tag, html and head tags, which is why this portion is a screenshot and not an embed. They'll need to actually type this into their html file.
4: Add some Body HTML
Now let's get something on the page. Go ahead and copy and paste the above code in between your body tags. We'll talk about what we're doing in just a second. The next slide shows a screen shot of what the body in your index.html file should look like.
5: Launch a webserver
Go back to your terminal. From the site directory, launch a simple webserver by typing python -m SimpleHTTPServer
sfrostenso@GCI-SFROSTEN2-M:~/Desktop/site|
⇒ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
To see your website in action type the this in the address bar: http://localhost:8000/
This should work for most of you. If it doesn't, it means Python isn't installed on your machine. That's ok. Just install it later. In the meantime, if you double click on your index.html file, it'll launch it in the web browser and you'll still be able to interact with the console and webpage.
6: Inspect Your Page
There are two ways to launch your inspector tools (should work for Safari, Chrome, Firefox & IE)
Right click anywhere on the page and select Inspect Element
Use the keyboard shortcut Cmd + Option + I on a Mac or Ctrl + Shift + I on a PC.
The Inspector
This is roughly what your Inspector should look like--it varies from browser to browser. But the big thing, I want you to do now is to go through the DOM (short for Document Object Model--which refers to the html backbone of your site). Do you see our html code reflected in the Inspector? What happens when you select an element in the Inspector? Does it highlight the corresponding element on the page?
7: Bootstrap
Bootstrap is a popular HTML, CSS and JS framework for developing responsive, mobile first projects.
Here are some more ready-made Bootstrap Templates .
All of the styles and functionality of our menu is thanks to the Bootstrap framework. You'll see that we used the Starter Template for our website nav.
Bootstrap's Grid
Bootstrap works as a 12 column grid.
This means grid columns classes must add up to 12 for a single horizontal block (i.e. all divs nested in one parent div must have classes that add up to 12).
Bootstrap has four types of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops)
Based on the code in our index.html file, it's not apparent, b/c we're using a special Bootstrap class called "navbar"--but Bootstrap works on a 12 column grid system.
8: Use Bootstrap's Grid
Project One Headline
A detailed description on the project or nature of your work, role and skills learned.
Project Two Headline
A detailed description on the project or nature of your work, role and skills learned.
Project Three Headline
A detailed description on the project or nature of your work, role and skills learned.
Ok, let's use Bootstrap to build one row of our portfolio site. We'll want to put this code under our closing nav tag in our index.html file.What does the col-md-4 class mean? What happens when you resize the page? Can you spot any errors? What do you think is happening?
9: A little CSS
.row {
margin-right: 0;
margin-left: 0;
}
.projects {
top: 50px;
position: relative;
}
The reason we can't see all of our content is because of div positioning that can be fixed with a little of our own custom CSS.
From here, you could keep adding additional rows in the exact same way as we did the first row, but I'd like to briefly introduce you to Jekyll, as it's a powerful tool for templating a website and reducing the amount of code you need to write.
So if your installation of jekyll was successful, do you see this when you go to localhost:4000? What happens when you click About? What happens when you resize? A: That's b/c Jekyll already has Foundation (a framework that performs the same functionality as Bootstrap already installed). Now let's check out what files and directories were generated in my-awesome-site. Wow. A lot, right?
11: Jekyll's Structure
So this is what a basic Jekyll site's directory looks like. In the next slide, we're going to touch on a few of the powerful ways in which you can customize Jekyll's structure with your own content.
12: Site, Config, Includes & Layouts
_site is where your website will be generated by Jekyll as you make changes to other files._config stores meta configuration data about your website & data specific to you._includes contain reusable code chunks that can be reused throughout your site._layouts contain the html structure for each section of your site.
Don't worry about making changes to your site directory files, as Jekyll will compile changes here for you automatically--it's just important to know this is where Jekyll hosts your site's content. As for the config, includes and layouts--we're going to make a few quick changes to those in the next couple of slides so you can see what building with Jekyll is like. Includes are particularly powerful, as they reduce the amount of code you have to write.
13: Customizing the Config
The config.yml file is stored in the root directory of your my-awesome-site project and looks like this. What happens when you put in your own personal information and refresh the page?
14: The Power of Includes
Screenshot of our Footer.html _include.
{{ }} indicates templating language.
What info generates {{ site.title }} ?
Now, let's take a look at our includes folder. Notice how you see three html files: footer, header & head? Take a look at those files what do you notice? There's some indecipherable svg code, but that's just for your twitter and github icons. Do you notice the curly brackets with the site variable? Do you understand the relationship between site & our config.yml file?
15: Layouts are the glue
This is a screen shot of our default.html. Do you recognize the templating language? Do you see how our includes are being called on the page?
16: A Portfolio Include?
In your _includes directory create a new file called projects.html and from the index.html file in your site directory, copy & paste your row projects class.
Project One Headline
A detailed description on the project or nature of your work, role and skills learned.
Project Two Headline
A detailed description on the project or nature of your work, role and skills learned.
Project Three Headline
A detailed description on the project or nature of your work, role and skills learned.
Ok, so now that we know about the power of Jekyll & Bootstrap, do you think we could treat our portfolio that we create in our site directory as an include in our jekyll project?
Change our Default Layout
In _layouts in your default.html file, replace {{ content }} with {% include projects.html %}
Refresh your awesome site page. What do you see?
A Portfolio!
Now the astute out there might notice the style of our portfolio is slightly different than in our site project. This is because Jekyll relies on Foundation instead of Bootstrap. But we can link to Bootstrap in our head.html file in our includes folder.
Add Bootstrap
From the index.html file in your site directory, copy & paste your Boostrap stylesheet link.
What happens now when you refresh the page? Is it identical more to the projects on your site portfolio page? Notice, we had to refer to Bootstrap after our main.css in order to overwrite default Jekyll styles.
