This content originally appeared on DEV Community and was authored by Gedalya Krycer
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!
Thumbnail designed with photoshop and unsplash
This content originally appeared on DEV Community and was authored by Gedalya Krycer
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Gedalya Krycer | Sciencx (2021-04-26T12:56:03+00:00) 165+ Developer Resources I Discovered in 2020-2021. Retrieved from https://www.scien.cx/2021/04/26/165-developer-resources-i-discovered-in-2020-2021/
" » 165+ Developer Resources I Discovered in 2020-2021." Gedalya Krycer | Sciencx - Monday April 26, 2021, https://www.scien.cx/2021/04/26/165-developer-resources-i-discovered-in-2020-2021/
HARVARDGedalya Krycer | Sciencx Monday April 26, 2021 » 165+ Developer Resources I Discovered in 2020-2021., viewed ,<https://www.scien.cx/2021/04/26/165-developer-resources-i-discovered-in-2020-2021/>
VANCOUVERGedalya Krycer | Sciencx - » 165+ Developer Resources I Discovered in 2020-2021. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/26/165-developer-resources-i-discovered-in-2020-2021/
CHICAGO" » 165+ Developer Resources I Discovered in 2020-2021." Gedalya Krycer | Sciencx - Accessed . https://www.scien.cx/2021/04/26/165-developer-resources-i-discovered-in-2020-2021/
IEEE" » 165+ Developer Resources I Discovered in 2020-2021." Gedalya Krycer | Sciencx [Online]. Available: https://www.scien.cx/2021/04/26/165-developer-resources-i-discovered-in-2020-2021/. [Accessed: ]
rf:citation » 165+ Developer Resources I Discovered in 2020-2021 | Gedalya Krycer | Sciencx | https://www.scien.cx/2021/04/26/165-developer-resources-i-discovered-in-2020-2021/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.