Unit 1: Online Portfolio README

Overview

In this unit, coders will review HTML and CSS concepts from the Introduction to Web Development course and build a multi-page professional Portfolio.

Day 1

Set up

• Complete the Project Planning Document.

• Go to the repository.

• Fork this repository to your GitHub account.

• Create a new project on Glitch that imports your repo from GitHub.

• Submit your GitHub repo link and Glitch Project Page links on the Agenda.

HTML

• Add a header with your name to your Portfolio homepage.

• Update the title tag of both of your pages.

• Create your navigation bar that will link all your pages together.

• Give your HTML elements class names.

• Write your biography on your About Me page.

CSS

• Choose 2-4 colors for your theme and add them as font or background colors.

• Add flexbox to your navigation bar.

• Add at least 1 Google Font.

Day 2

Set Up

• Link your homepage and About Me pages together using your nav bar.

• Add two more HTML files (Projects, Contact) to your Portfolio and link them all together.

• Upload at least 2 images so they are hosted in your Portfolio.

• Update the title tags of all your new HTML files.

• Make sure your CSS file is linked to all your HTML files.

HTML

• Add a professional-looking photo of yourself or something relevant to your homepage.

In your Projects page, create a display of at least 4 of your old coding projects that includes:

- [ ] Project name
- [ ] Link to project GitHub repo
- [ ] Link to project live site
- [ ] Short description of project including coding languages used
- [ ] Hosted screenshot of project

Add your contact information to your Contact page, including your:

- [ ] GitHub account
- [ ] Email address
- [ ] LinkedIn
- [ ] Resume

CSS

• Format the sizes of all your pictures

Extensions

[ ] Style your nav bar so the links change color/style when your hover over them or when you click them.

[ ] Add a unordered or ordered list of your accomplishments or favorite things to your About Me page.

[ ] 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.