What better way to get started with the front-end than creating your own portfolio? This first Zipline will have you build up your portfolio website from scratch. I’m going to go dead basic on this, no external tools or bundling bonanza. Just HTML, CSS, JS and a few few libraries.
Building stuff, anything really, as vague as it may seem, is the best way to keep your skills sharp. For this particular project, we’re asked to fulfill the following user stories:
- As a user, I can access all of the portfolio webpage’s content just by scrolling.
- As a user, I can click different buttons that will take me to the portfolio creator’s different social media pages.
- As a user, I can see thumbnail images of different projects the portfolio creator has built (if you haven’t built any websites before, use placeholders.)
- Bonus: As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.
Now, get scared. I won’t be using Bootstrap or jQuery at all. For heavens sake, it’s a static, single page site. It has two advantages, it’s easy to navigate, and it is fast. Having to include Bootstrap and jQuery will just slow it down and spoil you (feel free to use them though 🙂 ).
Not only that, but getting too used to the conveniences that jQuery brings can be dangerous. It’s a simple project, and we’ll use simple technologies. I’ll just include FontAwesome because it’s awesome (haha) and normalize.css. I’m also going to be using Sass instead of CSS. It’s gonna be great!
You may, or may not have used SASS/SCSS before, but oh boy, you should. If you want to get a feel for it, go ahead and take a look at my post on SASS.
I’m going to go pretty minimalist on it. Let’s make the content our focus. Here’s two constrains that I’ll put in place before we do anything:
- Choose one font family for the whole project.
- Use very few colors.
Trust me on these two, you’ll thank me later.
Making your page responsive is going to be a task that you’ll have to figure out on your own.
We’re told to code something that resembles this. This is the layout that we’ll use:
Simple, yet elegant enough for a very first project. Let’s go ahead and start coding this baby.
I’m going to be using dummy text and picture thumbnails, but you should definitely get a decent looking picture of yourself if you intend to use this site as a personal portfolio. I recommend that you go through the code and look closely, it’s pretty self explanatory.
I’ll be doing four sections:
- Home: A catchy phrase and social media links will be shown as the main focus.
- About: A quick summary about myself, along with a picture.
- Portfolio: A few thumbnails that link to different projects.
- Contact: Contact info.
Each one of them is going to be taking up 100% of the browsers viewport height. Here’s the HTML markup:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Portfolio</title> <!-- Normalize and FontAwesome CSS files --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- Custom CSS files --> <link rel="stylesheet" href="css/main.css"> </head> <body>