Bootstrap 4 Beginners: Code a Responsive Landing Page

Learn how to code a fully responsive professional landing page in bootstrap 4, from scratch, using HTML & CSS
4.7 (57 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
355 students enrolled
50% off
Take This Course
  • Lectures 48
  • Length 3.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2016 English

Course Description

Learn the basic concepts, tools, and functions that you will need to build fully functional, professional landing page within the new bootstrap 4 framework. Ideal for students of all skill-sets, from total beginners or students that simply want to brush up on their coding skills.

Code a professional landing page and build a strong foundation in the Bootstrap 4 framework with HTML & CSS with this brand new course.

  • Fully Responsive Landing Page
  • New Bootstrap components
  • Solid Understanding of the Grid System & Media Queries
  • Apply Custom fonts
  • CSS Overlays
  • Use Font-Awesome Icons
  • Apply Animate CSS & WOW js

This course will help you create a perfect bootstrap responsive landing page for your own personal portfolio, or for your business. You will ideally have a little knowledge of HTML & CSS, however it isn't essential as I will walk you through every step of code to ensure you have the right understanding of the bootstrap framework, and the tools to further your learning after you have completed the course.

You will not only create a modern professional looking bootstrap 4 landing page, you will also take your skills further by adding animation and custom fonts to make sure your landing page stands our from the crowd. We start by understanding the basics of bootstrap, how it works and how it is implemented. We cover the famous bootstrap grid system and media queries to ensure your new page looks, and displays, correctly on all devices.

You will take the learn-by-doing approach which will help you understand all aspects of bootstrap and give you the tools to re-design our template or build an entirely new landing page specifically how you want it. You will be able to download project files throughout the course, which will be yours to keep and work on at your leisure.

By the end of this course you will have hand coded a modern & professional landing page using HTML & CSS and built a solid understanding of the bootstrap framework to help you develop your own pages in the future.

What are the requirements?

  • HTML Editor (e.g. Brackets, Coda, Coffee Cup, Notepad++)
  • Mac or PC
  • Understanding of HTML & CSS is ideal, however not essential

What am I going to get from this course?

  • Learn how to develop awesome responsive landing pages
  • Code pages from scratch using HTML & CSS
  • Use advanced CSS features
  • Have a solid understanding of the bootstrap framework and its components

Who is the target audience?

  • Individuals who want to develop future-proof sites/pages
  • Individuals who want to develop awesome responsive pages
  • Anyone wanting to brush up on their coding skills
  • Bootstrap newbies

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Course Introduction

A short introduction to the course.


We have a brief overview of the bootstrap 4 and have a look at the framework.


We have an in-depth look at the final landing page that you will be creating with HTML & CSS


We have a look over the bootstrap components, including the updated components in bootstrap 4.


We get to understand the famous bootstrap grid system and go though an example so you get to grips with how it all works.


We take a look at the powerful media queries that are included with bootstrap 4.

Quiz 1
2 questions
Section 2: Setting Up

In this lecture we will download bootstrap to get up and running.


In this lecture we ensure all the essential files are in place for us to start building our page.


Here we install Font Awesome so we are able to use certain icons throughout the lectures.


In this lecture we download the images that are required for this course and place them into our project folder.

Section 3: Building our Navigation
Alpha 6 Update

Here we look at the bootstrap navbar and create our very own version.


We style the navbar we have just created to match our branding.


Download the navbar section files for use or reference.

Section 4: Building our Header

In this lecture we add in all the elements we need to build our full screen header section within our bootstrap page.


We style our header section of our bootstrap page within our stylesheet.

Quiz 2
3 questions
Header section files
Section 5: Building our Social Section

Here we add in our social section into our bootstrap landing page, which includes social icons.


We add our styles to the icons to adjust the size, border and hover state.

Social section files
Section 6: Building our 'Who' Section

Here we code our mini 'about' section to our bootstrap landing page.


In this lecture we style our mini about section to match the rest of our page.

'Who' section files
Section 7: Building our 'Latest Work' section

In this lecture we add our next section, which lets you show off your projects, designs or products on the page.


We style our 'work' section and add our overlays for each image.

'Latest work' section files
Section 8: Building our 'Why' section

Here we add our next section that lets you promote your skills or services for the user.


We style the 'why' section within our stylesheet.

Quiz 3
3 questions
'Why' section files
Section 9: Building our Quotes section

In this lecture we add our customer quotes section, allowing you to display testimonials or reviews on your landing page.


We style the 'quotes' section to match the brand of the page.

Quotes section files
Section 10: Building our Pricing section

In this lecture we add another essential piece to any agency or portfolio, which is the 'pricing' section.


Here we style our 'pricing' section to match the rest of our page.

Pricing section files
Section 11: Building our Contact section

Here we code our contact section into the template.


We style our 'contact' section to match the rest of our landing page.

Contact section files
Section 12: Building our Footer section

We code the final section of our page, which is the footer section.


We add styles to our stylesheet to match our footer to the rest of the landing page.

Footer section files
Section 13: Adding our animation

Here we add our animate.css stylesheet to our page so we can access animations and add them to our page.


In this lecture we add scripts to our page to allow us to display animations on our landing page.


Here we go through our components on our final bootstrap landing page and add animation.

Animation section files
Section 14: The Final Section...

We take a look at the final bootstrap 4 landing page and go through what you have completed during the lectures.


We take a look at your next step and what you can accomplish with your new bootstrap skills.

Final page files

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Andy Clarke, Web Designer/Developer

I have been in the web design and development sector for over 10 years, working on various aspects of design and build. I've always had a passion for design and coding and enjoy creating various sites through HTML, CSS and Javascript, especially Wordpress & Bootstrap sites. I also design website and apps layouts in either Photoshop & Sketch.

Ready to start learning?
Take This Course