What you will learn:
- How flexbox works - flexible and fixed size elements.
- Setting flex direction.
- Equal and variable width columns.
- Horizontal and vertical alignment.
- Spacing and distribution.
- Controlling flex element sizing.
- Viewport units - full height layouts and scaleable content.
- CSS Grid terminology and concepts
- Grid Lines, Tracks and Cells.
- How Grid works with other CSS layout techniques - Flexbox, Positioning, Floats.
- Defining a basic grid - creating rows and columns, Gaps
- Controlling row and column sizing.
- Placing content on the grid.
- Using grid template areas to control placement.
- Using repeat() to create rows/columns.
- Ratios with the fr unit.
- Flexible grids using minmax().
- The Auto-placement algorithm.
- Using auto-fill and auto-fit.
- Nested Grids and Subgrid.
- Browser compatibility and fallbacks.
- Using @supports to check browser support for specific features.
- Using prefixing.
- Colour overlay and masking effects with Transparency, Gradients and Animated Filters.
- CSS Animations.
- Positioning and Floats.
- Project: Horizontal menu with Flexbox.
- Project: Flexbox header with vertical centering.
- Project: Repeating Grid with Flexbox cards.
- Project: Mobile 'Hamburger' menu with toggling.
- Project: ‘Mondrian’ style Hero Grid.
- Project: ‘Holy Grail’ whole page Grid layout with Sticky Footer.
- Project: Responsive multi-section Grid with animated robot.
Where and how courses runAll courses are currently being delivered online.
Tailored courses and workshops
Courses can be run as customised workshops for individuals or groups. Workshops are an ideal way to learn exactly the skills you need - workshops are not restricted to a single topic, and can be tailored to suit your specific requirements. We can use actual projects as the basis for your course, so you get things done as you learn. Get in touch on 0435 829 914 or Send an enquiry to find out more about tailored courses and workshops.