Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Bootstrap

Crash Course HTML5 Template and Bootstrap 4 Bootcamp

Learn the fundamentals of bootstrap 4 and HTML5 template development, for all levels!
Rating: 3.8 out of 53.8 (35 ratings)
10,302 students
Created by Gerrit Vermeulen
Last updated 8/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • How to use or improve their Bootstrap 4 skill
  • Use Bootstrap 4 to enhance your HTML templates

Course content

9 sections • 33 lectures • 2h 39m total length

  • Preview01:10

  • Preview02:01
  • Preview01:49

  • How to include Bootstrap to your html template
    01:34
  • Set up your first hello world template with bootstrap 4
    01:42

  • Introduction to bootstrap 4 documentation
    02:14
  • Break points in Bootstrap 4
    02:12
  • Why is the Grid system important in Bootstrap 4
    00:44
  • The Grid System & container in Bootstrap 4
    11:07
  • Grid system offset in Bootstrap 4
    02:55

  • Preview03:13
  • Preview07:59
  • Slider on Homepage in Bootstrap 4
    04:37
  • Add some content to the website in Bootstrap 4
    13:35
  • Adding a footer in Bootstrap 4
    08:24

  • Preview00:17
  • Preview01:19
  • Koala in Bootstrap 4
    00:36
  • Install NPM in Bootstrap 4
    00:42
  • Install Bootstrap via NPM in Bootstrap 4
    02:00
  • Compiling the custom css in Bootstrap 4
    03:28
  • Changing the default colors
    03:47

  • Colors and buttons in Bootstrap 4
    06:59
  • Typography in Bootstrap 4
    08:08
  • Jumbotron in Bootstrap 4
    02:54
  • Forms in Bootstrap 4
    05:46
  • Modal in Bootstrap 4
    04:33

  • Preview03:06
  • Solution - Login page with Bootstrap 4
    14:55
  • Solution - Registration page with Bootstrap 4
    05:35
  • Solution - Products page with Bootstrap 4
    14:47
  • Solution - Products Modal with Bootstrap 4
    14:16

  • Thank you!
    00:48

Requirements

  • Basic HTML and CSS is a benefit

Description

Why should you use Bootstrap 4?


Let's be honest, creating a template is really hard, especially if you need to create a template that works with all the different screen sizes. From desktop browsers to tablets and mobile devices. It can be horrific, but using bootstrap makes life easier.


  1. It has Fewer Cross-browser bugs

  2. It’s a consistent framework that supports major of all browsers and CSS compatibility fixes

  3. Lightweight and customizable

  4. Responsive structures and styles

  5. Several JavaScript plugins using the jQuery

  6. Good documentation and community support

  7. Loads of free and professional templates

  8. And my most favourite, it has a great grid system


Through this course, I will show you how to use Bootstrap 4 and you’ll be able to customize it.


____________________________________________________________________________


Why is the Grid System so Important?

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.


In the next class, I’ll give a quick overview of how the grid system works


_______________________________________________________________________________________________________________________________________________________


SASS or SCSS introduction


In this section, I’m going to explain what SASS is and what will be covered in this section

__________________________________________________________________________________________________________________________________________________


What is SASS or SCSS?

SCSS is basically just an awesome, more dynamic CSS
Sass stands for Syntactically Awesome Stylesheet

Sass is an extension to CSS


Sass is a CSS pre-processor, it basically means that it takes the scss file and converts it to a normal css file.

Sass is completely compatible with all versions of CSS

Sass reduces repetition of CSS and therefore saves time

Sass is free to download and use


Why Use Sass?


Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.


Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff


Why Use this with Bootstrap?

If you want to change the colour scheme in Bootstrap, for instance changing the primary and secondary colors, SASS will be the way to do this easily.

Before starting any project online, you first need to do a template for it in HTML and CSS.


This part can be really painful, especially if you guys have to make it responsive on every device.


Bootstrap 4 makes life easier and more powerful than ever before!


In this course, I will teach you guys how to use bootstrap and how you can use it to your advantage.


I will show you how to make a basic website in HTML, and how the theming works in Bootstrap.


I will also load more and more content in this course as time goes by.


My Name is Gerrit Vermeulen


I’ve been in online development since 2009 and I have been using bootstrap 4 since 2016


Hope you guys enjoy this course.


Who this course is for:

  • Template developers wanting to learn or improve their skill with Bootstrap 4
  • If you want to start with Template development that's responsive to all different size devices

Instructor

Gerrit Vermeulen
Head of Development
Gerrit Vermeulen
  • 4.3 Instructor Rating
  • 573 Reviews
  • 36,293 Students
  • 2 Courses

I have been in development since 2009, and I am experienced in

Laravel
PHP
MySql
Flutter
VueJs
Javascript
JQuery
HTML5

I live in Namibia, and I've done a lot of projects. Programming is my passion.


I have taught a couple of people before and I get a sense of enjoyment by helping people where I can.


Projects I have done are websites, mobile apps, eCommerce websites, and touch screen software.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.