HTML5 / CSS3 Class

Instructor e-mail: steve_fuller@berkeley.edu

Demo Site

This course will have you reimagine a bands/music groups website. You can pick any band as long as the following requirements are met

• Must have at least 3 albums produced
• Must have at least 3 music videos on YouTube
• Must have a merchandise store with at least 5 items and at least 2 different categories

You will take this band or musisc groups and create a site containing the following pages

• Homepage:
  • Fullscreen background iamge
  • HTML5 fullscreen video (Bonus)
• About Page:
  • x2 large paragraphs of text
  • x2 lists
  • Tell me about the band I want to understand who they are and what they are about
• Media Page:
  • x8 thumbnail images
  • Images must have a lightbox effect
  • x3 embedded YouTube Video
• Discography Page:
  • Must display 3 different albums
    • Album cover
    • Album tracks with time stamp
    • Album details: Year released, Record Label, etc.
• Merch Store Page:
  • x6 merch items
  • x2 categories of items
  • Must be able to filter items
  • If there is no product page for item(s), that item will need to have an "Out of Stock"/Disabled click state
  • Product Page for an item (Bonus)
• Tour Dates Page:
  • HTML Table of dates
  • Table must contain the following for each event
    • Time
    • Location
    • Where to buy
    • Supporting actions
    • Link out to venue/bar/location/where to buy

Course Schedule

• Time: 1:30pm - 4:30pm | Saturdays | 6/16 - 8/18

Course Work

• Wk 1: Intro/Code Editor
  • HW: Plan out Site and begin Wire frames
• Wk 2: HTML Structure
  • HW: Create and link all pages with links and headers
• Wk 3: CSS
  • HW: Set up navigation menu with CSS Styles
• Wk 4: Formatting
  • HW: Custom text and images
• Wk 5: Responsive Web Design
  • HW: Implement responsive grid system
• Wk 6: Presentation Prototype
  • HW: Complete Tour Dates and About Pages
• Wk 7: Deployment/GitHub, setup hosting and put code on GitHub
  • HW: Complete Homepage and Discography pages
• Wk 8: JavaScript & jQuery
  • HW: Complete Merch Store, Product Detail, and Media pages. Build out any components requiring JavaScript (Mobile Menu, Filter, Sliders, Lightboxes, etc)
• Wk 9: Deploy Final Site in class
  • HW: Finalize any remaining final project items
• Wk 10: Final Presentation

Course Book

HTML5 and CSS3 Seventh Edition Visual QuickStart Guide

Atom Packages/Themes

Adding Packages and Themes to Atom can be done with the following:

• Mac

  • cmd + , > Install or Atom > Preferences > Install
  • Select Packages Button or Themes Button next to the Search Bar
  • Search

• Windows

  • ctrl + , > Install or File > Preferences > Install
  • Select Packages Button or Themes Button next to the Search Bar
  • Search

  Useful Packages

  • atom-beautify
  • atom-live-server
  • autoclose-html
  • file-icons
  • pigments
  • minimap

This is a very pared-down list that will be most useful for class. There are over 7,000 packages available, so take some time to look up packages you might find useful and share with the class :).

Themes

Themes are entirely optional and up to your taste.

I used to use

• UI Theme: Atom Material
• Syntax Theme: Atom Material Dark

Currently I'm using

• UI Theme: Atom Visual Studio Code
• Syntax: Atom Material Dark