Intro to Websites & Responsive Websites
Course Syllabus and Lesson Planner
Course Info Download PDFDifficulty: 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!
- 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!
END INTRO TO WEBSITE COURSE! START RESPONSIVE WEBSITE COURSE
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