~/web-learning/lesson-tour
What a lesson actually looks like
Before you pay for anything, here is one lesson opened up: what you watch, what you type, and what you check your work against. It comes from a real course on the shelves, and everything described below is what that course includes.
src/layout/unit-3
The lesson screen
Unit 3 of 5, CSS Grid in practice. Each lesson runs about 12 min, streamed in your browser.
- The code is typed, not pasted. You see every keystroke, including the mistakes and how they get spotted and fixed.
- The browser sits next to the editor. After each change the page is reloaded, so you see what the line you just wrote does.
- Pause whenever you like. Lessons are short on purpose: stop, type the same thing in your own editor, and carry on when it works.
~/exercises/unit-3
Then it is your turn
Your turn
Make the cards wrap on their own
Five cards sit in a list. Using CSS Grid on .cards, give them as many columns of at least 220 pixels as the screen can fit, with a 16-pixel gap and no bullets. No media queries.
Open the starter files in your editor, change the CSS, then narrow your browser window to check.
<ul class="cards">
<li class="card">Bread</li>
<li class="card">Cheese</li>
<li class="card">Apples</li>
<li class="card">Honey</li>
<li class="card">Eggs</li>
</ul>.cards {
/* Your turn: as many 220px columns as fit */
}.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
list-style: none;
padding: 0;
}At the end of the unit the finished code is shown and explained line by line, so you can compare it with yours. auto-fill makes as many tracks as fit; minmax(220px, 1fr) stops them going narrower than 220 pixels and shares out the spare room.
localhost:8000/cards.html
- Bread
- Cheese
- Apples
- Honey
- Eggs
Drag the window narrower and the columns drop from three to two to one, without a single media query.
README.md
What you get, and what you do not
A recording can show you a great deal. It cannot look at your screen. Here is the line, plainly, for this course and every other one on the shelves.
| What you get | What you do not get |
|---|---|
| Eight common layouts rebuilt from a sketch: header, cards, sidebar, gallery and more | Videos to download: lessons are streamed only |
| Each layout tested at phone, tablet and desktop width on screen | A live tutor, mentor or scheduled classes |
| A Grid and Flexbox property map | Someone reviewing or marking your code |
| End-of-unit exercises with the finished code shown on screen | A certificate or any accreditation |
| Streamed video lessons, watched online | Job placement, or any promise of work |
| Access for 18 months, details by email within one working day |
$ open layout
Layout with Flexbox and Grid
“Everything lines up on my screen and falls apart on a phone.”