Learn How to Build These Two Responsive Layouts Step by Step

View Demoresponsive homepage tutorial with Bootstrap 4
One Page Template Tutorial

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

View DemoResponsive dashboard tutorial with Bootstrap 4
Bootstrap Admin Dashboard Tutorial

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

Description

This Bootstrap 4 book and toolkit will teach you how to quickly prototype and build responsive websites and web applications using Bootstrap 4. You will become familiar with the new cards component, setting up the new flexbox grid layout, how to customize the look and feel, and follow the mobile-first development workflow.

You will also learn the history behind responsive design and the reasons why you should use Bootstrap in your projects vs writing CSS styles from scratch.

What will I learn?

  • Learn what responsive web design is, the history behind it, and how the Bootstrap framework makes it easier to implement.
  • Learn the design process and mobile-first workflow necessary to make a responsive website with Bootstrap 4.
  • The Complete Package will help you learn frontend development best practices and give you a toolkit to test and build multiple sites.
  • The Complete Package will help you design your Photoshop mockups to align with the Bootstrap 4 grid, typography, and color system.
  • Learn what's new in Bootstap with a deep focus on Flexbox, Cards, and the grid layout.

Who is this for?

  • You're an absolute beginner and want to become a web developer.
  • You learned HTML and CSS 5-10 years ago but are new to responsive web design basics.
  • You have used Bootstrap before but want to learn new techniques and workflow.

What do I need?

  • Some experience with HTML and CSS is helpful but not necessary.
  • This training course does NOT require knowing Sass, command line, or Photoshop.
  • A text editor like Atom, internet connection, Google Chrome installed.

Get Free PDF Book Sample

Sign up for my mailing list, and I’ll send you a free book sample with an introduction to Bootstrap 4 basics.

Get Free PDF Sample
responsive web design tutorial step by step pdf

Bootstrap 4 Toolkit Videos, Templates, Cheat Sheets, and Quick Reference Guides.


Chrome extensions for developers

[Bonus] 30 Time-saving Chrome Extensions for Web Developers

This PDF contains the 30 Chrome extensions I find extremely helpful when designing and developing websites. Extensions to help you run an HTTP server, autofill forms, toggle media queries, and more!

fontawesome icons cheat sheet

Glyphicons to FontAwesome Icon Cheat Sheet [pdf]

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.
Sneak Preview

bootstrap 4 components visual reference

Bootstrap 4 Components Visual Reference [pdf]

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.
Sneak Preview

folder structure

Web Design and Development Primer [pdf]

A web development tutorial for beginners 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
Sneak Preview

Robin - Responsive Breakpoint Preview Tool [html]

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.
Sneak Preview

bootstrap 4 classes cheat sheet

Bootstrap 4 Classes Cheat Sheet and CSS Default Values Reference [pdf]

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.
Sneak Preview

github pages prototypes

Chrome Developer Tools Tutorial - Inspect and Test CSS [video]

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 [video]

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

Bootstrap 4 Grid Design Templates

Bootstrap 4 Grid PSD Photoshop Templates and Device Mockup [psd]

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.
Sneak Preview

Bootstrap 4 Printable Sketch Sheets for Design Wireframing

Bootstrap 4 Printable Sketch Sheets for Design Wireframing [pdf]

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.
Sneak Preview

Bootstrap 4 HEX Colors Reference

Bootstrap 4 Colors Reference [pdf]

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.

project files zip

Project Template Files [zip]

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

closed facebook group for bootstrap web designers

Get Help When You Need It [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.

Reviews


This course helped me see another perspective with Bootstrap. Your material provided a systematic, easy approach to new technologies. You showed how Bootstrap can first be used as a cookie cutter approach before you start getting crazy with special CSS manipulation. I love all that your material has provided and is a resource if I need to mobilize information quickly. Thank you. Cory C. Bowles, frontend developer beginner
The book uses metaphor's throughout which helps make technical concepts clear and easier to understand. Max, Web Developer
The training documents were great. They got me started quickly and I was able to jump into installing Bootstrap 4 and getting my website framework started. Andrew Diaz, Web Developer
It is clear and well structured. A good start for Bootstrap 4 beginners. Uwe, webworker
A helpful primer in developing responsive layouts with Bootstrap 4. Dan Joseph, Software Engineer

Common Questions FAQ


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

The Boomerang Guarantee:

If you are unsatisfied for any reason I will refund your account quicker than a boomerang. No questions asked.

Have another question?

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

About the Author


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
- Jacob Lett, your teacher

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

Are you ready to learn Bootstrap 4 and responsive design basics?




See Pricing

Bootstrap 4 Quick Start (eBook) Learning Responsive Web Design for Beginners

Bootstrap 4 Quick Start BootstrapCreative 1.0.0 200 Rated 4.5 / 5 based on 5 reviews.
20.00

Bootstrap 4 Quick Start (eBook) Learning Responsive Web Design for Beginners

Bootstrap 4 Quick Start Book PDF

A Step by Step Bootstrap 4 Tutorial for Beginners. This Bootstrap Book PDF and reference templates will teach you how to quickly prototype and build responsive websites using Bootstrap 4. You will become familiar with common components, setting up a grid, and how to customize the look and feel.

Rated 4.5 / 5 based on 5 reviews.
$20.00 | In-stock