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