A course designed to give you the confidence in applying CSSĀ Grid given different design scenarios.
What you will learn
Day 1: Form CSS Grid Design
Day 2: Multi Colored Centered Boxes CSS Grid Design
Day 3: Timeline CSS Grid Design
Day 4: Nested Grid CSS Design
Day 5: Mobile CSS Grid Design
Day 6: Keyboard CSS Grid Design
Day 7: Diamond CSS Grid Design
Day 8: Split Image CSS Grid Design
Day 9: Responsive Webpage CSS Grid Design
Day 10: Responsive Navigation Dropdown Menu CSS Grid Design
Why take this course?
DoĀ you want to master CSSĀ Grid? Well look no further, in this comprehensive course ā10 Days Of CSSĀ Gridā specifically designed to provide you with full confidence in applying CSSĀ Grid given different design scenarios. The course is structured in a way so that we can start by applying theĀ CSSĀ Grid layout model to some basic designs before gradually moving to more complex designs. In terms of the CSSĀ Grid properties that will be explored this course will not necessarily explain the theory behind them but instead show how they can be used across different projects. Below is an overview of the projects we will cover in this course:
Day 1: Form CSS Grid Design
On Day 1, you will explore how the grid-template-columns property can be used so that we can declare two columns of equal widths.
Day 2: Multi Colored Centered Boxes CSS Grid Design
OnĀ Day 2, you will learn how we can use the grid-template-columns, justify content, align-content and grid-gap properties to achieve a centralized box design layout with different colors.
Day 3: Timeline CSS Grid Design
On Day 3, you will learn how we can use the grid-template-columns, grid-column-gap, justify-self properties to achieve a timeline based layout.
Day 4: Nested CSS Grid Design
On Day 4, you will learn how we can use properties like grid-template-columns, justify-items and align-items to achieve a nested grid design.
Day 5: Mobile CSS Grid Design
On Day 5, you will learn how we can use properties like grid-template-columns, grid-template-rows, grid-auto-rows, grid-row, align-self, justify-items and align-items to construct a generic mobile design.
‘;
}});
Day 6: Keyboard CSS Grid Design
On Day 6, you will learn how we can use properties like grid-template-columns, grid-gap, grid-column, justify-items and align-items to construct a generic keyboard design.
Day 7: Diamond Grid CSS Grid Design
On Day 7, you will learn how to use properties like grid-template-columns, grid-gap and grid-column to create a diamond grid design.
Day 8: Split ImageĀ CSSĀ Grid Design
On Day 8, you will learn how to create a split image grid layout using properties such as grid-template-columns, grid-template-rows, grid-gap and grid-column.
Day 9: Responsive Webpage CSS Grid Design
On Day 9, you will learn how to use properties like grid-template-columns, grid-template-rows, grid-column-gap, grid-template-areas, grid-auto-flow, grid-auto-rows, justify-content, align-self, justify-self, justify-items and align-items to create a responsive webpage grid design.
Day 10: Responsive DropdownĀ NavigationĀ MenuĀ CSSĀ Grid Design
On Day 10, you will learn how to build a responsive navigation dropdown menu using properties likeĀ grid-template-columns, grid-template-rows, justify-items, align-items, justify-content, align-content and justify-self.
By the end of the course, you should have a solid understanding in how you can incorporate the CSSĀ Grid layout model into your own website designs. Enroll now and lets master CSSĀ Grid together.
