Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Bootstrap 4 Beginners: Code a Responsive Landing Page to your Wishlist.

Add to Wishlist

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 (88 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.
462 students enrolled
Created by Andy Clarke
Last updated 1/2017
$19 $30 37% off
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 13 Articles
  • 17 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
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
View Curriculum
  • HTML Editor (e.g. Brackets, Coda, Coffee Cup, Notepad++)
  • Mac or PC
  • Understanding of HTML & CSS is ideal, however not essential

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.

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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 48 Lectures Collapse All 48 Lectures 03:21:41
Course Introduction
6 Lectures 19:06

A short introduction to the course.

Preview 00:58

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

Preview 03:33

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

Preview 04:39

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

Bootstrap components

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

Bootstrap grid system

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

Bootstrap media queries

Quiz 1
2 questions
Setting Up
4 Lectures 08:46

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

Downloading bootstrap

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

Creating our file structure

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

Font Awesome

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

Download the course images
Building our Navigation
4 Lectures 17:51
Alpha 6 Update

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

Coding the bootstrap navigation bar

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

Styling our navigation bar

Download the navbar section files for use or reference.

Navbar section files
Building our Header
3 Lectures 26:52

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

Coding our header section

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

Styling our header section

Quiz 2
3 questions

Header section files
Building our Social Section
3 Lectures 13:07

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

Coding our social section

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

Preview 06:57

Social section files
Building our 'Who' Section
3 Lectures 11:36

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

Coding our 'who' section

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

Styling our 'who' section

'Who' section files
Building our 'Latest Work' section
3 Lectures 17:33

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

Coding our 'Latest Work' section

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

Styling our 'Latest Work' section

'Latest work' section files
Building our 'Why' section
3 Lectures 09:25

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

Coding our 'why' section

We style the 'why' section within our stylesheet.

Styling our 'why' section

Quiz 3
3 questions

'Why' section files
Building our Quotes section
3 Lectures 12:17

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

Coding our 'customers' section

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

Styling our 'customers' section

Quotes section files
Building our Pricing section
3 Lectures 15:30

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

Coding our 'pricing' section

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

Styling our 'pricing' section

Pricing section files
4 More Sections
About the Instructor
4.6 Average rating
730 Reviews
13,090 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.

Report Abuse