Webpages with HTML & CSS

Middle School – Wizard Level I – Class 2

About Webpages with HTML & CSS

This class is intended for students who are interested in designing their own websites. Over the course of 12 lessons, students will learn how to build their own websites using HTML and CSS. They will learn different techniques intended to help them customize, organize, and style their web pages. By the end of the class, students will have a strong understanding and foundation for web development.

Learning Objectives

When students complete Webpages with HTML & CSS, they will be able to:

  • Writing code in HTML and CSS
  • Personalize web pages using text formatting, graphics, audio, and video
  • Plan and design a web application from scratch
Webpages with HTML & CSS Class SessionsExpand All Sessions
  • 1. Introduction to HTML
    Behind the scenes, website edition.

    In this session, students get a taste for what happens behind the scenes when they are viewing web pages online. They are also introduced to HTML (HyperText Markup Language), one of the two core languages used to create web pages.

  • 2. Introduction to CSS
    HTML and CSS, two peas in a pod.

    In this session, students get an introduction to CSS (Cascading Style Sheet), a programming language that was created for web developers to describe the format and presentation of a web page. This language pairs amazingly with HTML, and is a basic building block for developing a website.


  • 3. HTML Structure
    Learn to organize your website’s information.

    In this session, we take a more in-depth look at HTML, this time putting more attention on structure and tags. Students will learn about the syntax of heading, paragraph, and link tags.

  • 4. Attributes
    Use attributes to control tags.

    In this session, students learn how to add information to their tags to give them more control over function and appearance. Students also learn about the anchor tag and how to utilize attributes to create their first link. 

  • 5. Text Styling
    Personalize and beautify your text.

    In this session, students delve into different text styling tools, including ways to change the color, size, style, and font. This will help students more easily personalize and design their websites.

  • 6. Containers
    Use containers to organize your website.

    In this session, students learn all about containers and how to use them. Students will get familiar with the syntax, function, and place of containers.

  • 7. Classes
    Define your own selectors using classes.

    In this session, classes expand on our previous knowledge of IDs as identifiers for HTML elements. Learning about classes gives students another identifier to operate specified tasks for elements.

  • 8. Box Model
    View HTML elements through the eyes of a browser.

    In this session, students are introduced to the box model, the browser’s way of viewing HTML elements. Students will learn how the box model organizes and positions HTML elements on your screen.

  • 9. Positioning
    Move HTML elements around with positioning.

    In this session, students get to dive into HTML positioning and different want to move elements in relation to the page and each other. They’ll also expand their use of multimedia by learning how to use audio tags for embedding audio files.

  • 10. File Structure with Video
    Boost presence of multimedia by incorporating videos.

    In this session, students have already taken a look at embedding text, images, and audio. Now, we will talk about how to incorporate video into web pages. Students will also learn how to handle more complicated file structures by using files in a multitude of locations.

  • 11. Fortune Cookie – Part I
    Surprise visitors with a random fortune.

    In this session, students will start on their final project which will combine the skills they’ve learned over the past several weeks. They will be creating a web page that simulates a fortune cookie and retrieves a random fortune when clicked.

  • 12. Fortune Cookie – Part II
    Fortune cookie project wrap-up.

    In this final session, students focus on debugging and completing the fortune cookie project that was started in the last class session. They will build and style a web page from scratch, and get a sneak peek into writing Javascript. Students will complete a final project that showcases all the skills learned throughout class.

VR Capstone Class

Imagine putting a headset over your eyes and getting teleported to a virtual world. What if you built that world yourself? How exciting and entertaining would that be, right? In this course, we use the latest tools from Mozilla and Google to launch a VR game by the end of the course.

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.

  • Intro to Programming
    on Sundays (12 weeks, 1 class per week)
  • Intro to Programming
    on Mondays (12 weeks, 1 class per week)

See our school calendar to check the holiday meeting schedule.

Once a course begins, every student at any level enjoys the same benefits:

Twelve 1-hour classes
Code editor software subscription
Live 1-on-1 teacher help, including weekends
Online student community
24/7 Access to our coding platform
Web hosting & unlimited server space
Same day email support
Monitored, direct-messaging

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. 1 hour of class time, plus 1-2 hours of practice time, with instructors 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.

Get Your Wizard Started

Pin It on Pinterest

[[
255
255
255);">Click Here 255);">Click Here
255
255
255);">]
255);">]