{"id":2468,"date":"2024-05-30T15:12:24","date_gmt":"2024-05-30T21:12:24","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2468"},"modified":"2024-06-03T12:42:43","modified_gmt":"2024-06-03T18:42:43","slug":"new-course-modern-css-layouts-with-css-grid","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/new-course-modern-css-layouts-with-css-grid\/","title":{"rendered":"New Course: Modern CSS Layouts with CSS Grid"},"content":{"rendered":"\n<p>To quote Chris Coyier from his recent post,\u00a0<a href=\"https:\/\/frontendmasters.com\/blog\/what-you-need-to-know-about-modern-css-spring-2024-edition\/\">Modern CSS Features You Need to Know<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/frontendmasters.com\/blog\/what-you-need-to-know-about-modern-css-spring-2024-edition\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"239\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/css-speed.png?resize=1024%2C239&#038;ssl=1\" alt=\"&quot;The speed of CSS development doesn't seem to have slowed down. There is plenty to continue to watch for and look forward to.&quot; - Chris Coyier\" class=\"wp-image-2469\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/css-speed.png?resize=1024%2C239&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/css-speed.png?resize=300%2C70&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/css-speed.png?resize=768%2C179&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/css-speed.png?w=1404&amp;ssl=1 1404w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p>Given CSS\u2019s ever-evolving capabilities, having a robust understanding allows you to build better-looking, higher-performing, and more accessible websites. And Jen Kramer\u2019s new course&nbsp;<a href=\"https:\/\/frontendmasters.com\/courses\/css-grid\/?utm_source=boost&amp;utm_medium=course-announce&amp;utm_campaign=css-grid\">Ultimate CSS Grid &amp; Layout Techniques<\/a>&nbsp;will level-up your layout skills and take you beyond the basics with Grid, Flexbox, Subgrid &amp; Container Queries.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/frontendmasters.com\/courses\/css-grid\/?utm_source=boost&amp;utm_medium=course-announce&amp;utm_campaign=css-grid\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/1600x1066.jpg?resize=1024%2C682&#038;ssl=1\" alt=\"Jen Kramer teaching the new Ultimate CSS Grid &amp; Layout Techniques course\" class=\"wp-image-2470\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/1600x1066.jpg?resize=1024%2C682&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/1600x1066.jpg?resize=300%2C200&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/1600x1066.jpg?resize=768%2C512&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/1600x1066.jpg?resize=1536%2C1023&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/1600x1066.jpg?w=1600&amp;ssl=1 1600w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/frontendmasters.com\/courses\/css-grid\/?utm_source=boost&amp;utm_medium=course-announce&amp;utm_campaign=css-grid\">Ultimate CSS Grid &amp; Layout Techniques<\/a><\/h2>\n\n\n\n<p>Go from zero to layout hero! CSS Grid is the most important tool in a modern web developer&#8217;s toolkit for laying out web pages. With its two-dimensional structure, precise positioning, and overlapping elements, you\u2019ll learn to achieve complex layouts with minimal code. You&#8217;ll also explore advanced techniques like container queries for adaptive components and subgrids for nested layouts. Through hands-on CodePen exercises, you&#8217;ll apply these techniques to real-world projects.<\/p>\n\n\n\n<p>Highlights from the course:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Learn the fundamentals of CSS Grid and when to use it versus Flexbox.<\/li>\n\n\n\n<li>Layout complex design by spanning rows, columns, and areas.<\/li>\n\n\n\n<li>Practice mobile and desktop-first approaches to CSS layout.<\/li>\n\n\n\n<li>Explore responsive image techniques with the srcset and sizes attributes and art-direct your images with the picture element.<\/li>\n\n\n\n<li>Use the latest layout features of CSS including Subgrid and Container Queries.<\/li>\n<\/ul>\n\n\n\n<p>Enjoy the new&nbsp;<a href=\"https:\/\/frontendmasters.com\/courses\/css-grid\/?utm_source=boost&amp;utm_medium=course-announce&amp;utm_campaign=css-grid\">Ultimate CSS Grid &amp; Layout Techniques<\/a>&nbsp;course!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Podcast Episode with Jen Kramer<\/h2>\n\n\n\n<p>We also recorded a podcast episode with Marcy and put it up on YouTube: <a href=\"https:\/\/youtu.be\/hM73wZTucBQ?feature=shared\">Jen Kramer: CSS evolution, teaching @ Harvard extension, no code | The Frontend Masters Podcast Ep.3<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.youtube.com\/watch?feature=shared&amp;v=hM73wZTucBQ\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/jen-podcast-opt.jpeg?resize=1024%2C576&#038;ssl=1\" alt=\"Jen Kramer, an experienced developer who has been educator at the Harvard Extension School and now teaches at Annie Canons\" class=\"wp-image-2471\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/jen-podcast-opt.jpeg?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/jen-podcast-opt.jpeg?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/jen-podcast-opt.jpeg?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/jen-podcast-opt.jpeg?w=1280&amp;ssl=1 1280w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p>The episode is up on&nbsp;<a href=\"https:\/\/open.spotify.com\/show\/6El1Q4QV8OTAJVY2DWKMbo\">Spotify<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/podcasts.apple.com\/us\/podcast\/the-frontend-masters-podcast\/id1710458565\">Apple Podcasts<\/a>&nbsp;as well!<a href=\"https:\/\/www.youtube.com\/watch?v=deybMk7hiuM\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To quote Chris Coyier from his recent post,\u00a0Modern CSS Features You Need to Know: Given CSS\u2019s ever-evolving capabilities, having a robust understanding allows you to build better-looking, higher-performing, and more accessible websites. And Jen Kramer\u2019s new course&nbsp;Ultimate CSS Grid &amp; Layout Techniques&nbsp;will level-up your layout skills and take you beyond the basics with Grid, Flexbox, [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":2470,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[79],"class_list":["post-2468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-courses"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/1600x1066.jpg?fit=1600%2C1066&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=2468"}],"version-history":[{"count":5,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2468\/revisions"}],"predecessor-version":[{"id":2519,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2468\/revisions\/2519"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2470"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}