Bootstrap 3 Beginners: Create a Professional Landing Page
4.8 (263 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,228 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.8 (263 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,228 students enrolled
Created by Andy Clarke
Last updated 8/2016
English
Learn Fest Sale
Current price: $10 Original price: $20 Discount: 50% off
3 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • Mac or PC
  • A HTML editor (I'll provide examples in lecture 7)
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.

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
Expand All 54 Lectures Collapse All 54 Lectures 02:40:34
+
Introduction
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
01:01

A walk through the famous bootstrap grid system

The Grid System
02:30

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

Media Queries
02:00

A quick look at different HTML editors available.

HTML Editor
01:52
+
Setting Up
3 Lectures 03:49

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

Download bootstrap
01:01

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

Index & CSS files
02:46

Download img folder
00:02
+
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
08:41

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

Adding style to our navbar
06:24

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

Custom fonts
02:35

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

Navbar Quiz
4 questions

Navbar files
00:00
+
Header Section
5 Lectures 21:21

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

Building our header
07:34

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
00:55

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

Styling the header
08:59

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

Adding media queries
03:53

Some simple questions relating to our header section.

Header Quiz
4 questions

Lecture files attached

Header section files
00:00
+
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
03:16

Lecture files attached.

About section files
00:01
+
Features Section
4 Lectures 16:47

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

Building the Features Section
07:53

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

Font Awesome
05:45

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

Styling the features section
03:09

Features Quiz
3 questions

Lecture files attached.

Features section files
00:00
+
Press Section
3 Lectures 12:02

We code our 'press' section onto the page.

Building the Press section
07:54

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

Styling the press section
04:08

Lecture files attached.

Press section files
00:00
+
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
05:12

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

Styling the screens section
03:12

Screens Quiz
1 question

Lecture files attached.

Screens section files
00:00
+
Reviews Section
3 Lectures 09:39

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

Building the Reviews section
06:32

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

Styling the reviews section
03:07

Lecture files attached.

Reviews section files
00:00
+
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
05:14

We style our 'buy online' section.

Styling the buy online section
03:46

A quick 'tag' quiz

Download Section Quiz
4 questions

Lecture files attached.

Buy online section files
00:00
5 More Sections
About the Instructor
Andy Clarke
4.7 Average rating
963 Reviews
16,227 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.