Bootstrap 3 Beginners: Create a Professional Landing Page
4.6 (287 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,290 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Bootstrap 3 Beginners: Create a Professional Landing Page to your Wishlist.

Add to Wishlist

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.6 (287 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,290 students enrolled
Created by Andy Clarke
Last updated 8/2016
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 14 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
  • Mac or PC
  • A HTML editor (I'll provide examples in lecture 7)

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.

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
54 Lectures
7 Lectures 11:44

A quick introduction and welcome to this bootstrap beginners course!

Preview 00:49

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

Preview 01:42

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

Preview 01:50

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

The bootstrap Components

A walk through the famous bootstrap grid system

The Grid System

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

Media Queries

A quick look at different HTML editors available.

HTML Editor
Setting Up
3 Lectures 03:49

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

Download bootstrap

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

Index & CSS files

Download img folder
Navigation Bar
4 Lectures 17:40

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

The default navbar

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

Adding style to our navbar

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

Custom fonts

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

Navbar Quiz
4 questions

Navbar files
Header Section
5 Lectures 21:21

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

Building our header

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

Header images and other stock images

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

Styling the header

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

Adding media queries

Some simple questions relating to our header section.

Header Quiz
4 questions

Lecture files attached

Header section files
About Section
3 Lectures 10:12

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

Preview 06:55

We style our 'about' section within our stylesheet.

Styling the About section

Lecture files attached.

About section files
Features Section
4 Lectures 16:47

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

Building the Features Section

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

Font Awesome

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

Styling the features section

Features Quiz
3 questions

Lecture files attached.

Features section files
Press Section
3 Lectures 12:02

We code our 'press' section onto the page.

Building the Press section

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

Styling the press section

Lecture files attached.

Press section files
Screens Section
3 Lectures 08:24

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

Building the Screenshot section

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

Styling the screens section

Screens Quiz
1 question

Lecture files attached.

Screens section files
Reviews Section
3 Lectures 09:39

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

Building the Reviews section

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

Styling the reviews section

Lecture files attached.

Reviews section files
Download/Buy Online Section
3 Lectures 09:00

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

Building the Buy Online section

We style our 'buy online' section.

Styling the buy online section

A quick 'tag' quiz

Download Section Quiz
4 questions

Lecture files attached.

Buy online section files
5 More Sections
About the Instructor
Andy Clarke
4.6 Average rating
1,229 Reviews
20,362 Students
5 Courses
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.