firstresponsive web layout... Step by Step
Topics covered: responsive images, image cards, parallax background images, Google fonts, carousel cross-fade, and vertical centered text.
Topics covered: 100% height sidebar, card deck, FontAwesome icons, responsive charts and tables using Chart.js, and custom navigation tree menu.
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
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 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.
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.
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.
Download all of the project template files, code snippets, and a responsive breakpoint tester to locally view various responsive breakpoints on one screen.
Learn how to inspect HTML elements and view the styles applied to various components. Get useful tips and tricks to make testing styles easier.
Learn how to host and share a site prototype using GitHub pages and DropBox.
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 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.
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.
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.
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.
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. 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
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!
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.
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, your frontend mentor
P.S. If you ever have any questions, you can always email or call/text me directly at (586) 894-8024.
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. :)