Coding Websites & Responsive Websites in HTML and CSS

Course Syllabus and Lesson Planner

Course Syllabus Info

Download PDF

Difficulty: This course assumes no coding experience and is written for beginners ages 11+

Objective: To teach students how to code their websites. Students will learn to code using
HTML5, CSS3 & JavaScript. Students will also learn to code using the framework Bootstrap
making their website responsive (adapts to mobile and tablet devices).

Assessments: There’s a 5-question quiz at the end of each Lesson. After students complete the quiz
with 100% correct the next lesson will become available. There are 2 timed tests taken in
Lesson 8 and Lesson 20.

Uploads: Students will upload their website after Lesson 8. Students upload their JavaScript
practice page after lesson 16. Students upload their responsive website in Lesson 20.
This course is ~30 hours of content + Final Project.

Lesson Plan:

  • Lesson 1: HTML, what it is and what it looks like! Using a text editor.
  • Lesson 2: Starting Your Own Website, create a theme for your website!
  • Lesson 3: Inputs types & styles. Create a trivia question for your website!
  • Lesson 4: External CSS – Linking your HTML page to your CSS. Classes and IDs.
  • Lesson 5: HTML 5, using Audio, Video, Div and Span tags!
  • Lesson 6: Learning Padding, Margins and Floats.
  • Lesson 7: Menu bars and link attributes. Create the layout of your website!
  • Lesson 8: JavaScript! Create an answer for your trivia question!
    Portfolio: Upload your website live on the web!

START RESPONSIVE WEBSITE Course Syllabus

  • Lesson 9: Bootstrap CSS making websites mobile-friendly (responsive)!
  • Lesson 10: Creating your own logo and menu bar using responsive CSS.
  • Lesson 11: Responsive form inputs including drop-down menus, radio buttons and text
    boxes.
  • Lesson 12: JavaScript functions, variables and troubleshooting using the console!
  • Lesson 13: JavaScript If statements, operators & writing HTML with JavaScript! Cycle
    through images/text using buttons.
  • Lesson 14: JavaScript While Loops and For Loops, how they count for you!
  • Lesson 15: JavaScript Arrays, using push, pop and length! Combining loops with arrays.
  • Lesson 16: JavaScript Objects & attributes. Changing HTML using JavaScript with the
    click of a button!
  • Lesson 17: Using JavaScript to validate form fields! Showing error messages!
  • Lesson 18: Using JavaScript to post user input from text fields, radio buttons and drop-downs!
  • Lesson 19: Using the JavaScript splice command to remove comments on your website!
  • Lesson 20: Add your Lesson to your coding portfolio, Start the Final Project!

For their final project, students create a portfolio website as a place to put anything they
create. It will become something they can take into a job interview with them and show
their work.
Example: https://studentportfolio.github.io