{"id":804218,"date":"2022-04-20T14:00:18","date_gmt":"2022-04-20T14:00:18","guid":{"rendered":"https:\/\/www.wacoca.com\/anime\/804218\/"},"modified":"2022-04-20T14:00:18","modified_gmt":"2022-04-20T14:00:18","slug":"sass-bem-responsive-design-4-hr-beginners-course","status":"publish","type":"post","link":"https:\/\/www.wacoca.com\/anime\/804218\/","title":{"rendered":"Sass, BEM, &amp; Responsive Design (4 hr beginners course)"},"content":{"rendered":"<p><iframe loading=\"lazy\"  width=\"580\" height=\"385\" src=\"https:\/\/www.youtube.com\/embed\/jfMHA8SqUL4\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<br \/>\n\ud83d\udd25 My course: Responsive Design for Beginners! https:\/\/coder-coder.com\/responsive\/<\/p>\n<p>\ud83d\udcbb Become a full-stack web dev with Zero to Mastery: https:\/\/academy.zerotomastery.io\/a\/aff_338z7xnj\/external?affcode=441520_ti97uk6b<\/p>\n<p>In this video I&#8217;ll walk you through the basics of Sass, BEM (block-element-modifier), and the principles of responsive design. This is a standalone course in Sass that&#8217;s taken from my full course, Responsive Design for Beginners.<\/p>\n<p>0:00 &#8211; Intro<br \/>\n0:22 &#8211; What is Sass?<br \/>\n1:17 &#8211; Compiling Sass with VS Code extensions<br \/>\n12:49 &#8211; Sass partials<br \/>\n26:17 &#8211; Sass variables and CSS custom properties<br \/>\n43:45 &#8211; Building the demo responsive website<br \/>\n50:00 &#8211; Sass and BEM<br \/>\n57:08 &#8211; Building the responsive mobile layout<br \/>\n1:04:30 &#8211; Building the desktop layout<br \/>\n1:18:10 &#8211; Setting widths<br \/>\n1:36:08 &#8211; Sass mixins<br \/>\n2:06:35 &#8211; Responsive typography<br \/>\n2:33:24 &#8211; Sass functions<br \/>\n3:03:39 &#8211; Why I use em units in media queries<br \/>\n3:10:49 &#8211; Nesting and BEM<br \/>\n3:35:23 &#8211; Helper\/Utility classes<\/p>\n<p>____________________________<\/p>\n<p>SUPPORT THE CHANNEL<br \/>\n\u2b50 Join channel members and get perks: https:\/\/www.youtube.com\/channel\/UCzNf0liwUzMN6_pixbQlMhQ\/join<br \/>\n\ud83d\udc4f\ud83c\udffd Hit the THANKS button in any video!<br \/>\n\ud83c\udfa8 Get my VS Code theme: https:\/\/marketplace.visualstudio.com\/items?itemName=CoderCoder.codercoder-dark-theme<\/p>\n<p>WANT TO LEARN WEB DEV?<br \/>\nCheck out my courses:<br \/>\n\ud83c\udf1f Responsive Design for Beginners: https:\/\/coder-coder.com\/responsive\/<br \/>\n\ud83c\udf1f Gulp for Beginners: https:\/\/coder-coder.com\/gulp-course\/<\/p>\n<p>RECOMMENDATIONS<br \/>\n\u2328 My keyboard, Vissles V84 &#8212; https:\/\/vissles.com\/?ref=mu96kxst5w &#8212; \ud83d\udd25 get 10% off with code THECODERCODER &#8212;<br \/>\n\ud83d\udcbb  Other gear &#8212; https:\/\/www.amazon.com\/shop\/thecodercoder?listId=1LMCKGUTMVYXD<br \/>\n\ud83d\udcda My Favorite Books &#8212; https:\/\/coder-coder.com\/best-web-development-books\/<br \/>\n\ud83d\udcfa My Favorite Courses &#8212; https:\/\/coder-coder.com\/best-web-development-courses\/<\/p>\n<p>\ud83d\udd3d FOLLOW CODER CODER<br \/>\nBlog &#8212; https:\/\/coder-coder.com\/<br \/>\nTwitter &#8212; https:\/\/twitter.com\/thecodercoder<br \/>\nInstagram &#8212;  https:\/\/www.instagram.com\/thecodercoder<\/p>\n<p>#webdevelopment #coding #programming<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd25 My course: Responsive Design for Beginners! https:\/\/coder-coder.com\/responsive\/ \ud83d\udcbb Become a full-stack web de<\/p>\n","protected":false},"author":4,"featured_media":804219,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[37524,255536,222121],"class_list":{"0":"post-804218","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-japanese-anime","8":"tag-bem","9":"tag-sass","10":"tag-web-development"},"share_on_mastodon":{"url":"","error":""},"_links":{"self":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts\/804218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/comments?post=804218"}],"version-history":[{"count":0,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts\/804218\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/media\/804219"}],"wp:attachment":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/media?parent=804218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/categories?post=804218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/tags?post=804218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}