CS50 Web - Project 0

Objective:

Create a basic HTML & CSS website to complete requirements for Project0 of Harvard's CS50 Web course. Along the way, there are a few tasks I want to personally reach.

  • Use of branching and merging for each new page in the site. Probably overkill, but for practice sake.
  • LOTS of use with Emmet, specificially with Bootstrap to rapidly spin up clean layouts.
  • Experiment with new HTML5 features, SCSS and ensure responsive ready page.
  • Perhaps experiment with Zwift API
  • Perhaps play around with designing a raw CSS or SVG logo, stylized initial sort of thing.

ToC - Projec Files

index.html

Main homepage. Uses Bootstrap 4 navbar component that will serve as the header on all pages. Simple plain text body.

garden.html

Break down of personal gardening projects. Current status of garden beds. Tables used to display layout of current raised beds.

zwift.html

High level overview of Zwift activity and goals.

daisy.html

Its just my dog Daisy. Using multiple flexbox photo examples to best display lots of pictures of Daisy.

Checklist

  • 4 pages, naviation between them.
  • Bootstrap 4, multiple components.
  • List, table, images
  • Stylesheet with responsive @media query.
  • SCSS, variable, nesting, inheritence
  • Detailed README.md

Description of files

  • index.html - Main page, mostly simple, but the bootstrap framework is what I carried through the rest of the pages. Simple header using HTML5 video elements, utilizing lots of Bootstrap functionality for navigation, etc.
  • garden.html - Talking through my adventures in gardening. Using HTML tables to map out my raised bed garden.
  • daisy.html - A page for the dog of course. Using Bootstrap image classes to quickly make thumbnails.
  • about.html - Little bio page, simple.
  • zwift.html - Discussion on virtual bike racing, using Bootstrap 'jumbotron' for nice big pretty links to social profiles
  • style.css - General stylesheet. Some custom colors from Bootstraps defaults, header video overlay to darken the video, some responsive @media tags to disable videos on smaller devices.
  • scss.css / style.scss / scss.css.map - Sass CSS for some additional custom colors.