Future Coders Club - 24-Week Curriculum HTML, CSS and JS
Future Coders Club - 24-Week Curriculum HTML, CSS and JS
Week 1:
• Class: Introduction to HTML: Understand what HTML is, how it works, and its role in web
development.
o In-class assignment: Create a basic HTML page structure.
o Homework: Create an HTML document for a simple webpage about a topic of your choice,
using basic tags like <h1>, <p>, and <a>.
Week 2:
• Class: Dive into HTML: Learn about tags such as headers, paragraphs, links, images, lists, and
tables.
o In-class assignment: Add images, links, and lists to an existing webpage.
o Homework: Expand the webpage you created last week with additional HTML tags learned in
this class.
Week 3:
• Class: Advanced HTML: Learn about more complex tags such as forms, inputs, and semantic
tags.
o In-class assignment: Create a simple HTML form.
o Homework: Add a form to the webpage from week 2, asking for user information.
Week 4:
• Class: Introduction to CSS: Understand how to style HTML elements using CSS selectors,
properties, and values.
o In-class assignment: Style a basic HTML page with CSS.
o Homework: Add CSS to the webpage you created in week 3 to change its appearance.
Week 5:
• Class: CSS Layout: Learn about CSS box model, positioning, display, and float properties.
o In-class assignment: Adjust the layout of a webpage using CSS positioning and layout
techniques.
o Homework: Modify the layout of the webpage from week 4 using the concepts
learned.
Week 6:
• Class: Advanced CSS: Learn about pseudo-classes, pseudo-elements, transitions, and
animations.
o In-class assignment: Add hover effects and transitions to HTML elements.
o Homework: Add some interactivity and animations to the webpage using CSS.
Week 7:
• Class: Responsive Design: Learn about media queries and how to make your webpage
responsive.
o In-class assignment: Create a basic responsive design using media queries.
o Homework: Modify the webpage to make it responsive on different devices.
Week 8:
• Class: Introduction to Bootstrap: Understand the Bootstrap framework and how to use it for
responsive design.
o In-class assignment: Create a basic responsive webpage using Bootstrap's grid
system.
o Homework: Redesign the webpage using Bootstrap.
Week 9:
• Class: Advanced Bootstrap: Learn about the various Bootstrap components and utilities.
o In-class assignment: Incorporate Bootstrap components into a webpage.
o Homework: Add more Bootstrap components to the webpage to enhance its
functionality and design.
Week 10:
• Class: Introduction to JavaScript: Learn about variables, data types, operators, and control
structures in JavaScript.
o In-class assignment: Write simple scripts using JavaScript to perform calculations.
o Homework: Write a script that performs a complex calculation based on user input.
Week 11:
• Class: JavaScript and the DOM: Learn about the Document Object Model (DOM) and how to
use JavaScript to manipulate HTML elements.
o In-class assignment: Use JavaScript to change the content of an HTML element.
o Homework: Add basic JavaScript functionality to the webpage to manipulate HTML
elements.
Week 12:
• Class: JavaScript Events: Learn about handling user events such as clicks or key presses in
JavaScript.
o In-class assignment: Write a script that responds to a user event.
o Homework: Add interactivity to the webpage through event listeners.
Week 13:
• Class: JavaScript Functions: Learn about defining and calling functions in JavaScript.
o In-class assignment: Write a function that performs a specific task.
o Homework: Refactor the JavaScript code on your webpage to use functions.
Week 14:
• Class: JavaScript Objects and Arrays: Learn about data structures in JavaScript.
o In-class assignment: Create a simple object and an array in JavaScript.
o Homework: Add a feature to your webpage that uses arrays or objects, such as a
shopping list or a photo gallery.
Week 15:
• Class: JavaScript Loops: Learn about different types of loops in JavaScript.
o In-class assignment: Write a loop that performs a repeated operation.
o Homework: Enhance the feature added in week 14 to use loops.
Week 16:
• Class: Introduction to jQuery: Learn about the jQuery library and how to use it to simplify
JavaScript tasks.
o In-class assignment: Use jQuery to manipulate an HTML element.
o Homework: Refactor some of the JavaScript code on your webpage to use jQuery.
Week 17:
• Class: AJAX and Fetch API: Learn about asynchronous JavaScript and how to fetch data from
a server.
o In-class assignment: Fetch data from a public API and log it to the console.
o Homework: Add a feature to your webpage that fetches and displays data from an
API.
Week 18:
• Class: JSON and AJAX: Learn about JSON data format and how to use it with AJAX.
o In-class assignment: Parse JSON data and use it to update the DOM.
o Homework: Modify the feature added in week 17 to use JSON data.
Week 19:
• Class: Advanced JavaScript Concepts: Learn about promises, async/await, and error handling
in JavaScript.
o In-class assignment: Write a function that uses async/await and handles errors.
o Homework: Add error handling to the AJAX feature on your webpage.
Week 20:
• Class: JavaScript ES6 Features: Learn about new features introduced in ES6 like let and
const, arrow functions, and template literals.
o In-class assignment: Rewrite a function to use arrow function syntax and template
literals.
o Homework: Refactor your JavaScript code to use ES6 features.
Week 21:
• Class: Introduction to Git: Learn about version control and how to use Git.
o In-class assignment: Create a Git repository, add a file to it, and make a commit.
o Homework: Create a Git repository for your project and make several commits.
Week 22:
• Class: Introduction to Web Accessibility: Learn about making webpages accessible to all
users.
o In-class assignment: Modify a webpage to improve its accessibility, such as adding
alt text to images and ensuring proper contrast.
o Homework: Improve the accessibility of your webpage.
Week 23:
• Class: Web Performance: Learn about improving the load time and performance of your
webpage.
o In-class assignment: Analyse the performance of a sample webpage using tools like
Google's Lighthouse.
o Homework: Implement performance improvements on your project, aiming for higher
scores in performance metrics.
Week 24:
• Class: Final Project Review: Review all the topics covered and discuss further resources for
learning.
o In-class assignment: Peer-review of projects. Students exchange their projects for
review and constructive criticism.
o Homework: Final project: Create a new webpage or significantly enhance the
webpage from previous weeks using all the skills learned. This could be a personal
portfolio website or a small web application.