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
English
$19 $30 37% off
30-Day Money-Back Guarantee
Includes:
  • 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
Requirements
  • HTML Editor (e.g. Brackets, Coda, Coffee Cup, Notepad++)
  • Mac or PC
  • Understanding of HTML & CSS is ideal, however not essential
Description

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
02:08

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
04:12

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

Bootstrap media queries
03:36

Quiz 1
2 questions
+
Setting Up
4 Lectures 08:46

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

Downloading bootstrap
01:47

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

Creating our file structure
03:16

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

Font Awesome
02:40

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

Download the course images
01:03
+
Building our Navigation
4 Lectures 17:51
Alpha 6 Update
00:59

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

Coding the bootstrap navigation bar
10:31

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

Styling our navigation bar
06:20

Download the navbar section files for use or reference.

Navbar section files
00:01
+
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
12:52

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

Styling our header section
13:57

Quiz 2
3 questions

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

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

Preview 06:57

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

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

Coding our 'who' section
05:40

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

Styling our 'who' section
05:55

'Who' section files
00:01
+
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
10:18

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

Styling our 'Latest Work' section
07:14

'Latest work' section files
00:01
+
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
06:49

We style the 'why' section within our stylesheet.

Styling our 'why' section
02:35

Quiz 3
3 questions

'Why' section files
00:01
+
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
08:36

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

Styling our 'customers' section
03:40

Quotes section files
00:01
+
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
10:17

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

Styling our 'pricing' section
05:12

Pricing section files
00:01
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