Intro to Websites & Responsive Websites

Course Syllabus and Lesson Planner

Course 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 own 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 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 does it look 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 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!
      START RESPONSIVE WEBSITE COURSE
    • 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 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