Complete CSS Grid course with a real world website project

Course details

Before CSSGrid arrived on the screen, we had to use relative orabsolute positioning, floats, clearsand 100s of lines of code to achieve a decent website layout.

All of that's changed now.

WithCSS Grid, you can layout your website's design in just a few lines of code, and even make itresponsive!

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 CSSGrid syntaxes, and you'll be creatingawesome 2Dweb layoutsin 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 ourcourse?

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 thiscourse?

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 CSSGrid 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 applywhat you learn here in yourreal 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 CSSGrid 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 -CSSGrid property- This is thefoundationsmodule. Well look at how to make an element a Gridcontainerso that its child items can be manipulated. We'll also look at what Griditemsare 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, well 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 morewebsite 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 asimple, 2-column businesswebsite, one that looks like most of the small business HTMLwebsites out there. You'll also learn how to make itcompletely responsive.

We also cover a lot ofexamples 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 usingGrid 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. Areal world 2-column websitewith a responsive header, navigation bar, 2 columns (main content and sidebar)and footer. We'll also make the entire websiteresponsive.

Why should you choose our course?

1. We like to bethorough in our teaching. You'll find everything you need to start creating awesome web designs and layoutswith Flexboxcode/syntaxesin this course. You won't have to look anywhere else.

2. We strongly advocatelearning by doing, rather than just listening or reading. Our lectures are filled with awealth of examplesthat explain every concept clearly.

3. If you follow along with our examples in ourover-the-shoulder trainings, and create the mini project and apply the propertiesalong with us, you'll be confident in embarking into the world of Flexboxand web design (responsive and otherwise)by the time you finish ourcourse. You'll be able to confidently add this as askill in your resume.

4. We prefercreating fun projects to explain the conceptsand to keep things interesting as well.You'll learn how to apply the concepts you learn in the course in the real world projects andexamples.

So, what are you waiting for?Enroll nowand start creating awesomeweb layouts and designs with CSSGridsyntaxes in no time at all!