Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

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

Name: CSS Grid - Build Modern Real World websites fast (+projects)
Rating: 4.6 (49 reviews)

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

Created byDigiFisk (Programming is fun)

Last updated 11/2021

English

English [Auto],

What you'll 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).

Course content

6 sections • 53 lectures • 4h 18m total length

Introduction4:13
Explore how css grid lets you build professional, responsive website layouts in minutes with minimal code, using grids, rows, columns, areas, and nested grids without frameworks.

Basics of CSS Grid - Display property and grid container4:27
Learn how to turn a container into a grid with the display property and organize header, navigation, content, and footer using grid placements.
Grid items8:10
Explore grid items and grid containers in CSS Grid, create six grid items, apply display grid versus inline grid, and introduce subgrid and two-dimensional layouts with columns and rows.
Grid columns4:09
Learn to design two-dimensional web layouts by manipulating grid template columns to control the number and width of columns, and let rows auto-fit based on items.
Grid columns - part 23:52
Define grid columns with grid template columns using percentages, pixels, and auto. See 50/30/20 or 960px with leftover space, and anticipate fractions.
Grid columns - part 3 - fractions4:37
Explore how to define grid columns with fractions (1fr, 2fr) and the repeat function, using grid-template-columns to create relative widths and predictable grid layouts.
Grid rows5:14
Explore grid rows by using grid template rows to set six distinct row heights, and combine with grid template columns to form a two-dimensional grid with two columns.
Grid rows - part 23:16
Explore how to set grid rows using percentages and fractions in CSS grid, and leverage the repeat property to create multiple rows efficiently for real-world layouts.
Grid auto rows property5:55
Learn how to control row heights with grid auto rows and minmax in CSS grid, delivering uniform, responsive rows that adapt to content and improve layout.
Grid auto rows property - part 22:51
Learn to create space between grid items with CSS grid gap, using grid column gap and row gap, and combine them into a single grid gap property.

Grid lines - intro4:39
Discover how grid lines define positions on a grid, reorder elements, and place items across columns and rows using line numbers, including examples with six columns and two rows.
Grid lines - grid columns and grid rows properties5:43
Discover how to create a six-column, four-row grid and position items with grid-column and grid-row properties, using minmax(100px, auto) for responsive row heights.
Grid lines - grid columns and grid rows properties - part 25:03
Align grid items by grid lines, set grid columns and rows with line numbers, and experiment with gaps and borders to craft a responsive, real-world website layout.
Nested grids4:29
Explore nested grids in CSS, building grids within grids inside a container to reflect real world layouts, with two columns and two rows for sub grids.
Alignment - align items5:01
Learn CSS grid alignment by positioning six grid items in a three-by-two container, using the line items property to align items along the column axis from top to bottom.
Alignment - justify items2:38
Explore how the justify-items property aligns grid items along the horizontal axis with start, end, center, and stretch values, and see how it works with align-items.
Alignment - justify content4:57
Learn how to use justify content to align the grid within its container and manage horizontal space. Explore values such as start, end, space around, space between, and space evenly.
Alignment - align content3:39
Master align-content and justify-content in CSS grid, experiment with fixed row heights, and achieve center, start, end, space around, space between, and space evenly layouts.
Alignment - align self & justify self3:28
Learn how to align individual grid items with align-self and justify-self in css grid, using start, end, center, and stretch, and combine them with overall alignment concepts.
Project #1 - Layout 16:27
Create a first grid layout using grid lines to structure a page with header, navigation, content, aside, and footer, applying an eight-column grid and styled grid items.
Project #1 - Layout 1 - part 25:15
Create an eight by eight CSS grid and define grid-template-columns and grid-template-rows, then position header, navigation, content, sidebar, and footer across specified column spans to build the layout.
Project #1 - Layout 1 - part 34:57
Design a multi-column web layout with CSS grid, assigning grid lines to header, navigation, content, article, sidebar, and footer to build a complete mini site.
Layout 1 code0:08
Project #2 - Layout 24:46
design and build a complex eight-column, two-row css grid layout for project 2, featuring a header, a four-item navigation bar, an image scroll area, product sections, and a footer.
Project #2 - Layout 2 - part 26:29
Build an eight-column, twelve-row css grid with a 960px max width, center body, and white bold text; add colored header, nav, section, article, photos, and footer for visual grid alignment.
Project #2 - Layout 2 - part 37:09
Learn css grid by assigning header, navigation, section, article, and footer across 1 to 9 columns and rows, and apply padding to center content (50px header/footer, 20px nav/article, 150px section).
Project #2 - Layout 2 - part 42:59
Create a navigation bar as a grid with four equal columns, align the four items, and apply padding, borders, background color, and a small gap to match the design.
Project #2 - Layout 2 - part 55:41
Design a three-column CSS grid to display six products across two rows, adjust grid template columns, gaps, padding, and colors, turning the layout into a website with navigation and header.
Layout 2 code0:08

Grid area - intro5:17
Explore grid area in css grid to design elements off the grid using named areas and four-column layouts. Learn to name elements with grid-area for flexible layouts.
Grid area property10:07
Name grid items with grid area and arrange them using grid template areas to build a four-column layout featuring header, nav, article, aside, and footer, with adjustable spacing.
Project #3 - Layout 34:42
Create a complex grid layout with CSS grid areas for a blog page featuring a header, navigation, three posts, and sidebars for newsletter sign-up, featured post, banners, and social links.
Project #3 - Layout 3 - part 27:28
Explore css grid fundamentals by building a six-column layout for a real world website, applying borders, padding, dark background, and named grid areas for header, nav, posts, banners, and footer.
Project #3 - Layout 3 - part 310:28
Master building a real-world layout with CSS grid template areas, mapping header, navigation, blog posts, sign-up, author bio, banners, and social links into a four-column grid in about ten lines.
Layout 3 code0:08
Project #4 - Layout 44:05
Master a simpler grid layout with a nested navigation grid, featuring header, footer, left sidebar, and zones for gallery, content, and product listings.
Project #4 - Layout 4 - part 26:07
Build a real-world website layout with an eight-column CSS grid, a centered 960px max width, and named areas like header, nav, gallery, and blog. Explore grid auto rows.
Project #4 - Layout 4 - part 37:00
Define grid areas for header, navigation, featured product, gallery, blog, what's new, product listings, category, and footer, then adjust column widths, row spans, and grid gaps.
Project #4 - Layout 4 - part 44:42
Convert the navigation into a six-column CSS grid to align all items in a single row, then fine-tune borders, backgrounds, padding, and gaps for a balanced header layout.
Layout 4 code0:08

Real world website project - desktop design - HTML part9:55
Build a real world website project with css grid by creating a simple desktop layout (header, nav, article, sidebar, footer) inside a wrapper container and then introduce responsive adjustments.
Real world website project - desktop design - basic styles4:22
Learn to structure a real world desktop site with CSS grid, apply basic styles like font family, box-sizing, and zero margins, center a 960px wrapper, and optimize header image layout.
Real world website project - desktop design - grid areas4:36
Design a real-world desktop layout using CSS grid by assigning grid areas for header, nav, article, aside, and footer, and defining grid templates with columns and minmax auto rows.
Real world website project - desktop design - aligning it right4:43
Align a desktop layout with CSS grid by mapping header, navigation, article, sidebar, and footer across four columns and four rows using grid areas and a sub grid.
Real world website project - desktop design - more stylings3:38
Learn to style a desktop navigation menu by turning inline links into block-level items with borders, padding, and a hover color change for a polished, responsive minibar design.
Real world website project - desktop design - content and sidebar5:12
Design a desktop layout by styling a content area and sidebar with borders, padding, typography, and centered text, while planning the footer for a cohesive real-world page.
Real world website project - desktop design - footer10:26
Design a footer with CSS grid two columns: copyright and submenu; create a sub grid for the submenu with four columns, adjust borders and typography, and plan for responsive design.
Real world website - non-responsive design code0:08
Real world website project - responsive design7:04
Master mobile responsive design with CSS grid by using a 760-pixel breakpoint and media queries to switch from a four-column layout to stacked header, navigation, article, aside, and footer.
Real world website project - responsive design - part 25:54
Implement a mobile-first responsive layout with CSS grid by stacking items, controlling order and column counts, centering footer text, and refining borders through media queries for desktop and mobile.
Real world website project - responsive design - part 310:40
Learn to build a responsive real-world website with CSS grid and media queries, adjusting grid areas, columns, and borders at a 760px breakpoint to create a mobile responsive layout.
Real world website - mobile design code0:08

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)

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!

Who this course is for:

A fledgling designer who wants to start creating better websites.
Responsive web designer who's stuck in the world of Bootstrap and wants a simpler solution.
Experienced web designer who wants a simpler way of creating website designs and layouts.
Freelancers, employees, students - anyone can take up our course and benefit from it.
Designers and developers who want to create 2 dimensional website layouts in 10 lines of code or less

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

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 4min

Basics of CSS Grid9 lectures • 43min

Grid lines + 2 projects (2 website layouts)19 lectures • 1hr 24min

Grid Areas + 2 projects (2 website layouts)11 lectures • 1hr

Real world project - desktop + mobile websites12 lectures • 1hr 7min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: