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 (28)
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! 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...
Such a comprehensive list, thanks!
Youβre welcome!
Nice job, thanks
Your welcome!
That's cool! π¦
Woah. You are dedicated.
Great post! Thank you.
I loved the ones which are about designing.
It's hard to get resources like unsplash and undraw.co
Great job.
Amazing collection, thanks!
Nice list, thanks - some of them I am definitely gonna bookmark - I keep mine organised via tags - bookmarks.dev/users/33d22b0e-9474-...
Very cool!
favicon.io is awesome
Thanks for sharing! Awesome article.
Thank for this awesome resources