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.

Course Syllabus

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!

    END INTRO TO WEBSITE Course Syllabus!
     

    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!
    • START RESPONSIVE WEBSITE Course SyllabusLesson 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