Cupcake Website Tutorial

About

I collaborated with some friends on creating this tutorial walkthrough for high school students to learn the basics of web development.

Who's it for?

The tutorial was intended to take 1.5 hours and the content is geared at students who have no coding background whatsoever.

How to use

Give a presentation to introduce basic HTML/CSS concepts. Then walk students through updating this code.

Structure

• home.html - The HTML file; the bulk of the work happens here
• styles.css - The site's CSS styles
• assets/ - ColorPalette and FontPalette have web-safe colors and fonts that students can reference, and icons for facebook, twitter, and instagram
• images/ - contains a bunch of fun images students can use to fill out their stie
• order.js - A simple JS file that shows an order confirmation temporarily; students will not need to edit this.

How to teach with this tutorial

• Make sure each student has a computer with this repo open in a text editor - e.g. Sublime or Atom.
• Walk through the steps in this README. Changes will be made in home.html and styles.css
• Make sure the students have completed each step before moving on to the next one

Tutorial Steps

home.html

• Step 1: Change Name of Website: <title>— Line 4 styles.css
• Step 2: Update color of navbar: nav: background — line 12
• Step 3: Update Font: body: font-family — line 4

home.html

• Step 4: Change business's name, <h1> - 17
• Step 5: Create Description of Cupcake Shop:

  — Line 18

styles.css

• Step 6: Change jumbotron picture —jumbotron: background Line 25 instruct on adding images from image folder. Maybe short explanation on file path
• Step 7: Update jumbotron colors so they don’t collide with picture Change Color of jumbotron text —jumbotron h1, p: text-shadow Line 24

home.html

• Step 8a:- Edit Table Row- — Line 40
• Step 8b- Add two more Table Rows- Copy and paste

styles.css

• Step 9: Add hover effect- Add table-hover class— Line 30
• Step 10: Update hover color: .table-hover: background-color— Line 76

home.html

• Step 11a: Add the types of orders you’d like people to buy by taking what you placed in your table
• Step 11b- Add the amounts you’d like to give people the options to buy
• Step 12: Update Social Media Link— Sign in to Facebook and click on your profile picture to view profile. Copy and paste link— <a>— Line 64. Repeat for Instagram / Twitter if desired.