Hi there! This is an archive of resources that I used (and continue to use) to learn Front-end development. Feel free to check it out! Happy coding!

Disclaimer: Some of those may be paid resources/courses. Any of the attached links are not affiliated.

---

Table of contents

1. General guides
2. HTML
3. CSS
4. Accessibility
5. GIT
6. JavaScript
7. React
8. API
9. RegEx
10. Testing
11. Markdown
12. Courses
13. Career
14. Project building
15. Frontend Exercises
16. Design
    • Typography
    • SVG
    • Color Palettes
    • Patterns
    • Illustrations
    • Icons
17. Random

General guides

• DevDocs
• Frontend Developer's Roadmap
• Junior Web Developer Checklist
• Developer Handbook
• 30 Seconds of Code

HTML

• HTML Best Practices
• HTML Elements Reference by MDN
• Code Sniffer

CSS

• CSS Battle
• Can I use?
• CSS Reference by MDN
• CSS Gradient Generator
• Animista: CSS Animations
• Cubic Bezier
• Easing functions
• PX to REM converter
• Fancy Border-radius
• CSS-animations course

Accessibility

• Accessibility Checklist
• Color Safe - accessible web color combinations
• ARIA in HTML
• Axe-con: lectures on accessibility
• Inclusive Design Methodology
• Accessibility check
• WhoCanUse - color checker
• Pa11y: accessibility testing pal

GIT

• Girliemac's Git Purr

JavaScript

• JavaScript Algorithms
• JavaScript Reference by MDN
• Principles of Writing Consistent, Idiomatic JavaScript
• DOM Manipulation Reference
• JavaScript Questions
• You Don't Know JS (book series)
• Clean Code JavaScript (guidelines)
• Principles of Writing Consistent, Idiomatic JavaScript
• Zdog: Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
• JavaScript Weekly Newsletter
• Bytes.dev - JavaScript Newsletter

React

• Top JavaScript Concepts to Know Before Learning React
• React Docs
• Create React App
• React Device Detect

API

• Public APIs
• OpenAI API

RegEx

• RegEx 101
• Regex Crossword
• Regex Tuesday Challenges
• RegexOne

Testing

• Learn Test Driven Development

Markdown

• Basic Syntax
• Extended Syntax
• Cheatsheet
• Readme.so

Courses

• Scrimba's Frontend Developer Career Path
• Codecademy's courses
• The Odin Project
• Calarts's UI/UX Design Specialization
• Computer Science by Open Source Society University
• Harvard's Intro to Computer Science
• MIT OpenCourseWare

Career

• Front-end Developer Interview Questions
• Front-end Interview Handbook
• Hiring Without Whiteboards
• Coding Interview University
• Standard Resume Builder
• LeetCode Guide
• Grind 75
• Interviews.school
• Codesignal

Project building

• Build your own X
• App Ideas
• Frontend Mentor Challenges
• JavaScript 30
• 50 React Projects

Frontend Exercises

• Frontend Mentor
• Dev Challenges
• Codewell
• Dev Projects
• Frontend Practice
• Frontend Eval

Design

• Material Design
• Human Interface Guidelines
• Brad Traversy's Design Resources for Developers
• A Unified Theory for Designing Just About Anything
• The Ultimate Guide With All The Secrets You Will Need To Know To Become A Fabulous Design Unicorn
• Laws of UX
• Design Principles
• Identity Designed - a brand identity showcase

Typography

• A Web Typography Learning Game
• Fontshare

SVG

• Shape Divider App
• Blob Maker
• Get Waves (dividers)

Color palettes

• Happy Hues
• Brand Colors

Patterns

• UI Design Patterns
• BEAUBUS SVG Patterns
• Subtle Patterns
• Patternpad - pattern creator

Illustrations

• Blush.design - easily create and customize stunning illustrations
• undraw Illustrations
• Doodle Ipsum
• Open Peeps
• Open Doodles

Icons

• Icones - The Ultimate Icons List
• Simple Icons
• Bootstrap Icons
• Material Icons

Random

• Girliemac's Algorithms & Data Structures
• Awesome for non-programmers - list of Open Source projects to contribute to
• Awesome for beginners - list of Open Source projects to contribute to
• Leetcode 75 Questions Spreadsheet with Video Solutions
• Repo that collects links to games that can teach you HTML, CSS, SQL, etc.
• Frontend Focus Newsletter