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.