Modern CSS Framework

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. 

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.

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.

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. 

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.

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.

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.

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. 

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.

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.

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.

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.