Learn Bootstrap: Design a Custom Landing Page in Bootstrap 4
3.8 (59 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.
4,103 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn Bootstrap: Design a Custom Landing Page in Bootstrap 4 to your Wishlist.

Add to Wishlist

Learn Bootstrap: Design a Custom Landing Page in Bootstrap 4

Use The Latest and Greatest Bootstrap 4 to Turn a Boring Landing Page Into a Great One, And Learn Design Tips Too!
3.8 (59 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.
4,103 students enrolled
Created by Adam Eubanks
Last updated 12/2016
English
English [Auto-generated]
Price: Free
Includes:
  • 1 hour on-demand video
  • 4 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build Bootstrap applications quickly and effectively
  • Use several Bootstrap 4 features (new and old) and be able to customize them
  • Learn how to use different Bootstrap themes via Bootswatch or other sites
  • Know what makes modern websites look awesome
  • Learn basic design tips and how to apply bootstrap 4 to them
  • Use and be proficient in several features such as; navbars, carousels, cards, columns, buttons and more
  • Get started with bootstrap and keep track as the framework changes
View Curriculum
Requirements
  • Good Understanding of HTML
  • Competence in the English Language
  • Internet Access
Description

This course will fast track you from zero to hero in web design by teaching you the wildly popular Bootstrap 4 web framework.

Bootstrap is a wildly popular HTML, CSS, and JavaScript framework built for building and designing beautiful applications quickly that work on all devices, especially on mobile.

By learning bootstrap, you are putting yourself ahead of the tech game. You will be able to build beautiful, professional-looking websites extremely quickly. 

In this course, you will discover the importance of Bootstrap, and be able to use it for what it's best for, making websites look amazing. We will go step by step to learn how to use various features in Bootstrap 4 (some unique only to bootstrap 4). We will learn the basics and then some.

This course will give you steady ground in bootstrap, and allow for you to keep up with the technology as it evolves. This course will help take you from no bootstrap knowledge whatsoever to using it to build great websites.

The majority of this course will be spent on taking a landing page with absolutely no styling or images, and applying bootstrap to it to make it look amazing. Along the way, we will learn about how bootstrap works and what makes it so great. We will learn basic concepts in design, as well as less prominent bootstrap features.

This course will get you kick started with bootstrap and will help you make beautiful websites. We won't just learn bootstrap, but we will also learn about web design, and key things that make sites look awesome. We will learn about what makes modern websites look so nice, and how to use bootstrap to make our websites look nice.

Overall, this course has everything you need. We will walk you through installation, show you how bootstrap is structured, show you different themes, elements, and so much more. By learning the essentials of bootstrap, this course also teaches you the do's and don'ts of web design. Bootstrap makes web design easy and fast, two things that busy people may need in a course.

I hope that you consider purchasing this course, feel free to DM me with any questions at all.

So what are you waiting for? Let's get started!

Who is the target audience?
  • Wants to get started with Bootstrap web design quickly
  • Wants to learn how to create custom Bootstrap applications
  • Wants to master numerous features in Bootstrap 4
  • Does not want to waste time or money on a course
Students Who Viewed This Course Also Viewed
Curriculum For This Course
24 Lectures
01:05:38
+
Introduction
7 Lectures 09:39

Hello everyone! This is just a quick little lecture on getting you introduced to the course before we start learning bootstrap.

Welcome To The Course!
00:32

A look into the main structure of this course. We will be building a landing page with no styling, then add styling from bootstrap 4 to it to create a beautiful landing page.

What We'll Be Building
01:16

Bootstrap is a wildly popular HTML, CSS and JavaScript framework built for making beautiful websites. It is used in hundreds of websites, and in this course we will be working with the latest and greatest bootstrap 4.

What Is Bootstrap?
01:32

This video will be discussing reasons why you should learn bootstrap. Bootstrap is incredibly popular, It is very easy to use and we will be using the latest and greatest bootstrap 4.

Why Should You Learn Bootstrap?
01:15

This article will teach us about what makes websites look great. Every modern looking site uses these 3 s's to make their site look great. With help from bootstrap, you can implement these design tips to our landing page and make it look great.

The 3 S's of Design
01:05

Get the example code so we can modify it in the following videos. We will be using GitHub. If you ever have any problems, refer to the github to get the Bootstrap code.

Getting The Test Code
01:51

In this video, we will import bootstrap into our bare-bones application, to see what it does. You can get the code from the bootstrap 4 docs. This CDN is a little piece HTML code that you have to put in the head tags of your site. By putting the CDN in the head tag, you can add bootstrap styling to your site.

Importing The CDN
02:08
+
Creating The Navbar
2 Lectures 07:00

Let's create a navbar and learn how bootstrap navbars work in the process. A navbar is the center of the sight. It means "navigation bar". By creating a navbar, we have completed one of the essential functions of a modern website. By using Bootstrap 4, we can create a fully functioning and customizable navbar in minutes.

Creating The Navbar
03:26

Now that our navbar is finished, let's fill it up with social media links! We will be taking simple HTML links and applying a little bit of HTML into them to show links to Twitter, Youtube and Github, all perfectly centered and styled with pictures.

Adding Social Media Links To The Navbar
03:34
+
Creating the Carousel
3 Lectures 12:25

We will start with the hardest part of the course, creating a slideshow with bootstrap carousel. The bootstrap carousel is going to give life to our website, showing a comfortable and professional display of information to our site. 

Creating The Carousel
08:07

There is still one thing we have to do to make the carousel work. After fixing the carousel, we will add a little more styling to it, giving it that final vibrant touch.

Fixing The Carousel
01:48

Just add some last minute details to finish our beautiful carousel. The carousel now makes the website look professional, and leaves a great impression on the user.

Finalizing The Carousel
02:30
+
Cards and Columns
7 Lectures 24:13

You may not know what cards are, but they are extremely useful. Cards are a creative bootstrap feature that allow us to display small content in the best way possible. You've probably seen bootstrap cards before!

Introduction To Cards
01:21

Now that we know what cards are, let's create some for our site! These cards will be put in place of the links that we have on our site.

Creating Cards
05:32

Bootstrap columns will prove to be very useful in making our site look amazing. The bootstrap grid system (what we use columns with) is basically bootstrap's claim to fame, and it is even more useful in Bootstrap 4. By putting things into columns, we can better organize our site.

What Are Bootstrap Columns
01:43

Now that we know about columns, it's time to apply them to our site. These columns will give the user space (one of the 3 s's of design) and make the site look less cluttered and more professional overall.

Using Columns on Our Site
03:09

We will now take the cards and finish them up. Our cards will finally be done and put into appropriate columns. We have taken two bootstrap features and used them together to show content in the best way possible.

Finishing The Cards
04:51

The last element we have to style in our site is the form. Bootstrap 4 makes styling forms quite simple. This lecture will focus on styling text forms, as they are by far the most used.

Styling The Form
06:59

The bootstrap grid system can be tricky, if you get stuck at any point, please refer to this lecture or the bootstrap docs.

Reference Guide For The Grid System
00:38
+
Additional Elements
5 Lectures 12:31

Did you know that bootstrap gives us several different button styles? We can use these styles to communicate to the user what each button is for. Cool huh?

Diving Into Buttons
04:16

Make text look super legit by giving it a tag. A tag is simply a string of text assigned to a bootstrap element. You can add a take to a user's name who is an admin, stuff like that.

Tags
02:00

Just like at a sports game, the jumbotron is a big place for us to put in the main content of our site. A jumbotron is like a big card. Originally, the jumbotron was going to be in place of the carousel, but I decided to add both to the course instead.

The Jumbotron
03:05

Bootstrap may seem kind of boring. To give our websites personality, we will add themes to our bootstrap site from bootswatch. There are many websites where you can get bootstrap themes. Bootswatch just happens to be my favourite. If you want a more professional theme, there are many themes that you can purchase online as well.

Bootstrap Themes
02:45

This is just a quick reference (if you need it) of everything we learned about bootstrap in this section.

Reference Guide For This Section
00:25
+
Conclusion
0 Lectures 00:00

Let's make sure that you know everything in this quiz

The Final Test
5 questions
About the Instructor
Adam Eubanks
4.0 Average rating
467 Reviews
15,264 Students
4 Courses
Self Taught Programmer And Learning Enthusiast

I am a self taught programmer and learning enthusiast. My expertise is mainly in Ruby on Rails, Python (including various API's), and Web languages (HTML/CSS, Javascript). I hope that my courses will help students learn things that I had difficulty with in an easier and more fun way. I will make sure to update my courses regularly as technology changes.