New Classes Enrolling Now! See Schedules
Student Login | Student Center
Middle school boy in class

Course Description

In Responsive Web Development, the first course of Wizard Level 2 in our middle school program, students learn how to create beautiful, responsive websites while building upon previously-learned concepts from our Web Pages with HTML and CSS course. They will expand their HTML and CSS skills by creating more advanced page layouts, and designing mobile-ready sites, in projects enlivened with color and animation. After completing this course, students are ready to move to the next step in our structured curriculum with our Interactive JavaScript course. 

Middle school girl in computer class

Learning Objectives

When students complete Responsive Web Development, they will be able to:

  • Develop modern websites with HTML and CSS while adhering to web standards
  • Create beautiful page layouts using grids and other advanced techniques
  • Produce responsive websites that look amazing and function correctly on any screen size
Level II

Prerequisites

These courses must be completed before Responsive Web Development:

  • Wizard Level 1

Responsive Web Development Class LessonsExpand All Lessons
  • HTML & CSS Refresher with CSS Color Codes
    1. HTML & CSS Refresher with CSS Color Codes

    In this first lesson, we review some fundamentals of web development including the required HTML default tags, how to link to a CSS file, and how to select tags using attributes. Students learn about CSS color codes and put everything together to code a rainbow.

  • Mastering Layouts I - HTML Nesting
    2. Mastering Layouts I – HTML Nesting

    In this lesson, students begin acquiring the skills necessary to create more typical web page layouts. A key concept to master is the parent-child relationship in nested HTML tags, and how to leverage it in CSS. The students practice nesting tags as they build a box for a cat named Happy, and a set of beds for a cat named Grumpy.

  • Mastering Layouts II - CSS Cascade & HTML Lists
    3. Mastering Layouts II – CSS Cascade & HTML Lists

    In this lesson, students learn how to make a basic website navigation menu using the HTML nav and list elements. They further explore HTML parent-child relationships and get an introduction to CSS inheritance. Their task is to help Cecile, whose diner website has no menus. 

  • Mastering Layouts III - HTML5 tags
    4. Mastering Layouts III – HTML5 tags

    In this lesson, we introduce students to HTML5 semantic tags. They learn the standard sections of the most common webpage design pattern and which tags to use to create them: header, main, and footer. As they build a webpage for Sue’s News, they also learn about the article and aside tags, and how to create columns with percentages in CSS.

  • Midterm Project: Part 1
    5. Midterm Project: Part 1

    In this lesson, students begin a review of the concepts they’ve learned so far as they build a website for the Weird Widget Company. In this lesson, they start by constructing the page structure using HTML5 tags. Next, they code and style a navigation menu, and finish by adding a sale notice in the footer.

  • Midterm Project: Part 2
    6. Midterm Project: Part 2

    In this lesson, students complete the website for the Weird Widget Company. They practice making columns with percentages as they add funny and unusual products to the pages. They give the site some final flourishes by first rotating and then animating the company’s rubber chicken mascot, which is always funnier upside down.

  • Responsive Design I: Media Queries
    7. Responsive Design I: Media Queries

    In this lesson, now that students are able to create a standard webpage layout, they begin making layouts responsive. Students learn about media queries, code allows CSS changes depending on screen size. They learn how to use their browser’s code inspector to see how their project looks on different devices. They build a webpage showing the stages of frog development, from eggs on a phone to the adult frog on desktops and the tadpole in between.

  • Advanced layouts: Flexbox Basics
    8. Advanced layouts: Flexbox Basics

    In this lesson, no layout skill set would be complete without the ability to code a grid. In this lesson, students learn about grids in web design and the CSS Flexbox Module. As they add a grid of windows to a downtown building, they observe the unique behavior of flexible box elements, and test properties that set vertical and horizontal spacing.

  • Responsive Design II: Responsive Grids
    9. Responsive Design II: Responsive Grids

    In this lesson, now that the students can easily code grids using flexbox, they learn how to make the grids responsive. They work on a website featuring photos of unique trees from around the world. They use media queries to show one column of trees on a phone, two columns on a tablet, and 3 columns on large screens, plus a squirrel.

  • Responsive Design III: Mobile Menu
    10. Responsive Design III: Mobile Menu

    In this lesson, students enter the ever-evolving terrain of the mobile website menu. They consider the different interface requirements of touch devices, and designing for small, usable screen space. They learn how to code icons to create more room for tap gestures. They build a mobile tab bar styled sticky menu for the tree website, and then use media queries to make it look good on large screens also.

  • Final Project: Part 1
    11. Final Project – Part 1

    In this lesson, students begin work on their final project, a website for a game called the Guards of Dragono. Their first task is to check the website using the code inspector to see which elements need to be made responsive. They begin by making the content on the pages display in a responsive grid, and finish by creating a mobile version of the navigation menu.

  • Final Project - Part 2
    12. Final Project – Part 2

    In this final lesson, students finish the Guards of Dragono game website by adding an exciting “hero” section to the remaining pages. The hero is the portion of a website one see can without having to scroll. Step two is making the hero section responsive. For the finale, students add a responsive flying dragon animation to the homepage.

Class Schedule

All students start in Intro to Programming 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.

#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
Complimentary 1×1 Office Hours
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.