YoVDO

Bootstrap 4: Create a landing page

Offered By: Udemy

Tags

Bootstrap Courses Web Development Courses Responsive Design Courses Carousels Courses

Course Description

Overview

Learn Bootstrap 4 by creating a unique responsive landing page with custom CSS, icons, web fonts and smooth scrolling.

What you'll learn:
  • 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

This course is for the beginner who wants to get a quick introduction to the latest version ofBootstrap 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 byusing a responsive grid.

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

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

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

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

But it doesn'tstop 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 simpleparallax 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 textto 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 landingpage.

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

Teaching style
The teaching style is "follow along" and "learn by example", so Idon'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.


Taught by

Jeppe Schaumburg Jensen

Related Courses

Front-End Web UI Frameworks and Tools: Bootstrap 4
The Hong Kong University of Science and Technology via Coursera
Build Restaurant Business Website using Google Sites
Coursera Project Network via Coursera
Build Training Website using Google Sites
Coursera Project Network via Coursera
Building High Quality User Experience Using Material UI
NIIT StackRoute via Coursera
Learn Bootstrap
Codecademy