😎 Curated list of awesome Dude frontend related resources 😎
- Learn CSS Grid: Jonathan Suh's free guide to learning CSS Grid
- Flexbox.io: A simple 20 video course that will help you master CSS Flexbox by Wes Bos
- Flexbox Zombies: Funny alternative way to learn flexbox
- HTML Reference: Features all elements and attributes of HTML
- CSS Reference: Features all elements and attributes of CSS
- Layoutit Grid: CSS Grids layouts made easy
- Feather: Simply beautiful open source icons
- CSS.gg: 700+ Pure CSS, SVG & Figma UI Icons
- Iconoir: Iconoir is one of the biggest open source libraries with currently 914 SVG Icons.
- Material Icons: Material Icons are available in five styles and a range of downloadable sizes and densities.
- Iconic: Free "do wtf you want with" pixel-perfect icons
- Icongram: Serving you 10000+ icons on the fly.
- iconmonstr: Free simple icons for your next project
- SVG Repo: Browse 300.000+ SVG Vectors and Icons
- Orion: 8613 pro & free SVG icons for your Web, iOS, Android & design projects
- Remix: Open source neutral style icon system
- Hero icons: A set of free MIT-licensed high-quality SVG icons for UI development
- Ionicons: Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere
- unDraw: Open source illustrations for any idea
- ManyPixels: 2,000+ royalty-free illustrations to power up your designs
- Scale: One new high-quality, open-source illustration each day
- The Hero Generator
- Blobmaker: Make organic SVG shapes for your next design
- Blobs: Generate beautiful blob shapes for web and flutter apps
- Get Waves: Create SVG waves for your next design
- SVG Wave: A free & beautiful gradient SVG wave Generator
- Squircley: SVG Squircle Maker
- SVG-Loaders: Loading icons and small animations built with pure SVG
- URL-encoder for SVG: URL-encoder, useful for SVG background elements
- The Inter Font Family: Inter is a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens
- SFMono: Apple Monospaced variant of San Francisco, Ligaturized version
- CSS-Tricks: Daily articles about CSS, HTML, JavaScript, and all things related to web design and development. By Chris Coyier and various others.
- Cookie consent: A lightweight & GDPR compliant cookie consent plugin written in vanilla JavaScript.
- glightbox: Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes.
- Micromodal: Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript.
- macy.js: A lightweight dependency-free JavaScript library designed to sort items vertically into columns by finding an optimum layout with a minimum height.
- swup.js: Complete, flexible, extensible and easy to use page transition library for your static web.
- Choregrapher.js: a simple library to take care of complex CSS animations.
- Rebound.js: is a simple library that models Spring dynamics for the purpose of driving physical animations.
- tween.js: JavaScript tweening engine for easy animations.
- Velocity.js: Accelerated JavaScript animation.
- Matter.js: 2D physics engine for the web.
- anime.js: is a lightweight JavaScript animation library.
- mo.js: Motion graphics toolbelt for the web
- Animate.css: A cross-browser library of CSS animations. As easy to use as an easy thing.
- WOW.js: Reveal Animations When Scrolling
- Slick: The last carousel you'll ever need
- skrollr: Parallax scrolling for the masses
- waypoints: Waypoints is the easiest way to trigger a function when you scroll to an element.
- saffron: A simple Sass mixin library for animations and transitions
- PHP_CodeSniffer: PHP_CodeSniffer tokenizes PHP files and detects violations of a defined set of coding standards
- stylelint: A mighty, modern linter that helps you avoid errors and enforce conventions in your styles
- ESLint: ESLint statically analyzes your code to quickly find problems
- doiuse: Lint CSS for browser support against caniuse database
- WebPageTest: Website Performance and Optimization Test
- Google PageSpeed Insights: The PageSpeed tools analyze and optimize your site following web best practices
- GTMetrix: GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it
- Optimage: Automatically compress images without losing quality
- ImageOptim: ImageOptim makes images load faster
- SVGO: Nodejs-based tool for optimizing SVG vector graphics files.
- SVG OMG: UI for SVGO
- aXe: The Standard in Accessibility Testing
- Siteimprove: Create more accessible, inclusive web content
- alix: Alix is a browser extension for a11y.css. It allows you to lint your HTML for Accessibility issues simply by applying a stylesheet that makes use of advanced CSS selectors.
- tota11y: An accessibility (a11y) visualization toolkit
- WAVE: Web accessibility evaluation tool
- Lorem.space: Lorem Ipsum fake image placeholder, API for placeholder images - but useful!
- StockSnap.io: Beautiful free stock photos. (CC0)
- TheStocks.im: The best royalty free stock photos in one place (CC0)
- Pexels Videos: Completely free stock videos. (CC0)
- Pixel Buddha: Free and premium resources for designers and developers
- Streetwill: Free Hi-Res Photos (CC0)
- Life of Pix: Free high-resolution photos (CC0)
- stylefmt: stylefmt is a tool that automatically formats your stylesheets.
- Bracket Pair Colorizer 2: This extension allows matching brackets to be identified with colours.
- colorize: A vscode extension to help visualize CSS colors in files.
- SCSS IntelliSense: Advanced autocompletion and refactoring support for SCSS
- stylelint: Modern CSS/SCSS/Less linter.
- Highlight Matching Tag: Highlights matching closing and opening tags
- webhint: The Webhint Visual Studio Code extension provides diagnostic data for workspace files based on webhint analysis.
- doiuse: Lint CSS for browser support against caniuse database.
- Error Lens: ErrorLens highlights the entire line wherever a diagnostic is generated and also prints the message inline.
- CSS var hint: This simple extension adds more capability for CSS var hint
- SVG: SVG Coding, Minify, Pretty, Preview All-In-One
- PerfectPixel: This extension helps develop your websites with pixel perfect accuracy!
- PixelSnap: The fastest way to measure everything on screen.
- ColorSnapper: The missing color picker for Mac
- LittleIpsum: The best Latin text generator for macOS. Incredibly quick and lightweight. And it's completely free!
- KeepingYouAwake: Don't let your Mac fall asleep
- Amphetamine: With Amphetamine, you can effortlessly override your energy saver settings and keep your Mac awake.
- f.lux: Is your computer keeping you up late? f.lux is free software that warms up your computer display at night, to match your indoor lighting.
- Moom: Move and zoom windows
- Open PR with your links
- Try to keep them organized and categorized
- Use h2 for categories (ex: frameworks) and h3 for subcategories (ex: React, Angular...)