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 CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift 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
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-03-30 06:15:27
30-Day Money-Back Guarantee
Development Web Development Bootstrap

Master Bootstrap 5 and code 6 projects

Learn about all the parts of Bootstrap 5 using Learning Kit, quizzes and coding exercises and code 6 projects (17 pages)
Rating: 4.5 out of 54.5 (67 ratings)
552 students
Created by Jeppe Schaumburg Jensen
Last updated 4/2021
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Learn how to create and use all components, helpers and utilities of Bootstrap 5
  • Practice with a special built Bootstrap 5 Learning Kit (200+ source files)
  • Practice with 38 coding exercises featuring more than 200 automated tests against your code
  • Master the latest version: Bootstrap 5 Beta 2 (from February 2021)
  • How to create fluid and responsive layouts
  • How to use breakpoints and the grid system
  • How to structure all kinds of content
  • How to build all of the 22 components
  • How to use all of the 7 helpers
  • How to use all of the 14 utilities
  • How to create 6 different projects
  • How to customize Bootstrap 5
  • Accessibility best practices

Course content

16 sections • 206 lectures • 19h 52m total length

  • Preview01:47
  • Preview08:23
  • Preview08:02
  • Starter templates
    00:14
  • Guide to taking this course
    05:19
  • Preview06:11
  • About Bootstrap
    4 questions

  • Understanding layout
    03:09
  • Container
    03:10
  • Container
    1 question
  • Fluid container
    1 question
  • Grid
    18:09
  • Columns
    15:19
  • Gutters
    08:47
  • About layout
    3 questions

  • Typography
    14:50
  • Normal headings
    1 question
  • Inline text elements
    1 question
  • Lists
    1 question
  • Preview08:11
  • Images
    1 question
  • Tables
    16:39
  • Figures
    02:39
  • Figures
    1 question
  • About content
    2 questions

  • Overview
    09:49
  • Preview09:18
  • Select
    06:18
  • Checks and radios
    15:31
  • Range
    03:14
  • Preview19:14
  • Floating labels
    07:47
  • Layout
    18:47
  • Validation
    14:06

  • Accordion
    07:42
  • Alerts
    07:21
  • Success alert
    1 question
  • Alert with matching link
    1 question
  • Alert with additional content
    1 question
  • Dismissible alert
    1 question
  • Badge
    05:30
  • Default badge
    1 question
  • Pill badge
    1 question
  • Breadcrumb
    05:05
  • Breadcrumb
    1 question
  • Preview14:57
  • Buttons
    1 question
  • Button group
    09:25
  • Card
    30:49
  • Preview16:38
  • Close button
    02:39
  • Close button
    1 question
  • Collapse
    07:32
  • Dropdowns
    20:26
  • List group
    19:31
  • Preview19:04
  • Navs and tabs
    20:18
  • Navbar
    33:55
  • Pagination
    08:32
  • Popovers
    13:09
  • Standard popover
    1 question
  • Popover variations
    1 question
  • Progress
    09:37
  • Progress
    1 question
  • Scrollspy
    07:55
  • Preview10:28
  • Toasts
    14:43
  • Tooltips
    11:08
  • Standard tooltip
    1 question
  • Tooltip variations
    1 question
  • About components
    9 questions

  • Clearfix
    01:46
  • Clearfix
    1 question
  • Colored links
    02:08
  • Colored links
    1 question
  • Preview07:10
  • Ratio
    1 question
  • Position
    05:37
  • Position helpers
    1 question
  • Visually hidden
    02:22
  • Visually hidden
    1 question
  • Visually hidden focusable
    1 question
  • Preview03:05
  • Text truncation
    01:34

  • Background
    03:51
  • Background color
    1 question
  • Preview08:57
  • Borders
    1 question
  • Border-radius
    1 question
  • Colors
    02:13
  • Text color
    1 question
  • Display
    09:16
  • Display
    1 question
  • Flex
    27:22
  • Float
    04:27
  • Float
    1 question
  • Preview05:04
  • Overflow
    03:06
  • Position
    22:44
  • Preview02:02
  • Sizing
    05:56
  • Sizing - width
    1 question
  • Sizing - height
    1 question
  • Spacing
    09:53
  • Spacing
    1 question
  • Text
    11:11
  • Vertical align
    04:01
  • Vertical align
    1 question
  • Visibility
    01:46
  • Visibility
    1 question
  • About utilities
    5 questions

  • About this section
    03:43
  • Compiling Sass with Koala
    03:33
  • Introduction to the Bootstrap Sass files
    04:01
  • Default import and compilation
    04:44
  • Global options: Spacer
    02:01
  • Global options: Border radius
    01:28
  • Global options: Box shadow
    02:15
  • Global options: Gradients
    01:46
  • Global options: Transitions
    01:25
  • Global options: Caret
    01:25
  • Global options: Button pointers
    01:06
  • Global options: Validation icons
    01:30
  • Global options: Negative margins
    02:01
  • Global options: Important utilities
    02:47
  • Colors: Colors overview
    08:14
  • Colors: Add to theme colors
    03:52
  • Colors: Remove from theme colors
    01:57
  • Colors: Defining color palette
    02:57
  • Layout: Breakpoints
    03:15
  • Layout: Container
    02:11
  • Layout: Grid
    02:15
  • Content: Figures
    01:16
  • Content: Images
    01:45
  • Content: Tables
    02:34
  • Content: Typograhy
    09:04
  • Forms: Range
    01:30
  • Components: Breadcrumb
    01:20
  • Components: Card
    01:26
  • Components: Carousel
    01:23
  • Components: Modal
    02:47
  • Components: Progress
    01:19
  • Components: Spinners
    01:12
  • Helpers: Ratio
    02:49
  • Utilities: Borders
    02:26
  • Utilities: Position
    02:45
  • Utilities: Sizing
    02:56
  • Utilities: Spacing
    03:02
  • Utility API
    17:45

  • Bootstrap Icons
    17:59

  • Project 1: Portfolio
    00:04
  • Project 2: Resume and CV Page
    00:02
  • Project 3: Knowledge Base
    00:03
  • Project 4: Survey
    00:06
  • Project 5: Landing Page
    00:01
  • Project 6: Small Business Website
    00:03
  • How to use the project resources
    03:56
  • Keeping projects up to date
    00:43
  • Plugins used in the projects
    00:21
  • Downloading and installing Font Awesome
    04:49

Requirements

  • Basic understanding of HTML
  • A code editor and a browser

Description

ABOUT

Bootstrap - the world's most popular front-end frameworks!

This course covers all the different parts of the latest version of the world's most popular front-end framework, Bootstrap 5 Beta 2 from February 10, 2021. Bootstrap has been used on millions of websites around the world and have been carefully developed to cover a wide range of typical user interfaces.

Web pages built with Bootstrap 5 works across all kinds of devices, browsers and screen sizes while also taking care of accessibility and a clean and modern design.

This course is for the beginner who want to learn Bootstrap 5 from the bottom up. It goes through all the different parts, but each lecture can be watched independently.

Finally, I will walk you through how to create 6 different projects using Bootstrap 5.

After learning about all the different parts you will learn how to customize and extend Bootstrap 5 with Sass. First of all, I will show you how to compile Sass with the Koala app and introduce you to the Bootstrap 5 Sass files. Then I will show you many examples of how you can customize and extend Bootstrap 5 by changing global options as well as changing the settings and styles for color, layout, content, forms, components, helpers and utilities.

PROJECTS

Learn to build the following projects using Bootstrap 5:

  • Project 1: Portfolio

  • Project 2: Resume and CV Page

  • Project 3: Knowledge Base

  • Project 4: Survey

  • Project 5: Landing Page

  • Project 6: Small Business Website

LEARNING STYLE

More than just video lectures

In addition to the video lectures this course contains the following kinds of learning materials:

  • Bootstrap 5 Learning Kit:
    Downloadable ZIP file that works offline. More than 200 source files included.
    A custom built learning kit with source code for all parts of Bootstrap 5. Features a reference section with many examples, a practice section, which you can use while learning about Bootstrap 5, and a screencast section for coding along to my screencasts. You can view the source code directly in the browser, copy it to the clipboard and export each example directly to a new CodePen.

  • 38 coding exercises:
    More than 200 automatic tests against your code. This is one of the best ways to learn how to code - no downloads or installations required.

  • 5 quizzes
    Test your knowledge in the end of each section by taking Multiple Choice Quizzes

WHY THIS COURSE?

Why this course instead of other Bootstrap courses?

Wondering why you should choose this course instead of other Bootstrap courses? This course has the following features that makes it stand out among the rest:

  • up to date with the latest version of Bootstrap 5 from February 10, 2020: version 5 Beta 2

  • more features and extra learning materials including coding exercises, quizzes and a custom Learning Kit

  • 1.5+ hours and 35+ lectures teaching how to customize and extend Bootstrap 5 with Sass

  • most lectures can be watched independently of each other

  • has been carefully crafted through more than 300 hours of dedicated work

UPCOMING UPDATES

In the next update in the beginning of 2021 I will walk you through how to create more various different projects using Bootstrap 5. You will learn how to build the following projects:

  • Blog

  • Online Forum

  • ... and more to come

I will also be adding more practice activities like coding exercises, quizzes and more.

TESTIMONIALS

Don't take my word for it – read what other students are saying about this course:

I really like the way the course is being taught. I loved the idea of the learning kit since i just need to give a quick look whenever i need to confirm something im not sure about. The way the teacher teachs is straight and i like it since we are not here to lose time. I wrote jeppe for help and I receive a response so so fast. I really recommend it.
– Diego Muralles

Amazing resource for learning bootstrap
– Gustav Frisholm

Great to see how hands on you show how to use bootstrap!
– Stephan Hoeksema

Excellent course!
– Hector Sanchez

Very well detailed and very well explained!
–
Querino Anschau Junior

Yes, very good. (...) overall this course has been very good and very informative!
– Benjamin Harrison

Excellent course. Learned a lot. Thank you.
– Tim Markle

Très bon cours, pour l'instant tout est ok :)
–
Eric Dekams

Who this course is for:

  • Anyone who wants to learn how to make responsive and modern websites with Bootstrap 5
  • Anyone who wants to learn how to make quick prototypes

Instructor

Jeppe Schaumburg Jensen
Front-end developer, interaction designer and musician
Jeppe Schaumburg Jensen
  • 4.3 Instructor Rating
  • 956 Reviews
  • 25,943 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.

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