Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 26, 2021 12:56 pm GMT

165 Developer Resources I Discovered in 2020-2021

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

#TitleMy ThoughtsType
1Alt TextLoved how it gave examples of what good alt text looks like.
2HTML: <!DOCTYPE> tagEspecially helpful when I was first learning HTML syntax
3W3S HTML5 Semantic ElementsGreat quick intro to why everything shouldn't be in a <div>.
4MDN HTML elements referenceReady to go to the next level? This guide goes even deeper in the many HTML elements.
5New Structural Elements in HTML5This guide really helped me understand elements like <figure> and <figcaption>
6HTML5 Periodical TableI love how interactive, yet simplified this approach is to learning the elements.
7Scripts: async, deferThis taught me different ways to load JS into html files, drastically improving performance.
8Learn to Code HTML & CSSTook this course to prepare for the bootcamp. Great intro to HTML.
9Learn to Code Advanced HTML & CSSI really enjoyed the above beginner course and looking forward to taking this one.
10Derek Banas Handlebars TutorialNot technically HTML, but it sure helps you write it efficiently. Looking forward to viewing this tutorial.
11metatags.ioOne of my favorite generators for creating meta tags for multiple social media platforms.
12A Complete Guide to Links and ButtonsUsing the right tool for the right job is never more apparent in this deep-dive comparison article.
13getwaves.ioLove this tool! Generate svg waves, to create curved separations for page sections!

Go to

CSS Resources

#TitleMy ThoughtsType
14Bootstrap DocumentationEven if I am not using the framework I love using their documentation for inspiration on common web components.
15Specifics on CSS SpecificityGreat breakdown by CSS-Tricks and has nice graphic examples at the end.
16CSS Box SizingVery easy to approach example of how the box-model works.
1712 tips for amazing CSS animationThis has so many good tips on creating cool animations and making sure they are performant.
18CSS Layout and AnimationsHaven't taken this one yet, but can't wait to do so. The course designs are top notch.
19Net Ninja SASS TutorialThis was my first course on SASS and still refer back to it from time to time.
20Learn Sass In 20 MinutesThis is great for a first primer into what SASS is.
21BEM and SASS: A Perfect MatchThis blew my mind when introduced how BEM and SASS could be used together.
22getbem.comThis gives an overview from the creators of the popular naming convention.
23CSS-Tricks BEM 101I love the button examples that this article gives on how to use BEM.
24BEM by Example This explanation on BEM is really good, but I especially like how they have a short and full versions of the article.
25MDN Display DocsEverything you could ever want to know about the powerful display property.
26A 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.
27Wes Bos CSS GridYou can't argue with free and that Wes Bos is one of the best teachers out there for development.
28Wes Bos FlexboxSee above, but this time for Flexbox
29CSSmaticCollection of powerful css generators for gradients, border radius, noise texture and box shadows.
30CSS Tricks PositionIf I could have access to only one resource for the position property, this would be it.
31Can I Use?This site lets you know the browser support for every property out there.
32yoksel Flex CheatsheetI love the layout and way it lets you visually preview the flexbox properties.
33The 30 CSS Selectors You Must MemorizeWhen I feel like getting into the weeds of CSS selectors, (sorry BEM) this is the article I refer back to.
34CSS LintThis tool will check your code and highlight any errors.
35System Font StackPredefined font fallback stacks that can be plugged into a project.
36Neumorphism.ioThis tool makes elements look like they are just under the surface of the page.
37Advanced 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!
38CSS Scroll ShadowsThis tool generates shadows that appear based on scroll position with just CSS!

Go to

JavaScript Resources

#TitleMy ThoughtsType
39javascript.infoThis is one of the complete and well explained overview of JS.
40Code BeautifyBefore getting into ESlint, I really liked this tool to make sure my JS was all kosher.
41Truthy and Falsy: When All is Not Equal in JavaScriptThis article is a great refernce for all the instances that a value might be considered true or false.
42What the heck is the event loop anyway?I have not watched this yet, but looking forward to it.
43JavaScript LoopsIf I could only watch one video to understand common JS loops, this would be the one.
44JavaScript LoopsIf I could only read one article to understand common JS loops, this would be the one.
45Codecademy JS CheatsheetTotally free and a nice collection of common JS elements and concepts.
46MDN JS StringEverything I'd ever want to know about strings and where to use them.
47JSON Parse v JSON StringifyThese JSON functions confused me to no end. This article really helped explain the differences.
48Google Hosted Library jQueryBookmark this link. :) It has the latest jQuery cdn script at all time.
49Public APIsGreat list of public APIs that you can use projects today!
50Javascript Event DelegationAwesome visual representation of what events are and how event delegation works.
51Var, Let, and Const What's the Difference?Great introduction to the different variable types (and why var is trash.)
525 Differences Between Arrow and Regular FunctionsI love how this demystifies how the two function types are used.
53JavaScript DOM Crash Course - Part 1Discover how to select elements in the DOM to be used with JS
54JavaScript DOM Crash Course - Part 2Learn the basics of how to traverse the DOM.
55JavaScript DOM Crash Course - Part 3Learn how to attach attach events to DOM elements.
56JavaScript DOM Crash Course - Part 4Build a small project based on the last 3 videos.
57Introduction to the DOMAnother great resource on the DOM, this quick article will get you up and running.
58Asynchronous JavascriptI forgot I bookmarked this until now. This an awesome free course by the Net Ninja.
59Code Wars KataThis awesomely themed training tool lets you practice your sweet Javascript skills.
60What Is Event Bubbling in JavaScript?Another great resource on what event bubbling is and how to take advantage of it.
61JavaScript Event Delegation is Easier than You ThinkLearn how to trigger and listen to events correctly.
62Which HTML element is the target of the event?Find out which element was interacted with.
63Understanding Scope in JavaScriptLove the design of this site and it does a thorough job of explaining scope.
64Different ways of writing a function in JavaScriptQuick article on how to write a "Function Declaration" function.
65JavaScript Image Slider for BeginnersThis teaches how to build a simple image slider with Vanilla JS.
66Learn the smart, efficient way to test any JavaScript application.I have not taken this one yet, but looking forward to itas it is such an important subject!
67JavaScript Algorithms and Data Structures MasterclassI am not a fan of algorithms, but that is why I have this course bookmarked!
68AJAX BasicsEverything you ever wanted to know about making AJAX requests to a web server.
69How to Connect to an API with JavaScriptThis article really helped me understand how API calls can be used in projects.
70JSON Tutorial: Request API Data with JavaScript or PHPIt's so interesting to see how PHP and JavaScript handle JSON differently.
71Basics Of JavaScript Reduce MethodThis short article does such a great job of breaking down this powerful JS method.
72Axios or fetch(): Which should you use? I tend to reach for Axios, but this article does a great job explaining both.
73Learn JavaScript Start I took this 30-hour course and it is amazing. Does a great job explaining the basics.
74validatejs.orgGreat tool to use on sign-up and login forms to make sure the user data is correct.
75HTML5 Canvas Tutorial for BeginnersAs a designer, this is one I am very excited about diving into.

Go to

React Resources

#TitleMy ThoughtsType
76React Cheat SheetQuick and easy to skim cheat sheet on common React patterns and pieces.
77Fullstack Advanced React & GraphQLLittle pricer then Udemy, but no one teaches like Wes Bos. Hopefully will be able to purchase this one soon.
78React Developer ToolsThis lets you view props, components, renders and more right in Chrome DevTools
79React IconsThis is one of my favorite icon packages, because it has almost every major icon library out there.
80React - The Complete Guide (incl Hooks, React Router, Redux)One of my favorite courses and has prepared me so much to code in React.
81Examples of the useReducer HookThis article / video breaks down a very cool hook lets you get a "Redux-like" store without downloading the library.
82MDX DocumentationThis syntax combines JSX and Markdown in one!
83React For DesignersThis features some great courses and beginner projects for getting started in React.
84React Router BootstrapGet the power of React Router navigation and the stylings of Bootstrap mixed into one.
85React HelmetI really want to learn this package. It lets you add SEO meta tags to different "React Pages"
86Code splitting with React.lazy and SuspenseThis really works! After implementing on my website my performance scores improved.
8733 Validation ExamplesAwesome collection of form validation and demo code for React.
8837 ReactJS basics useRef HookHelpful video on how to work with the React hook useRef.
89npm react-validationRobust package to set up form validation. Need to dive deeper one day to learn all it can do.
90Formsy ReactThis package lets you build custom forms and it takes care of the validation for you.
91Styled ComponetsA favorite with React users, allowing you to create CSS focused custom components.
92React inline styles and media queries using a custom React HookThis article helped me mimic responsive styling within the JSX environment.
93React BootstrapReally good documentation on using bootstrap with React.
94React Redux Using HooksWork with the modern Hook syntax for Redux. This saved me so much time!
95Why 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.
96React: Communication Between ComponentsGreat deep dive into how React components pass data to one another.
97How to identify and resolve wasted renders in ReactPerformance is everything and this teaches how to work with renders correctly.
98Components and PropsOne of the core and most visited pages in the React Documentation for me.
99Setting Up Redux DevToolsRedux DevTools is not the most straightforward thing for me to set up, but this helped explain the process well.
100React Redux Easy Peasy CourseHaven't watched this beginner course on Redux yet, but heard good things.
101Gatsby JSSo excited to work with this static site generator very soon.
102MERN Stack Front To BackPurchased this course but have not taken it yet. Very excited to do so soon as it covers so much.
103React Native The Practical GuideIn the middle of taking this now and love all the detail it goes into.

Go to

WordPress Resources

#TitleMy ThoughtsType
104How to Create a Custom WordPress Theme - Full CourseWonderful introduction to custom theming in WordPress.
105WordPress BasicsAll the videos are very well broken out.
106WordPress 101 for Beginner DevelopersAnother great playlist on the basics of WordPress.
107Create a Premium WordPress ThemeHaven't taken this one, but there are a lot of helpful video topics in this playlist.
108Customizing WordPressReally helpful playlist on advanced WordPress theme topics.
109WordPress Intermediate SkillsI like that this course covers working with a server as well.
110How to install WordPress on your local computer with MAMP (Mac)This video taught me how to work with WordPress locally on my machine.
111wphierarchy.comThis website does a great job in explaining all the different file types in WordPress and their importance levels.
112Including CSS & JavaScriptDocumentation on using CSS & JS in WordPress.

Go to

Git & CLI Resources

#TitleMy ThoughtsType
113Comparing Git WorkflowsThis was so helpful in understanding there are different Git workflows for each team need.
114Command Line Power UserCan't wait to become a true terminal master with this course.
115Learn Git BranchingThis interactive course was so helpful in understanding how branching worked.
116GITHUB PULL REQUEST, Branching, Merging & Team WorkflowGreat overview of how it looks to work with a team in a Git workflow.
117Mastering MarkdownSuch a great resource for seeing common Markdown syntax and upgrading Git README
118Mastering MarkdownSuper helpful when I first started using Git for version control.
119Basic Git CommandsAnother great cheat sheet on common git commands.
120GitHub Guide Hello WorldGet started with Github with this very user friendly guide.
121Git CommandsVery visual approach for common Git commands.
122Short Code Git Cheat SheetSearchable cheatsheet
123List of Command Line CommandsAwesome list by Codecademy on many CLI terminal commands.

Go to

Hosting Resources

#TitleMy ThoughtsType
124Netlify BuildAwesome Netlify process to trigger builds to the live site once a specific branch is updated.
125Netlify TutorialsFree course to get up and running with Netlify hosting
126Simple Contact Form Submission With NetlifyEasy tutorial on how to set up Netlify as the mail server.
127PHPStorm 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

#TitleMy ThoughtsType
128Front End Web Optimization WorkflowCan't wait to take this one and learn about CDNs and optimizing assets
129rel=canonical: the ultimate guideSuch a good description of what Canonical urls are and where to use them.
130MDN Lazy LoadingGreat place to start to learn how Lazy loading works.
131SEO Web Development Tutorial for BeginnersAwesome intro for what SEO is and how to approach it.
132MOZ Page SpeedThis shows a bunch of areas to check for poor page speeds.
133The Art of DebuggingFascinating deep dive on the process of debugging a website and tools to help.

Go to

Databases Resources

#TitleMy ThoughtsType
134Introduction to Mongoose for MongoDBThis article thoroughly explains what MongoDB is and why it is essential to use Mongoose with it.
135Restful Routes, What are they?I did not fully understand RESTful API calls until reading this.
136HTTP response status codesCode 418 is the best. ;)
137PassportGreat tool to use for full-stack user authentication

Go to

MISC Web Dev Resources

#TitleMy ThoughtsType
138Working with Code Written by Someone ElseWonderful tips in how to explore a new codebase.
139Markdown Table GeneratorThis is how I made the tables in this post ;)
140JestOne of the industry testing frameworks used for test driven development.
141Foundation for EmailsThis framework makes it easy to code responsive HTML emails.
142Zurb Foundation for Email CourseGreat course for the above email framework.
143NPM dotenvThis package lets you secure sensitive information like API keys within projects.
144typing.ioI used this before the bootcamp to practice typing code faster.
145Google Maps Platform DocumentationApi documentation for using Google Maps in projects.
146What Is and How Does Single Sign-On Authentication Work?This was so helpful in helping me understand at a high-level how SSO works
147Subdomains vs. Subfolders: Which Is Better for SEO & Why?Very interesting article on how to structure loosely related web content.
148favicon.ioThis is my favorite Favicon generator (small icon in browser tab) and has a great interface.
149Wes Bos Eslint ConfigDownload the settings that Wes Bos uses for linting his code.
150Emmet Cheat SheetSuper helpful reference to common Emmet commands in multiple languages
151Learn Jetbrains PHPStorm IDEThis became my favorite IDE and love all their resources on how to use it correctly.
152Agile Scrum Development Process and How UI/UX Design Fit InReally good overview of how Agile workflows are set up.

Go to

Career Resources

#TitleMy ThoughtsType
153The Golden Guide to Landing a Developer PositionAn incredible guide on preparing hiring material like resumes to interviewing with examples.
154Learn How To LearnCan't wait to take this one and learn how to be a better "learner".
155Glassdoor Common Interview QuestionsList of 50 questions that can be asked in interviews
156How to Tackle Something You Have No Idea How to DoThis is one of my favorite articles and I often refer back to it for motivation.
157Practice for the Whiteboarding InterviewHelpful links and guide to doing a Whiteboarding interview.
158How to: Work at Google Example Coding/Engineering InterviewVery interesting to see the level of interviewing at Google.
159jobscan.coHelpful site that optimizes cover letters and resumes.

Go to

Design Resources

#TitleMy ThoughtsType
160Rapid Website PrototypingLearning how to quickly mockup feature ideas and this covers many important areas of how to do it.
161Tree House UX DesignThis course covers so many important UX subjects and how to think through design.
162Flux Free Web Design Course 2020One of the best free courses in the basics of Web Design.
163Build it in Figma: Design a responsive websiteThis video goes deep into using auto layout in Figma.
164In the file: A look into building selection colors and OpenTypeHaven't seen this one yet, but can't wait to go through it.
165In the File: Making data-informed design decisionsSuch a fascinating webinar on how big brands take data into account when creating designs or making changes.
166In the File: Developer and designer, working together to build design systemsAnother one I can't wait to watch. Truly effective teams have clear communication between design and development early in the process.
167Build it in Figma: Design a responsive website navigationThere are many design tidbits and Figma tricks backed into this one.

Go to

Nice job making it to the end!

Here is a happy dance Gif to celebrate upgrading your sweet skills!

Napoleon Dynomite Happy Dance

Thumbnail designed with photoshop and unsplash


Original Link: https://dev.to/gedalyakrycer/165-developer-resources-i-discovered-in-2020-2021-6ma

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To