Bootstrap 4: Create a landing page

Learn Bootstrap 4 by creating a unique responsive landing page with custom CSS, icons, web fonts and smooth scrolling.
Rating: 4.5 out of 5 (468 ratings)
20,523 students
English
English [Auto]
Bootstrap 4: Create a landing page
Rating: 4.5 out of 5 (468 ratings)
20,525 students
Learn how to create a landing page using Bootstrap 4 (Beta)
Learn how to create a fixed navigation bar
Learn how to use the Scrollspy component from Bootstrap
Learn how to create a jumbotron
Learn how to embed a YouTube video responsively
Learn how to create a carousel
Learn how to create a pricing table with a card layout and list groups
Learn how to create a sign-up form with a modal
Learn how to create a footer with social links, address, dropdown and more
Learn how to use the grid system to create a responsive layout
Learn how to use spacing utilities and more to adjust the layout
Learn how to create a full-size background image with parallax effect
Learn how to add Font Awesome icons
Learn how to use Google Fonts
Learn how to add a smooth scroll effect to the navigation bar

Requirements

  • Basic understanding of HTML.
  • A text editor.

Description

This course is for the beginner who wants to get a quick introduction to the latest version of Bootstrap 4 (Beta) by creating a unique responsive landing page.

You'll learn how to structure different content and make it look great on all device sizes by using a responsive grid.

Bootstrap 4 components:
During the lectures you'll learn how to create the following components:

  • Button
  • Card
  • Carousel
  • Dropdown
  • Form
  • Jumbotron
  • List group
  • Modal
  • Navbar
  • Scrollspy

Bootstrap 4 utilities:
During the lectures you'll learn how to use the following utilities:

  • Colors
  • Display
  • Embed
  • Flex
  • Float
  • Position
  • Screenreaders
  • Spacing
  • Text

But it doesn't stop here! You'll also learn the following:

Styling with CSS
Learn how to apply some custom CSS to create a full-size background image with a simple parallax effect to get the attention of the user.

Adding Font Awesome Icons
Learn how to use the very popular icon font from Font Awesome to make the landing page more interesting.

Using Google Fonts
Learn how to use Google Fonts for headings and other text to make the landing page more unique

Adding smooth scroll
Learn how to implement a smooth scroll JavaScript plugin to create a scrolling animation when navigating the landing page.

Create your own landing page
By the end of this course you'll be able to create your own unique landing page ready to be published to the web.

Teaching style
The teaching style is "follow along" and "learn by example", so I don't explain every class used in the code in depth. If you're looking for that you should check out my other Bootstrap 4 course.

Who this course is for:

  • Anyone who wants to learn how to make a landing page
  • Anyone who wants a quick introduction to the latest Bootstrap 4 (Beta) web framework

Course content

5 sections • 19 lectures • 2h 2m total length
  • About the course
    02:26
  • Installing Bootstrap 4 Beta
    01:59

Instructor

Front-end developer, interaction designer and musician
Jeppe Schaumburg Jensen
  • 4.2 Instructor Rating
  • 858 Reviews
  • 24,858 Students
  • 10 Courses

Hi there,

My name is Jeppe Schaumburg Jensen and I'm a teacher in topics related to front-end development, interaction design, music and productivity.


Front-end development

I started developing websites for desktop computers in 1999 and in 2000 I started developing my first websites for the mobile web as well.

I have been a graduate teaching assistant in an introductory course about web design and development.

I currently work as a front-end developer at one of the biggest global web agencies, Isobar.


Interaction design

I have a Master of Science in Information Technology with a specialization in Interaction Design and User Experience.

I have worked as a user experience designer at the biggest Danish online webshop: Saxo.


Music

When not working with the web I work as a professional musician, mostly playing the drums in various bands. I also consider myself as an expert in using Ableton Live for live performances, with a lot of experience in how to create and use backing tracks.


Productivity

I have spent many hours to improve my workflow and productivity by reading books about the topic and experimenting with different techniques, tools, software and apps.