165+ Developer Resources I Discovered in 2020-2021
Tags: javascript, beginners, webdev, productivity
Published: 2021-04-26 12:56:03

Since starting to actively code in 2020, I have come across many helpful resources.

Some I have completed and others I still have in the queue. Hopefully, they will be helpful to you as well! 



####Resource Types
🎓 = Complete course on a subject(s) 
🧰 = Tool that makes development easier 
🧐 = Single article or video on a subject(s)


<a name="top"></a>
#Resources Lists
###• [HTML](#htmlSection)
###• [CSS](#cssSection)
###• [JavaScript](#jsSection)
###• [React](#reactSection)
###• [WordPress](#wpSection)
###• [Git & CLI](#gitSection)
###• [Hosting](#hostingSection)
###• [Optimizations](#optimizeSection)
###• [Databases](#databaseSection)
###• [MISC Web Dev](#miscSection)
###• [Career](#careerSection)
###• [Design](#designSection)

---


<a name="section1"></a>
#HTML Resources

|  # | Title                                                                                                  | My Thoughts                                                                                                 | Type |
|:--:|--------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------|------|
|  1 | [Alt Text](https://moz.com/learn/seo/alt-text)                                                         | Loved how it gave examples of what good alt text looks like.                                                |   🧐  |
|  2 | [HTML: `<!DOCTYPE>` tag](https://www.techonthenet.com/html/elements/doctype_tag.php)                     | Especially helpful when I was first learning HTML syntax                                                    |   🧐  |
|  3 | [W3S HTML5 Semantic Elements](https://www.w3schools.com/html/html5_semantic_elements.asp)              | Great quick intro to why everything shouldn't be in a `<div>`.                                              |   🧐  |
|  4 | [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)               | Ready to go to the next level? This guide goes even deeper in the many HTML elements.                       |   🧐  |
|  5 | [New Structural Elements in HTML5](https://dev.opera.com/articles/new-structural-elements-in-html5/)   | This guide really helped me understand elements like `<figure>` and `<figcaption>`                          |   🧐  |
|  6 | [HTML5 Periodical Table](https://websitesetup.org/html5-periodical-table/)                             | I love how interactive, yet simplified this approach is to learning the elements.                           |   🧐  |
|  7 | [Scripts: async, defer](https://javascript.info/script-async-defer)                                    | This taught me different ways to load JS into html files, drastically improving performance.                |   🧐  |
|  8 | [Learn to Code HTML & CSS](https://learn.shayhowe.com/html-css/)                                       | Took this course to prepare for the bootcamp. Great intro to HTML.                                          |   🎓  |
|  9 | [Learn to Code Advanced HTML & CSS](https://learn.shayhowe.com/advanced-html-css/)                     | I really enjoyed the above beginner course and looking forward to taking this one.                          |   🎓  |
| 10 | [Derek Banas Handlebars Tutorial](https://www.youtube.com/watch?v=4HuAnM6b2d8)                         | Not technically HTML, but it sure helps you write it efficiently. Looking forward to viewing this tutorial. |   🧐  |
| 11 | [metatags.io](https://metatags.io/)                                                                    | One of my favorite generators for creating meta tags for multiple social media platforms.                   |   🧰  |
| 12 | [A Complete Guide to Links and Buttons](https://css-tricks.com/a-complete-guide-to-links-and-buttons/) | Using the right tool for the right job is never more apparent in this deep-dive comparison article.         |   🧐  |
| 13 | [getwaves.io](https://getwaves.io)                                                                     | Love this tool! Generate svg waves, to create curved separations for page sections!                          |   🧰  |

[Go to 🔝](#top)

---


<a name="cssSection"></a>
#CSS Resources

| #  | Title                                                                                                                           | My Thoughts                                                                                                           | Type |
|----|---------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|------|
| 14 | [Bootstrap Documentation](https://getbootstrap.com/docs/5.0/getting-started/introduction/)                                      | Even if I am not using the framework I love using their documentation for inspiration on common web components.       | 🧐    |
| 15 | [Specifics on CSS Specificity](https://css-tricks.com/specifics-on-css-specificity/)                                            | Great breakdown by CSS-Tricks and has nice graphic examples at the end.                                               | 🧐    |
| 16 | [CSS Box Sizing](https://www.w3schools.com/css/css3_box-sizing.asp)                                                             | Very easy to approach example of how the box-model works.                                                             | 🧐    |
| 17 | [12 tips for amazing CSS animation](https://www.creativebloq.com/advice/tips-for-css-animation)                                 | This has so many good tips on creating cool animations and making sure they are performant.                           | 🧐    |
| 18 | [CSS Layout and Animations](https://designcode.io/css-layout-and-animations)                                                    | Haven't taken this one yet, but can't wait to do so. The course designs are top notch.                                | 🎓    |
| 19 | [Net Ninja SASS Tutorial](https://www.youtube.com/playlist?list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA)                             | This was my first course on SASS and still refer back to it from time to time.                                        | 🎓    |
| 20 | [Learn Sass In 20 Minutes](https://www.youtube.com/watch?v=Zz6eOVaaelI)                                                         | This is great for a first primer into what SASS is.                                                                   | 🎓    |
| 21 | [BEM and SASS: A Perfect Match](https://medium.com/@andrew_barnes/bem-and-sass-a-perfect-match-5e48d9bc3894)                    | This blew my mind when introduced how BEM and SASS could be used together.                                            | 🧐    |
| 22 | [getbem.com](http://getbem.com/)                                                                                                | This gives an overview from the creators of the popular naming convention.                                            | 🧐    |
| 23 | [CSS-Tricks BEM 101](https://css-tricks.com/bem-101/)                                                                           | I love the button examples that this article gives on how to use BEM.                                                 | 🧐    |
| 24 | [BEM by Example ](https://sparkbox.com/foundry/bem_by_example)                                                                  | This explanation on BEM is really good, but I especially like how they have a short and full versions of the article. | 🧐    |
| 25 | [MDN Display Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/display)                                                    | Everything you could ever want to know about the powerful `display` property.                                         | 🧐    |
| 26 | [A Couple of Use Cases for Calc()](https://css-tricks.com/a-couple-of-use-cases-for-calc/)                                      | `calc()` is one of the more powerful features in CSS and this article shows some great use cases for it.              | 🧐    |
| 27 | [Wes Bos CSS Grid](https://cssgrid.io)                                                                                          | You can't argue with free and that Wes Bos is one of the best teachers out there for development.                     | 🎓    |
| 28 | [Wes Bos Flexbox](https://flexbox.io)                                                                                           | See above, but this time for Flexbox                                                                                  | 🎓    |
| 29 | [CSSmatic](https://www.cssmatic.com)                                                                                            | Collection of powerful css generators for gradients, border radius, noise texture and box shadows.                    | 🧰    |
| 30 | [CSS Tricks Position](https://css-tricks.com/almanac/properties/p/position/)                                                    | If I could have access to only one resource for the `position` property, this would be it.                            | 🧐    |
| 31 | [Can I Use?](https://caniuse.com)                                                                                               | This site lets you know the browser support for every property out there.                                             | 🧰    |
| 32 | [yoksel Flex Cheatsheet](https://yoksel.github.io/flex-cheatsheet/)                                                             | I love the layout and way it lets you visually preview the flexbox properties.                                        | 🧐    |
| 33 | [The 30 CSS Selectors You Must Memorize](https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048) | When I feel like getting into the weeds of CSS selectors, (sorry BEM) this is the article I refer back to.            | 🧐    |
| 34 | [CSS Lint](http://csslint.net)                                                                                                  | This tool will check your code and highlight any errors.                                                              | 🧰    |
| 35 | [System Font Stack](https://systemfontstack.com)                                                                                | Predefined font fallback stacks that can be plugged into a project.                                                   | 🧰    |
| 36 | [Neumorphism.io](https://neumorphism.io/#c0b5b5)                                                                                | This tool makes elements look like they are just under the surface of the page.                                       | 🧰    |
| 37 | [Advanced CSS and Sass: Flexbox, Grid, Animations and More!](https://www.udemy.com/course/advanced-css-and-sass/)               | Bought this amazing course on Udemy but haven't gotten a chance to take it yet...one day soon though!                 | 🎓    |
| 38 | [CSS Scroll Shadows](https://css-scroll-shadows.now.sh/?bgColor=9d80d6&shadowColor=222222&pxSize=15)                            | This tool generates shadows that appear based on scroll position with just CSS!                                       | 🧰    |

[Go to 🔝](#top)

---

<a name="jsSection"></a>
#JavaScript Resources

| #  | Title                                                                                                                                                              | My Thoughts                                                                                            | Type |
|----|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------|------|
| 39 | [javascript.info](https://javascript.info)                                                                                                                         | This is one of the complete and well explained overview of JS.                                         | 🧐    |
| 40 | [Code Beautify](https://codebeautify.org/jsvalidate)                                                                                                               | Before getting into ESlint, I really liked this tool to make sure my JS was all kosher.                | 🧰    |
| 41 | [Truthy and Falsy: When All is Not Equal in JavaScript](https://www.sitepoint.com/javascript-truthy-falsy/)                                                        | This article is a great refernce for all the instances that a value might be considered true or false. | 🧐    |
| 42 | [What the heck is the event loop anyway?](https://youtu.be/8aGhZQkoFbQ)                                                                                            | I have not watched this yet, but looking forward to it.                                                | 🧐    |
| 43 | [JavaScript Loops](https://www.youtube.com/watch?v=s9wW2PpJsmQ)                                                                                                    | If I could only watch one video to understand common JS loops, this would be the one.                  | 🧐    |
| 44 | [JavaScript Loops](https://www.tutorialrepublic.com/javascript-tutorial/javascript-loops.php)                                                                      | If I could only read one article to understand common JS loops, this would be the one.                 | 🧐    |
| 45 | [Codecademy JS Cheatsheet](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-introduction/cheatsheet)                           | Totally free and a nice collection of common JS elements and concepts.                                 | 🧐    |
| 46 | [MDN JS String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)                                                           | Everything I'd ever want to know about strings and where to use them.                                  | 🧐    |
| 47 | [JSON Parse v JSON Stringify](https://medium.com/@debbie.obrien/json-parse-v-json-stringify-4b9d104c78d0)                                                          | These JSON functions confused me to no end. This article really helped explain the differences.       | 🧐    |
| 48 | [Google Hosted Library jQuery](https://developers.google.com/speed/libraries#jquery)                                                                               | Bookmark this link. :) It has the latest jQuery cdn script at all time.                                | 🧰    |
| 49 | [Public APIs](https://github.com/public-apis/public-apis/)                                                                                                         | Great list of public APIs that you can use projects today!                                             | 🧰    |
| 50 | [Javascript Event Delegation](https://dmitripavlutin.com/javascript-event-delegation/)                                                                             | Awesome visual representation of what events are and how event delegation works.                      | 🧐    |
| 51 | [Var, Let, and Const – What's the Difference?](https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/)                                          | Great introduction to the different variable types (and why `var` is trash.)                       | 🧐    |
| 52 | [5 Differences Between Arrow and Regular Functions](https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/)                                   | I love how this demystifies how the two function types are used.                                       | 🧐    |
| 53 | [JavaScript DOM Crash Course - Part 1](https://www.youtube.com/watch?v=0ik6X4DJKCc)                                                                                | Discover how to select elements in the DOM to be used with JS                                           | 🎓    |
| 54 | [JavaScript DOM Crash Course - Part 2](https://www.youtube.com/watch?v=mPd2aJXCZ2g)                                                                                | Learn the basics of how to traverse the DOM.                                                           | 🎓    |
| 55 | [JavaScript DOM Crash Course - Part 3](https://www.youtube.com/watch?v=wK2cBMcDTss)                                                                                | Learn how to attach attach events to DOM elements.                                                     | 🎓    |
| 56 | [JavaScript DOM Crash Course - Part 4](https://www.youtube.com/watch?v=i37KVt_IcXw)                                                                                | Build a small project based on the last 3 videos.                                                      | 🎓    |
| 57 | [Introduction to the DOM](https://www.digitalocean.com/community/tutorials/introduction-to-the-dom)                                                                | Another great resource on the DOM, this quick article will get you up and running.                     | 🧐    |
| 58 | [Asynchronous Javascript](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jx2TTZk3IGWKSbtugYdrlu)                                                                | I forgot I bookmarked this until now. This an awesome free course by the Net Ninja.                    | 🧐    |
| 59 | [Code Wars Kata](https://www.codewars.com/kata/54c27a33fb7da0db0100040e/train/javascript)                                                                          | This awesomely themed training tool lets you practice your sweet Javascript skills.                   | 🧰    |
| 60 | [What Is Event Bubbling in JavaScript?](https://www.sitepoint.com/event-bubbling-javascript/)                                                                      | Another great resource on what event bubbling is and how to take advantage of it.                      | 🧐    |
| 61 | [JavaScript Event Delegation is Easier than You Think](https://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/)                            | Learn how to trigger and listen to events correctly.                                                   | 🧐    |
| 62 | [Which HTML element is the target of the event?](http://www.quirksmode.org/js/events_properties.html#target)                                                       | Find out which element was interacted with.                                                            | 🧐    |
| 63 | [Understanding Scope in JavaScript](https://scotch.io/tutorials/understanding-scope-in-javascript)                                                                 | Love the design of this site and it does a thorough job of explaining scope.                           | 🧐    |
| 64 | [Different ways of writing a function in JavaScript](https://medium.com/til-js/different-ways-of-writing-a-function-in-javascript-part-i-80d9a9e0138b)             | Quick article on how to write a "Function Declaration" function.                                       | 🧐    |
| 65 | [JavaScript Image Slider for Beginners](https://www.softauthor.com/javascript-image-slider-slideshow-carousel/)                                                    | This teaches how to build a simple image slider with Vanilla JS.                                       | 🧐    |
| 66 | [Learn the smart, efficient way to test any JavaScript application.](https://testingjavascript.com)                                                                | I have not taken this one yet, but looking forward to it—as it is such an important subject!              | 🎓    |
| 67 | [JavaScript Algorithms and Data Structures Masterclass](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/)                               | I am not a fan of algorithms, but that is why I have this course bookmarked!                           | 🧐    |
| 68 | [AJAX Basics](https://teamtreehouse.com/library/ajax-basics-2)                                                                                                     | Everything you ever wanted to know about making AJAX requests to a web server.                         | 🎓    |
| 69 | [How to Connect to an API with JavaScript](https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/)                                                  | This article really helped me understand how API calls can be used in projects.                        | 🧐    |
| 70 | [JSON Tutorial: Request API Data with JavaScript or PHP](https://www.taniarascia.com/how-to-use-json-data-with-php-or-javascript/)                                 | It's so interesting to see how PHP and JavaScript handle JSON differently.                             | 🧐    |
| 71 | [Basics Of JavaScript Reduce Method](https://barnabas.hashnode.dev/basics-of-javascript-reduce-method-ckdk81c6402y7zzs1f13p4x7t)                                   | This short article does such a great job of breaking down this powerful JS method.                     | 🧐    |
| 72 | [Axios or fetch(): Which should you use? ](https://blog.logrocket.com/axios-or-fetch-api/#:~:text=To%20send%20data%2C%20fetch(),set%20in%20the%20options%20object) | I tend to reach for Axios, but this article does a great job explaining both.                          | 🧐    |
| 73 | [Learn JavaScript  Start ](https://www.codecademy.com/learn/introduction-to-javascript)                                                                            | I took this 30-hour course and it is amazing. Does a great job explaining the basics.                   | 🎓    |
| 74 | [validatejs.org](https://validatejs.org)                                                                                                                           | Great tool to use on sign-up and login forms to make sure the user data is correct.                    | 🧰    |
| 75 | [HTML5 Canvas Tutorial for Beginners](https://www.youtube.com/watch?v=ymmtEgp0Tuc)                                                                                 | As a designer, this is one I am very excited about diving into.                                       | 🧐    |

[Go to 🔝](#top)

---

<a name="reactSection"></a>
#React Resources

| #   | Title                                                                                                                                                                                        | My Thoughts                                                                                                          | Type |
|-----|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|------|
| 76  | [React Cheat Sheet](https://ihatetomatoes.net/wp-content/uploads/2017/01/react-cheat-sheet-v1.pdf)                                                                                           | Quick and easy to skim cheat sheet on common React patterns and pieces.                                              | 🧰    |
| 77  | [Fullstack Advanced  React & GraphQL](https://advancedreact.com)                                                                                                                             | Little pricer then Udemy, but no one teaches like Wes Bos. Hopefully will be able to purchase this one soon.         | 🎓    |
| 78  | [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)                                                              | This lets you view props, components, renders and more right in Chrome DevTools                                      | 🧰    |
| 79  | [React Icons](https://react-icons.github.io/react-icons/)                                                                                                                                    | This is one of my favorite icon packages, because it has almost every major icon library out there.                  | 🧰    |
| 80  | [React - The Complete Guide (incl Hooks, React Router, Redux)](https://www.udemy.com/course/react-the-complete-guide-incl-redux/)                                                            | One of my favorite courses and has prepared me so much to code in React.                                             | 🎓    |
| 81  | [Examples of the useReducer Hook](https://daveceddia.com/usereducer-hook-examples/)                                                                                                          | This article / video breaks down a very cool hook lets you get a "Redux-like" store without downloading the library. | 🧐    |
| 82  | [MDX Documentation](https://mdxjs.com/getting-started)                                                                                                                                       | This syntax combines JSX and Markdown in one!                                                                        | 🎓    |
| 83  | [React For Designers](https://reactfordesigners.com)                                                                                                                                         | This features some great courses and beginner projects for getting started in React.                                 | 🎓    |
| 84  | [React Router Bootstrap](https://github.com/react-bootstrap/react-router-bootstrap)                                                                                                          | Get the power of React Router navigation and the stylings of Bootstrap mixed into one.                               | 🧰    |
| 85  | [React Helmet](https://github.com/nfl/react-helmet)                                                                                                                                          | I really want to learn this package. It lets you add SEO meta tags to different "React Pages"                        | 🧰    |
| 86  | [Code splitting with React.lazy and Suspense](https://web.dev/code-splitting-suspense/?utm_source=lighthouse&utm_medium=devtools)                                                            | This really works! After implementing on my website my performance scores improved.                                  | 🧐    |
| 87  | [33 Validation Examples](https://react.rocks/tag/Validation)                                                                                                                                 | Awesome collection of form validation and demo code for React.                                                       | 🧐    |
| 88  | [37 ReactJS basics useRef Hook](https://www.reddit.com/r/learnjavascript/comments/ifqa03/37_reactjs_basics_useref_hook/)                                                                     | Helpful video on how to work with the React hook `useRef`.                                                           | 🧐    |
| 89  | [npm react-validation](https://www.npmjs.com/package/react-validation)                                                                                                                       | Robust package to set up form validation. Need to dive deeper one day to learn all it can do.                        | 🧰    |
| 90  | [Formsy React](https://github.com/formsy/formsy-react/)                                                                                                                                      | This package lets you build custom forms and it takes care of the validation for you.                                | 🧰    |
| 91  | [Styled Componets](styled-components.com)                                                                                                                                                    | A favorite with React users, allowing you to create CSS focused custom components.                                   | 🧰    |
| 92  | [React inline styles and media queries using a custom React Hook](https://medium.com/@ttennant/react-inline-styles-and-media-queries-using-a-custom-react-hook-e76fa9ec89f6)                 | This article helped me mimic responsive styling within the JSX environment.                                          | 🧐    |
| 93  | [React Bootstrap](https://react-bootstrap.github.io/getting-started/introduction/)                                                                                                           | Really good documentation on using bootstrap with React.                                                             | 🧐    |
| 94  | [React Redux Using Hooks](https://www.youtube.com/watch?v=3zoIigieur0)                                                                                                                       | Work with the modern Hook syntax for Redux. This saved me so much time!                                              | 🧐    |
| 95  | [Why can't I directly modify a component's state, really?](https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really)                                | This explains so well why you must use `setState` for changing state in class components.                            | 🧐    |
| 96  | [React: Communication Between Components](https://blog.bitsrc.io/react-communication-between-components-c0cfccfa996a)                                                                        | Great deep dive into how React components pass data to one another.                                                  | 🧐    |
| 97  | [How to identify and resolve wasted renders in React](https://www.freecodecamp.org/news/how-to-identify-and-resolve-wasted-renders-in-react-cc4b1e910d10/)                                   | Performance is everything and this teaches how to work with renders correctly.                                       | 🧐    |
| 98  | [Components and Props](https://reactjs.org/docs/components-and-props.html)                                                                                                                   | One of the core and most visited pages in the React Documentation for me.                                            | 🧐    |
| 99  | [Setting Up Redux DevTools](https://medium.com/@samueldinesh/setting-up-redux-devtools-a-simple-guide-3b386a6254fa)                                                                          | Redux DevTools is not the most straightforward thing for me to set up, but this helped explain the process well.     | 🧐    |
| 100 | [React Redux Easy Peasy Course](https://www.reddit.com/r/learnjavascript/comments/ipfikv/stuck_with_learning_react_redux_i_am_making_a/?utm_source=share&utm_medium=ios_app&utm_name=iossmf) | Haven't watched this beginner course on Redux yet, but heard good things.                                            | 🎓    |
| 101 | [Gatsby JS](https://www.gatsbyjs.org/)                                                                                                                                                       | So excited to work with this static site generator very soon.                                                        | 🧰    |
| 102 | [MERN Stack Front To Back](https://www.udemy.com/course/mern-stack-front-to-back/)                                                                                                           | Purchased this course but have not taken it yet. Very excited to do so soon as it covers so much.                    | 🎓    |
| 103 | [React Native The Practical Guide](https://www.udemy.com/course/react-native-the-practical-guide/)                                                                                           | In the middle of taking this now and love all the detail it goes into.                                               | 🎓    |

[Go to 🔝](#top)

---

<a name="wpSection"></a>
#WordPress Resources

| #   | Title                                                                                                             | My Thoughts                                                                                                        | Type |
|-----|-------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------|------|
| 104 | [How to Create a Custom WordPress Theme - Full Course](https://www.youtube.com/watch?v=-h7gOJbIpmo)               | Wonderful introduction to custom theming in WordPress.                                                             | 🎓    |
| 105 | [WordPress Basics](https://www.youtube.com/playlist?list=PLC5E59DD6D84D34DC)                                      | All the videos are very well broken out.                                                                           | 🎓    |
| 106 | [WordPress 101 for Beginner Developers](https://www.youtube.com/playlist?list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE) | Another great playlist on the basics of WordPress.                                                                 | 🎓    |
| 107 | [Create a Premium WordPress Theme](https://www.youtube.com/playlist?list=PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX)      | Haven't taken this one, but there are a lot of helpful video topics in this playlist.                              | 🎓    |
| 108 | [Customizing WordPress](https://www.youtube.com/playlist?list=PLLnpHn493BHGACfv4rC29kJamYMtw34D9)                 | Really helpful playlist on advanced WordPress theme topics.                                                        | 🎓    |
| 109 | [WordPress Intermediate Skills](https://www.udemy.com/course/wordpress-intermediate/)                             | I like that this course covers working with a server as well.                                                      | 🎓    |
| 110 | [How to install WordPress on your local computer with MAMP (Mac)](https://www.youtube.com/watch?v=OriRDlUbAFg)    | This video taught me how to work with WordPress locally on my machine.                                             | 🧐    |
| 111 | [wphierarchy.com](https://wphierarchy.com/)                                                                       | This website does a great job in explaining all the different file types in WordPress and their importance levels. | 🧐    |
| 112 | [Including CSS & JavaScript](https://developer.wordpress.org/themes/basics/including-css-javascript/)             | Documentation on using CSS & JS in WordPress.                                                                      | 🧐    |

[Go to 🔝](#top)

---

<a name="gitSection"></a>
# Git & CLI Resources

| #   | Title                                                                                                         | My Thoughts                                                                                 | Type |
|-----|---------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|------|
| 113 | [Comparing Git Workflows](https://www.atlassian.com/git/tutorials/comparing-workflows)                        | This was so helpful in understanding there are different Git workflows for each team need.  | 🧐    |
| 114 | [Command Line Power User](https://commandlinepoweruser.com/)                                                  | Can't wait to become a true terminal master with this course.                               | 🎓    |
| 115 | [Learn Git Branching](https://learngitbranching.js.org/)                                                      | This interactive course was so helpful in understanding how branching worked.               | 🎓    |
| 116 | [GITHUB PULL REQUEST, Branching, Merging & Team Workflow](https://www.youtube.com/watch?v=oFYyTZwMyAg)        | Great overview of how it looks to work with a team in a Git workflow.                       | 🧐    |
| 117 | [Mastering Markdown](https://guides.github.com/features/mastering-markdown/)                                  | Such a great resource for seeing common Markdown syntax and upgrading Git README            | 🧐    |
| 118 | [Mastering Markdown](https://www.quora.com/What-is-the-difference-between-the-add-and-commit-commands-in-Git) | Super helpful when I first started using Git for version control.                           | 🧐    |
| 119 | [Basic Git Commands](https://reactsensei.com/basic-git-commands/)                                             | Another great cheat sheet on common git commands.                                           | 🧐    |
| 120 | [GitHub Guide Hello World](https://guides.github.com/activities/hello-world/)                                 | Get started with Github with this very user friendly guide.                                 | 🧐    |
| 121 | [Git Commands](http://rogerdudler.github.io/git-guide/)                                                       | Very visual approach for common Git commands.                                               | 🧐    |
| 122 | [Short Code Git Cheat Sheet](https://shortcode.dev/git-cheatsheet#git-cheatsheet)                             | Searchable cheatsheet                                                                       | 🧐    |
| 123 | [List of Command Line Commands](https://www.codecademy.com/articles/command-line-commands)                    | Awesome list by Codecademy on many CLI terminal commands.                                   | 🧐    |

[Go to 🔝](#top)

---

<a name="hostingSection"></a>
# Hosting Resources

| #   | Title                                                                                         | My Thoughts                                                                                        | Type |
|-----|-----------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|------|
| 124 | [Netlify Build](https://www.netlify.com/products/build/)                                      | Awesome Netlify process to trigger builds to the live site once a specific branch is updated.      | 🧰    |
| 125 | [Netlify Tutorials](https://www.youtube.com/playlist?list=PLzlG0L9jlhEPMR8haUPkxj2hJ_3jh5qa6) | Free course to get up and running with Netlify hosting                                             | 🎓    |
| 126 | [Simple Contact Form Submission With Netlify](https://www.youtube.com/watch?v=6ElQ689HRcY)    | Easy tutorial on how to set up Netlify as the mail server.                                         | 🧐    |
| 127 | [PHPStorm FTP Server Connection to Remote Host ](https://www.youtube.com/watch?v=6r9NJDHiJwA) | Tutorial on how to connect with SFTP or FTP with PHPStorm. (It makes it a joy compared to VS Code) | 🧐    |
[Go to 🔝](#top)

---

<a name="optimizeSection"></a>
#Optimization Resources

| #   | Title                                                                                                                        | My Thoughts                                                                    | Type |
|-----|------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|------|
| 128 | [Front End Web Optimization Workflow](https://teamtreehouse.com/library/front-end-web-optimization-workflow)                 | Can't wait to take this one and learn about CDNs and optimizing assets         | 🎓    |
| 129 | [`rel=canonical`: the ultimate guide](https://yoast.com/rel-canonical/)                                                      | Such a good description of what Canonical urls are and where to use them.      | 🧐    |
| 130 | [MDN Lazy Loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading)                                    | Great place to start to learn how Lazy loading works.                          | 🧐    |
| 131 | [SEO Web Development Tutorial for Beginners](https://hackernoon.com/seo-web-development-tutorial-for-beginners-7273308b6448) | Awesome intro for what SEO is and how to approach it.                          | 🧐    |
| 132 | [MOZ Page Speed](https://moz.com/learn/seo/page-speed)                                                                       | This shows a bunch of areas to check for poor page speeds.                     | 🧐    |
| 133 | [The Art of Debugging](https://remysharp.com/2015/10/14/the-art-of-debugging)                                                | Fascinating deep dive on the process of debugging a website and tools to help. | 🧐    |

[Go to 🔝](#top)

---

<a name="databaseSection"></a>
#Databases Resources

| #   | Title                                                                                                                       | My Thoughts                                                                                       | Type |
|-----|-----------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|------|
| 134 | [Introduction to Mongoose for MongoDB](https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57) | This article thoroughly explains what MongoDB is and why it is essential to use Mongoose with it. | 🧐    |
| 135 | [Restful Routes, What are they?](https://medium.com/@atingenkay/restful-routes-what-are-they-8fe221521bb)                   | I did not fully understand RESTful API calls until reading this.                                  | 🧐    |
| 136 | [HTTP response status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)                                      | Code 418 is the best. ;)                                                                          | 🧐    |
| 137 | [Passport](http://www.passportjs.org/docs/)                                                                                 | Great tool to use for full-stack user authentication                                              | 🧰    |

[Go to 🔝](#top)

---

<a name="miscSection"></a>
#MISC Web Dev Resources 

| #   | Title                                                                                                                                       | My Thoughts                                                                                   | Type |
|-----|---------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------|------|
| 138 | [Working with Code Written by Someone Else](https://www.youtube.com/watch?v=OdQtww8ZfEw)                                                    | Wonderful tips in how to explore a new codebase.                                              | 🧐    |
| 139 | [Markdown Table Generator](https://www.tablesgenerator.com/markdown_tables)                                                                 | This is how I made the tables in this post ;)                                                 | 🧰    |
| 140 | [Jest](https://facebook.github.io/jest/)                                                                                                    | One of the industry testing frameworks used for test driven development.                      | 🧰    |
| 141 | [Foundation for Emails](https://get.foundation/emails.html)                                                                                 | This framework makes it easy to code responsive HTML emails.                                  | 🧰    |
| 142 | [Zurb Foundation for Email Course](https://www.youtube.com/playlist?list=PLR_ZJO3q73HalAe5sRs7ByjHvptmbflsL)                                | Great course for the above email framework.                                                   | 🎓    |
| 143 | [NPM dotenv](https://www.npmjs.com/package/dotenv)                                                                                          | This package lets you secure sensitive information like API keys within projects.             | 🧰    |
| 144 | [typing.io](https://typing.io/)                                                                                                             | I used this before the bootcamp to practice typing code faster.                               | 🧰    |
| 145 | [Google Maps Platform Documentation](https://developers.google.com/maps/documentation/)                                                     | Api documentation for using Google Maps in projects.                                          | 🧐    |
| 146 | [What Is and How Does Single Sign-On Authentication Work?](https://auth0.com/blog/what-is-and-how-does-single-sign-on-work/)                | This was so helpful in helping me understand at a high-level how SSO works                    | 🧐    |
| 147 | [Subdomains vs. Subfolders: Which Is Better for SEO & Why?](https://www.searchenginejournal.com/subdomains-vs-subfolders-seo/239795/#close) | Very interesting article on how to structure loosely related web content.                     | 🧐    |
| 148 | [favicon.io](https://favicon.io/favicon-generator/)                                                                                         | This is my favorite Favicon generator (small icon in browser tab) and has a great interface.  | 🧰    |
| 149 | [Wes Bos Eslint Config](https://github.com/wesbos/eslint-config-wesbos)                                                                     | Download the settings that Wes Bos uses for linting his code.                                 | 🧐    |
| 150 | [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)                                                                                     | Super helpful reference to common Emmet commands in multiple languages                        | 🧐    |
| 151 | [Learn Jetbrains PHPStorm IDE](https://www.jetbrains.com/phpstorm/documentation/)                                                           | This became my favorite IDE and love all their resources on how to use it correctly.          | 🧐    |
| 152 | [Agile Scrum Development Process and How UI/UX Design Fit In](https://www.youtube.com/watch?v=yc3J2TGreBo)                                  | Really good overview of how Agile workflows are set up.                                       | 🧐    |


[Go to 🔝](#top)

---

<a name="careerSection"></a>
#Career Resources

| #   | Title                                                                                                                                                                             | My Thoughts                                                                                   | Type |
|-----|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------|------|
| 153 | [The Golden Guide to Landing a Developer Position](https://medium.com/@archie4321/the-golden-guide-to-landing-a-developer-position-c78ad34a965f)                                  | An incredible guide on preparing hiring material like resumes to interviewing with examples.  | 🧐    |
| 154 | [Learn How To Learn](https://www.coursera.org/learn/learning-how-to-learn?action=enroll)                                                                                          | Can't wait to take this one and learn how to be a better "learner".                           | 🎓    |
| 155 | [Glassdoor Common Interview Questions](https://www.glassdoor.com/blog/common-interview-questions/)                                                                                | List of 50 questions that can be asked in interviews                                          | 🧐    |
| 156 | [How to Tackle Something You Have No Idea How to Do](https://www.themuse.com/advice/how-to-tackle-something-you-have-no-idea-how-to-do)                                           | This is one of my favorite articles and I often refer back to it for motivation.              | 🧐    |
| 157 | [Practice for the Whiteboarding Interview](https://coding-bootcamp-whiteboarding-algorithms.readthedocs-hosted.com/en/latest/modules/practicing-for-the-whiteboarding-interview/) | Helpful links and guide to doing a Whiteboarding interview.                                   | 🎓    |
| 158 | [How to: Work at Google — Example Coding/Engineering Interview](https://m.youtube.com/watch?v=XKu_SEDAykw&feature=youtu.be)                                                       | Very interesting to see the level of interviewing at Google.                                  | 🧐    |
| 159 | [jobscan.co](https://www.jobscan.co/)                                                                                                                                             | Helpful site that optimizes cover letters and resumes.                                        | 🧰    |

[Go to 🔝](#top)

---

<a name="designSection"></a>
#Design Resources

| #   | Title                                                                                                                                                          | My Thoughts                                                                                                                             | Type |
|-----|----------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|------|
| 160 | [Rapid Website Prototyping](https://teamtreehouse.com/library/rapid-website-prototyping)                                                                       | Learning how to quickly mockup feature ideas and this covers many important areas of how to do it.                                      | 🎓    |
| 161 | [Tree House UX Design](https://teamtreehouse.com/tracks/ux-design)                                                                                             | This course covers so many important UX subjects and how to think through design.                                                       | 🎓    |
| 162 | [Flux Free Web Design Course 2020](https://youtube.com/playlist?list=PLXC_gcsKLD6n7p6tHPBxsKjN5hA_quaPI)                                                       | One of the best free courses in the basics of Web Design.                                                                               | 🎓    |
| 163 | [Build it in Figma: Design a responsive website](https://www.youtube.com/watch?v=H18PvAKtkSY&list=PLxjRS2tWLJdE-FS4tpsfyjN3eF_XxkbAY&index=11)                 | This video goes deep into using auto layout in Figma.                                                                                   | 🧐    |
| 164 | [In the file: A look into building selection colors and OpenType](https://www.youtube.com/watch?v=rfAdJYLRVqI&list=PLxjRS2tWLJdE-FS4tpsfyjN3eF_XxkbAY&index=9) | Haven't seen this one yet, but can't wait to go through it.                                                                             | 🧐    |
| 165 | [In the File: Making data-informed design decisions](https://www.youtube.com/watch?v=TkKm87Crfns)                                                              | Such a fascinating webinar on how big brands take data into account when creating designs or making changes.                            | 🧐    |
| 166 | [In the File: Developer and designer, working together to build design systems](https://www.youtube.com/watch?v=8RFDPC_Fsnc)                                   | Another one I can't wait to watch. Truly effective teams have clear communication between design and development early in the process.  | 🧐    |
| 167 | [Build it in Figma: Design a responsive website navigation](https://youtu.be/WPRD8_L6hf0)                                                                      | There are many design tidbits and Figma tricks backed into this one.                                                                    | 🧐    |

[Go to 🔝](#top)

---

###Nice job making it to the end!

Here is a happy dance Gif to celebrate upgrading your sweet skills!

![Napoleon Dynomite Happy Dance](https://i.gifer.com/CFSn.gif)

---

*Thumbnail designed with [photoshop](https://www.adobe.com/) and [unsplash](https://unsplash.com/photos/w7ZyuGYNpRQ)*