/flw1-portfolio-heavy-23-24-starter

Primary LanguageHTML

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.
  • [ x ] 6. Link a CSS file to your pages.
  • [ x ] 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.