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!	🧰

Go to 🔝

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!	🧰

Go to 🔝

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.	🧐

Go to 🔝

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.	🎓

Go to 🔝

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.	🧐

Go to 🔝

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.	🧐

Go to 🔝

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)	🧐

Go to 🔝

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.	🧐

Go to 🔝

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	🧰

Go to 🔝

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.	🧐

Go to 🔝

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.	🧰

Go to 🔝

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.	🧐