# javascript # beginners # webdev # productivity 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: 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
๐ง 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.๐ง Go to ๐.
Letโs Talk About Divi 5.0 And The Future Of Divi
