Learn how to create your first responsive web layout... 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.

Responsive dashboard tutorial with Bootstrap 4
Responsive Admin Dashboard Tutorial

Topics covered: 100% height sidebar, card deck, FontAwesome icons, responsive charts and tables using Chart.js, 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.

“Learning HTML and CSS is a lot more challenging than it used to be. Responsive web design adds more layers of complexity to design and develop websites.” - Jacob Lett

What will I learn?

  • Learn how Bootstrap 4 makes responsive web design easier to implement.
  • Learn the design process and mobile-first workflow necessary to make a responsive website with Bootstrap 4.
  • Learn important responsive design tips and techniques not covered in the official documentation.
  • Learn frontend web development best practices and get a toolkit to help you save time building and testing responsive layouts. (only available in the Complete Package)
  • Improve the design of your web applications and sites using the Adobe Photoshop templates and responsive sketch sheets. (only available in the Complete Package)

Who is this for?

  • You have never built a website before.
  • You know some HTML & CSS but are new to responsive web design basics.
  • You are a backend developer or programmer and want to improve frontend skills.

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 or Visual Studio Code, internet connection, and Google Chrome installed.

The Problem This Helps You Solve

Learning from the official Bootstrap 4 documentation can be confusing for beginners. You might be asking yourself these questions: "How do I get started quickly?, "How do I make my website look unique and less like Bootstrap's default design?, "How do I test and override default Bootstrap CSS styles?", OR "How do I remember all of class names?"

This training provides supplemental information to help you bridge the gap and quickly learn how to start using Bootstrap 4 in your projects.

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

bootstrap 4 books

Get Both Books [pdf]

Bootstrap Reference Guide and the Bootstrap 4 Quick Start Books. The reference guide contains the most commonly used components and CSS classes. It also contains a full listing of all of the Bootstrap 4 and Bootstrap 3 classes.

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.


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.

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.

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 Use GitHub Pages Tutorial [video]

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

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

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.

bootstrap 4 components visual reference

Bootstrap 4 Components Visual Reference [pdf]

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

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.

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.

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.

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!

Developer Job Search Guide and Portfolio Template

[Bonus] Developer Job Search Guide and Web Developer Portfolio Template [pdf]

The job search guide provides tips to help you find a developer job and walks you through the sales process. The portfolio template is a great way for you to showcase your work experience and skills.

About the Author

The biggest struggle I faced learning Bootstrap was understanding the terminology used in the documentation. As a beginner, a lot of the explanations didn't make much sense. I craved more visual examples and simple explanations. Something like a Bootstrap for dummies or a paint by numbers guide to building responsive layouts using Bootstrap 4.

I created this responsive web design step by step tuorial PDF 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 frontend mentor

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

Common Questions FAQ

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
  • The Bootstrap tutorial pdf makes the information portable and easy to search to find what you are looking for.
  • 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.

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



Back to top

Bootstrap 4 Quick Start: A Beginner’s Guide to Building Responsive Layouts with Bootstrap 4

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

Bootstrap 4 Quick Start Book

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. If you are currently learning HTML & CSS, this book will help you learn how to apply responsive web design fundamentals to your skillset. Category: Web Development and Design book.

BCB4QSTART 9781732205819 Rated 4.5 / 5 based on 5 reviews.
"The Bootstrap 4 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.
$20.00 | In-stock