Bootstrap 5 From Scratch

This course is for anyone that wants to learn how to build modern websites and UIs using the Bootstrap CSS framework. This course is very beginner friendly, but is also for anyone that wants to build some cool projects.

The course is broken up into a few parts...

The Bootstrap Sandbox

We will start off by learning all of the important Bootstrap classes, utilities, helpers, etc by using the Bootstrap sandbox. This is a collection of files that are categorized for certain components and areas such as buttons, typography, grid columns, flex, etc. You will have a starter version without the classes and we will go through and add the classes and talk about them and in some cases examine the CSS. We will use the sandbox for all of the CSS components as well as the JavaScript widgets such as the carousel, accordion, toast notifications and so on.

Mini-Project Challenges

There will be a couple mini-projects that I will ask you to complete yourself, based on what you learned in the sandbox sections. This includes a pricing grid, ratings component and a user list. I may add more to this section as well.

Starter Template / Boilerplate

We will be creating a template and environment to build our main projects. This will include using NPM (Node Package Manager) to install Bootstrap and Sass. We will customize Bootstrap by changing Sass variables and then compiling a custom bootstrap.css file. If you don't know NPM or Sass, that is fine. I explain everything as I go.

5 Main Websites

Next, we will use the starter template to create 5 great looking websites. In these websites, we will use Bootstrap componenrs, JavaScript widgets as well as some custom JavaScript and 3rd part libraries to give us a little more functionality.

The websites are as follows:

- Ebook Website - Website that offers a free ebook about starting a blog

- Corso Website - Website that offers training courses and seminars

- Portfolio Website - Modern looking portfolio for developers

- Yavin Website - A business that creates custom office spaces

- Vera Website - Software solutions website

What's inside

Syllabus

Getting Started

Welcome To The Course

Projects Overview

What Is Bootstrap?

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses NPM and Sass to install and customize Bootstrap, which is standard practice for modern web development workflows

Includes mini-project challenges to reinforce learning, such as building a pricing grid, ratings component, and user list

Covers dynamic JavaScript components like dropdowns, accordions, carousels, and modals, enhancing website interactivity

Teaches Bootstrap 5, which is a widely-used CSS framework for building responsive and mobile-first websites

Requires using NPM (Node Package Manager) to install Bootstrap and Sass, which may require learners to install Node.js first

Builds five different websites, including an ebook website, a training website, and a portfolio website, which may be useful for learners

Reviews summary

Hands-on bootstrap 5 website building

According to learners, this course offers a solid and practical approach to mastering Bootstrap 5. Students particularly praise the clear explanations and the step-by-step process of building five complete, modern websites. This project-based learning is frequently highlighted as the course's main strength, providing valuable hands-on experience. While the course is designed to be beginner-friendly, some reviewers note that a basic understanding of HTML, CSS, and JavaScript is helpful. Overall, students feel well-equipped to build their own responsive websites after completing the course.

Basic HTML/CSS/JS knowledge beneficial.

"It helps to have basic knowledge of HTML, CSS, and some JavaScript."

"While beginner friendly, prior web dev basics make it easier."

"Would recommend basic front-end knowledge before starting."

Keeps learners engaged with practical examples.

"The course is engaging because you are always building something."

"Very practical skills learned that I can use immediately."

"Loved building the projects, it made learning fun."

Covers core Bootstrap 5 features and workflow.

"Covers all the essential Bootstrap components and utilities."

"Learned about Sass customization and NPM workflow."

"The sandbox section is great for learning individual components."

Easy-to-follow, structured learning path.

"The course flows logically from basics to complex projects."

"I appreciated the step-by-step approach used in the projects."

"The structure makes it easy to follow along and build confidence."

Instructor explains concepts clearly and concisely.

"Brad is a fantastic instructor and explains everything so well."

"Explanations are clear and easy to follow, even for beginners."

"The instructor's teaching style makes complex topics understandable."

"He explains things thoroughly but keeps the lessons concise."

Build 5 websites for practical experience.

"The best part of this course are the projects."

"Building 5 real-world websites is an excellent way to apply Bootstrap concepts."

"I gained a lot of practical experience by building these websites."

"The hands-on projects helped solidify my understanding."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Bootstrap 5 From Scratch | Build 5 Modern Websites with these activities:

Review HTML and CSS Fundamentals

Show steps

Reinforce your understanding of HTML and CSS, as Bootstrap builds upon these core web technologies. A solid foundation will make learning Bootstrap much easier.

Browse courses on HTML

Show steps

Review basic HTML tags and attributes.
Practice creating simple web layouts with CSS.
Familiarize yourself with CSS box model and selectors.

Read 'Bootstrap by Example'

Show steps

Explore practical examples of Bootstrap in action to solidify your understanding of its components and utilities.

View Putting Knowledge to Work on Amazon

Show steps

Obtain a copy of 'Bootstrap by Example'.
Work through the examples provided in the book.
Experiment with modifying the examples to suit your needs.

Create a Bootstrap Cheat Sheet

Show steps

Compile a cheat sheet of commonly used Bootstrap classes and components. This will serve as a quick reference guide and reinforce your understanding of the framework.

Show steps

Identify the most frequently used Bootstrap classes.
Organize the classes into logical categories.
Create a visually appealing and easy-to-use cheat sheet.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Build a Simple Landing Page with Bootstrap

Show steps

Apply your Bootstrap knowledge by building a landing page. This hands-on project will reinforce your understanding of Bootstrap's grid system, components, and utilities.

Show steps

Plan the layout and content of your landing page.
Create the HTML structure using Bootstrap's grid system.
Style the page using Bootstrap's components and utilities.
Add custom CSS to enhance the design.

Follow Bootstrap Component Tutorials

Show steps

Deepen your understanding of specific Bootstrap components by following online tutorials. This will expose you to different approaches and best practices.

Show steps

Choose a Bootstrap component to focus on.
Search for online tutorials on that component.
Follow the tutorial and implement the component in a project.

Contribute to a Bootstrap-based Open Source Project

Show steps

Gain practical experience and contribute to the community by working on an open-source project that utilizes Bootstrap. This will expose you to real-world challenges and collaborative development.

Show steps

Find an open-source project that uses Bootstrap.
Identify an area where you can contribute.
Submit a pull request with your changes.

Read 'Pro Bootstrap 5'

Show steps

Explore advanced Bootstrap concepts and techniques to enhance your skills and build more sophisticated web applications.

View Pro Angular 16 on Amazon

Show steps

Obtain a copy of 'Pro Bootstrap 5'.
Read the chapters that cover advanced topics.
Experiment with the techniques described in the book.

Career center

Learners who complete Bootstrap 5 From Scratch | Build 5 Modern Websites will develop knowledge and skills that may be useful to these careers:

Frontend Developer

A Frontend Developer brings websites to life using coding languages. This course helps build a foundation in front-end development by focusing on Bootstrap, a popular CSS framework for creating responsive and modern websites. You will learn how to use Bootstrap classes, utilities, and helpers to build user interfaces. The course also covers JavaScript widgets like carousels and accordions, enhancing the interactivity of the websites you build. The five main website projects, including an Ebook Website and a Portfolio Website, provide practical experience in building complete front-end solutions. If you want to learn the skills to become a frontend developer, this is a great opportunity to start.

See salaries and explore the career path for Frontend Developer

Web Designer

A Web Designer plans and creates the look and feel of websites, often working in tandem with developers. This course is highly relevant, as it focuses on building modern websites using Bootstrap. Through the Bootstrap Sandbox, you will learn how to implement design elements using Bootstrap's CSS components as well as JavaScript widgets. Creating five distinct websites such as an Ebook Website and a Corso Training Website will provide a hands-on design experience. You also will gain exposure to Sass, which would allow more customization to your designs. Web designers who take this course may find themselves well-equipped to create visually appealing and functional websites.

See salaries and explore the career path for Web Designer

UI Developer

A UI Developer specializes in creating the user interface (UI) of websites and applications. This course directly addresses the core skills needed for this role. By learning Bootstrap, you will gain expertise in building responsive and user-friendly interfaces. The Bootstrap Sandbox will allow you to develop key UI components. The five website projects, including the portfolio and software solutions websites, provide valuable experience in crafting the user experience. UI Developers who seek to enhance their skills would benefit from this course.

See salaries and explore the career path for UI Developer

UX Designer

A UX Designer focuses on the user experience of digital products, ensuring they are user-friendly and meet user needs. This course provides practical skills in building websites using Bootstrap, informing your understanding of what is technically feasible. The Bootstrap Sandbox will provide the knowledge needed to implement design elements. Creating five websites provide hands-on design experience. UX Designers who take this course would create visually appealing and functional websites.

See salaries and explore the career path for UX Designer

Web Application Developer

A Web Application Developer builds and maintains web applications, often working with both front-end and back-end technologies. While this course concentrates on the front end, learning Bootstrap is crucial for building the user interface of web applications. You will learn how to use Bootstrap's grid system, components, and JavaScript widgets. The projects, such as the Corso Training Website and the Vera Software Solutions website, offer practical experience in building interactive web applications. If you want to build a career in web development, take a course that would allow you to leverage Bootstrap.

See salaries and explore the career path for Web Application Developer

WordPress Theme Developer

A WordPress Theme Developer creates custom themes for WordPress websites. While WordPress wasn't mentioned, the skills gained in this course could be applied to WordPress theme development. Bootstrap is often used as a foundation for building responsive WordPress themes. Through the Bootstrap Sandbox and website projects, you will learn how to create well-designed and functional themes. You would be able to customize WordPress sites and themes. A WordPress Theme Developer who is interested in web development may find this course useful.

See salaries and explore the career path for WordPress Theme Developer

E-commerce Manager

An E-commerce Manager oversees the online sales channels of a business, including website management, marketing, and customer service. This course provides practical skills in building and customizing websites using Bootstrap, which is relevant in the context of managing an e-commerce website. Bootstrap's features and components helps enhance the user experience and drive sales. This training may be useful for an E-commerce Manager.

See salaries and explore the career path for E-commerce Manager

Information Architect

An Information Architect organizes and structures the content of websites and applications to ensure they are easy to navigate and understand. This course can help learn about website structure and design principles, which are foundational in information architecture. The website projects provide hands-on experience in organizing content and creating intuitive navigation systems. This course can enhance knowledge of web frameworks.

See salaries and explore the career path for Information Architect

Webmaster

A Webmaster maintains and manages websites, ensuring they are functional and up-to-date. This course could be valuable in providing the skills to customize and troubleshoot website issues. Learning Bootstrap will enable you to make design changes and implement new features. The website projects will provide hands-on experience in managing and maintaining a website. A Webmaster can use this as a way to learn how to develop for the web.

See salaries and explore the career path for Webmaster

Digital Strategist

A Digital Strategist develops and implements digital marketing strategies to achieve business goals. This course can provide insights into website design and functionality, allowing you to make informed decisions about website improvements. The website projects can expose you to different types of websites, thereby giving you a better understanding of web technologies. A Digital Strategist may be able to create better strategies with this course.

See salaries and explore the career path for Digital Strategist

Digital Marketing Specialist

A Digital Marketing Specialist develops and implements marketing campaigns across various online channels. While this may seem unrelated, understanding website design and functionality is valuable. This course provides a foundation in building websites using Bootstrap, allowing you to better understand the technical aspects of online marketing. The projects, such as the Ebook Website and Corso Training Website, would help you understand the user experience. Learning Bootstrap may allow a Digital Marketing Specialist to improve websites they oversee.

See salaries and explore the career path for Digital Marketing Specialist

Technical Support Engineer

A Technical Support Engineer provides technical assistance to customers or internal staff. The course might be useful for understanding the technologies behind websites and web applications. You will learn how websites are built using Bootstrap and related technologies. The website projects may offer a glimpse into the types of issues users might encounter. Learning about web development may assist a Technical Support Engineer in troubleshooting issues.

See salaries and explore the career path for Technical Support Engineer

Web Content Creator

A Web Content Creator develops written or multimedia content for websites. While this role primarily focuses on content creation, knowing how websites are built and designed can enhance your ability to create effective content. This course can teach you about website structure, design principles, and user interface elements, enabling you to create content that integrates seamlessly with the overall website design. This course may allow a Web Content Creator to have an edge over other content creators.

See salaries and explore the career path for Web Content Creator

Technical Writer

A Technical Writer creates documentation for software and hardware. While this course does not focus on writing, understanding the technology you are documenting is important. Gaining a grasp on website development using Bootstrap can help you better explain technical concepts. The website projects may provide context for the documentation you create. While not directly related, a Technical Writer may find value in understanding web technologies. A Technical Writer may benefit from a greater understanding of websites and web applications.

See salaries and explore the career path for Technical Writer

Quality Assurance Tester

A Quality Assurance Tester evaluates software and websites to ensure they meet quality standards. Learning about website development using Bootstrap can help you better understand how websites are structured and function, making you a more effective tester. The website projects provide hands-on experience with different types of websites, allowing you to identify potential issues. The knowledge from this course could assist a Quality Assurance Tester in identifying bugs.

See salaries and explore the career path for Quality Assurance Tester

Build 5 Modern Websites

What's inside

Syllabus

Traffic lights

Save this course

Reviews summary

Hands-on bootstrap 5 website building

Activities

Career center

Reading list

Share

Similar courses