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
- 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.
#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.