{"id":2209,"date":"2026-09-29T04:10:35","date_gmt":"2026-09-29T04:10:35","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=2209"},"modified":"2026-09-29T04:10:35","modified_gmt":"2026-09-29T04:10:35","slug":"week-5-6","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2026\/09\/29\/week-5-6\/","title":{"rendered":"Week 5-6"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Over the past two weeks, I\u2019ve been diving deep into modern CSS layout techniques, switching from Flexbox challenges to exploring the power of CSS Grid!<\/p>\n\n\n<a class=\"wp-block-read-more\" href=\"https:\/\/appliedartand.design\/lj\/2026\/09\/29\/week-5-6\/\" target=\"_self\">Read more<span class=\"screen-reader-text\">: Week 5-6<\/span><\/a>\n\n\n<p class=\"wp-block-paragraph\">In the recent modules, we mastered key modern layout tools: CSS Flexbox, CSS Grid, and CSS Positioning. Through practical Flexbox examples, we learned to align elements along the main and cross axes using <code>justify-content<\/code> and <code>align-items<\/code>, dynamically distribute space via <code>flex-grow<\/code>, and manage automatic spacing. Moving on to CSS Grid, we learned to build two-dimensional layouts using <code>grid-template-columns<\/code>, <code>grid-template-rows<\/code>, flexible <code>fr<\/code> units, and <code>gap<\/code> spacing. We also practiced creating complex grids using <code>grid-area<\/code> and grid lines, enabling us to completely alter the visual order of elements independently of the source HTML. Finally, we combined Grid for the page&#8217;s macro-structure and Flexbox for smaller components to create the first draft of our course project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the past two weeks, I\u2019ve been diving deep into modern CSS layout techniques, switching from Flexbox challenges to exploring the power of CSS Grid! In the recent modules, we mastered key modern layout tools: CSS Flexbox, CSS Grid, and CSS Positioning. Through practical Flexbox examples, we learned to align elements along the main and &hellip; <a href=\"https:\/\/appliedartand.design\/lj\/2026\/09\/29\/week-5-6\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Week 5-6&#8221;<\/span><\/a><\/p>\n","protected":false},"author":114,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[283],"tags":[4,22],"class_list":["post-2209","post","type-post","status-publish","format-standard","hentry","category-aad-086-fa26","tag-css","tag-flexbox"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/114"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=2209"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2209\/revisions"}],"predecessor-version":[{"id":2210,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2209\/revisions\/2210"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=2209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=2209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=2209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}