CSS GRID

CSS GRID training in London from CSS experts

15 %
Discount

when you buy 3 or more courses

The discount will be automatically
applied at the checkout
Looking for a
2-12 months
training?
Choose Web designer
Career Programme

Looking for a 2-12 months training?

Choose

Web designer career programme

Upcoming dates

There are no open public schedule dates for CSS GRID course. We can offer you a private training or arrange a public course for you. Contact us here and we can make arrangements for your course.

Delivery Formats

This course can be attended face to face in an open classrooms, live online virtual classroom remotely from home or office, private one-to-one and on-site for your team at your office.


Course Outline

CSS GRID course overview

This course explains how to create Layouts for web pages using CSS GRID. After completing our CSS GRID courses you will be able to create web pages and complex layouts using CSS GRID yourself.

The complete course is hands-on based. Practical CSS GRID demos and examples during the course will ensure that you become familiar and confident with the use of this new layout system.

This short course is hands-on, instructor-led and classroom based. This training can be taken as a part-time evening course or even on the weekends.


Who is CSS GRID training for?

This course is for you if you are interested in creating website layouts for yourself or for others. This course also helps business owners to get more control and insight into their website layout and structure using CSS grids.


Prerequisites for CSS GRID course


What will I get?

  • Training from professional designers:

    Training Dragon consultants have been implementing professional CSS Grid solutions across a range of websites. Those consultants write and teach our CSS GRID training courses, so their experience directly informs course content.

  • Real-time Practice and Projects:

    Our CSS GRID courses are designed to get you started in creating complex website layouts using CSS GRID system. 

  • Course Material:

    CSS grid electronic notes are included in this course.

  • Course Completion Certificate:

    After completing this training you will receive a CSS GRID course completion certificate.

  • Support and Careers Advice:

    After the course if you have any problems or questions regarding CSS GRID, do not hesitate to contact us. Training Dragon’s trainers and career consultants are expert in their fields and if you need any help with you career choice, please speak to one of our career consultants.


CSS GRID Course Contents

CSS GRID intro

  • CSS GRID layout system introduction
  • aim of CSS GRID
  • CSS GRID is a two dimensional layout system
  • CSS GRID solves many issues of traditional layout techniques

CSS GRID and WebDev tools

  • inspecting grids
  • grid lines
  • grid tracks
  • explicit vs implicit tracks
  • grid cells
  • grid areas

Working with Grid containers

  • what is a grid container
  • display grid vs inline-grid
  • grid-template-rows
  • grid-template-columns
  • the new fr unit
  • min-content and max-content
  • repeat() function
  • auto-fit and auto-fill
  • minmax() and responsive grids
  • grid-template-areas 
  • naming areas
  • grid-template shorthand
  • working with gutters
  • grid-gap
  • grid-column-gap
  • grid-row-gap 
  • justify-items for inline axis
  • align-items for block axis
  • place-items shorthand
  • justify-content for inline axis
  • align-content for block axis
  • place-content shorthand
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow
  • grid as a super shorthand

Working with Grid Items

  • what is a grid item
  • properties that do not work on grid items
  • setting grid items position
  • grid-column-start and grid-column-end
  • grid-column shorthand
  • grid-row-start and grid-row-end
  • grid-row shorthand
  • grid area
  • inline alignment with justify-self
  • block alignment with align-self
  • place-self shorthand

CSS GRID and Flexbox

  • working with css grids and flexbox 
  • main differences between flexbox and css grid

CSS GRID demos

In this course there will not be a complete project but all properties will be demonstrated with practical examples.

At the end of the course an organic library of demos will help students learning and familiarising with CSS GRID topics

 

View Complete Course outline

Daily schedule

The scheme below shows what a typical day at Training Dragon looks like.

10:00 11:30 11:45 13:00 14:00 15:30 15:45
Classroom Activity
This course explains how to create web pages from scratch using different techniques, such as
Tea
Break
Classroom Activity
This course explains how to create web pages from scratch using different techniques, such as
Lunch
Break
Classroom Activity
This course explains how to create web pages from scratch using different techniques, such as
Tea
Break
Classroom Activity
This course explains how to create web pages from scratch using different techniques, such as
Video Placeholder

Looking for a
2-12 months
training?

Choose

Web designer career programme

Our Trainers

Emiliano
Emiliano
Leads our teaching team with many years of experience in teaching web development.
Ross
Ross
Brings many years of Python and Java software development experience to classrooms.
Olu
Olu
Microsoft and Oracle certified developer with years teaching experience in Android, .NET and databases.

Latest Reviews

Frequently Asked Questions

How many maximum people are on my course? 

?
To make sure that personal attention is provided to everyone in the class, we keep our classroom size very small. There are maximum 8 delegates in all our classrooms.
More questions?
We are here to answer them