Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Meditation Personal Transformation Life Purpose Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Design Web Design CSS Grid

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

Master CSS Grid and create responsive layouts. Learn CSS Grid by doing layout tasks and 5 Real World CSS Grid Exercises.
Rating: 3.9 out of 53.9 (87 ratings)
2,766 students
Created by JD Solanki
Last updated 3/2019
English
English
30-Day Money-Back Guarantee

What you'll learn

  • Every concept is explained.
  • 5 Real World Exercises + 1 Layout Task.
  • Explained everything with examples.
  • No theories/talks, just practical stuff.
  • Exercises as milestone. Be master and confident.
  • Learn how to create responsive layouts.
  • Learn with animations & examples.

Requirements

  • Basic HTML & CSS
  • Any Text editor & OS
  • Any Browser (Firefox & Chrome recommended)

Description

Wanna learn & master CSS Grids. You are at the right place. I will teach you CSS grid from scratch. I will cover every concept you will ever find in CSS grids.


Why Choose this course??

  • Every concept is explained

  • 5 Real World Exercises + 1 Layout Task

  • No theories/talks, just practical stuff

  • Explained everything with examples

  • Exercises as a milestone. Which makes you master and confident.

  • Never get bored with my animations & examples.

  • Learn how to create responsive layouts.

  • Terminology explained. So, you don't need to scratch the internet on a new word.

  • English closed captions (correct not auto-generated)

  • Coded files

  • Downloadable Videos



Learn how CSS can give you more flexible grid system. This course will start from scratch with your basic HTML & CSS knowledge.
I will give you every explanations and terminology in best easy way possible with my great animation presentation. So, you won't get confused at any point.

You will learn from basics of CSS grid system and then to some light weight topics which will keep you refreshed and confident in coding.


Course cover 5 real world exercises. You will face each exercise when you are done learning the required concepts to finish that exercise. This will force you in doing code, even if you are lazy. I promise that will be fun.

At one point I will give you layout task so you can practice and try your hands on sample layout. I will not give you layout with content like images and text in it. But, We will create basic layout that can help you later when building layout with images and text based content. And you will learn total 3 different methods to build this sample layout.

Then you will get in more complex stuff where you will learn
- aligning items
- aligning tracks
- what is explicit grids
- how to handle and work with content.


So, in the end when you will finish this course, You will be ready to rock in the world of CSS grids.

You will be able to create complex layouts easily because of exercises you have done. Your mastery will payoff my efforts of creating exercises.


Course update:

- Exercise 1 - Feature Section

- Exercise 2 - About Us Section

- Exercise 3 - Blog page Layout

- Exercise 4 - Products Page (responsive)

- Exercise 5 - Blog page Layout (responsive)


At the end we will learn most important thing now a days, Responsive layout.
We will learn how to build responsive layout using CSS grid system without writing even single media query.


Don't overthink. Trust me and enroll in this most comprehensive CSS grid course. See you in the course.

Who this course is for:

  • HTML & CSS beginners (Not for absolute beginners - Basic HTML & CSS required)
  • Front-end developers who want to learn CSS grid system instead of third party grid system

Course content

3 sections • 25 lectures • 2h 40m total length

  • Preview02:04
  • Preview02:33

  • Preview01:40
  • Preview05:30
  • Using Percentage And Repeat
    03:38
  • Using fr Unit
    03:56
  • Exercise - 1 - Feature Section
    11:38
  • Changing Position Of Grid Items
    05:08
  • Spanning & Overlapping Grid Items
    07:17
  • Exercise - 2 - About Us Section
    07:31
  • Preview01:03
  • Task Solution
    09:23
  • Exercise - 3 - Blog Page Layout
    12:48

  • Using Grid Area Names
    09:32
  • Using Grid Line Names
    09:54
  • Implict & Explict Grids
    05:54
  • Aligning Items Inside Grid Area
    07:01
  • Aligning Tracks Inside Grid Container
    08:31
  • Working With Content
    06:22
  • Responsive Layout
    08:26
  • Exercise - 4: Responsive Products Section
    10:34
  • What We Missed
    08:28
  • Overview
    02:29
  • Exercise - 5: Responsive Blog Page Layout
    07:39
  • Last Words
    01:30

Instructor

JD Solanki
Web developer
JD Solanki
  • 3.9 Instructor Rating
  • 87 Reviews
  • 2,766 Students
  • 1 Course

Hi, My self JD Solanki and I love teaching and learning something new.

I have joined Udemy to teach you and help you improve your skills,

I am Web Developer and besides that I love python language. So, I also like teaching python and web development. And this is the best thing I figured out to teach as many students as possible.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.