Bootstrap 4 From Scratch With 5 Projects from Udemy

This course will literally take you from knowing nothing about Bootstrap 3 or 4 to learning all of the utilities, components, widgets and grids and building real world themes and websites. You do NOT need to know Bootstrap 3 for this course. Even if you already know Bootstrap 4, skip the learning sections and head right for section 6 to create the simple boiler theme and start the projects. Everything is completely modular.

Custom Bootstrap Sandbox

I have created a completely custom HTML learning environment for the first few sections of this course. Each lecture has an html page associated with it and has a start state. As we move along through the lectures, you code along with me learning all that Bootstrap 4 offers including helpers/utilities, components, widgets, flexbox and more.

5 Real Projects/Themes

We will create 5 real world themes including. These projects are completely open source and you are free to use them anywhere.

LoopLap - A social UI Theme
Mizuxe - A Book/Product Showcase Theme (Sass Project)
Blogen - A blog admin area UI
Glozzom - A multi page theme with a carousel and some 3rd party scripts
Portfoligrid - A portfolio theme using the grid, flexbox and the collapse widget

What's inside

Learning objectives

Learn and create amazing high quality bootstrap 4 themes and uis from scratch
Learn the bootstrap 4 utilities, classes, components & js widgets using a custom sandbox environment

Learn semantic html5 & modern css3 techniques
Learn to compile sass in the easiest way possible using a gui

Learn and create amazing high quality bootstrap 4 themes and uis from scratch
Learn the bootstrap 4 utilities, classes, components & js widgets using a custom sandbox environment
Learn semantic html5 & modern css3 techniques
Learn to compile sass in the easiest way possible using a gui

Syllabus

Learn what Bootstrap is and what this course is about. We will also setup the environment for the course

In this intro video we will talk about what you can expect from this course. We will also talk about the Bootstrap 4 projects included

What Is Bootstrap & Why Use It?

What's New In Bootstrap 4?

Initial Environment Setup

In this video we will setup the custom Bootstrap Sandbox UI that I have created. This sandbox will be used in the next few sections to learn about utilities, components, grids, widgets, etc. Make sure you follow along and unzip the files to your machine

Learn utilities and helper classes of Bootstrap 4 as well as typography and text formatting

Section Introduction

Headings & Basic Typography

Text Alignment & Display

Floats & Fixed Positions

Colors & Background

Margin & Padding Spacing

Sizing & Borders

CSS Breakpoints

Learn about components like buttons, list groups, cards and more

Section Intro

Buttons & Button Groups

Navbar & Navs

List Groups & Badges

Forms & Input

Input Groups

Alerts & Progress Bars

Tables & Pagination

Working With Cards

Media Objects

Jumbotron

Learn about the Bootstrap 4 grid and the new flexbox features

Grid System

Grid Alignment

Flexbox Classes

Auto Margin, Wrap & Ordering

Learn about JS widgets like the carousel and collapse

Carousel Slider

Collapse & Accordion

Tooltips

Popovers

Modals

ScrollSpy & Smooth Scolling

Simple Theme Boiler Plate Setup

Creating The Boiler

We will build a nice looking social based single page theme using the grid, flexbox, forms and many other Bootstrap 4 utilities

Project Intro

Setup & Navbar

Home Section Area

Explore Section Area

Create & Share Section Areas

Footer, Contact Modal & Menu Smooth Scroll

A nice looking theme for selling a book or product

Setting Up Sass With Koala

Custom Navbar & Logo

Showcase & Primary Color Change

Newsletter & Boxes

About Section With Accordion

Authors Area

Contact & Footer

Large multiple page theme with a carousel, lightbox and slick slider

Showcase With Carousel

Home Icons, Heading & Info Sections

Video Section With Autoplay Modal

Photo Gallery & Newsletter

Page Header & About Section

Icon Boxes & Testimonial Slider

Services Page With FAQ Accordion

Blog Page With Cards

Contact & Staff Sections

User interface for a blogging system

Navbar & Main Header

Add Buttons & Modals

Finishing The Dashboard

Resource Table Pages

Details & Settings Pages

Profile & Login Page

Portfolio theme using flexbox the collapse widget

Main Header

Home Collapse Content

Resume Collapse Content

Work Collapse Content

Contact Collapse Content

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Covers all essential utilities, components, widgets, and grids of Bootstrap 4 from scratch

Offers a custom HTML learning environment for hands-on practice

Builds real-world themes and websites using Bootstrap 4

Includes detailed sections on important Bootstrap 4 concepts like helpers/utilities, components, widgets, flexbox, and more

Provides guidance on using semantic HTML5 and modern CSS3 techniques

Covers the compilation of Sass using a GUI for easy understanding

Reviews summary

Brad hussey: quality instruction

Students largely appreciate Brad Hussey's teaching style. They say that he explains things easily and in a relaxed manner. As a result, students often feel motivated to take other courses that he offers.

Brad Hussey is an excellent instructor.

"As always, I enjoyed a lot learning with Brad."

"I love his easygoing way to explain things."

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 4 From Scratch With 5 Projects with these activities:

Review HTML and CSS basics

Show steps

Reinforce foundational knowledge of HTML and CSS to support Bootstrap implementation

Browse courses on HTML

Show steps

Review HTML elements and syntax
Review CSS selectors and styling

Read and summarize 'Bootstrap 4 for Beginners'

Show steps

Provide a foundation of Bootstrap 4 basics so that understanding more complex topics covered in the course is easier.

View Modern HTML and CSS from the Beginning... on Amazon

Show steps

Preview the front and back covers
Read and summarize Chapter 1
Read and summarize Chapter 5
Write a 2-page summary

Find and follow a tutorial on Bootstrap 4 flexbox

Show steps

Enhance the understanding of Bootstrap Flexbox through a self-guided tutorial.

Browse courses on CSS Flexbox

Show steps

Search for a comprehensive tutorial
Follow the steps in the tutorial

Four other activities

Expand to see all activities and additional details

Show all seven activities

Practice building Bootstrap 4 grids

Show steps

Reinforce the understanding of the Bootstrap grid system through repetititve practice.

Browse courses on CSS Grids

Show steps

Create 5 grids with different layouts
Test and iterate the layouts

Create a Bootstrap 4 landing page

Show steps

Applying the skills and knowledge gained in this course through the creation of a landing page.

Browse courses on UI Development

Show steps

Plan out the page's layout
Create HTML and CSS Code
Test the web page in different browsers

Answer questions in the course forum

Show steps

Deepen understanding of Bootstrap concepts by explaining them to others and providing support.

Show steps

Review the course topics
Monitor the forum
Provide thoughtful responses

Create a Bootstrap 4 resource kit

Show steps

Organize and consolidate relevant Bootstrap materials for future reference and continuous exploration.

Browse courses on Web Development

Show steps

Gather tutorials, articles, and code snippets
Organize resources by category
Create a central repository

Career center

Learners who complete Bootstrap 4 From Scratch With 5 Projects will develop knowledge and skills that may be useful to these careers:

UX Designer

UX designers are responsible for the user experience of a website or web application. They work with front-end developers and web designers to create websites and applications that are easy to use and navigate. This course can help you develop the skills needed to become a UX designer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create user-friendly websites and applications that meet the needs of users.

See salaries and explore the career path for UX Designer

Web Designer

Web designers are responsible for the overall look and feel of a website or web application. They work with front-end developers to create websites that are both visually appealing and functional. This course can help you develop the skills needed to become a web designer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create beautiful, user-friendly websites and applications.

See salaries and explore the career path for Web Designer

Front-End Developer

Front-end developers are responsible for the design and implementation of the user interface of a website or web application. This course can help you develop the skills needed to become a front-end developer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create responsive, user-friendly websites and applications.

See salaries and explore the career path for Front-End Developer

UI Designer

UI designers are responsible for the visual design of a website or web application. They work with front-end developers and web designers to create websites and applications that are both visually appealing and functional. This course can help you develop the skills needed to become a UI designer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create beautiful, user-friendly websites and applications.

See salaries and explore the career path for UI Designer

Web Developer

Web developers are responsible for the development and maintenance of websites and web applications. They work with front-end developers, web designers, and UX designers to create websites and applications that are both visually appealing, functional, and easy to use. This course can help you develop the skills needed to become a web developer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create websites and applications that meet the needs of users.

See salaries and explore the career path for Web Developer

Software Engineer

Software engineers are responsible for the design, development, and maintenance of software applications. They work with other software engineers, as well as with front-end developers, web designers, and UX designers, to create software applications that meet the needs of users. This course can help you develop the skills needed to become a software engineer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create software applications that are both functional and user-friendly.

See salaries and explore the career path for Software Engineer

Product Manager

Product managers are responsible for the development and management of products. They work with other product managers, as well as with front-end developers, web designers, UX designers, and software engineers, to create products that meet the needs of users. This course can help you develop the skills needed to become a product manager, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create products that are both functional and user-friendly.

See salaries and explore the career path for Product Manager

Project Manager

Project managers are responsible for the planning, execution, and closure of projects. They work with other project managers, as well as with front-end developers, web designers, UX designers, and software engineers, to ensure that projects are completed on time, within budget, and to the required quality standards. This course can help you develop the skills needed to become a project manager, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to manage projects and ensure that they are successful.

See salaries and explore the career path for Project Manager

Business Analyst

Business analysts are responsible for understanding the business needs of an organization and translating those needs into technical requirements. They work with other business analysts, as well as with front-end developers, web designers, UX designers, and software engineers, to create solutions that meet the needs of the business. This course can help you develop the skills needed to become a business analyst, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to understand business needs and create solutions that meet those needs.

See salaries and explore the career path for Business Analyst

User Experience Researcher

User experience researchers are responsible for researching the user experience of products and services. They work with other user experience researchers, as well as with front-end developers, web designers, UX designers, and software engineers, to create products and services that are easy to use and navigate. This course can help you develop the skills needed to become a user experience researcher, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to research the user experience and to create products and services that are easy to use and navigate.

See salaries and explore the career path for User Experience Researcher

Data Analyst

Data analysts are responsible for collecting, cleaning, and analyzing data. They work with other data analysts, as well as with front-end developers, web designers, UX designers, and software engineers, to create data-driven solutions that meet the needs of the business. This course can help you develop the skills needed to become a data analyst, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to collect, clean, and analyze data, and to create data-driven solutions.

See salaries and explore the career path for Data Analyst

Instructional Designer

Instructional designers are responsible for creating and developing educational materials. They work with other instructional designers, as well as with front-end developers, web designers, UX designers, and software engineers, to create educational materials that are effective and engaging. This course can help you develop the skills needed to become an instructional designer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create educational materials that are both informative and engaging.

See salaries and explore the career path for Instructional Designer

Technical Writer

Technical writers are responsible for creating documentation for software and hardware products. They work with other technical writers, as well as with front-end developers, web designers, UX designers, and software engineers, to create documentation that is clear, concise, and easy to understand. This course can help you develop the skills needed to become a technical writer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create documentation that is both informative and engaging.

See salaries and explore the career path for Technical Writer

Market Researcher

Market researchers are responsible for conducting research to understand the needs of customers. They work with other market researchers, as well as with front-end developers, web designers, UX designers, and software engineers, to create products and services that meet the needs of customers. This course can help you develop the skills needed to become a market researcher, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to conduct research and to create products and services that meet the needs of customers.

See salaries and explore the career path for Market Researcher

E-Learning Developer

E-learning developers are responsible for creating and developing online learning materials. They work with other e-learning developers, as well as with front-end developers, web designers, UX designers, and software engineers, to create online learning materials that are effective and engaging. This course can help you develop the skills needed to become an e-learning developer, including HTML5, CSS3, JavaScript, and Bootstrap 4. You will learn how to use these technologies to create online learning materials that are both informative and engaging.

See salaries and explore the career path for E-Learning Developer