In this assignment, you will be building a professional portfolio site usin HTML/CSS. You will be following a style guide to create aesthetically pleasing CSS and adding various links to HTML documents. Once you're handiwork is complete, you will be uploading your code to GitHub.

• Welcome to your first opportunity as a front-end web developer. In today's activity, you will be advocating for the most important client of all -- yourself! In making a portfolio, you are taking a first step towards building your brand as a web designer.

• This is one of the harder assignments in the class primarily because you're just getting your feet wet in web design. But trust us! It will get easier. Put in the time now and it will pay dividends!

• You will have all the tools you need to complete this homework by the end of the week (Saturday).

1. Create a new repository in GitHub called Basic-Portfolio.

2. Go through the process explained in class to clone this repository to your local computer.

3. Then navigate to the Basic-Portfolio folder that was created on your machine. Inside this folder, create the following:

• 3 HTML documents called index.html, contact.html, and portfolio.html
• A folder called assets.
  • Inside the assets folder make two additional folders called css and images.
    • Inside the css folder make a file called style.css.
    • Inside the css folder make a file called reset.css and include the code found from the Meyerweb reset located here
    • Inside the images folder you can save the images you plan on using (e.g. your profile image, the placeholder images for the portfolio, and the social icon images).

4. Push the above changes to Github (Make sure to git add . and git commit -m "initial site files" then type git push origin master to push your changes to your Github repo.

5. Reference the screenshots for the site located here:

   • What you code must exactly match this layout (excluding minor changes like replacing "your name" with your actual name and writing your own unique bio, etc). The design itself must match the screenshots. The specs are located below.

   • 

   • 

   • 

6. Begin coding the site one page at a time by writing the html code semantically (meaning if something is a heading, you use a heading tag. If something is a list, you use an unordered or ordered list tag, etc.). DO NOT start the CSS styling yet. CSS should come after your html code is finished.

• The content for the index.html should be unique to YOU. Write a paragraph or two about yourself. Make it fun, show your personality!
• The main logo where it says "Your Name" should say your name. This may make the logo section smaller or wider depending on how long your name is, that is fine and expected.
• Add, commit, and push your code to GitHub often, especially when you complete a page.

7. After all of your html is written (Pro-tip: Be sure to validate your html) you can begin styling your pages using the style.css file you created.

8. Push your changes to Github.

1. Colors

• Teal color (used for headings and backgrounds) = #4aaaa5
• Regular font color (used for paragraphs and all text besides the headings) = #777777
• Main header background color = #ffffff
• Main header border color = #cccccc
• Footer background color = #666666
• Main content background color = #ffffff
• Main content border color = #dddddd
• Pro-tip: Use the Eye Dropper Chrome extension to find the colors used on web pages.

2. Fonts

• Heading fonts use font-family: 'Georgia', Times, Times New Roman, serif;
• All other fonts use 'Arial', 'Helvetica Neue', Helvetica, sans-serif;

3. Profile image found on index.html

• Use a picture of yourself. If you don't have a picture, you can grab a placeholder image from LoremPixel. Save the images to your images folder

4. Portfolio images

• Placeholder images can be found LoremPixel. Save the images to your images folder

5. Social link images (e.g. Github, LinkedIn, and StackOverflow)

• These images can be found on IconFinder. Save the images to your images folder

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

• The width of the entire content area is 960px wide
• The width of the main section content is 650px wide
• The width of the sidebar is 270px
• Pro-tip. Use the Page Ruler extension to measure the size of elements

1. Make the pages more sophisticated by adding styling to text links, image links, and buttons when the mouse hovers over them. A CSS hover tutorial can be found here. You can use Adobe Kuler to find colors that match the theme (In this case, the primary color is Teal #4aaaa5).

2. Make a 'sticky footer'. You will notice the dark grey footer will always rest just below the content. This is fine when the content is long, 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. Please note, I am not talking about positioning the footer as "fixed" to the browser. See screenshots examples:

• Be sure to consult the GitHub Supplemental Guide sent to you in class when interfacing with GitHub.

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

• Consult with TAs and Instructors if you find yourself completely stumped for more than a few hours. Get help when you need it! That's why you're in the program :-)

• Stay positive! You've got this!

Coding Boot Camp (C) 2016. All Rights Reserved.