Paul Greenstein

Training courses in Mailchimp, Web Development, Photoshop and Illustrator. Email Template Coding

Call on 0435 829 914

CSS Grid and Flexbox

This one is for coders who want to leverage the latest and most powerful CSS layout and design modules. You'll learn how and when to combine Flexbox and Grid to create complete page layouts, navigation, UI and media elements that would previously have been impossible to achieve. We also cover a range of CSS 'tricks' and techniques including Keyframe Animations, Masking, Transforms, Positioning, Toggling a menu with CSS and more.

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.

Tailored courses and workshops delivered online or face to face

Workshops are an ideal way to learn exactly the skills you need - workshops are tailored to suit your specific requirements. We use live projects as the basis for your course, so you get things done as you learn.
Workshops are charged on an hourly rate - you book the number of hours you need.
Get in touch on 0435 829 914 or Send an enquiry to find out more about tailored courses and workshops.