FLW1: Unit 1 Project - Portfolio

Create a personal portfolio using HTML and CSS. For those looking for an added challenge, feel free to incorporate JavaScript.

Planning

• 1. Look at sample portfolios in the “Inspiration & Ideas” section.
• 2. Complete the “Brainstorming” section.
• 3. Complete the “Wireframing” section.
• 4. Clone or Fork the Starter Code.

HTML Tasks

All pages

• 5. Update the title tags.
• 6. Link a CSS file to your pages.
• 7. Include a navbar to link pages.
• 8. Add class attributes to your HTML elements.

index.html

• 9. Add a header with your name.
• 10. Add a headshot (this could also be on your about or contact page instead).

about.html

• 11. Include a short bio.
• 12. Add an unordered or ordered list of your accomplishments or favorite things.

projects.html

• 13. Include at least 4 coding projects. For each project, include:
  • Project name
  • Link to GitHub repo
  • Link to live site
  • Short description of project
  • Screenshot of project

contact.html

• 14. Add contact info, including:
  • GitHub account
  • Email address
  • LinkedIn (when completed)
  • Resume (when completed)

CSS Tasks

style.css

• 15. Add flexbox to the navbars.
• 16. Format the size of all images.
• 17. Style the font color.
• 18. Style the background with a color or image.
• 19. Adjust the spacing of your page.
• 20. Adjust the positioning of your page.

Extensions

• Style your navbar so the style of the links change when you hover over them.
• Make sure all your external links open up into new tabs.
• Create a link that pops open the email browser with your email address in the to: field.
• Arrange your Projects into a creative interactive or animated photo gallery or slideshow.
• Add Javascript to make your portfolio more interactive.