Week 1 (Recommended) Assignment - That Portfolio Though

Overview

In this assignment, you'll build a professional portfolio site using HTML/CSS. These instructions include a short style guide; follow it to design an aesthetically pleasing layout while creating different kinds of complex HTML elements.

Before You Begin

• Welcome to your first opportunity as a front-end web designer. You will be advocating for your most important client—yourself! By making a portfolio, you'll take your first step toward building your web development brand.

• This will be one of your harder assignments, if only because you're just getting your feet wet in web design. Trust us, though; it will get easier. Invest your time in this assignment, and it will pay dividends!

• You'll have all the tools you need to complete this homework by the end of Saturday's class.

Instructions

 <!-- * In the `css` folder, make a file called `style.css`. -->
 <!-- * In the `css` folder, make a file called `reset.css`, and include the code found from the Meyerweb reset located [here](http://meyerweb.com/eric/tools/css/reset/reset.css). -->
 <!-- * In the `images` folder, save the images you plan on using (like your profile image, the placeholder images for the portfolio, and the social icon images). -->

5. Reference these screenshots for your site:

   

   

   

   • IMPORTANT Your site's layout must match the designs in these screenshots. You'll find the specs for these designs below.

• Be sure to validate your html.

Additional Specifcations

1. Colors Pro-tip: Use the Eye Dropper Chrome extension to find the colors used on web pages.

2. Fonts:

3. Profile Image Found on index.html:

4. Portfolio Images:

5. Social Link Images (Github, LinkedIn, StackOverflow, etc.):

6. Background Images:

   • The background pattern used was found on Subtle Patterns. You can browse through that site and find whichever pattern you like.

7. Dimensions:

Bonus

1. Make your pages more sophisticated by adding style to text links, to image links, and to buttons for when a user hovers their cursor over them. A CSS hover tutorial can be found here.

2. You can use Adobe Kuler to find colors that match the theme (in this case, the primary color is Teal #4aaaa5).

3. Make a "sticky footer." You will notice the dark grey footer will always rest just below the content. This is fine whenever your site has enough content to push it down past the height of most monitors. But if there isn't much content in the body, the footer could rest in the middle of the page:

   • Try to code the footer in a way that it will always remain at the bottom of the page, no matter how short the content is. A sticky footer tutorial can be found here.

Helpful Hints

• For help with Git and GitHub, be sure to consult the GitHub Supplemental Guide sent to you in class.

• Don't forget to look into these concepts: float, padding, margin, display, overflow, clear and text-align.

• This will be a tough assignment, but 23 weeks from now, you'll look back to this exercise and realize just how much you've grown as a developer. Stay positive! You've got this!

---

One More Thing

If you have any questions about this project or the material we have covered, please post them in the community channels in slack so that your fellow developers can help you! If you're still having trouble, you can come to office hours for assistance from your instructor and TAs.

Good Luck!

Copyright

Coding Boot Camp © 2016. All Rights Reserved.