Bootstrap 4 Make Fast Responsive Cool Websites From Scratch

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Create the PHP form

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

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

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

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

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

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

Download and install Brackets free Text Editor Software

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

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

Adding Font Awesome Icons to the Hero section

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

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

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

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

Create a section that includes your education and qualification dertails

Create a new section describing your mission statement

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

Style and customize the Font Awesome Icons for the contact section

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!