New Classes Enrolling Now! See Schedules
Student Login | Student Center
High School Coding Program, Teen with Laptop

Course Description

In Modern CSS Frameworks, the third course in Wizard Level 2 of our high school program, students learn how to create intuitive and engaging interfaces using Bootstrap. Bootstrap is a popular CSS framework that allows developers to build the front end of a web application in a fraction of the time it usually takes. In addition to leveraging the power of Bootstrap, students also learn to utilize many UI/UX design principles to make their web front-ends easy and pleasant to use. They’ll discover ways to improve page response time, draw traffic to a web page, and improve the aesthetic appeal of a web page. The skills they’ll learn in this course are essential when creating real-world websites and applications! After completing Modern CSS Frameworks, students are prepared to show off what they’ve learned in the Wizard Level 2 Capstone course. 

High School Coding Program, Teen Girl with Laptop

Learning Objectives

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

  • Use Bootstrap to design and develop beautiful web application front ends in an efficient manner
  • Leverage Bootstrap’s responsive components to create web applications that work great on any device or screen size
  • Learn to use UI/UX design principles to improve important website metrics like load times, SEO, and overall usability

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.