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)
Resources Lists
• HTML
• CSS
• JavaScript
• React
• WordPress
• Git & CLI
• Hosting
• Optimizations
• Databases
• MISC Web Dev
• Career
• Design
HTML Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 1 | Alt Text | Loved how it gave examples of what good alt text looks like. | 🧐 |
| 2 | HTML: <!DOCTYPE> tag |
Especially helpful when I was first learning HTML syntax | 🧐 |
| 3 | W3S HTML5 Semantic Elements | Great quick intro to why everything shouldn't be in a <div>. |
🧐 |
| 4 | MDN HTML elements reference | Ready to go to the next level? This guide goes even deeper in the many HTML elements. | 🧐 |
| 5 | New Structural Elements in HTML5 | This guide really helped me understand elements like <figure> and <figcaption>
|
🧐 |
| 6 | HTML5 Periodical Table | I love how interactive, yet simplified this approach is to learning the elements. | 🧐 |
| 7 | Scripts: async, defer | This taught me different ways to load JS into html files, drastically improving performance. | 🧐 |
| 8 | Learn to Code HTML & CSS | Took this course to prepare for the bootcamp. Great intro to HTML. | 🎓 |
| 9 | Learn to Code Advanced HTML & CSS | I really enjoyed the above beginner course and looking forward to taking this one. | 🎓 |
| 10 | Derek Banas Handlebars Tutorial | Not technically HTML, but it sure helps you write it efficiently. Looking forward to viewing this tutorial. | 🧐 |
| 11 | metatags.io | One of my favorite generators for creating meta tags for multiple social media platforms. | 🧰 |
| 12 | 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 | Love this tool! Generate svg waves, to create curved separations for page sections! | 🧰 |
CSS Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 14 | Bootstrap Documentation | Even if I am not using the framework I love using their documentation for inspiration on common web components. | 🧐 |
| 15 | Specifics on CSS Specificity | Great breakdown by CSS-Tricks and has nice graphic examples at the end. | 🧐 |
| 16 | CSS Box Sizing | Very easy to approach example of how the box-model works. | 🧐 |
| 17 | 12 tips for amazing CSS animation | This has so many good tips on creating cool animations and making sure they are performant. | 🧐 |
| 18 | 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 | This was my first course on SASS and still refer back to it from time to time. | 🎓 |
| 20 | Learn Sass In 20 Minutes | This is great for a first primer into what SASS is. | 🎓 |
| 21 | BEM and SASS: A Perfect Match | This blew my mind when introduced how BEM and SASS could be used together. | 🧐 |
| 22 | getbem.com | This gives an overview from the creators of the popular naming convention. | 🧐 |
| 23 | CSS-Tricks BEM 101 | I love the button examples that this article gives on how to use BEM. | 🧐 |
| 24 | 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 | Everything you could ever want to know about the powerful display property. |
🧐 |
| 26 | 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 | You can't argue with free and that Wes Bos is one of the best teachers out there for development. | 🎓 |
| 28 | Wes Bos Flexbox | See above, but this time for Flexbox | 🎓 |
| 29 | CSSmatic | Collection of powerful css generators for gradients, border radius, noise texture and box shadows. | 🧰 |
| 30 | CSS Tricks Position | If I could have access to only one resource for the position property, this would be it. |
🧐 |
| 31 | Can I Use? | This site lets you know the browser support for every property out there. | 🧰 |
| 32 | yoksel Flex Cheatsheet | I love the layout and way it lets you visually preview the flexbox properties. | 🧐 |
| 33 | The 30 CSS Selectors You Must Memorize | When I feel like getting into the weeds of CSS selectors, (sorry BEM) this is the article I refer back to. | 🧐 |
| 34 | CSS Lint | This tool will check your code and highlight any errors. | 🧰 |
| 35 | System Font Stack | Predefined font fallback stacks that can be plugged into a project. | 🧰 |
| 36 | Neumorphism.io | 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! | Bought this amazing course on Udemy but haven't gotten a chance to take it yet...one day soon though! | 🎓 |
| 38 | CSS Scroll Shadows | This tool generates shadows that appear based on scroll position with just CSS! | 🧰 |
JavaScript Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 39 | javascript.info | This is one of the complete and well explained overview of JS. | 🧐 |
| 40 | Code Beautify | 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 | 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? | I have not watched this yet, but looking forward to it. | 🧐 |
| 43 | JavaScript Loops | If I could only watch one video to understand common JS loops, this would be the one. | 🧐 |
| 44 | JavaScript Loops | If I could only read one article to understand common JS loops, this would be the one. | 🧐 |
| 45 | Codecademy JS Cheatsheet | Totally free and a nice collection of common JS elements and concepts. | 🧐 |
| 46 | MDN JS String | Everything I'd ever want to know about strings and where to use them. | 🧐 |
| 47 | JSON Parse v JSON Stringify | These JSON functions confused me to no end. This article really helped explain the differences. | 🧐 |
| 48 | Google Hosted Library jQuery | Bookmark this link. :) It has the latest jQuery cdn script at all time. | 🧰 |
| 49 | Public APIs | Great list of public APIs that you can use projects today! | 🧰 |
| 50 | Javascript Event Delegation | Awesome visual representation of what events are and how event delegation works. | 🧐 |
| 51 | Var, Let, and Const – What's the Difference? | Great introduction to the different variable types (and why var is trash.) |
🧐 |
| 52 | 5 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 | Discover how to select elements in the DOM to be used with JS | 🎓 |
| 54 | JavaScript DOM Crash Course - Part 2 | Learn the basics of how to traverse the DOM. | 🎓 |
| 55 | JavaScript DOM Crash Course - Part 3 | Learn how to attach attach events to DOM elements. | 🎓 |
| 56 | JavaScript DOM Crash Course - Part 4 | Build a small project based on the last 3 videos. | 🎓 |
| 57 | Introduction to the DOM | Another great resource on the DOM, this quick article will get you up and running. | 🧐 |
| 58 | Asynchronous Javascript | I forgot I bookmarked this until now. This an awesome free course by the Net Ninja. | 🧐 |
| 59 | Code Wars Kata | This awesomely themed training tool lets you practice your sweet Javascript skills. | 🧰 |
| 60 | What Is Event Bubbling in 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 | Learn how to trigger and listen to events correctly. | 🧐 |
| 62 | Which HTML element is the target of the event? | Find out which element was interacted with. | 🧐 |
| 63 | 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 | Quick article on how to write a "Function Declaration" function. | 🧐 |
| 65 | JavaScript Image Slider for Beginners | This teaches how to build a simple image slider with Vanilla JS. | 🧐 |
| 66 | Learn the smart, efficient way to test any JavaScript application. | 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 | I am not a fan of algorithms, but that is why I have this course bookmarked! | 🧐 |
| 68 | AJAX Basics | Everything you ever wanted to know about making AJAX requests to a web server. | 🎓 |
| 69 | 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 | It's so interesting to see how PHP and JavaScript handle JSON differently. | 🧐 |
| 71 | Basics Of JavaScript Reduce Method | This short article does such a great job of breaking down this powerful JS method. | 🧐 |
| 72 | Axios or fetch(): Which should you use? | I tend to reach for Axios, but this article does a great job explaining both. | 🧐 |
| 73 | Learn JavaScript Start | I took this 30-hour course and it is amazing. Does a great job explaining the basics. | 🎓 |
| 74 | 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 | As a designer, this is one I am very excited about diving into. | 🧐 |
React Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 76 | React Cheat Sheet | Quick and easy to skim cheat sheet on common React patterns and pieces. | 🧰 |
| 77 | Fullstack Advanced React & GraphQL | Little pricer then Udemy, but no one teaches like Wes Bos. Hopefully will be able to purchase this one soon. | 🎓 |
| 78 | React Developer Tools | This lets you view props, components, renders and more right in Chrome DevTools | 🧰 |
| 79 | 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) | One of my favorite courses and has prepared me so much to code in React. | 🎓 |
| 81 | Examples of the useReducer Hook | This article / video breaks down a very cool hook lets you get a "Redux-like" store without downloading the library. | 🧐 |
| 82 | MDX Documentation | This syntax combines JSX and Markdown in one! | 🎓 |
| 83 | React For Designers | This features some great courses and beginner projects for getting started in React. | 🎓 |
| 84 | React Router Bootstrap | Get the power of React Router navigation and the stylings of Bootstrap mixed into one. | 🧰 |
| 85 | 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 | This really works! After implementing on my website my performance scores improved. | 🧐 |
| 87 | 33 Validation Examples | Awesome collection of form validation and demo code for React. | 🧐 |
| 88 | 37 ReactJS basics useRef Hook | Helpful video on how to work with the React hook useRef. |
🧐 |
| 89 | npm react-validation | Robust package to set up form validation. Need to dive deeper one day to learn all it can do. | 🧰 |
| 90 | Formsy React | This package lets you build custom forms and it takes care of the validation for you. | 🧰 |
| 91 | Styled Componets | 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 | This article helped me mimic responsive styling within the JSX environment. | 🧐 |
| 93 | React Bootstrap | Really good documentation on using bootstrap with React. | 🧐 |
| 94 | React Redux Using Hooks | 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? | This explains so well why you must use setState for changing state in class components. |
🧐 |
| 96 | React: Communication Between Components | Great deep dive into how React components pass data to one another. | 🧐 |
| 97 | How to identify and resolve wasted renders in React | Performance is everything and this teaches how to work with renders correctly. | 🧐 |
| 98 | Components and Props | One of the core and most visited pages in the React Documentation for me. | 🧐 |
| 99 | Setting Up Redux DevTools | 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 | Haven't watched this beginner course on Redux yet, but heard good things. | 🎓 |
| 101 | Gatsby JS | So excited to work with this static site generator very soon. | 🧰 |
| 102 | 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 | In the middle of taking this now and love all the detail it goes into. | 🎓 |
WordPress Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 104 | How to Create a Custom WordPress Theme - Full Course | Wonderful introduction to custom theming in WordPress. | 🎓 |
| 105 | WordPress Basics | All the videos are very well broken out. | 🎓 |
| 106 | WordPress 101 for Beginner Developers | Another great playlist on the basics of WordPress. | 🎓 |
| 107 | Create a Premium WordPress Theme | Haven't taken this one, but there are a lot of helpful video topics in this playlist. | 🎓 |
| 108 | Customizing WordPress | Really helpful playlist on advanced WordPress theme topics. | 🎓 |
| 109 | WordPress Intermediate Skills | I like that this course covers working with a server as well. | 🎓 |
| 110 | How to install WordPress on your local computer with MAMP (Mac) | This video taught me how to work with WordPress locally on my machine. | 🧐 |
| 111 | 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 | Documentation on using CSS & JS in WordPress. | 🧐 |
Git & CLI Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 113 | Comparing Git Workflows | This was so helpful in understanding there are different Git workflows for each team need. | 🧐 |
| 114 | Command Line Power User | Can't wait to become a true terminal master with this course. | 🎓 |
| 115 | Learn Git Branching | This interactive course was so helpful in understanding how branching worked. | 🎓 |
| 116 | GITHUB PULL REQUEST, Branching, Merging & Team Workflow | Great overview of how it looks to work with a team in a Git workflow. | 🧐 |
| 117 | Mastering Markdown | Such a great resource for seeing common Markdown syntax and upgrading Git README | 🧐 |
| 118 | Mastering Markdown | Super helpful when I first started using Git for version control. | 🧐 |
| 119 | Basic Git Commands | Another great cheat sheet on common git commands. | 🧐 |
| 120 | GitHub Guide Hello World | Get started with Github with this very user friendly guide. | 🧐 |
| 121 | Git Commands | Very visual approach for common Git commands. | 🧐 |
| 122 | Short Code Git Cheat Sheet | Searchable cheatsheet | 🧐 |
| 123 | List of Command Line Commands | Awesome list by Codecademy on many CLI terminal commands. | 🧐 |
Hosting Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 124 | Netlify Build | Awesome Netlify process to trigger builds to the live site once a specific branch is updated. | 🧰 |
| 125 | Netlify Tutorials | Free course to get up and running with Netlify hosting | 🎓 |
| 126 | Simple Contact Form Submission With Netlify | Easy tutorial on how to set up Netlify as the mail server. | 🧐 |
| 127 | PHPStorm FTP Server Connection to Remote Host | Tutorial on how to connect with SFTP or FTP with PHPStorm. (It makes it a joy compared to VS Code) | 🧐 |
Optimization Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 128 | 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 |
Such a good description of what Canonical urls are and where to use them. | 🧐 |
| 130 | MDN Lazy Loading | Great place to start to learn how Lazy loading works. | 🧐 |
| 131 | SEO Web Development Tutorial for Beginners | Awesome intro for what SEO is and how to approach it. | 🧐 |
| 132 | MOZ Page Speed | This shows a bunch of areas to check for poor page speeds. | 🧐 |
| 133 | The Art of Debugging | Fascinating deep dive on the process of debugging a website and tools to help. | 🧐 |
Databases Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 134 | Introduction to Mongoose for MongoDB | This article thoroughly explains what MongoDB is and why it is essential to use Mongoose with it. | 🧐 |
| 135 | Restful Routes, What are they? | I did not fully understand RESTful API calls until reading this. | 🧐 |
| 136 | HTTP response status codes | Code 418 is the best. ;) | 🧐 |
| 137 | Passport | Great tool to use for full-stack user authentication | 🧰 |
MISC Web Dev Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 138 | Working with Code Written by Someone Else | Wonderful tips in how to explore a new codebase. | 🧐 |
| 139 | Markdown Table Generator | This is how I made the tables in this post ;) | 🧰 |
| 140 | Jest | One of the industry testing frameworks used for test driven development. | 🧰 |
| 141 | Foundation for Emails | This framework makes it easy to code responsive HTML emails. | 🧰 |
| 142 | Zurb Foundation for Email Course | Great course for the above email framework. | 🎓 |
| 143 | NPM dotenv | This package lets you secure sensitive information like API keys within projects. | 🧰 |
| 144 | typing.io | I used this before the bootcamp to practice typing code faster. | 🧰 |
| 145 | Google Maps Platform Documentation | Api documentation for using Google Maps in projects. | 🧐 |
| 146 | What Is and How Does Single Sign-On Authentication 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? | Very interesting article on how to structure loosely related web content. | 🧐 |
| 148 | favicon.io | This is my favorite Favicon generator (small icon in browser tab) and has a great interface. | 🧰 |
| 149 | Wes Bos Eslint Config | Download the settings that Wes Bos uses for linting his code. | 🧐 |
| 150 | Emmet Cheat Sheet | Super helpful reference to common Emmet commands in multiple languages | 🧐 |
| 151 | Learn Jetbrains PHPStorm IDE | 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 | Really good overview of how Agile workflows are set up. | 🧐 |
Career Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 153 | The Golden Guide to Landing a Developer Position | An incredible guide on preparing hiring material like resumes to interviewing with examples. | 🧐 |
| 154 | Learn How To Learn | Can't wait to take this one and learn how to be a better "learner". | 🎓 |
| 155 | Glassdoor 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 | This is one of my favorite articles and I often refer back to it for motivation. | 🧐 |
| 157 | Practice for the Whiteboarding Interview | Helpful links and guide to doing a Whiteboarding interview. | 🎓 |
| 158 | How to: Work at Google — Example Coding/Engineering Interview | Very interesting to see the level of interviewing at Google. | 🧐 |
| 159 | jobscan.co | Helpful site that optimizes cover letters and resumes. | 🧰 |
Design Resources
| # | Title | My Thoughts | Type |
|---|---|---|---|
| 160 | 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 | This course covers so many important UX subjects and how to think through design. | 🎓 |
| 162 | Flux Free Web Design Course 2020 | One of the best free courses in the basics of Web Design. | 🎓 |
| 163 | Build it in Figma: Design a responsive website | This video goes deep into using auto layout in Figma. | 🧐 |
| 164 | In the file: A look into building selection colors and OpenType | Haven't seen this one yet, but can't wait to go through it. | 🧐 |
| 165 | In the File: Making data-informed design decisions | 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 | 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 | There are many design tidbits and Figma tricks backed into this one. | 🧐 |
Nice job making it to the end!
Here is a happy dance Gif to celebrate upgrading your sweet skills!
Top comments (29)
thanks for your hard work!
No problem, happy to share.
Thanks for sharing Gedalya, that's an awesome list! I shared it on Twitter as well.
How long did it take you to make it?
Thanks for sharing! I collected the links for about a year in a note app. And then it took about two weeks to format it in the article.
Wow, THAT'S dedication!
Nice job, thanks
Your welcome!
Such a comprehensive list, thanks!
You’re welcome!
Nice job! I discovered few things through this list
That is great! Whole reason why I put it together right there. :)
Awesome article!
Thanks! :)
I wait for you at the Top of the week!
The concurrence will be rude...
Great collection! I discovered several resources I hadn't seen before.
I also built a developer-focused tool called Clipy that helps developers record UI bugs and coding workflows while generating AI-readable Markdown reports for debugging and documentation.
If you ever update this list, I think it could fit well in the Developer Productivity or Debugging section.
Thanks for putting together such a valuable resource!
Amazing collection, thanks!
Woah. You are dedicated.
Great post! Thank you.