CSS: Advanced Layouts with Grid

CSS: Advanced Layouts with Grid

CSS: Advanced Layouts with Grid is an Advanced level study on Developer, produced by the creator, Morten Rand-Hendriksen. This study is an important step for a person who needs to excel in his/her Developer talent. It gives you a thorough grip on Developer, Responsive Design, Web, Web Design, Web Development, CSS, Developer, Responsive Design, Web, Web Design, Web Development and CSS.

Free Download - CSS: Advanced Layouts with Grid
Author Morten Rand-Hendriksen
Publish Date 8/30/2017
Skill Advanced
Duration 3h 21m
Topic CSS
Video Tutorials 53
Last Update 4/1/2019

CSS layouts are becoming less of a puzzle. After decades of hacking CSS to make multicolumn layouts, the CSS Grid Layout module makes page layout predictable. In this course, take a step back from traditional layout models, and learn how to take full advantage of the new capabilities of CSS Grid to build interfaces that are attractive, accessible, and responsive. Join Morten Rand-Hendriksen as he walks through how to create full-bleed layouts, multicolumn layouts, and advanced card-based layouts. He demonstrates how to create dynamic responsive grids that adjust to their available viewport space.

Topics include:

  • Defining a grid
  • Grid lines and units
  • Automatic and manual grid item placement
  • Planning for grid layouts
  • Starting your layouts with pen and paper
  • Multicolumn layouts
  • Full-bleed single column layouts
  • Making the grid responsive
  • Various card layouts
  • Accessible off-screen navigation layouts

CSS: Advanced Layouts with Grid : Video Lessons

  • Welcome1m 11s
  • Using the exercise files1m 18s
  • Prerequisites41s
  • Terminology3m 27s
  • Define a grid4m 16s
  • Grid lines and units5m 14s
  • Automatic grid item placement1m 19s
  • Manual grid item placement7m 45s
  • Named lines5m 22s
  • Grid areas8m 1s
  • Grid gap3m 22s
  • CSS Grid means rethinking web layouts5m 14s
  • Start your layouts with pen and paper2m 44s
  • A new approach to backward compatibility2m 49s
  • Accessibility first1m 54s
  • The challenge48s
  • Overview of the starting point3m 37s
  • Check for grid support2m 5s
  • Create the main grid3m 19s
  • Position items on the grid4m 20s
  • Add a third column for wider viewports5m 59s
  • Breaking the grid3m 55s
  • Justify the grid inside the grid container2m 30s
  • Use white space to perform magic6m 56s
  • Create the shared grid2m 51s
  • Create columns and position grid items3m 48s
  • Make the grid responsive2m 6s
  • Overview of text-based card markup2m 10s
  • Create a grid for each card2m 21s
  • Place the cards on a grid5m 17s
  • Overview of image-based card markup2m 21s
  • Using the grid to stack grid items2m 18s
  • Change the appearance of cards with flex5m 43s
  • Create different-sized grid items2m 10s
  • Create a complex magazine-style grid8m 43s
  • Different off-screen navigation options2m 7s
  • Off-screen to cover navigation overview2m 43s
  • Set up the main grid3m 36s
  • Position the navigation area on the grid4m 15s
  • Hide the navigation area off canvas1m 50s
  • Create a reveal effect using JavaScript3m 45s
  • Improve accessibility of off-screen navigation3m
  • Overview of sliding navigation panel1m 15s
  • Create an overflowing grid3m 30s
  • Slide content in and out of the canvas4m 7s
  • Bonus: Animate the sliding effect6m 53s
  • What are responsive images?6m 38s
  • Now that we have CSS Grid, do I still need to learn Flexbox?7m 29s
  • What are CSS custom properties (variables)?4m 3s
  • How does the calc() function work?3m 20s
  • How does HSL work?4m 48s
  • Conclusion2m 19s

Recommended video tutorials from YouTube.

  • CSS Grid | Real world examples
  • In this video we will transform a design into a HTML/CSS and we will use CSS Grid for the layout. The video it's inspired from: ...

  • DateTime : 2018-11-19 09:37:42
  • Source : Sweetdev
  • CSS Grid Layout Crash Course
  • In this video we will look at the new CSS Grid layout and how to create grid based layouts and alignments. We will look at properties for containers and items.

  • DateTime : 2017-08-01 16:03:58
  • Source : Traversy Media
  • How to build complex layouts using CSS Flexbox and Grid - Part 1 of 3
  • Participate in # UNITEDBYHCL Hackathon : https://goo.gl/Z7oSKK -Learn how CSS Flexbox and CSS Grid can be used to make portfolio layout and how a lot of ...

  • DateTime : 2017-02-09 11:16:10
  • Source : HackerEarth
HELP THE AUTHOR

Please consider buying this course - CSS: Advanced Layouts with Grid directly from the author - Morten Rand-Hendriksen. This way you could help the author create more great content, also you may get personal help.

The links being shared are only for poor students who really cannot afford to pay. So, if you are capable of paying please do consider it once before trying the free download links.

Categorised in: , , , , ,

Kindly note, we have recently migrated to a new server. In case of download links not working at all it means that we are undergoing maintenance at the backend. In such case please try after 24 hours. Also make sure your internet connection is persistant else the file may endup corrupted.