Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
18 Videos (2h 1m)
    • Introduction: About the class

      2:26
    • Introduction: Installing Bootstrap 4

      1:59
    • Components: Navigation

      5:30
    • Components: Jumbotron

      3:05
    • Components: Description

      1:37
    • Components: Trailer

      1:53
    • Components: Showcase

      8:08
    • Components: Features

      2:36
    • Components: Pricing

      4:59
    • Components: Reviews

      3:56
    • Components: Newsletter

      10:54
    • Components: Footer

      10:56
    • Adjustments: Responsive adjustments

      16:25
    • Adjustments: Adjustment with utilities

      17:24
    • Customization: Styling with CSS

      5:11
    • Customization: Adding Font Awesome icons

      14:38
    • Customization: Using Google Fonts

      4:34
    • Customization: Adding smooth scroll

      5:16

About This Class

This course is for the beginner who wants to get a quick introduction to 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.

4

Students

--

Projects

0

Reviews (0)

Jeppe Schaumburg Jensen

Front-end developer and digital designer

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.

See full profile