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.

Goal 1

Set up

• Complete the Project Planning Document. Make sure you have thought about how you want your portfolio to look and feel, and that you have finished the wireframe!

• Go to the repository.

• Fork this repository to your GitHub account.

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

• If there's time, start the Day 2 HTML and CSS tasks.

Goal 2

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 classes in order to add Flexbox to the CSS.

• 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.

Wrap

• If you finish early begin Day 3 tasks.
• Submit your work to the session agenda.

Goal 3

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.

• Link your CSS file to all of your HTML files.

Wrap

• If you have finished early, move on to the Day 4 tasks.
• Push your changes back to your GitHub repo!

Day 4

Reflection

• Go back to the rubric/checklist in your project plan. Check off all the tasks you have completed so far.

HTML

• Add a professional headshot of yourself.

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

Wrap

• Push your changes back to your GitHub repo!

Project Extensions (If you finish everything above early)

• 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.

References/Tools

• Fellowship Reference Table
• [W3Schools] (https://www.w3schools.com/)
• [MDN web docs] (https://developer.mozilla.org/en-US/)
• [Introduction to Bootstrap] (https://getbootstrap.com/docs/4.1/getting-started/introduction/)