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

Course Description

In Creating Websites with HTML/CSS, the first course of Wizard Level 3 in our elementary program, students begin their web development learning journey. In this course, students will design and develop websites from start to finish. They’ll learn how to use HTML to structure their pages’ content and CSS to organize and style their web pages. The highlight of the course is launching a website that will include text, graphics, audio, and video! After completing this course, students are ready to enter the next course in our structured curriculum: Responsive Websites with HTML/CSS.

Elementary school girl in class

Learning Objectives

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

  • Create well-structured webpages using appropriate HTML elements
  • Add custom designs (color, fonts, etc.) to web pages using CSS
  • Build basic websites from start to finish that use custom designs and audio/visual elements
Level I

Prerequisites

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

  • Wizard Level 1
  • Wizard Level 2

Creating Websites with HTML/CSS Class LessonsExpand All Lessons
  • HTML CSS coding lesson 1
    1. HTML and Browser behind the scenes

    In the first lesson on Creating Websites with HTML/CSS, the students create a web comic book. They also get introduced to the interaction between HTML, browsers, and web servers. This hands-on session involves updating existing HTML code by changing images and dialogues of comic characters, providing a solid foundation for exploring more advanced concepts in HTML and CSS in future lessons.

  • HTML CSS coding lesson 2
    2. HTML Structure

    In this lesson, students engage in creating a storybook on a silly case of missing socks. Students will create their first webpage from scratch and learn about the basic structure of HTML pages, and how HTML uses tags to display things on the web. They will use the basic tags to write their creative and silly story using headings and paragraphs. This lesson provides an exciting opportunity for the students to learn and apply their HTML skills.

  • Introduction to CSS
    3. Introduction to CSS

    In this lesson, students get introduced to the stylesheet of the web, CSS. Throughout this lesson, they create a fun Wizard Newsletter. They learn to select and style everything showing on the boring wizard newspaper using their CSS wand, add unique fonts, play around with headings, change the alignment, text size, and add decorative borders all using CSS. This lesson shows the real-time usage and power of CSS to the students.

  • HTML CSS coding lesson 4
    4. Attributes

    In this lesson, students create a Movie Quiz that shows a movie scene and the player has to guess the movie. The primary emphasis of this class is to use attributes in HTML tags. They also learn to switch between pages in their quiz and style every element uniquely. They learn to change the size of images.

  • HTML CSS coding lesson 5
    5. Positions

    In this lesson, students learn to position images in specific locations using the Wizard Scavenger Hunt game. They also master showing or hiding elements with CSS when hovering over them. Additionally, they learn to integrate background audio into HTML pages, enhancing the user experience. This session focuses on practical skills in web design, such as image manipulation, interactive hover effects, and audio incorporation, providing hands-on experience in creating more dynamic and engaging web content.

  • HTML CSS coding lesson 6
    6. Mid-Term-I

    In this lesson, students apply the concepts they have learned so far and begin working on their mid-term project: an escape room where players must find and click on hidden objects to escape. In the initial phase of the project, they use CSS to add a background image and position objects in the room. They also display the riddle that players need to solve to escape, integrating both design and interactive elements into their web development skills. This session focuses on practical application, blending creativity with technical know-how to create an engaging escape room experience.

  • HTML CSS coding lesson 7
    7. Mid-Term-II

    In this lesson, students add the final touches to their escape room project. They apply CSS opacity to conceal and reveal objects on hover, and link the correct object to a second room using an anchor tag. They also add a new riddle, guiding players to the final room’s escape object and the win page. This session focuses on enhancing interactivity and user engagement in web development.

  • HTML CSS coding lesson 8
    8. Containers

    In this class, students create a “choose your character” screen. They learn to use containers for better organization and apply CSS to design elements like background colors and borders on character cards. Additionally, they focus on aligning HTML elements and adjusting margins for a more refined interface. This session is about applying CSS and HTML skills to enhance visual layout and user interaction in web design.

  • HTML CSS coding lesson 9
    9. Classes and Inputs

    In this class, students create a tourism webpage. They acquire the skill to include input fields, like a search bar, and integrate buttons into their websites. They also develop an image gallery featuring popular tourist destinations, designed to attract users’ attention. The lesson focuses on teaching students how to create and style input elements using classes and create professional looking webpages.

  • HTML CSS coding lesson 10
    10. Navigation and Video

    In this class, students work on a project to create a platform called “Tiny Tunes,” a replication of YouTube. They learn to construct a navigation bar and integrate videos with playback controls like play, pause, and volume adjustment. This project enhances their ability to build functional and interactive websites, focusing on video integration and advanced web design techniques.

  • HTML CSS coding lesson 11
    11. Final Project – I

    In this class, students begin their final project: designing a website for a professional gaming studio. They apply their skills to create a site with navigation, an engaging hero section, game showcases, information about the company’s approach, a portfolio, a contact form, and a footer. This project focuses on combining various web design elements to create a comprehensive and professional online presence for a gaming studio.

  • HTML CSS coding lesson 12
    12. Final Project – II

    In this class, students wrap up their final project by expanding the gaming studio website with new pages. They add an About page featuring a company video and team introductions, and a Contact page outlining the studio’s pricing plans along with a contact form. This session focuses on reinforcing fundamental HTML/CSS concepts such as using classes, container elements, and implementing effective website navigation, enhancing their comprehensive web development skills.

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.