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

Before CSS Grid arrived on the screen, we had to use relative or absolute positioning, floats, clears and 100s of lines of code to achieve a decent website layout. 

All of that’s changed now. 

With CSS Grid, you can layout your website’s design in just a few lines of code, and even make it responsive!

In fact, you can create really complicated website designs with just 10 or so lines of code. That’s how easy it is!

No more frameworks like Bootstrap to make up for the shortcomings in CSS. Become a professional web designer in just a few hours. 

If you know the very basics of HTML and CSS, you’re all set. 

Spend a few hours learning a bunch of CSS Grid syntaxes, and you’ll be creating awesome 2D web layouts in no time at all!

You don’t need to learn a bunch of frameworks to become a pro web designer now!

What will you learn in our course? 

1. How to create professional 2-dimensional web layouts with just a few lines of code

2. How to create and design websites, from simple 2 column blogs to complicated website layouts with multiple columns and rows

3. How to make your website into a full-blown responsive website, without using any external frameworks like Bootstrap.

4. How to create widgets, carousels, applications, galleries, navigation bars, menu items

5. How to control the position, size and spacing of any number of elements you create without collapsing them.

6. How to layout the elements of your website both horizontally and verticallyand change the alignments with a single line of code

7. How to order elements on the page without changing their order in your HTML code.

8. How to create nested website layouts with multiple grid templates inside them – like how it’s done in the real world

9. How to create real world websites with CSS Grid, while also creating website layout mockups you can show your clients (for approval).

What are some real world applications of what you learn in this course?

By applying the concepts you learn in this course, you can code and design:

1. Professional website layouts– from blog layouts to complicated business website layouts with multiple columns and rows 

2.  Pretty much any kind of website design. With the concepts you learn, your imagination is your only limit. You can make the layout as simple or complicated as you want it to be. 

3. Create websites for smart phones and tablets and iPads. Responsive web designing. 

4. Reduce the lines of code in an existing website drastically by applying the CSS Grid properties you learn to redesign it again. 

5. Create portfolio websitesof every kind that can be showcased in your projects and job applications. 

6. Get freelance projectson the fly because you now have a VERY valuable skillset added to your resume. 

7. Create 2 dimensional websites where you can manipulate how every single row and column is laid out in the grid. 

Sky is the limit! You can apply what you learn here anywhere in the web space, in any sphere. 

Your imagination is your only obstacle to how you apply what you learn here in your real world projects. 

How is this course designed? 

Our course has 4 modules, where each module will thoroughly explain the intricacies of one of the concepts in CSS Grid with a wealth of over-the-shoulder examples. 

We’ll be using a real world example to explain the concepts. 

Here are the modules: 

Module 1 – CSS Grid property – This is the foundations module. We’ll look at how to make an element a Grid container so that its child items can be manipulated. We’ll also look at what Grid items are and their significance. In this module, we’ll be looking into how to create grid columns and rowsand how they can be used to layout the website elements in simple ways.

Module 2 – Grid lines – In this module, we’ll look at a very important concept – Grid lines. This concept can be used to create full blown websites that are placed on 2 dimensional grid lines (hence the name). We’ll look at how to use grid lines to create website layouts, and then we’ll create 2 website layout projectsusing Grid lines as well. We’ll also look into how to align grid items or the website’s elements using the various Grid alignment properties. 

Module 3 – Grid Areas – In this module, we’ll look at yet another important concept – Grid areas. We’ll look at how we can use grid areas to create complicated website layouts much easier than grid lines. We’ll be looking at 2 more website layout projectsin this module. 

Module 4 – Create a website – real world project (non responsive and responsive) – In this module, you’ll learn how to create a simple, 2-column business website, one that looks like most of the small business HTML websites out there. You’ll also learn how to make it completely responsive. 

We also cover a lot of examples and projects, like: 

1. Project #1 – We’ll be applying Grid line properties to create the first website layout – it’s a simpler blog layout. 

2. Project #2 – Our 2nd website layout will be created using Grid lines, but we’ll created a more complicated design this time, with 

3. Project #3 – We’ll be using Grid areas to create a very complicated business website layout with just a few lines of code. 

4. Project #4 –  We’ll be using Grid areas again to created a simpler business + blog website layout, but with nested elements this time. 

5. A real world 2-column website with a responsive header, navigation bar, 2 columns (main content and sidebar) and footer. We’ll also make the entire website responsive. 

Why should you choose our course? 

1. We like to be thorough in our teaching. You’ll find everything you need to start creating awesome web designs and layouts with Flexbox code/syntaxes in this course. You won’t have to look anywhere else. 

2. We strongly advocate learning by doing, rather than just listening or reading. Our lectures are filled with a wealth of examples that explain every concept clearly. 

3. If you follow along with our examples in our over-the-shoulder trainings, and create the mini project and apply the properties along with us, you’ll be confident in embarking into the world of Flexbox and web design (responsive and otherwise) by the time you finish our course. You’ll be able to confidently add this as a skill in your resume. 

4. We prefer creating fun projects to explain the concepts and to keep things interesting as well. You’ll learn how to apply the concepts you learn in the course in the real world projects and examples.

So, what are you waiting for? Enroll now and start creating awesome web layouts and designs with CSS Grid syntaxes in no time at all!  

Rating Distribution

• 1 stars: 0 votes
• 2 stars: 0 votes
• 3 stars: 4 votes
• 4 stars: 15 votes
• 5 stars: 29 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!