Home
It is now time to slide into the end of the day.
The labs in this course are top notch. You may not get time to do all of them. In my opinion, the best of the bunch are:
- Lab 3: Working with Grids
- Lab 5: Working with NAV
- Lab 6: Building the site
If you do just those three labs, you'll have a good understanding of responsive design with grids, and you'll also see how a variety of pieces can fit together to create a responsive web page with a nice navigation structure and content.
Please add me on Twitter or subscribe on youtube!
I'm also active on StackOverflow, so don't ever be afraid to tag me on a question on that site.
Happy Bootstrap!
See if you can find 08 third quiz.html in your download and tackle that. Let's take that up at 2:10.
Also, they ask you fill out a course feedback form. If you could say a few kind words, it'd be appreciated:
https://www.webagesolutions.com/eval
Class code: 423846-2266
One thing I always suggest is mentioning any other courses you'd be interested in.
- Maybe a more in depth, Advanced Bootstrap course?
- Maybe a one day deep-dive on jQuery?
- Maybe the ins and outs of Git and GitHub?
You never get it unless you ask!
We will pick up again at 2:10
For readers unfamiliar with the rem unit (standing for “root em”), it provides a way to specify lengths as fractions of the root element’s font size. In practical terms, this almost always means the font size of the element. The most obvious use for rem is replacing em to protect inner element font sizes from being changed by outer elements, thus avoiding the classic nested em scaling problem. But rem effectively operates as a custom adjustable unit, so it can be useful for other things too. https://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing
We have so much material to cover today, you'll need to use all of your lunch hour to do labs. Sorry.
Give the first three labs a try. What you don't finish today, you can always finish up in the evening or later this week. You are allowed to eat lunch.
- Lab 1: Introduction to Bootstrap
- Lab 2: Basic Responsive Design Concepts
- Lab 3: The Grid Layout
We will reconvene at 1pm with some lecture, some demos, some quizzes and more labs!
Short link to this page: shorturl.at/twOUY
First, download and extract the following zip file:
https://github.com/learn-bootstrap-fast/bootstrap-examples/archive/master.zip
Inside this zip there is a file named 01 First Quiz.html Do this quiz before we start class.
You must score 100% on this quiz or better to continue.
Here's how the day looks:
- Morning Quiz 1 & 2
- Introductions
- Responsive Web Design Basics
- Bootstrap Overview
- Quiz #3
- Bootstrap Web Development Techniques
- Bootstrap Components
- Bootstrap and jQuery
- Getting Started
- Flex Containers
- Grid Components
- Responsive Images
- Navigation
- Layout an App
- jQuery
Here's the full download of the entire Bootstrap 5 build:
https://github.com/twbs/bootstrap/archive/v5.0.0-alpha1.zip
Here's the Bootstrap Tutorial:
https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/
Here's a bunch of Bootstrap examples:
https://v5.getbootstrap.com/docs/5.0/examples/
We may play with Sass a little. Check out this video, find the 07 saas-variables-mixins.html file in your download and play with mixins and variables on https://www.sassmeister.com/
Here are a few articles on web page performance that deal with CSS, JavaScript, page weight and load times.
How to solve JavaScript performance issues
Don't let CSS selectors destroy your DOM completion time
How to reduce page weight and improve web page performance