Portfolio Project with HTML, CSS, Bootstrap

Languages

• HTML
• CSS
• Git
• bash

Frameworks

• Bootstrap

Other Skills

• VS Code
• Developer Tools
• Keyboard Shortcuts
• Web Patterns
• UI/UX
• GitHub for code storage and static-site hosting
• Ergonomics
• Writing a good ReadMe

Primary Goals

To demonstrate understanding of the topics covered in the first two weeks of this course.

Overview

In this project, you will build a simple portfolio page to practice what you’ve learned about VSCode, HTML, CSS, Git, and Bootstrap. This should take about 3 hours.

Context

• A great portfolio page will be valuable way to showcase your skills as you look for engineering work.
• After you’ve learned more coding skills and tools, you will be making this site even better.
• Include your new coding skills in your resume!

Motivation

Increase your job prospects dramatically with your own personal web page. Get creative and show off your technical skills. Employers will love you! Here’s a list of example portfolios https://github.com/HackathonHackers/personal-sites

Starter Code

There is no starter code for this project. You can do it!

Project Requirements:

• [ ] As you go through the lesson, commit your code in git and push to GitHub after each bolded section (or more frequently if you want). You should write clear + informative commit messages for each commit.

Part 1 - Build your amazing portfolio page in with HTML, CSS, and Bootstrap

Ergonomics

• [ ] Remember get up to stretch or walk for 5-10 minutes every hour. (Set an alarm)
• [ ] Each hour, check foot, knee, elbow, and spine position and correct if necessary. (Set an alarm)

Create your project

• [ ] Use bash to create a local portfolio-website directory. Use the command line to make an portfolio.html and an portfolio.css in the portfolio-website directory.
• [ ] Use the command line to change the names of portfolio.html and portfolio.css to index.html and index.css.
• [ ] Use the command line to make a gitignore file in your desktop directory and add at least one real unwanted file to the gitignore.
• [ ] Use the command line to move the gitignore file from your desktop directory to your portfolio-website directory.
• [ ] Using your command line, initialize a github repo in portfolio-website.
• [ ] Create a remote repo for the project in your github account.
• [ ] Using your command line, add and commit your portfolio-website directory, and then do a git push.
• [ ] Open your portfolio-website directory in VS Code using your command line.
• [ ] Increase or decrease your VSCode text size before starting.
• [ ] Open your VSCode Integrated Terminal, and close your terminal/command line program.
• [ ] Add a linting extension to VSCode. You are welcome to keep or remove it after trying it out.

HTML

• [ ] Use VS Code shortcuts to create boilerplate code for your html file.
• [ ] Open and view your html file in Chrome using only the VSCode application.
• [ ] Make a basic header for your online resume - your name and a short description of your experience.
• [ ] In a seperate section, list a few coding experience entries and some past work experience that you can apply to a tech job.
• [ ] Add a title tag to your file.
• [ ] Double check that you have proper indentation for readability.
• [ ] Use semantic tags rather than presentational tags when possible.
• [ ] (Remember to make a git commit after each set of code changes!)

Developer Tools

• [ ] Inspect your page at least once using the Source Code Viewer
• [ ] Inspect your page at least once using the Quick Source Viewer Chrome Extension
• [ ] Access the JavaScript console at least once to check your page for errors and warnings.

CSS

• [ ] Link your index.css file to index.html.
• [ ] Style your text using at least 3 different properties.
• [ ] Add and style a profile photo of yourself. Include a border.
• [ ] Have some info in a second column
• [ ] Use one “id” correctly.
• [ ] Select 3 web design patterns to implement
• [ ] Use your search bar at least once to jump to an element or style.
• [ ] Have 2 css blocks that include the class “override” with one overriding the other rule in an obvious way.
• [ ] Change the display property of at least one element.

Bootstrap

• [ ] Link bootstrap to index.html file.
• [ ] Create a navigation bar that includes your name as the page title, and at least two links including your github profile and linkedin profile.
• [ ] Use at least two bootstrap tags or classes to style your nav bar.

Media Queries, UI, UX

• [ ] Have at least one style change each for a narrow, medium, and wide browswer window.
• [ ] Use developer tools at least once to inspect your styles and check window width.
• [ ] Make sure the User Interface of your site is appealing at all widths while keeping it simple.
• [ ] Ask a peer to test your site and tell you about their experience. Change one thing that would provide better UX.

ReadMe

• [ ] Create a ReadMe.md file with your command line.
• [ ] Include relevant ReadMe content.
• [ ] Use markdown to organize your ReadMe.

Part 2 - Go live with GitHub

• [ ] Commit and push any uncommitted changes to GitHub
• [ ] Go into the settings of your portfolio-website repo in GitHub and create a link for your live site
• [ ] Make the link to your live github.io site clickable on your ReadMe.

Extensions

• Spend what remains of your 3 hours to make improvements to your portfolio site, and be sure to push your changes up to github.