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.
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
These courses must be completed before Modern CSS Framework:
- Wizard Level 1
- Wizard Level 2, Course 1 : APIs and Databases
- Wizard Level 2, Course 2 : Professional Web App Development
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
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.
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.