Paul Greenstein

Training courses in Mailchimp, Web Design, Web Development, Photoshop and Illustrator. Expert Consultancy and Development.

Call on 0435 829 914

Send an enquiry

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.

HTML/CSS coding courses now delivered online

These courses are particularly well suited to online delivery via video conferencing and screen sharing. I've adapted my course projects and materials to suit the format, and have delivered several highly successful online courses and webinars.

Online training provides excellent opportunities for you to ask questions, and sessions can be recorded, providing you with an excellent resource to refer to following your training.

I've found that full days can be hard work for all concerned with online training, so I'm happy to split courses into shorter blocks of 2 or 3 hours, based on an hourly rate. Of course, this is all flexible, so do get in touch to discuss your requirements.

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 run

All 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.