Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Bootstrap 4 Single Page Website from Scratch
Rating: 4.3 out of 5(123 ratings)
3,462 students

Bootstrap 4 Single Page Website from Scratch

Build a fully responsive modern website in less than an hour using Bootstrap 4
Created byLaurence Svekis
Last updated 11/2019
English

What you'll learn

  • Apply bootstrap to web design projects
  • Use Bootstrap to develop website rapidly

Course content

2 sections • 21 lectures • 1h 18m total length

  • Introduction to building a website with Bootstrap 41:59

    Master building a modern, fully responsive single page website from scratch with bootstrap 4, using a responsive navigation, grid layouts, images, and pre-packaged components and utilities.

  • Course Resources Setup Environment2:17

    Set up the Bootstrap 4 single-page website environment with Brackets editor, including an HTML page, inline CSS, and a separate CSS file.

  • Basic Bootstrap 4 Template Creation3:20

    Create a basic Bootstrap 4 template from scratch using CDN seeds or downloaded files, replace slim jQuery with the full version, and include Popper and Bootstrap JS.

  • Template Source Code0:09
  • Create Bootstrap NavBar11:08

    Build a responsive bootstrap navigation bar for a single-page website using a toggle button and collapsible content, with data-target and auto margins to align links like home, about, and contact.

  • Source Code Nav0:20
  • Header Section6:30

    Create a header section with custom styling, min-height 1000px, overflow hidden and padding, enabling a parallax effect, using bootstrap container and jumbotron for the heading and cta.

  • Build Home Section7:56

    Create the home section using Bootstrap grid, with two columns, a heading and text, a responsive placeholder image, a parallax background with a translucent overlay, and a navigation id.

  • Webpage Source Code0:52
  • About Me Section7:41

    Build the about me section in a Bootstrap four single-page site using a three-column layout, background colors, images, and text alignment, then enhance with list groups, thumbnails, and responsive utilities.

  • Bootstrap Cards Grid Columns7:55

    Learn to build a product grid using bootstrap cards, incorporating card header, card title, and card text, with optional images in a responsive grid.

  • Project Source Code1:54
  • Create Contact Form Grid7:08

    Build a bootstrap four contact form grid inside a container with labeled full name, email, and message fields using form controls. Add a footer and jQuery animations for section transitions.

  • Project Source Code2:12
  • Footer and Tweak Page3:13

    Finish the page by adding a Bootstrap footer with a container, copyright and contact info, and an optional multi-column layout.

  • Add jQuery Animate7:30

    Learn to integrate the full jQuery library with Bootstrap, use event listeners on navigation links, and implement smooth scrolling animations by calculating offset and animating scrollTop.

  • Source Code Index2:09
  • Source Code CSS0:12
  • Website Overview Bootstrap 42:37

    Overview: create a style page and link the stylesheet to ensure a uniform bootstrap beta v4 look across pages. Verify functionality and appearance, and customize from the included source code.

  • Resources0:18

Requirements

  • HTML Experience
  • CSS expereince

Description

Discover how to build amazing looking fully responsive modern websites from scratch using Bootstrap 4

Explore the 12 grid column layout, see whats new with Bootstrap 4 make use of responsive navbars, and more.  Source Code and links to top resources included to get you started quickly.

Topics Include

  • Parallax background images
  • NavBar collapsing
  • Bootstrap Grid
  • Responsive images
  • Cards header, images, body and text
  • Buttons and colors
  • Background images and text utilities
  • Bootstrap 4 Components
  • Adding jQuery Animation

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.  Bootstrap is an open source toolkit for developing with HTML, CSS, and JS

Taught by an instructor with over 18 years of Web development experience, ready to help you learn Bootstrap 4.  See what you can do with Bootstrap join now!


Who this course is for:

  • Web designers
  • Web developers
  • Anyone who wants to learn how to use Bootstrap

Report abuse