responsive web design tutorial step by step

How is this training unique?

  1. Learn by doing as you build two professional responsive layouts step-by-step
  2. Supplemental reference and tools to become more efficient using the framework
  3. Access to a community so that you can get feedback and help if you get stuck

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 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 workflow necessary to make a responsive website with Bootstrap 4.
  • 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.
  • Learn what's new in Bootstap with a deep focus on Flexbox, Cards, and the grid layout.

What do I need?

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

No Acount Login, Monthly Fees, or Unclickable Links

stack of books with code 404 error and bootstrap tutorial pdf

Isn't it annoying when you watch a video with code and URLS referenced that you have to manually type out? My training will not be published and abandoned, but will be continually updated. And since the book and reference guides are hyperlinked PDF files and not videos, you can save them to your computer (DRM free) and access them at any time.

How my training is different than other online courses

  • PDF Book based training coure allows you to save the files to your computer, print out reference pages to make notes, and use offline.
  • The course does not require a login or monthly fee.
  • Updates are made quickly to the code and reference materials because this is my singluar focus and I am a 1-person business who can move quickly.

Learn How to Build These Two Responsive Layouts Step by Step

responsive homepage tutorial with Bootstrap 4
Responsive Marketing Homepage 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

Responsive 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.

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 Templates, Cheat Sheets, Quick Reference Guides, and Code Files

Bootstrap 4 tutorial pdf

Bootstrap 4 Quick Start Tutorial [pdf Book]

Learn the design process and workflow necessary to build two responsive layouts. In this responsive design tutorial, you will learn the steps to building a responsive website and dashboard with Bootstrap 4.

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.


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

Pricing Supports Bootstrap v4.0.0

The Book

Read on Kindle, browser, or mobile

amazon icon Buy on Amazon

Complete Package Most Popular

The book and the Bootstrap 4 Toolkit

$80 - Buy Now

  • Book in all formats: PDF, mobi, epub
  • Get a collection of cheat sheets, reference, and templates to quickly learn the new components and classes
  • Access to the private community to ask questions

  • Bootstrap 4 Quick Start Book - All formats: PDF, mobi, epub
  • Bootstrap 4 Components Visual Reference pdf
  • FontAwesome Icon Cheat Sheet pdf
  • Project Template Files zip
  • Robin Responsive Design Testerhtml
  • Folder Structure, Hierarchy, and Naming Conventions Worksheet pdf
  • Chrome Developer Tools - Inspect and Test CSS video
  • How to Share Prototypes Fast video
  • Bootstrap 4 Classes Reference pdf
  • CSS Classes Default Values Reference pdf
  • Bootstrap 4 Grid Design PSD Templates and Device Mockup psd
  • Bootstrap 4 Colors Reference pdf
  • Bootstrap 4 Printable Sketch Sheets for Design Wireframing pdf
  • FREE Minor Version Updates
  • Access to closed Facebook Group and Gitter Chat

The Boomerang Guarantee

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

Need help? Email me or you can call/text me directly at (586) 894-8024

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.

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
- 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 responsive web design with Bootstrap 4?

See Pricing

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

Bootstrap 4 Quick Start BootstrapCreative 1.0.0 83

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.

$20.00 | In-stock