High School Coding Program, Teen with Laptop

Course Description

Students learn how to create intuitive and engaging interfaces within an eye-catching design. They are introduced to the most popular framework, Bootstrap, to make their pages engaging and responsive. Students also learn some laws of UI/UX and use scientific methods to design the elements of their page. These scientific methods improve the response time, traffic, and aesthetic appeal of their webpage, which are all needed to create real world websites that users want to visit and browse.

High School Coding Program, Teen Girl with Laptop

Learning Objectives

When students complete Modern CSS Framework, they will be able to:

  • Make webpages responsive
  • Understand the fundamentals of Bootstrap
  • Improve response time and traffic to webpages

Prerequisites

These courses must be completed before Modern CSS Framework:

Modern CSS Framework Class LessonsExpand All Lessons
  • Modern CSS Framework Lesson 1
    1. Introduction to Bootstrap

    In the first lesson, students begin with an introduction to CSS frameworks. Students learn how using a framework reduces time writing custom CSS and produces a sleek, professional appearance. Students use the Bootstrap framework to create an interactive map of a computer motherboard. They use Bootstrap to develop popovers—small boxes of information about parts of the motherboard—that expand on hover. 

  • Modern CSS Framework Lesson 2
    2. The Basics of Bootstrap

    In this lesson, students are introduced to typography in web design and use Bootstrap classes to format text. They create a web page about their home city and learn how to create a table to show data about the city. As a bonus, they learn how Bootstrap can make images responsive to fit smaller screen sizes.

  • Modern CSS Framework Lesson 3
    3. Styling form elements

    In this lesson, students explore how to style forms with Bootstrap. They learn industry-standard principles of User Experience (UX) design. Following these principles, students create an aesthetically pleasing and user-friendly form. They also use a third-party service, Form Submit, to receive form responses in an email.

  • Modern CSS Framework Lesson 4
    4. Validating form elements

    In this lesson, students review form input validation. They use Bootstrap to show custom error and success messages. Students employ this validation technique to create a multistep zen form. The form follows another law of UX, the Goal Gradient effect. As users fill out the form, a progress bar encourages them to finish. 

  • Modern CSS Framework Lesson 5
    5. Mid-term project – I

    In this lesson, students complete part one of a two-part midterm project. Students create a website for a birthday party invitation with two forms; one to RSVP and one to send a “Happy Birthday!” message. They use the Bootstrap framework and custom CSS code to replicate the provided design.

  • Modern CSS Framework Lesson 6
    6. Mid-term project – II

    In this lesson, students finish their mid-term project, the birthday party invitation. They create a popup to display a schedule of activities. To make the schedule, they review how to create a table and show data in a spreadsheet-like format. As a bonus exercise, they learn how to activate a form using a third-party processing service that sends user responses to their email address.

  • Modern CSS Framework Lesson 7
    7. Responsive design

    In this lesson, students review the concept of responsive web pages. They test out various Bootstrap containers and their responsive breakpoints, the screen size at which a design changes. They learn about the different types of containers available in the Bootstrap framework. As a bonus, they are introduced to the concept of parallax scrolling and implement it in the project.

  • Modern CSS Framework Lesson 8
    8. Bootstrap grid

    In this lesson, students take responsive web pages to another level. They learn about wire-framing in web design and explore the layouts of famous web pages like YouTube and Instagram. They use the Bootstrap grid to create a clone of an Instagram page which requires learning about rows, columns, and gutters. 

  • Modern CSS Framework Lesson 9
    9. Grids Continued

    In this lesson, students further explore Bootstrap grids. They learn how to vertically align a column inside a row. They also create a content slider using another Bootstrap component, the carousel. They put these elements together to code the front page of an e-commerce site with featured products at the top.

  • Modern CSS Framework Lesson 10
    10. Misc Bootstrap components

    In this lesson, students work with a variety of Bootstrap components. They refer to the official documentation of Bootstrap to learn how to use the accordion, list group, and pagination components. They use all these components and more to create two engaging recipe pages.

  • Modern CSS Framework Lesson 11
    11. Final Project – Part 1

    In this lesson, students learn how a frontend framework, like Bootstrap, interacts with a full-stack framework, like Flask. They use Flask’s templating system and template inheritance to add Bootstrap to create the basic layout of a web page with a header, footer, and responsive navigation.

  • Modern CSS Framework Lesson 12
    12. Final Project – Part 2

    In this lesson, students complete their final project, a standard website with three pages. They use a Python file to separate content from code. They use the Bootstrap carousel component to create a portfolio page. As a bonus, they can host their customized sites from the CodewizardsHQ subdomain, <username>.codewizardshq.com.

Class Schedule

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