Bootstrap 4 Make Fast Responsive Cool Websites From Scratch
3.9 (21 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,183 students enrolled

Bootstrap 4 Make Fast Responsive Cool Websites From Scratch

Twitter Bootstrap 4 Build your own responsive Bootstrap 4 websites with CSS, HTML5 & PHP. Two Bootstrap sites included
3.9 (21 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,183 students enrolled
Created by Jamie Henry
Last updated 2/2019
English [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 11 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Students will learn how to build their own multi page Bootstrap 4 websites from scratch using HTML5 and CSS
  • A PC or Mac computer with internet connection - We are going to take you through the whole process of building the Bootstrap 4 website

Join us on this course and see how easy it is to build a multi page Bootstrap 4 website, and a one page scrolling Bootstrap 4 website from scratch, with working contact and subscription forms. We are going to be using a great free text editor to build our coming soon page with. Learn how to write HTML5 and CSS3 to build and style Bootsrap 4 websites that have some great features. Once built we will upload the sites to an online server and test our contact and subscribe forms. Once you have completed this course, you will have all the tools you need to create your own Bootstrap 4 sites from scratch. Happy coding!   

Who this course is for:
  • Anyone wanting to learn how to build a modern website from scratch using Bootstrap 4
Course content
Expand all 51 lectures 06:04:03
+ Coming Soon Page Introduction
2 lectures 04:00

Welcome to this course - Here is an overview of what we will be covering.

Preview 02:53

During this course there will be downloadable zip files of the site at various stages

Preview 01:07
+ Coming Soon Page Setting Up
18 lectures 02:41:26

In this video we will download a free text editor to build our Bootstrap 4 site with. Once downloaded we will go through the install and configuration process. When the text editor is installed we will create our first Bootstrap 4 page.

Downloading and Setting Up The Text Editor

Let's take a walk-through of our first bootstrap page

Preview 07:32

In this video we will create our own custom css file for styling the coming soon page

Custom CSS file

Learn how to link and ad a full page background image to our new website using CSS

Whole page background image

In this video we will move the default navbar from the top of the page and pin it to the bottom of the page using some simple Bootstrap css

Navbar organisation

Learn how to apply custom CSS to custom style our menu nav links the way we want them

Preview 14:28

Here we demonstrate the value of using safe web fonts and why this is important for compatibility over the web

Safe web fonts

In this video we cover how to integrate and use the Google font library on our Bootstrap 4 website

Using Google fonts

This is where we use some JavaScript to ad the countdown timer to our coming soon site

Adding the countdown timer

Now the timer is in place we will use some custom css to style it to make it stand out

Styling the countdown timer

In this video we will ad titles and use custom CSS to style the countdown number titles

Styling the countdown titles

Here we are going to demonstrate some custom css techniques to make the countdown timer really stand out and look eye catching 

Styling examples

In this lecture we are going to style our content text with css and add an opaque background to ensure that the text stands out from the background image

Text and background

Every site needs a unique identity, here we will add our custom logo to the Bootstrap 4 site

Adding a logo

Bootstrap 4 has an awesome grid system - In this video we demonstrate how they work

Bootstrap 4 columns

If the site you build has enough content to scroll, then you may need to use a fixed background that stays stationary as the content scrolls, this can be done easily with some CSS

Using a fixed background

Ad a semi-transparent gradient to the navbar to keep it looking sharp while text scrolls behind it

Gradient navbar background

In this video we will use some custom CSS to ad unique hover effects to our links

Link hover effects
+ Coming Soon Page Form pages
7 lectures 59:43

Here we are going to ad another page to our Bootstrap 4 site for a contact page

Contact page creation

In this video we are going to learn how to add custom CSS to our contact form to make it look like the rest of our site

Preview 15:03

Here we continue with styling our site using CSS3 to keep everything looking uniform

Form CSS styling 2

Now that we have another page for our site, we will use HTML to link the pages with each other

Page links

In this video we are going to ad another page for our subscription form

Subscription page creation

Create the PHP form

PHP form

Create a success page for visitors to be directed to after they have filled and submitted a contact or subscription form

Success page creation
+ Coming Soon Page Debugging
3 lectures 36:26

In this video we upload the whole site to an online hosting provider, make the site live and test out our email forms

Upload to Live

Browser compatibility - Make sure the site will work on all browsers 

Browser compatibility

Final steps, here we are going to check that our site is fully responsive and will work on all size devices. To do this we are going to ad some CSS media queries

Media Queries
+ One Page Scrolling Resume Site
21 lectures 01:42:28

Take a look at the One Page Scrolling Resume Site we are going to build with Bootstrap 4

Preview 02:14

Download the resource files used in the making of this Bootstrap 4 site

Resources Files

Set up the Bootstrap 4 skeleton for our One Page Scrolling Resume Site

Setting up a basic scrolling page template

Download and install Brackets free Text Editor Software

Introduction To Brackets Text Editor

How to integrate Font Awesome Icons into our One Page Scrolling Bootstrap 4 Site

Font Awesome

Naming The Site and Images folder creation

Preview 02:58

The most important part of the site, The part visitors will see first. Setting up the hero section

Hero Section

Add the H1 title text and content to the hero section

Preview 04:37

Adding Font Awesome Icons to the Hero section

Hero Fonts

After adding the social media icons it's time to give them a style of our own

Social Media Icons

Add a heading and some information about yourself under the hero section

About You Section

Add a button below your information that will take visitors down to the contact section

Button One

Create a section about your work experience, including dates and details

Work History

Create a section that includes your education and qualification dertails

Your Education

Insert a button after your education details, so visitors can learn more by contacting you.

Preview 03:22

Create a new section describing your mission statement

Your Mission

Constructing the contact section with email, phone and social media links

Get in touch

Style and customize the Font Awesome Icons for the contact section

Contact Section Icons

Add the correct nav links to the menu to enable them to scroll to the appropriate sections

Preview 02:23

Add a site badge  or favicon to to your Bootstrap 4 resume site


Moving the new website from your computer to a live online server so it can be found on the web!

Let's go live!