Bootstrap 3 Beginners: Create a Professional Landing Page

Learn how to create a clean, modern & professional responsive landing page for your app, portfolio, business or blog!
4.7 (218 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.
3,133 students enrolled
Take This Course
  • Lectures 54
  • Length 2.5 hours
  • Skill Level Beginner Level
  • 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/2015 English

Course Description

Learn the basic concepts, tools, and functions that you will need to build fully functional, professional landing page within the bootstrap framework.

Build a strong foundation in the Bootstrap framework with HTML & CSS with this tutorial for beginners.

  • Bootstrap components
  • Grid System & Media Queries
  • Custom fonts
  • Font-Awesome icons
  • Animate CSS & WOW js

This course will help you create a perfect bootstrap responsive landing page for your app, business, portfolio or blog. Having a little knowledge of HTML & CSS is ideal to get you started on the quicker route to Bootstrap, however it isn't essential. I will walk you through every step of code to ensure you have the right understanding and tools to further your learning after you have completed the course.

You will not only create a clean, modern professional looking bootstrap landing page, you will also add scroll spy, animation and Google Webfonts to make sure your website stands our from the crowd. We start by understanding the basics of bootstrap, how it works and how it is implemented. We will cover the famous grid system and media queries to ensure your new page looks it's best on all devices.

You will learn-by-doing 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 created a slick, modern professional landing page using HTML and CSS that will work across all devices.

What are the requirements?

  • Mac or PC
  • A HTML editor (I'll provide examples in lecture 7)

What am I going to get from this course?

  • You will hand code and create a professional, clean & modern bootstrap responsive landing page
  • Project files to download and work with offline
  • Learn skill & knowledge to start building your own pages, and templates

Who is the target audience?

  • Students who want to create their first website
  • Bootstrap newcomers
  • Students with the basic understanding of HTML & CSS
  • Student wanting to brush up on their bootstrap skills

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: Introduction

A quick introduction and welcome to this bootstrap beginners course!


We take a quick look at the bootstrap framwork and what it includes.


We look at the final landing page we will be creating over this course.


A look at the different components that are available to us within the bootstrap framework


A walk through the famous bootstrap grid system


We look at Media Queries, another famous feature of bootstrap to help style for specific devices.


A quick look at different HTML editors available.

Section 2: Setting Up

We download bootstrap onto your machine to help us setup our file structure.


Here we add in our index file and stylesheet to get everything in place before we start building our page.

Download img folder
Section 3: Navigation Bar

We start by taking a look at the famous bootstrap navigation bar, and add that into our page.


We add our own custom styles to the bootstrap navbar in our stylesheet.


In this lecture we import Google Fonts into our bootstrap page to finish off styling our navbar.

4 questions

Some simple questions on what we have been through so far.

Navbar files
Section 4: Header Section

We start to add our content by coding our 'header' section onto our page.


A look at the header image, and also resources for finding other high quality stock images you can use.


We style the header with custom fonts and background image within our stylesheet.


We add our own media queries to the header to ensure it displays correctly on all devices.

4 questions

Some simple questions relating to our header section.


Lecture files attached

Section 5: About Section

In this lecture we code our 'about' section onto the page.


We style our 'about' section within our stylesheet.


Lecture files attached.

Section 6: Features Section

We continue by coding a 'features' section onto our page.


Another popular add-on for bootstrap is the ability to use Font Awesome icons.


We style our features section within our stylesheet ensure to keep the branding of the page the same throughout.

Features Quiz
3 questions

Lecture files attached.

Section 7: Press Section

We code our 'press' section onto the page.


We style our 'press' section logos, including adding the opacity effect.


Lecture files attached.

Section 8: Screens Section

We add a number of screenshots onto the page, ideal for showing off your app or product.


We add the required styles to ensure our screenshots render correctly on all devices.

Screens Quiz
1 question

Lecture files attached.

Section 9: Reviews Section

We add another essential section onto our page, which is our 'reviews' section.


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


Lecture files attached.

Section 10: Download/Buy Online Section

We add our 'buy online' section onto the page to encourage links through to your app, work or product.


We style our 'buy online' section.

4 questions

A quick 'tag' quiz


Lecture files attached.

Section 11: Contact Section

We code our 'Contact' section to include essential social icons and location information.


We style our 'contact' section within our stylesheet.


Lecture files attached.

Section 12: Footer Section

We add our final section onto our bootstrap page, which is our 'footer' section.


We add our final styles for our bootstrap page into our stylesheet.


Lecture files attached.

Section 13: Adding Animation

We install the animate.css stylesheet into our page so we can include animation onto our page.


We add the Wow.js script files to enable our animations.


In this lecture we add animation to our bootstrap landing page.


Lecture files attached.

Section 14: Applying Navigation

We add our ID's to our sections for navigation purposes.


We add 'scrollspy' to our page to help the user experience.


We take a look at our final bootstrap landing page and go over everything you have completed through the lectures.


Final landing page files attached.

Section 15: Where Now?

Some useful information on what to do with your new skills.


Some tips and ideas on how to build on your new found bootstrap knowledge.

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