Learn How to Create These Two Layouts Step by Step

responsive homepage tutorial with Bootstrap 4

Topics covered: responsive images, image cards, parallax background images, Google fonts, carousel cross-fade, and vertical centered text.
Click image for animated gif preview

Responsive dashboard tutorial with Bootstrap 4

Topics covered: 100% height sidebar, card deck, FontAwesome icons, responsive charts and tables, and custom navigation tree menu.


What Will I Learn?

  • Learn the history behind responsive design and the Bootstrap framework
  • Learn what's new in Bootstrap 4 and how it has changed from version 3
  • Learn the design process and workflow necessary to build two responsive layouts. You will start by building a prototype and then add custom styles to change the design
  • The Pro package will help you learn frontend development best practices and give you a toolkit to test and build multiple sites
  • The Design package will help you design your Photoshop mockups to align with the Bootstrap 4 grid, typography, and color system

Who This is For

  • Absolute beginner: You have never written one line of HTML/CSS but want to build your first website.
    I recommend the Starter or Pro Package
  • Career transition: You would like to become a web designer or frontend web developer and have some experience writing HTML/CSS.
    I recommend the Pro or Design Package
  • Going responsive: You primarily have built desktop sites but want to go responsive.
    I recommend the Pro or Design Package
  • Just need the highlights: You have used Bootstrap 3 and just need to get up to speed with the new version.
    I recommend the Certification Package

Requirements


bootstrap admin dashboard homepage and contact us form

Build Something Useful

Have you ever followed a tutorial with cat pictures and project examples you could never use?

You spend your precious time building something that you can never really apply to a real world project. In this bootstrap course you will learn how to build a website using Bootstrap 4 step by step.

stack of books with code 404 error and bootstrap tutorial pdf

No More Logins and Outdated Information

Ever read a web development book with outdated information, broken links, and code samples full of errors?

Or have to annoyingly login to a website before viewing the online course? My training will not be published and abandoned, but will be continually updated. And since the book and reference guides are hyperlinked PDF files, you can save them on your computer (no DRM) and even read offline if you need to.

closed facebook group for bootstrap web designers

Get Help If You Need It

A Bootstrap 4 online training course + knowledgeable community

I believe having a place to ask questions is so important when learning. I want us all to learn how to use Bootstrap 4 effectively in our projects to save time and have consistent styles in our websites. You can also get to know other designers and frontend developers in the Facebook group.

Bootstrap 4 Users Toolkit Templates, Cheat Sheets, Video Tutorials, and Code Files


fontawesome icons cheat sheet

FontAwesome Icon Cheat Sheet

Bootstrap 4 no longer has glyphicons so this reference will help you use a great alternative, FontAwesome. The icons are listed in the exact same order as the v3 documentation so its easier to find the icon you are wanting to use.

bootstrap 4 components visual reference

Bootstrap 4 Components Visual Reference

Learn the components visually and common use cases for each with this reference guide. If printed, it could work as Bootstrap flash cards. Also, each component is linked for a deep dive into the documentation.

folder structure

Web Design Primer

A guide to help you achieve code consistency that adheres to best practices. Sections include: What is a URL?, Naming Conventions, Project Folder Structure, Code Guide, Images Guide, and Things I wish I Knew Upfront

bootstrap 4 classes cheat sheet

Robin - Responsive Breakpoint Preview Tool

Chrome DevTools provides a responsive breakpoint preview but it only shows one breakpoint at a time. Online testing tools often won't work due to cross-origin sharing errors. This tool will help you locally test multiple responsive breakpoints in one browser window.

chrome developer tools tutorial

Chrome Developer Tools Tutorial - Inspect and Test CSS

Learn how to inspect HTML elements and view the styles applied to various components. Get useful tips and tricks to make testing styles easier.

github pages prototypes

How to Share Website Prototypes, Fast

Learn how to host and share a site prototype using GitHub pages and DropBox.

project files zip

Project Template Files

Download all of the project template files, code snippets, and a responsive breakpoint tester to locally view various responsive breakpoints on one screen.

bootstrap 4 classes cheat sheet

Bootstrap 4 Classes Cheat Sheet and CSS Default Values Reference

A quick reference for the most commonly used components and CSS classes. This is already a free resource but I am including this for your convenience in case you don't have it yet.

Bootstrap 4 Certificate of Completion Badge

Bootstrap 4 Certificate of Completion Badge

Add a Bootstrap 4 Quick Start digital certificate of completion to your LinkedIn profile or website. This will help you demonstrate your Bootstrap 4 knowlege to prospective employers.

Bootstrap 4 Grid Design Templates

Bootstrap 4 Grid Design PSD Templates and Device Mockup

Bootstrap 4 Adobe Photoshop grid templates for designers. Each PSD template contains color swatches, image placeholders, and typography styles that match the code. Also includes a design comp mockup template with smart objects to show your design in context.

Bootstrap 4 HEX Colors Reference

Bootstrap 4 Colors Reference

This guide will help you quickly reference all of the default colors used by Bootstrap 4. Bootstrap 4 HEX and RGBA color values are provided so you can easily reuse or override these values in your CSS.

Bootstrap 4 Printable Sketch Sheets for Design Wireframing

Bootstrap 4 Printable Sketch Sheets for Design Wireframing

Now you can sketch how your design will perform across responsive breakpoints. A sizing key helps you sketch your design in proper proportions. Includes a design overview page, navbar, and device specific sketch sheets.
Bootstrap 4 Certification Training Exam

Bootstrap 4 Certification Training Exam

Complete a 50 question exam to test your knowledge on responsive web design and Bootstrap 4 Basics. A score of 75% will achieve certification and you will be provided a digital certification badge to add to your website or LinkedIn profile.

It is clear and well structured. A good start for Bootstrap 4 beginners. Uwe, webworker

Why I created this for you


The biggest struggle I faced learning Bootstrap was understanding the terminology used in the documentation. It was written for software engineers. As a beginner, a lot of the explanations didn't make much sense. I craved more visual examples and simple explanations.

I created this course for two reasons: to help make it easier for you to learn the framework, and to help further your career as a web developer.

Let's build a responsive web together!
- Jacob Lett, your teacher

P.S. If you ever have any questions, you can call/text me directly at (586) 894-8024.

A helpful primer in developing responsive layouts with Bootstrap 4. Dan Joseph, Software Engineer

Pricing

Current version: v4.0.0-beta

Change currency / Request other currency

Starter Package

Learn what's new and how to get started

$19 - Buy

₹300 - Buy

Package Includes
  • Bootstrap 4 Quick Start Book pdf
  • FREE Minor Version Updates
  • Access to Facebook Group
  • Bootstrap 4 Classes Reference pdf
  • CSS Classes Default Values Reference pdf

Pro Package Most Popular

Quickly learn and reference the classes

$79 - Buy

₹800 - Buy

Package Includes
  • Bootstrap 4 Certification Exam certificate
  • Bootstrap 4 Components Visual Reference pdf
  • FontAwesome Icon Cheat Sheet pdf
  • Project Template Files zip
  • Folder Structure, Hierarchy, and Naming Conventions Worksheet pdf
  • Chrome Developer Tools - Inspect and Test CSS video
  • How to Share Prototypes Fast video
  • Bootstrap 4 Quick Start Book pdf
  • FREE Minor Version Updates
  • Access to Facebook Group
  • Bootstrap 4 Classes Reference pdf
  • CSS Classes Default Values Reference pdf

Design Package

Improve your design or code quality

$149 - Buy

₹1,000 - Buy

Package Includes
  • Bootstrap 4 Grid Design PSD Templates and Device Mockup Photoshop
  • Bootstrap 4 Colors Reference pdf
  • Bootstrap 4 Printable Sketch Sheets for Design Wireframing pdf
  • Bootstrap 4 Certification Exam certificate
  • Bootstrap 4 Components Visual Reference pdf
  • FontAwesome Icon Cheat Sheet pdf
  • Project Template Files zip
  • Folder Structure, Hierarchy, and Naming Conventions Worksheet pdf
  • Chrome Developer Tools - Inspect and Test CSS video
  • How to Share Prototypes Fast video
  • Bootstrap 4 Quick Start Book pdf
  • FREE Minor Version Updates
  • Access to Facebook Group
  • Bootstrap 4 Classes Reference pdf
  • CSS Classes Default Values Reference pdf

Change currency / Request other currency

Certification Package

Just the exam and certification

$59 - Buy

₹800 - Buy


Classroom Curriculum or Team Package

Want to share this with your team or classroom?

Contact me for more information.


Guarantee: If you are unsatisfied for any reason I will offer you a refund. No questions asked.

The book uses metaphor's throughout to help make technical concepts clear and easier to understand. Max, Web Developer

Bootstrap 4 Quick Start - Free Book Sample

Get Free Book Sample

Sign up for my mailing list, and I’ll send you a free book sample with pages from each major section.

bootstrap tutorial pdf
No spam and you can unsubscribe anytime.

Common Questions FAQ


Yes. The beta version is safe to use in production sites. Beta means things will be added or improved. So when a new beta comes out nothing will break and its up to you if you want to update to new features or enhancements.

If you need to support IE9 and below stick with Bootstrap 3, otherwise Bootstrap 4 will work fine and will continue to be improved.

Compared to other Bootstrap books and courses my training does not teach what is already in the official documentation. It fills in the gaps and teaches you the overall landscape of responsive web design. I believe understanding these fundamental concepts will improve your design and save you precious time gathering scattered knowledge from other sources. If you are able to get a new job or save 1-2 hours of your billable time... how much is that worth to you?

If the price is a stretch due to international exchange rates, email me to try and work something out. My goal is to help you learn.

I am not a software engineer and build mostly marketing sites. So learning from the official documentation was very confusing. I also had a lot of unanswered questions like how to properly use the picture element for responsive images, what is the best workflow to follow the mobile-first principle, and is Bootstrap even necessary?

I have also had the desire to help people through teaching but never in a book form. So I decided to give it a try. :)

  • I do not duplicate the official documentation but try and fill in the knowledge gaps for beginners. After learning the classes you will probably ask the question, "Now what?" My training answers that question and guides you to other areas to make your education more comprehensive.
  • Always updated to the latest version. When you purchase the book new minor release updates will be emailed to you. For major releases, you will get special pricing and the ability to review early drafts.
  • Build real-world examples (dashboard and website homepage) you can use in your own projects
  • You can ask questions and share ideas with other Bootstrap web designers in the closed Facebook Group

Have another question?

Email me and I will answer you as soon as I can. Thank you.

Are you ready to learn responsive web design with Bootstrap 4?




See Pricing Get Free Book Sample

Bootstrap 4 Quick Start BootstrapCreative 1.0.0
30.00