Portfolio Project Guide

Day 1

1. Create a new html document with a DOCTYPE and a title
2. Add a main content area, centered horizontally on the page
3. Add several sections of content using h1, h2, h3, and p, with css styles
4. Use strong or em to style text within a paragraph
5. Add a nav element at the top of the page with a link to each heading in your main section
6. Float an img to the right of your main content
7. Ensure your HTML is valid using https://validator.w3.org/

Day 2

Morning Session

1. Create a form using display: flex for layout
2. Add a text input, select menu, and textarea, each with a label. Feel free to use other form elements, like checkboxes, radio buttons, etc.
3. Support POSTing the form to https://echo-form-body-u6ozq7lkydx0.runkit.sh/ (If you don't get this working, don't worry about it)
4. Use :hover and :active to make your submit button fancy, e.g. with fun colors, a shadow, or a background image.
5. Use ::before and/or ::after to make a fancy list (try replacing the bullets/numbers with something interesting) or block quote (with those really big quotes).

Afternoon Session

1. Set a root font size, and use rem units for your font sizes (and possibly paddings/margins).
2. Make your UI responsive in order to support phone and tablet screen sizes. Use at least 2 @media queries.
3. Enable VoiceOver and navigate through your page. Identify (and possibly improve) any elements that VoiceOver doesn't handle well. If you're not sure if something is right, take a note of it and we'll discuss as a group
4. Still valid? https://validator.w3.org/

Finished Early?

1. Try using display: grid; to make a photo gallery. You can use Picsum Photos, e.g. https://picsum.photos/200/300, for images.

Day 1 Resources

Day 2 Resources