Summer Enrollment Now Open for Classes & Camps! View Now
Student Login Parent Login
Elementary school boy in class

Course Description

In Responsive Websites with HTML/CSS, the second course of Wizard Level 3 in our elementary school program, students learn to create user-friendly, responsive websites while building upon previously known concepts from our Creating Websites with HTML/CSS course. They will expand their skills by creating more advanced page layouts and designing websites that give a seamless user experience on all devices. After completing their course, students are ready to move to the next step in our structured curriculum with our Introduction to JavaScript course.

Elementary school girl in class

Learning Objectives

When students complete Responsive Websites with HTML/CSS, they will be able to:

  • Master the art of crafting modern websites while adhering to web standards.
  • Create eye-catching page layouts using advanced design techniques and grids.
  • Produce responsive websites that look amazing and function correctly on any screen size.
Level I

Prerequisites

These courses must be completed before Responsive Websites with HTML/CSS:

Responsive Websites with HTML/CSS Class LessonsExpand All Lessons
  • Responsive Websites with HTML/CSS  lesson 1
    1. More to HTML/CSS

    During the first session of our course, students will review fundamental HTML and CSS principles in depth while also improving their skills. They will study complex concepts such as relative positioning and learn how to align divs precisely. Additionally, they will become proficient in applying consistent styling to all elements using the universal selector. This lesson supports understanding of advanced HTML and CSS concepts.

  • Responsive Websites with HTML/CSS lesson 2
    2. HTML5 and Box Model

    In this lesson, students explore advanced HTML5 and the Box Model as they create the captivating Wizard Zoo website with engaging articles. They learn to use HTML5 Semantic tags instead of <div> tags for improved structure and accessibility. Additionally, they develop proficiency in the Box Model to design visually appealing layouts with precise element dimensions and spacing. This session offers a strong foundation for students to create web content with structure.

  • Responsive Websites with HTML/CSS lesson 3
    3. Lists and Inheritance

    In this lesson, students delve into CSS inheritance and create a Music website. They discover how to efficiently pass properties from parent to child elements, reducing redundancy and enhancing readability. Additionally, they learn how to override styles inherited from parent elements when necessary. Furthermore, students explore HTML lists and various styling techniques. This lesson emphasizes efficiency and skill enhancement, empowering students to become proficient programmers.

  • Responsive Websites with HTML/CSS lesson 4
    4. Responsive Design: Media Query

    In this lesson, students learn about responsive design, which helps to make websites accessible on all devices, and how to achieve it using CSS media queries. They will create a game that adapts the obstacles based on different devices. They will also learn about the industry practice of mobile-first design and how to create responsive designs following this approach. Additionally, they will learn about responsive breakpoints to modify styles for different devices.

  • Responsive Websites with HTML/CSS lesson 5
    5. Mid Term: The Lost Beep – I

    In this lesson, students start their two-part project on The Lost Beep website. In the first part, students create the home page for the players to explain Beep’s story and how they can rescue him from this city. The home page includes navigation, the main section, and the game map. They use HTML5 semantic tags to create different sections of the home page. This midterm project simulates the process of creating real-world websites.

  • Responsive Websites with HTML/CSS lesson 6
    6. Mid Term: The Lost Beep – II

    In this lesson, students complete their mid-term project on The Lost Beep by creating additional web pages to rescue Beep. They design challenges for users to solve to help Beep, including a multiple-choice quiz and different pages for correct and incorrect answers. Finally, they create the final destination page for Beep. This project helps students gain practical experience creating a multi-page website compatible with all devices.

  • Responsive Websites with HTML/CSS lesson 7
    7. Flexbox

    In this lesson, students create the Wizard Cards in a grid-like structure for a wizard. They use Flexbox to arrange cards that are flexible and make efficient layouts with distributed spaces among items to control their alignment structure. Flexbox is useful for small-scale layouts and is responsive and mobile-friendly. Students are introduced to Flexbox in a fun and simple way which builds a strong base.

  • Responsive Websites with HTML/CSS lesson 8
    8. Advanced Layouts with Flexbox

    In this lesson, students create an Interior Design Website using Flexbox to align most sections and make them mobile-friendly. They practice Flexbox for real-world and professional websites in this lesson. They also learn nested Flexbox to create complex and advanced layouts. Students take their responsive design skills to the next level in this lesson.

  • Responsive Websites with HTML/CSS lesson 9
    9. Final Project: Heroes Reborn – II

    In this lesson, students complete their final project on Heroes Reborn by showcasing the game’s champions and creating a login page for users with an interesting layout using nested flexbox. Additionally, they use media queries to ensure the login page is easily accessible across all devices. This project allows them to practice this course’s objectives, which include creating modern websites with web standards, designing eye-catching layouts using nested flexbox, and building responsive websites that function correctly on all devices using media query.

  • Responsive Websites with HTML/CSS lesson 10
    10. Animations and CSS Variables

    In this lesson, students learn how to add fascinating animations to their Online Bus website using CSS. They also learn to make their code easily scalable and maintainable using CSS variables to store different font sizes, colors, and margins. This allows for changes in one place to be updated everywhere easily. Additionally, they learn about various color codes used in CSS.

  • Responsive Websites with HTML/CSS 11
    11. Final Project: Heroes Reborn – I

    In this lesson, students begin their two-part project on a gaming website called Heroes Reborn. For the first part, students create the header, main section, and the game steps. They apply the concepts they have learned, such as semantic tags, Flexbox, color codes, etc., to create a mobile-friendly website and write efficient code.

  • Responsive Websites with HTML/CSS 12
    12. Final Project – II

    In this lesson, students complete their final project on Heroes Reborn by showcasing the game’s champions and creating a login page for users with an interesting layout using nested flexbox. Additionally, they use media queries to ensure the login page is easily accessible across all devices. This project allows them to practice this course’s objectives, which include creating modern websites with web standards, designing eye-catching layouts using nested flexbox, and building responsive websites that function correctly on all devices using media query.

Class Schedule

All students start in Animation and Gaming in Scratch at Wizard Level I. If you have previous coding experience, take the Advanced Placement test. Returning students can continue with the class where they left off.

  • loading icon

#1 Most Comprehensive Program for Your Student’s Success!

The CodeWizardsHQ program comes with everything your child needs to be successful in learning to code.

All of the below are included at no extra cost.

Interactive Live Classes
Structured and Comprehensive Curriculum
Video Recordings of Every Class
Downloadable Slides for Every Class
1×1 Office Hours (Advanced Courses)
Weekly Progress Report & Alerts
Daily Homework Help
Individual Course Certification
Highly Qualified and Experienced Teachers
24/7 Access to Proprietary Coding Platform
Supportive Online Student Community
Path to Real-World Internship
Hands-on, Project Based Learning

Course Duration & Time Commitment
All courses are 12 weeks long. A Wizard will receive a certification for their achievement at the end of the course.

Expect a weekly time commitment of 2-3 hours. 55 minutes of class time, plus 1-2 hours of practice time, with instructor support throughout, including weekends.

100% Guarantee

Our goal is to make all our students successful. If your child is not happy with our program, please notify us within the first four class sessions and you will receive a full refund. See refund details.

Get Your Wizard Started

Start coding with our experienced teachers today.
Enroll risk-free with our 4 session money-back guarantee. Full guarantee details.