Project Falcon

Sprint One: Core Web Languages (HTML & CSS)

TOC

Personal Portfolio Requirements

Create a portfolio site highlighting your work that can be shared with potential employers. Focus first on building a good structure, then later style and lay out with with CSS.

Skills Required

  • HTML
  • CSS

Sprint One Resources

Tasks

  • [ ] Make a repository for your portfolio called your-username.github.io

Build the document structure

  • [ ] Create a main page (index.html) representing a professional portfolio, including the following:
    • [ ] an appropriate <header> element
    • [ ] a <nav> element linking to each of the sections
    • [ ] an <h1> element with your page title (there can be only one per page)
    • [ ] a <section> element for each of the following, each of which should contain an appropriate heading element:
    • [ ] About Me, consisting of:
      • [ ] brief biographical information
      • [ ] photo
      • [ ] contact information
      • [ ] links to your professional networking site profiles, including at least GitHub and LinkedIn
      • [ ] list of skills
      • [ ] Include whatever other information you consider pertinent.
    • [ ] Projects, consisting of at least three, each represented as an <article>
      • [ ] name of project, linked to GitHub repository or the repository/project's GitHub Pages
      • [ ] screenshot
      • [ ] skills / technologies used D [ ]on't worry that your available projects are limited now. You'll have time to increase the size of your portfolio.
    • [ ] an appropriate <footer> element

Lay out and style your portfolio

  • [ ] Use css grid and flexbox to position elements on your page.
  • [ ] To contain the elements of your grid, you may want to create a <div>, something like <div id="container">...</div>.
  • [ ] Create CSS rules to style page elements appropriately.

Using online resources

Any resources (images, etc) you use should be:

  • free for non-commercial use
  • copied to your repository and referenced there rather than via a uri pointing to another site

Tips

  • Section ids can be used to create anchors linking to those sections inside the page.
  • See the appropriate Mozilla Developer Network reference pages for guidance regarding tag usage:

External Resources