bestcourses is supported by learners. When you buy through links on our website, we may earn an affiliate commission. Learn more

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

Learn all the CSS Grid concepts and create professional responsive website designs - multiple website layout projects

4.75 / 5.0
404 students4 hours 18 minutes

Created by DigiFisk (Programming is fun), offered on Udemy

bestcourses score™

Student feedback

4.9/10

To make sure that we score courses properly, we pay a lot of attention to the reviews students leave on courses and how many students are taking a course in the first place. This course has a total of 404 students which left 43 reviews at an average rating of 4.75, which is average.

Course length

9/10

We analyze course length to see if courses cover all important aspects of a topic, taking into account how long the course is compared to the category average. This course has a length of 4 hours 18 minutes, which is pretty short. This might not be a bad thing, but we've found that longer courses are often more detailed & comprehensive. The average course length for this entire category is 7 hours 30 minutes.

Overall score

5.3/10

This course currently has a bestcourses score of 5.3/10, which makes it an average course. Overall, there are probably better courses available for this topic on our platform.

Description

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 vertically and 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 websites of every kind that can be showcased in your projects and job applications. 

6. Get freelance projects on 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 rows and 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 projects using 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 projects in 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!  

What you will learn

  • CSS Grid concepts with multiple projects for practical experience
  • How to create 4+ layouts that can be fleshed out into modern, fully responsive websites
  • How to design blogs, business websites, portfolio websites, etc with just a few lines of CSS grid code
  • How to create professional 2 dimensional web layouts with just a few lines of code
  • How to create and design websites, from simple 2 column blogs to complicated website layouts with multiple columns and rows
  • How to make your website into a full-blown responsive website, without using any external frameworks like Bootstrap.
  • How to create widgets, carousels, applications, galleries, navigation bars, menu items
  • How to control the position, size and spacing of any number of elements you create without collapsing them.
  • How to layout the elements of your website both horizontally and vertically and change the alignments with a single line of code
  • How to order elements on the page without changing their order in your HTML code.
  • How to create nested website layouts with multiple grid templates inside them - like how it's done in the real world
  • How to create real world websites with CSS Grid, while also creating website layout mockups you can show your clients (for approval).

Requirements

  • A laptop or computer
  • A text editor like Notepad or notepad++ or Brackets to write the programs on
  • A very basic understanding of HTML & CSS (just the basic syntax is enough)
Udemy logo
Available on

Udemy

With almost 200,000 courses and close to 50 million students, Udemy is one of the most visited online learning platforms. Popular topics include software development, the digital economy, but also more traditional topics like cooking and music.

Frequently asked questions

  • Price: $94.99
  • Platform: Udemy
  • Language: English
  • 4 hours 18 minutes
CSS Grid - Build Modern Real World websites fast (+projects) thumbnail

bestcourses score: 5.3/10

There might be better courses available for this topic.