Mastering CSS Grid 2023 - With 3 cool projects

Course Feature

Cost

Paid
Provider

Udemy
Certificate

Paid Certification
Language

English
Start Date

2019-10-15
Learners

No Information
Duration

No Information
Instructor

Daryl Duckmanton

Add to Favorites

4.6

42,377 Ratings

This course is perfect for anyone looking to master CSS Grid in 2023. It covers all the properties, alignment, responsive web design, grid areas, implicit and explicit grids, animation, and more. You'll learn how to solve basic layout problems, and then move on to more advanced topics such as the Holygrail layout, Media Objects layout, and more. Finally, you'll get to apply your knowledge with 3 real-life application examples, including a Chat UI interface, an Uber Eats Clone Responsive Application, and a YouTube Clone Responsive Application. Mastering CSS Grid 2023 is the perfect course for anyone looking to become a CSS Grid expert.

Show All

Mastering CSS Grid 2023 - With 3 cool projects

Go to class

Course Overview

❗The content presented here is sourced directly from Udemy platform. For comprehensive course details, including enrollment information, simply click on the 'Go to class' link on our website.

Updated in [July 18th, 2023]

This course, Mastering CSS Grid 2023 - With 3 cool projects, is designed to help students learn the fundamentals of CSS Grid. Students will learn all the properties of CSS Grid, how they work, and any gotchas that may arise when using them. Alignment and how it works in CSS Grid, including the alignment of tracks and grid items at the grid container level, will also be covered. Additionally, the basics of responsive web design, such as media queries and how they work with mobile / tablet etc., will be discussed. Grid areas and how it helps simplify responsive web design, the concept of implicit and explicit grids and what the differences are, and animation at a high level and what works currently with CSS Grid will also be covered.

The course will then move on to showing students how to solve basic layout problems, such as column based layout, basic sidebar layout, vertical text alignment, modal alignment, stick footer layout, and formatting form fields. Advanced layout topics, such as the Holygrail layout, the Media Objects layout, a Viewport Friendly Image Gallery, a Responsive Image Gallery, an Animated Sidebar, a Monthly Calendar layout, a Newspaper Cover layout, a Responsive Twitter Clone Layout, and a Responsive Movie Gallery will also be discussed.

Finally, students will have the opportunity to apply their knowledge to three real life application examples: a Chat UI interface, an Uber Eats Clone Responsive Application, and a YouTube Clone Responsive Application. By the end of the course, students will have a comprehensive understanding of CSS Grid and how to use it to create a variety of different layouts.

Course Syllabus

Introduction

Grid Containers and Tracks

Controlling Grid Items

Controlling Alignment

Responsive Grids

Implicit Grids and Autoplacement

CSS Grid Extras

Some Simple Layouts

Some Advanced Layouts

Application 1 - A Chat application UI

Application 2 - A Responsive Uber Eats Clone (Aussie Tucker)

Application 3 - A Responsive YouTube clone

Conclusion

Show All

Pros & Cons

The course is highly informative and provides a lot of information and practice opportunities. Users appreciate the depth of knowledge gained from the course. The instructor explains CSS Grid in an easy and comprehensive manner, making it easy for users to understand and apply in real-world applications.

Some users found it difficult to follow the lectures because the instructor used shortcut snippets for HTML and CSS, making it challenging to understand and apply the CSS Grid system in the three cool projects. The CSS grid lessons in the final three projects are buried in hundreds of lines of cut and pasted code, making it difficult for users to focus on the lessons themselves. This issue is common in many HTML and CSS courses on Udemy, where the balance between real-world examples and teaching the basics becomes a challenge. However, the course provides all the code in a zip file, allowing users to revisit the lessons at their own pace.

Show All

Recommended Courses

CSS Grid - Master CSS Grid + Layout Task + 5 Real World Ex

3.9

Udemy 2,772 learners

Learn More

This comprehensive CSS Grid course will teach you everything you need to know to master the CSS Grid system. Starting from the basics, you will learn how to create responsive layouts without writing a single media query. Along the way, you will complete 5 real world exercises and 1 layout task, all explained with examples and animations. Terminology will be explained in an easy to understand way, and you will have access to downloadable videos and coded files. By the end of the course, you will be confident and ready to rock the world of CSS Grids.

Mastering CSS Grid

4.2

Udemy 2,559 learners

Learn More

This course, Mastering CSS Grid, is perfect for front-end developers and designers who want to learn how to create advanced web page layouts with ease. It covers all the CSS grid properties, from grid display properties to grid alignments, and provides an exercise file for each property. Plus, you'll get to apply all the concepts and properties to a real project designed specifically for this course. So don't wait - enroll now and start mastering CSS Grid!

Responsive CSS: Flexbox and Grid (2023)

4.3

Udemy 2,249 learners

Learn More

This course is perfect for CSS developers who want to update their skills to the most modern level and expand their toolset to flexbox and grids. It will teach you how to create modern, beautiful and real-world websites using just pure CSS. You will learn the fundamentals of UI web design and responsive web design along with best practices. After finishing this course, you will know exactly how to build a beautiful, professional, and ready-to-launch website that looks great on any computer, tablet, and smartphone. So, don't miss out on this opportunity to learn the most up to date and extensive course regarding CSS Flexbox and CSS Grid.

CSS Grid - Build Modern Real World websites fast (+projects)

4.5

Udemy 421 learners

Learn More

Unlock the power of CSS Grid with our comprehensive course, CSS Grid - Build Modern Real World websites fast (+projects). Say goodbye to complex positioning and bloated code. With CSS Grid, you can create stunning website layouts with just a few lines of code and achieve responsive designs without relying on frameworks like Bootstrap. From professional 2D web layouts to widgets, carousels, and navigation bars, our step-by-step tutorials will equip you with the skills to control element positioning, size, and spacing effortlessly.