Resources are grouped by topic. Click a button below to jump to the section of the page holding resource links for that topic.
If you have a suggestion for a resource to be added to the list, please share it in the Coding Club Slack channel.
Web Design Resources
- Cool Backgrounds
- Fillerama (filler text generator)
- Hues hub (hex colors)
- CSS3 Patterns Gallery
- Colormind (color scheme generator)
- Google Fonts
- PlaceCage (Nic Cage placeholder images)
- FillMurray (Bill Murray placeholder images)
- Placeholder.com (images and text)
- IcoMoon (icon sets)
- Font Awesome (icons and logos)
- Variable Fonts
- Color-Hex (hex color codes)
- FlatIcon Pattern Generator
- Tabler SVG Icons
- CSS Background Patterns
- Clippy Clip Path Maker
- Box-Shadow Generator
- Color-Picker Tool
- Animated Gradient Background Generator
- Transparent Textures
- Pixel Art Studio (make single-div pixel art)
- Make 8-bit Art
- Tylify App (create repeating patterns)
- Jason Ipsum (placeholder text)
- FreeDesignStuff.com
- UI Gradients
- Design Kits for Adobe Xd
- Indestructible Type (fonts)
- Free Animated Icons
- Fontshare
- SVG Visualizer
- SVGurt (SVG transformation tool)
- Tabbied (generated patterns)
- WowPatterns (free vector patterns)
- SVGR (SVG playground)
- SVG Path Editor
- Blob Maker
- Get Waves
- Mesh Gradient
- Google Design Resources
- The Noun Project (icons)
- FlatIcon
- RGB Color Chart
- ColorsWall (store color palettes)
- Conic.css (gradient generator)
- Anicons (animated icons)
- Border-Image Generator
- Accessible Color Palette Builder
- Leonardo (color tools for design systems)
- Generated Photos (placeholders)
- I Code This (daily HTML/CSS challenges)
- Modern Font Stacks
HTML Resources
CSS Resources
- CSS Validator
- Mozilla CSS Documentation
- Using @font-face
- CSS Reset
- Normalize.css
- Animate.css
- Can I Use
- MediaQueri.es
- NavNav.co
- Pure.css
- Visual Flexbox Cheat Sheet
- Visual Grid Cheat Sheet
- CSS Selectors Cheat Sheet
- Responsive Images (MDN)
- CSS {In Real Life}
- Color Codes (hex, rgb, hsl)
- Modern CSS
- min(), max(), & clamp()
- CSS Visual Reference
- How @supports Works
- How Flexbox Works
- Using CSS Grid as a Mask
- Fun CSS-Only Scrolling Effects
- SmolCSS (minimal snippets)
- Complete Guide to Flexbox
- Complete Guide to Grid
- Complete Guide to CSS Functions
- Flexbox Cheat Sheet
- Grid Cheat Sheet
- Flexbox Froggy (game)
- Grid Garden (game)
- Grid By Example
- A Complete Guide to CSS Media Queries
- CSS Gradient
- Tailwind.css
- CSS Grid Generator
- Flexbox Defense (game)
- Learn CSS (Google Developers)
- The CSS Cascade
- prefers-color-scheme
- CSS3 Test
- Three CSS Alternatives to JavaScript Navigation
- Easing Functions Cheat Sheet
- CSS Almanac (CSS Tricks)
- Level Up Your CSS Skills With the :has() Selector
Version Control
Visual Studio Code
- Visual Studio Code
- Visual Studio Code Documentation
- vscode.dev
- CSS Reset (extension)
- Open in Browser (extension)
- Google Fonts (extension)
- JSON Editor (extension)
- VS Code Extensions for Front-End Developers (2020)
- User and Workspace Settings in VS Code
- How to Increase Your Productivity in VS Code (free course)
- axe Accessibility Linter (extension)
- Code Spell Checker (extension)
- Color Highlight (extension)
- Rainbow Brackets (extension)
- ESLint (extension)
- jQuery Code Snippets (extension)
- Todo Tree (extension)
- VS Code Extensions Recommended by Microsoft
- The 20 Best Visual Studio Code Extensions for Front End Developers (by Shopify)
JavaScript
- Mozilla JavaScript Documentation
- jQuery.com
- jQueryUI.com
- Timeline.js
- JavaScript.info
- JSONLint
- JavaScript for Cats
- Google Hosted Libraries
- Processing.org
- JavaScript Obfuscator
- Accessible-Slick (accessible jQuery carousels)
- RegExr
- RapidAPI Hub
- Google’s JS Style Guide
- Regex Generator
- Regex 101
- JavaScript Scope and Closures
- My JSON Server
- Vue.js
- Tableau (data visualization)
- Gatsby.js
- QUnit (testing framework for JS)
- Particles.js
- Detecting Caps Lock in JavaScript
- How to Create a Fake REST API For Your Project with JSON Server
- Promises, Thenables, and Lazy-Evaluation: What, Why, How
- Client-Side Web APIs
- ResponsiveSlides.js
- APIs Guru
- Eloquent JavaScript
- Highlight.js
- Validate JavaScript
- Online JSON Editor
- ProgrammableWeb API Directory
- Slick Carousel
- Owl Carousel
- Obfuscator.io
- Gulp.js
- Drawing Shapes with <canvas>
- Regex Crossword
- Short Guide to Generative Art and Creative Coding
- Cycle2 Carousel
- Regex Learn
- ColorJS
- SwiperJS Carousel
- D3.js (data visualization)
- Chart.js (data visualization)
- Infogram (data visualization)
- Modernizr
- React Tutorial
- Closure and Event Listeners
- When to Use Function Expressions
Accessibility
- Writing CSS With Accessibility in Mind
- W3C – Using ARIA
- W3C – ARIA Authoring Practices Guide
- WebAIM
- WebAIM – Accessible Forms
- Readability – Optimal Line Length
- van11y (accessible vanilla JS)
- The A11Y Project
- Contrast Ratio Checker
- Semantics and Accessibility: Heading Structure
- Button Buddy (accessible button contrast generator)
- ARIA Examples by Role
- The HTML Autocomplete Attribute
- Intro to Web Accessibility
- Accessible Color Generator
- How to Write Better Alt Text Descriptions for Accessibility
- WebAccessibility.com
- Colorblind Web Page Filter
- Readability Test
- A11y Style Guide
- Color Safe (accessible color combinations)
- aria-label, aria-labelledby, and aria-describedby: What’s the Difference?
- ARIA and Dynamic Content
- Web Accessibility and the ADA
- Setting up a Screen Reader Testing Environment on Your Computer
- Color & Contrast
- CSS and JS Accessibility Best Practices
- Invisible Content Just For Screen Readers
- ASU DIY Web Accessibility Audit
- ally.js
- W3C Definition of ARIA Roles
- WAVE – Web Accessibility Evaluation Tool
- Inclusive Components
- A11y Coffee
- Optimal Size and Spacing for Mobile Buttons
- Semantic Structure: Regions, Headings, and Lists
- Accessible Images, Icons, and Emoji
- Solid Start (learn about accessibility)
- Stark (library of accessibility guides)
- Guide to Accessible Web Design and Development
- Understanding ARIA Landmarks – General Principles and Roles
- The Ultimate Guide to Web Accessibility
- Accessibility Insights for Web Developers
- An Overview of Accessible Web Applications and Widgets
- Accessibility Techniques for Dynamic Content
- Are We Live? (ARIA live regions)
- Accessibility Considerations for the HTML Dialog Element
- Building an Accessible Theme Picker with HTML, CSS, and JS
- Accessible Brand Colors by Use All Five
SEO
Keyboard Shortcuts
GIT Coding Club 