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 (211 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,097 students enrolled
$19
$20
5% off
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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

What 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.

Curriculum

Section 1: Introduction
00:49

A quick introduction and welcome to this bootstrap beginners course!

01:42

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

01:50

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

01:01

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

02:30

A walk through the famous bootstrap grid system

02:00

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

01:52

A quick look at different HTML editors available.

Section 2: Setting Up
01:01

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

02:46

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

Download img folder
Article
Section 3: Navigation Bar
08:41

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

06:24

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

02:35

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
Article
Section 4: Header Section
07:34

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

00:55

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

08:59

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

03:53

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.

Article

Lecture files attached

Section 5: About Section
06:55

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

03:16

We style our 'about' section within our stylesheet.

Article

Lecture files attached.

Section 6: Features Section
07:53

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

05:45

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

03:09

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

Features Quiz
3 questions
Article

Lecture files attached.

Section 7: Press Section
07:54

We code our 'press' section onto the page.

04:08

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

Article

Lecture files attached.

Section 8: Screens Section
05:12

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

03:12

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

Screens Quiz
1 question
Article

Lecture files attached.

Section 9: Reviews Section
06:32

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

03:07

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

Article

Lecture files attached.

Section 10: Download/Buy Online Section
05:14

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

03:46

We style our 'buy online' section.

4 questions

A quick 'tag' quiz

Article

Lecture files attached.

Section 11: Contact Section
09:05

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

03:19

We style our 'contact' section within our stylesheet.

Article

Lecture files attached.

Section 12: Footer Section
04:14

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

03:33

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

Article

Lecture files attached.

Section 13: Adding Animation
02:10

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

02:06

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

07:02

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

Article

Lecture files attached.

Section 14: Applying Navigation
02:58

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

02:31

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

00:58

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

Article

Final landing page files attached.

Section 15: Where Now?
Article

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

01:21

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