Awesome Frontend Resources 👓🖌️

🧠 A personal curated list of awesome things related to Front-end development - HTML, CSS, JS and more.

Note that this is still a Work-In-Progress 🚧👷‍♂️ as I have stored links and bookmarks probably for the last 5 years. I will try to update & support the list semi-often.

What is this and why?    Want to add to the list?   

Other Awesome lists

• Awesome: Awesome lists about all kinds of interesting topics
• Awesome HTML: A curated list of awesome HTML5 resources
• Awesome CSS: A curated contents of amazing CSS
• Awesome Vue: A curated list of awesome things related to Vue.js
• Awesome Vite: A curated list of awesome things related to Vite.js
• Awesome React: A collection of awesome things regarding React ecosystem

HTML

• W3S - HTML Semantic Elements - What is Semantic HTML and why use it
• Semantics - HTML, CSS, JS - Examples on semantics
• MDN - h1–h6: The HTML Section Heading elements - Documentation and examples on using headings in HTML
• MDN - HTML elements reference - This page lists all the HTML elements by groups
• Kevin Powell - 5 important HTML concepts for beginners
• Kevin Powell - The most common HTML mistake that I see
• <article> vs. <section>: How To Choose The Right One - A pretty in-depth take on the forever question div vs section vs article.

  • I gave my usual answer: think of <article> not just as a newspaper article or a blog post, but as an article of clothing — a discrete entity that can be reused in another context. So your trousers are an article, and you can wear them with a different outfit; your shirt is an article and can be worn with different trousers; your knee-length patent leather stiletto boots are an article (you wouldn’t wear just one of them, would you?).

  • Does grouping this content play a role that may help explain my document structure? If it does not, then I can use a div. If it does, play a role and proceed to consider if the role matches a section or an article. What role does it play in my document structure? Is the content of this group thematically related such that it helps to understand the outline of my document? If it is, then it is possibly a section. Is the content of this group one that contains content that I can take out and redistribute to other pages while it does not totally tie to my document theme and outline? If it is, then it is possibly an article.
• Div divisiveness - Why divs aren't evil & why any overexaggerating is bad. Also a lot of good examples where you should and should probably not use div.
  • By representing nothing, a <div> is free to be anything. A <div> is essentially chaotic neutral and can easily pivot between valid and invalid use, per the whim of the developer that uses it.
  • Use semantic HTML. Use semantic HTML as a default. Just maybe also don’t worry so much about if other people aren’t using semantic HTML if what they’ve built doesn’t actually result in accessibility issues? Or, if calling out the lack of semantic HTML, be very specific about what the actual problem is. The semantics of HTML are not just about accessibility. They’re useful for other tools that consume HTML, and can be far easier to understand for fellow developers modifying markup than a sea of never-ending <div>s.
  • Remember, <div>s are meant to represent nothing. They can be made into just about anything… just don’t make them into soup.

CSS

• caniuse.com
• CSS-Tricks - What are CSS Modules and why do we need them?
• CSS-Tricks - Should I Use Source Maps in Production?
• Smashing Mag - Flexbox use cases - Flexbox vs Grid
• Centering in CSS
  • CSS Tricks - Centering in CSS: A Complete Guide
  • Stephanie Eckles' - The Complete Guide to Centering in CSS
• A List Apart - Axiomatic CSS and Lobotomized Owls
• CSS-Tricks - A Complete Guide to CSS Media Queries
• The evolution of scalable CSS - A really nice tale abot the evolution of css, with good references and nice ideas.

"Modern" CSS

• Flexbox
  • CSS-Tricks - A Complete Guide to Flexbox
  • MDN Basic - concepts of flexbox
  • Test CSS Flexbox Rules
  • Flexbox Froggy
  • Flex Box Adventure
  • Flexbox Playground
  • Common CSS Flexbox Layout Patterns with Example Code
• Grid
  • CSS-Tricks - A Complete Guide to Grid
  • MDN - CSS Grid Layout
• Min, Max, Clamp
  • Web.dev - three logical CSS functions to use today
  • ModernCSS - Practical Uses of CSS Math Functions: calc, clamp, min, max
• Fluid Typograhy
  • CSS-Tricks - Simplified Fluid Typography
  • ModernCSS - Generating font-size CSS Rules and Creating a Fluid Type Scale

SASS / SCSS

• Stop using @import with Sass | @use and @forward explained

Snippets. Latouts. Patterns. Components.

• SmolCSS - Minimal snippets for modern CSS layouts and components
• CSS Layouts - Popular layouts and patterns made with CSS

Utilities

• A Modern CSS Reset or the classic meyerweb
• Vendor Prefixes
  • What are Vendor Prefix
  • Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way
  • Autoprefixer: NPM package or online

Methodologies & naming conventions

• BEM
• BEMIT: Taking the BEM Naming Convention a Step Further
• SMACSS
• OOCSS
• Atomic CSS
• Cube CSS

CSS Minification/Compression

• Benchmarks
• cssnano
• csso
• clean-css

JS

React

• Robin Wieruch - bery good articles for React, Node and JS/TS in general
• Kent C Dodds - a log of articles and knowledge on JS testing

Performance

• My web performance journey with Nuxt, Storyblok & Netlify - though it says Nuxt, there are a lot of important general points and topics you can discover here; specific packages and alternatives are shared
• Responsive images - Very good and detailed lesson on why and how to use responsive images. Covers both srcset & picture

General

• Design Patterns
• Refactoring

Courses - general

Creators (in no specific order)

• Kevin Powell - Youtube - CSS, SASS, HTML
• Traversy Media - YouTube - Crash Courses on everything Front-end related
• peruvianidol (Mike Aparicio) - twitch & Youtube - 11ty, Design Systems, CSS
• Jason Lengstorf / Learn With Jason - YouTube & website - Discussions with different developers, showcasing wide range of frameworks and ideas; Web, JS, React, Vue, etc.
• Coding Garden - twitch & Youtube - JS, Vue, React, Node, Web technologies
• Stephanie Eckles - twitch & website- CSS, a11y, design systems

Assets (icons, colors, images, etc.)

• Reddit - Websites I use for free svg Illustrations
• undraw - illustrations
• iconfinder

Free hosting

• Netlify
• Netlify Forms
• Clouflare Pages + GitHub

Newsletters

• JavaScript Weekly
• Frontend Focus
• React Status