/portfolio_starter

Primary LanguageHTML

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

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

Day 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