Skip to the content
Demonstration Videos, or Pages
Exercises
- Emmet Exercise (includes video series)
https://wrmf.ca/posts/emmet-exercise-2020/
- Advanced Selectors (Fela Kuti)
https://wrmf.ca/posts/advanced-selectors-exercise-fela-kuti/
- Basic Grid Layout: Guitar Mania
(Optional element: color-mix or color theming)
https://wrmf.ca/posts/guitarmania-2024-with-color-theming/
- Basic Grid Layout: JazzIcons
https://wrmf.ca/posts/jazzicons-html-mockup-exercise/
- Advanced Grid Layout: The Eatery
Has small part using css subgrid. If you have not covered subgrid, you can skip that requirement, or learn about it here.
https://wrmf.ca/posts/the-eatery-restaurant-menu-wmdd4835-2020-responsive-page/
- CSS Grid Challenge: Faces
(A fun, and potentially maddening, little exercise.)
https://wrmf.ca/posts/code-challenge-faces-2024/
- CSS Subgrid: Friends of Subgrid Step by Step
In this exercise, you will generate all the content via Emmet, following with the videos, to see how powerful subgrid can be.
https://www.loom.com/share/folder/22f787f532b648d09d0df91e2aad3864
- Flexbox Follow-Along Video Series
https://wrmf.ca/posts/flexbox-holy-grail-layout-2021-video-follow-along-exercise
- Grid-O-Flex Exercise
Here, you decide where and when to use flex or grid.
Hint: the heading “borders” are most easily achieved not using positioning but rather the :before and :after pseudo-elements and grid or flex display modes
https://wrmf.ca/posts/grid-o-flex-2023-layout-exercise/
- Flex Hardcore Workout
Get some sleep and drink plenty of fluids before this one.
https://wrmf.ca/posts/flexbox-hardcore-workout-2021/
- Intro to Transitions Step by Step Video Series
https://www.loom.com/share/folder/4a119436046849b4b6a20418ae21c42a
- Advanced Transitions: Root Design Conf Step by Step
Transitions, object fit, blend modes, color-mix, transform-origin, etc. [ download starter files here ]
https://www.loom.com/share/folder/8ee6b4365d4441ea85b414b96513220f
- Pretendco Transitions Exercise
https://wrmf.ca/posts/layout-exercise-pretendco/
- The Walrus Transitions & Animation Exercise
Note: for the animated “border” on hover, the :before or :after pseudo element will be your very good friend.
https://wrmf.ca/posts/walrus-transitions-amp-layout-2024-revision/
- Container Queries Step by Step
https://www.loom.com/share/folder/1060c3ea35474c31899261e0a6eb9482
- Responsible Responsive Design: SRCSet
https://wrmf.ca/posts/srcset-exercise/
- Responsible Responsive Design: SRCSet with Sizes
https://wrmf.ca/posts/responsible-responsive-design-srcset-with-sizes-2/
- JazzClass: Container Queries & SRCSet Exercise
Note: this exercise will make more sense if you go through the container query and responsible responsive design demos.
https://wrmf.ca/posts/jazzclass-com-sign-up-form-exercise-with-container-queries-srcset-and-srcset/
- CSS Blend Modes Tester Exercise
Contains link to loom step-by-step video series.
Topics covered include blend modes, transitions, css custom properties, advanced form styling, modifying classes and custom properties with js in response to form events, etc.
https://wrmf.ca/posts/css-blend-modes-tester/