{"id":127,"date":"2023-11-14T14:09:34","date_gmt":"2023-11-14T19:09:34","guid":{"rendered":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/?page_id=127"},"modified":"2023-12-04T14:05:28","modified_gmt":"2023-12-04T19:05:28","slug":"resources","status":"publish","type":"page","link":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/resources\/","title":{"rendered":"Resources"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-large-font-size\"><em>A few of my favorite web development resources&#8230;<\/em><\/h2>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--40)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-d90399fd wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>Kevin Powell<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">My all time favorite &#8220;CSS Evangelist&#8221;. Kevin Powell has a lovely way of explaining all things CSS, and is an excellent resource for everything from beginner tutorials to new feature deep dives.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<figure class=\"wp-block-embed alignfull is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Understanding the Strange Complexity of CSS and the Web\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Ktw5g24YPWk?start=1&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-top has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-d90399fd wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>Wes Bos<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">Co-host of the web dev podcast <a href=\"https:\/\/syntax.fm\/\" data-type=\"link\" data-id=\"https:\/\/syntax.fm\/\">Syntax<\/a>, Wes Bos offers a huge range of tutorials, articles, exercises and more. His approachable enthusiasm is contagious and the structure of his JS content has always &#8220;clicked&#8221; for me in ways other tutorials don&#8217;t.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<figure class=\"wp-block-embed alignfull is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Make a JavaScript Drum Kit in Vanilla JS! #JavaScript30 1\/30\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/VuN8qwZoego?list=PLu8EoSxDXHP6CGK4YVJhL_VWetA865GOH\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-d90399fd wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>Accessibility Checklist<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">From the A11y Project, this accessibility checklist is a great tool to both check a project and better train yourself as a developer for WCAG compliance.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<iframe width=\"100%\" height=\"315\" loading=\"lazy\" src=\"https:\/\/www.a11yproject.com\/checklist\/\" target=\"_blank\" title=\"Accessibility Checklist\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-d90399fd wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>CodePip Games<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">CodePip is a platform for gamified web development tutorials for beginners. If you&#8217;re just getting started, I highly recommend Flexbox Froggy and Grid Garden to get familiar with CSS basics, which are both free. There are also HTML, JavaScript and SQL games!<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<iframe width=\"100%\" height=\"315\" loading=\"lazy\" src=\"https:\/\/codepip.com\/games\/\" target=\"_blank\" title=\"Code Pip games\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-d90399fd wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>CSS Specificity Calculator<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">Exactly what it says it is &#8211; A visual way to understand CSS specificity. You can paste your own selectors or choose from preset options.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<iframe width=\"100%\" height=\"315\" loading=\"lazy\" src=\"https:\/\/specificity.keegan.st\/\" target=\"_blank\" title=\"CSS Specificity Calculator\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-b6274044 wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>Can I Use?<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">Hands down the gold standard for checking on browser support for CSS, HTML5, JS and SVG features. Heard about a new CSS pseudo-class and wondering if it&#8217;s safe to start implementing? Can I Use has the answers.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<iframe width=\"100%\" height=\"315\" loading=\"lazy\" src=\"https:\/\/caniuse.com\/\" target=\"_blank\" title=\"Can I Use website\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-d90399fd wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>Visual Design Rules<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">A visual guide for basic web design rules. From padding to font sizes to container colors, this one page packs a punch and shows easily digestible examples of each concept. It&#8217;s by no means exhaustive, but a great primer or refresher if you want to get better at web design without a deep dive.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<iframe width=\"100%\" height=\"315\" loading=\"lazy\" src=\"https:\/\/anthonyhobday.com\/sideprojects\/saferules\/\" target=\"_blank\" title=\"Visual Design Rules\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-d90399fd wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>Book: A Common-Sense Guide to Data Structures and Algorithms<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">Want to level up your core programming skills? This book has you covered. Even if you only absorb a handful of concepts, you&#8217;ll come out a better developer. It even helped recursion click for me! <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<figure class=\"wp-block-embed is-type-rich is-provider-amazon wp-block-embed-amazon\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"A Common-Sense Guide to Data Structures and Algorithms, Second Edition: Level Up Your Core Programming Skills\" type=\"text\/html\" width=\"500\" height=\"550\" frameborder=\"0\" allowfullscreen style=\"max-width:100%\" src=\"https:\/\/read.amazon.com\/kp\/card?preview=inline&#038;linkCode=kpd&#038;ref_=k4w_oembed_kiIDTb7UcJh3y2&#038;asin=1680507222&#038;tag=kpembed-20\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-d90399fd wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>Refurbished Affordable Office Chairs<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">An ergonomic work environment is critical to your health, even if you aren&#8217;t dealing with chronic pain like me. Just like a good pair of shoes, a quality office chair is a worthwhile investment. Unfortunately, top of the line chairs are seriously pricey. That&#8217;s where refurbishing comes in handy. For a few hundred bucks you can snag a chair that costs nearly $2k new. After a ton of research, I got a fully loaded Steelcase Leap V2 from Madison Seating for $300. Two years later I couldn&#8217;t be happier!<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-madison-seating wp-block-embed-madison-seating\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"S3rvnBZMd2\"><a href=\"https:\/\/www.madisonseating.com\/\">Home<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Home&#8221; &#8212; Madison Seating\" src=\"https:\/\/www.madisonseating.com\/embed\/#?secret=WO2rGWYrhI#?secret=S3rvnBZMd2\" data-secret=\"S3rvnBZMd2\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.madisonseating.com\/\">https:\/\/www.madisonseating.com\/<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-border-color has-foreground-border-color is-layout-flex wp-container-core-columns-is-layout-d90399fd wp-block-columns-is-layout-flex\" style=\"margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-container-core-column-is-layout-a056fa4a wp-block-column-is-layout-flow\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h3 class=\"wp-block-heading has-normal-font-size\"><strong>Attn: Misophoniacs!<\/strong><\/h3>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\">This product genuinely changed my life. I have serious misophonia (a sound sensitivity disorder that causes certain &#8220;soft sounds&#8221; to trigger the brain&#8217;s fight or flight response). Flare Calmers aren&#8217;t ear plugs. Instead, they gently reduce triggers without blocking other sounds, so you can still be engaged with the world, just less stressed out by it. Highly recommend for shared work spaces where you can&#8217;t isolate yourself.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-bottom is-content-justification-center is-layout-constrained wp-block-column-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Calmer\u00ae\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/cwTL_mxY90g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.flareaudio.com\/en-us\/collections\/calmer\/products\/calmer\">https:\/\/www.flareaudio.com\/en-us\/collections\/calmer\/products\/calmer<\/a><\/figcaption><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A few of my favorite web development resources&#8230; Kevin Powell My all time favorite &#8220;CSS Evangelist&#8221;. Kevin Powell has a lovely way of explaining all things CSS, and is an excellent resource for everything from beginner tutorials to new feature deep dives. Wes Bos Co-host of the web dev podcast Syntax, Wes Bos offers a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-127","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/pages\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":9,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/pages\/127\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/pages\/127\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/wcet.waketech.edu\/abthomas3\/web250\/wordpress\/wp-json\/wp\/v2\/media?parent=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}