Mastering the basics of css grid
•Setting up project and enabling CSS gRid container
•Working with column in css grid
•Creating rows in css grid
•Grid gap: creating gutters in grid layout
•The fr unit
•Important note about %, auto and fr unit
•Super auto-fill and auto-fit
•Nesting grid
•Grid-template property
•CSS grid and Flexbox
•One-dimensional vs. two-dimensional layout
•Box alignment in Flexbox and CSS Grid
•Flexbox can css grid can’t
•Flexbox and css grid together
•Auto-placement in CSS Grid Layout
•Grid auto rows and grid auto columns
•Grid auto flow
•The dense value
•Box alignment in CSS Grid Layout
•Grid item alignment: justify-items and align-items
•Grid alignment: justify-content and align-content
•Single grid item alignment: justify-self and align self
•Project: building responsive coming soon template
•Project- building simple responsive image gallery
•Line-based placement with CSS Grid
•Positioning items by line number
•The grid-column and grid-row shorthands
•Understanding default spans
•Grid area property
•Stretching an item across the grid & counting backward
•Using the span keyword
•Powerful grid template areas
•Understanding grid template areas
•Spanning into multiple cells
•Leaving cell empty
•Grid template property v2
•creating cards using css grid template area
•Project Demo: Real world project with grid template area and media query
•Responsive website project with grid template area and media query
•Layout using named grid lines
•naming grid lines
•Giving multiple names to your lines
•Implicit grid areas from named lines
•Implicit grid lines from grid areas
•Creating multiple lines using repeat function
•CSS Grid functions
•The repeat() function
•The minmax() function
•The fit-content() function
•CSS grids, logical values and writing modes
•Writing modes in css
•Writing mode in grid layout
•Writing mode and line based placement
•[Project] Robotics Website: Building Modern Website with MDL & CSS Grid
•Project file setup
•Building transparent nav header
•Magic drawer and auto close.mp4
•Creating our main hero area
•Working with product section
•Creating vision-1 section
•Creating vision-2 section
•Creating service section and tags
•Adding feature section
•Adding brand section
•Adding blog section
•Robotics contact section
•Creating robotics footer
•Making it responsive in large and medium devices
•Making our robotics looks good in mobile devices
•Making sticky header
•Adding smoothy scroll
•Adding scroll-up button
•Adding some improvement
•[Project] Urdunews Arabic Website: “Right to Left” Website with MDL & CSS Grid
•Setting up project file
•Building main navbar
•Adding drawer
•Building our sidebar [featured news]
•Adding social widget
•Hero area and media
•Creating first row and first column
•Creating row-2 and column-2
•Creating footer
•Making our website responsive
•Making header sticky
•[Project] Resume Website- Building Responsive Website with Bootstrap & CSS Grid
•building fixed sidenav
•Creating main area
•About page
•Experience page
•Education page
•Skills page
•Intrest page
•Contact page
•Resolving few fixes
•Making our project responsive
•Adding smooth scroll
•[Project] Chinese Website: Building “Top to Bottom” Website with CSS Grid
•Setting up project file & building HTML Structure
•Styling our chinese website
•Last thought !!
•