responsive web design tutorial step by step

How you can avoid the knowlege gap

I have had a few of these "knowledge gaps" throughout my career and they have left scars. Going from absolute beginner to your first job as a frontend developer is a big leap.

It’s only natural to have some knowledge gaps along the way...

but if you could avoid some wouldn’t you?


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.

Who is this for?

You're an absolute beginner and want to become a web developer.

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 eBook 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 eBook]

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.
Get pdf book sample

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

bootstrap 4 reference

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

chrome developer tools tutorial

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.

code review or design critique

Code Review or Design Critique [1-on-1 coaching]

When you are learning something new it is extremely helpful to have someone review your work and provide feedback. If you purchase the design package, I will work with you directly to improve your code quality or your design. 1 hour coaching maximum

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.

Testimonials


Pricing

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

Just Updated! v4.0.0-beta.2

Change currency

Starter Package

Bootstrap 4 tutorial pdf

  • Learn responsive design basics
  • Learn how to build two responsive layouts with Bootstrap 4

  • Bootstrap 4 Quick Start Book pdf
  • FREE Minor Version Updates
  • Bootstrap 4 Classes Reference pdf
  • CSS Classes Default Values Reference pdf

$19 - Buy

₹250 - Buy

Pro Package Most Popular

Quickly learn and reference the classes

  • Learn responsive design basics
  • Learn how to build two responsive layouts with Bootstrap 4
  • Get a collection of cheat sheets, reference, and templates to learn the new components
  • Ask questions in the community

  • 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
  • Access to closed Facebook Group
  • Bootstrap 4 Quick Start Book pdf
  • FREE Minor Version Updates
  • Bootstrap 4 Classes Reference pdf
  • CSS Classes Default Values Reference pdf

$79 - Buy

₹650 - Buy

Design Package

Improve your design or code quality

  • Learn responsive design basics
  • Learn how to build two responsive layouts with Bootstrap 4
  • Get a collection of cheat sheets, reference, and templates to learn the new components
  • Ask questions in the community
  • Get Photoshop grid templates, printable sketch sheets, and colors reference to help improve the frontend of your sites
  • One design critique or code review by Jacob Lett

  • Design or Code Review by Jacob Lett 1-on-1 coaching
  • Bootstrap 4 Grid Design PSD Templates and Device Mockup Photoshop
  • Bootstrap 4 Colors Reference pdf
  • Bootstrap 4 Printable Sketch Sheets for Design Wireframing pdf
  • Code Review or Design Critique with Jacob Lett 1-on-1 coaching
  • Access to closed Facebook Group
  • 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 Quick Start Book pdf
  • FREE Minor Version Updates
  • Access to Facebook Group
  • Bootstrap 4 Classes Reference pdf
  • CSS Classes Default Values Reference pdf

$249 - Buy

₹1200 - Buy


The Boomerang Guarantee

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

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.

I realize a dollar in the United States is not the same as a dollar in a developing country. If you would like to purchase a package just email me and let me know a price that would work for you. My goal is to help you learn and not exclude you.

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 Get Free Book Sample

Bootstrap 4 Quick Start BootstrapCreative 1.0.0
30.00