Frontend Development
A curated list of resources for Frontend development
This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.
How the Internet Works >Documentation
How the Internet Works >Articles
How the Internet Works >Videos
HTML >Documentation
Structuring the web with HTML MDN
Comprehensive HTML learning
HTML Reference
Visual guide to HTML
HTML >Cheat Sheets
HTML >Articles
HTML >Books
HTML >Courses
HTML >Websites
CSS >Documentation
CSS >Cheat Sheets
Extensive CSS Reference
An extensive CSS reference offering way more content than MDN.
CSS >Books
Tiny CSS Projects 💵
Improve the way you write CSS as you build 12 tiny projects.
CSS >Courses
CSS >Frameworks and Libraries
Bulma
Modern CSS framework based on Flexbox. Demo, Docs, Repo | #Sass
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. Demo, Docs, Repo | #SCSS
Animate.css
簡單又好用的動畫庫,網站內有簡單的範例跟demo效果
Materialize CSS
:octocat:
Picnic CSS
Lightweight and beautiful library. Demo, Docs, Repo | #SCSS
Pure
Set of small, responsive CSS modules that you can use in every web project. Demo, Docs, Repo | #CSS
Semantic UI
Open source UI component library for React, Meteor, Ember and Angular.
Spectre
A collection of professionally designed, every day UI components built on a framework-agnostic technology.
Tachyons
Quickly build and design new UI without writing CSS. Demo, Docs, Repo | #CSS
Tailwind CSS
(Awesome List) - A utility-first CSS framework for rapidly building custom designs.
UI Kit
Lightweight and modular front-end framework for developing fast and powerful web interfaces. Demo, Docs, Repo | #LESS #SCSS
CSS >Practice your CSS Skills
Codepen
Central repository of user submitted code concepts/snippets. Great for experiments.
CodeSandbox
Run JavaScript with starting templates for React, Vue, Angular, Preact and more with full intellisense, lint error checking and live collaborative editing.
JS Bin
JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code.
JSFiddle
an online IDE service and online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets
StackBlitz
Run JavaScript with starting templates for Angular, React, or Ionic with full intellisense + instant error checking.
CSS >Style Guides
AirBnb Style Guide - CSS
A mostly reasonable approach to CSS and Sass.
CSS Guidelines
High-level advice and guidelines for writing sane, manageable, scalable CSS.
Google Style Guide - HTML & CSS
by Google
Trello CSS Guide
by Bobby Grace
CSS >Websites
Can I use - Up-to-date browser support tables for front-end technologies
Browser support for CSS, HTML5 and other front-end web technologies.
CSSBattle - Learn CSS through a fun code-golfing game
Online CSS Code Golfing battleground. Here, players from all around the world try to visually replicate "Targets" in smallest possible CSS code and battle it out to get to the top of the leaderboard.
CSS Easing functions - A collection of easing functions used in CSS transitions and animations.
Visual cheat sheet of easing functions. Compare curves, preview motion, and copy CSS or JavaScript snippets.
CSS Diner - Learn CSS Selectors through a game
Interactive gamified tutorial for learning selection with CSS.
CSS Grid Garden - Learn CSS Grid through a game
Lovely game where you write CSS code to grow your carrot garden.
CSS-tricks - A blog site for everything CSS
. signup is at the bottom of the page right under the Get the newsletter header!.
Cubic Berzier Function Generator
A great utility for creating Bezier curves. You can import and export curves to/from your library to share them with others.
Flexbox Froggy - Learn CSS Flexbox through a game
Learn all the basics of Flexbox with a fun game involving frogs and lily pads.
Beautiful CSS box-shadow examples - A curated collection of 90+ free beautiful box-shadow, click to copy.
Curated collection of 93 beautiful CSS box-shadow. Click to copy.
JavaScript >Documentation
JavaScript >Reference & Cheat Sheets
JavaScript >Courses
JavaScript30 - Wes Bos
Video course with 30 small and self-contained tutorials to build neat little things with plain JavaScript.
JavaScript >Books
Eloquent JavaScript
Modern JavaScript programming, with examples.
You Don't Know JavaScript
Possibly the best book written on modern JavaScript, completely readable online for free, or can be bought to support the author.
Learning JavaScript Design Patterns
jQuery Plugin Design Patterns
JavaScript >Challenge Websites
Coderbyte
Programming challenges and specific routes to help learn specific skills
Codewars
Interesting ranking system with beautiful UI for competitive programming and interview prep.
CodinGame
Learn Go by solving interactive tasks using small games as practical examples.
CodeForces
Great site for preparing for programming contests
Exercism
Code practice and mentorship.
HackerEarth
is a commercial platform for sourcing, assessing, interviewing, and upskilling developers.
Hackerrank
Preparação para entrevistas técnicas. Focado em desafios de algoritmos, estruturas de dados e diversas linguagens como Java e SQL.
Leetcode
Treinamento intensivo para entrevistas de emprego em big techs. Oferece um vasto banco de problemas, planos de estudo e discussões em fóruns.
Pramp
The service allows you to take five free (!) online #coding and #productmanagement interview training sessions with peers
Project Euler
Great for practicing writing Python codes
TopCoder
Sponsored by tech companies.
JavaScript >Snippets and cheatsheets
Short JavaScript code snippets for all your development needs
JavaScript snippets you can understand in 30 seconds or less.
JavaScript >Style Guides
Airbnb JavaScript Style Guide
(MIT) - A mostly reasonable approach to JavaScript
Google JavaScript Style Guide
This document serves as the complete definition of Google's coding standards for source code in the JavaScript programming language.
Standardjs
One JavaScript Style to Rule Them All.
JavaScript >Visual Studio Code Extensions
ESLint - Code Linter
Linter for eslint.
Intellisense - Code completion and Information
is an extension for Visual Studio Code that autocompletes npm modules in import statements.
Live Server - Live Web Page Reload.
is an extension for Visual Studio Code that launches a development local Server with live reload feature for static & dynamic pages.
Path Intellisense - Auto-complete path files
is an extension for Visual Studio Code that autocompletes filenames.
Prettier - Code Formatting.
is an extension for Visual Studio Code that is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Settings Sync - Synchronise your editor settings using Github.
is an extension for Visual Studio Code that synchronizes Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
JavaScript >Websites
JavaScript >Articles
Git >Courses
Git >Books
Git >Tools
Bitbucket
Host, manage, and share Git and Mercurial repositories in the cloud. Free, unlimited private repositories for up to 5 developers give teams the flexibility to grow and code without restrictions.
Github
Build software better, together. GitHub is the largest code host on the planet with over 13.2 million repositories. Large or small, every repository comes with the same powerful tools. These tools are open to the community for public projects and secure for private projects.
Sourcetree
free (in-beer) GUI client. Windows and Mac only
React >Documentation
React >Cheat Sheets
React >Courses
React >Books
React >Project Ideas
React >Podcasts
React Round Up
(iTunes | Stitcher | RSS); Description: Discussions and Interviews about React hosted by Charles Max Wood.; Host: Charles Max Wood @cmaxw; Frequency: Once a week; Runtime: 45 - 75 mins, regularly ~60 mins
React >Blog Sites
useHooks Blog
Easy to understand React Hook recipes by Gabe Ragland.
React >Youtube Channels
Codevolution
Content about: React.js, JavaScript, TypeScript Featured playlists: React.js Tutorial for Beginners, React.js Hooks Tutorial, React.js Redux Tutorial, React.js Storybook Tutorial, React.js Formik Tutorial, Practical React.js.
freeCodeCamp
Content about: General programming, Computer science, Web Dev, DevOps, etc. Featured playlists: Python Tutorials, Machine Learning, Java Tutorials.
React >React Tooling
ESLint
JS Foundation - Linting tool for JavaScript with multiple security linting rules available.
Lodash
Utility library delivering consistency, customization, performance, & extras. A better and faster Underscore.js.
React Router
Declarative routing for React
React >State Management
Recoil
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React. (archived)
Redux
(👨💻 1K · 🔀 15K · 📦 4.1M · 📋 2K - 1% open · ⏱️ 04.06.2024):
React >UI Frameworks & Libraries
Material UI
React components for faster and easier web development. Build your own design system, or start with Material Design.
Onsen UI
More than 100 components are specially made for Material and Flat design based on original the Onsen UI framework
Reactstrap
Stateless React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript
React Bootstrap
React-Bootstrap is a complete re-implementation of the Bootstrap 3 components using React.
React Toolbox (Material Design)
set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integrates with your webpack workflow.
Rebass
React UI component library & design system, built with styled-components and styled-system. It’s a great choice for Styled-components fans.
Semantic UI React
Semantic UI React is the official React integration for Semantic UI. It’s used by Netflix, Amazon and other major organizations.
React >Unit Testing
Enzyme
(👨💻 400 · 🔀 2K · 📦 560K · 📋 1.8K - 15% open · ⏱️ 23.02.2024):
React Testing Library
🛠 - 🐙 - react-testing-library is a tool in the Testing Frameworks category of a tech stack.
React >Create React App
Create React App
A curated list of browser globals that commonly cause confusion and are not recommended to use without an explicit window. qualifier.
React Boilerplate
🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
React >CSS in JS
Styled Components
🛠 - 🐙 - A react-specific css-in-js solution.
Emotion (css in js)
🛠 - 🐙 - CSS-in-JS library designed for high performance style composition.
React >Remote Data Fetching
React >Server Side Rendering
React >Experts on Twitter
React >Conferences
React >Community
A community for learning and developing web applications using React.
Vue >Documentation
Vue >Courses
Advanced Vue.js Features from the Ground Up - Frontend Masters
Learn how to build more accessible routing, state management, form validation and internationalization libraries from the ground up!
Learn Vue by Building and Deploying a CRUD App - Testdriven
This course is focused on teaching the fundamentals of Vue by building and testing a web application using Test-Driven Development (TDD).
Become a Ninja with Vue 3 - Vue-Exercises Ninja Squad
This course teaches how to build a complete application with Vue 3, step by step, using Vue CLI, TypeScript and the Composition API. Each exercise comes with instructions and tests to check 100% of your code.
Learn Vue - VueSchool💵
Learn Vue.js from video courses by core members and industry experts
Vue >Project Ideas
Vue >Books
Fullstack Vue 💵
by Hassan Djirdeh, Nate Murray, & Ari Lerner. (March 2018)
Full-Stack Web Development with Vue.js and Node 💵
by Aneeta Sharma, Packt. (May 2018)
The Vue Handbook 💵
by Flavio Copes. (July 2018)
The Mastery Of Vue.js 2 💵
by Alex Kyriakidis and Kostas Maniatis, Leanpub. (Mar 2017)
Vue.js 2 Design Patterns and Best Practices 💵
by Paul Halliday, Packt. (March 2018)
Vue.js in Action 💵
by Erik Hanchett and Benjamin Listwon (Spring 2018)
Vue >Podcasts
Enjoy the Vue
Description: panel discussions and guest interviews to keep you up to date with the Vue community and Vue development practices; Hosts: [Ari Clark](https://twitter.com/gloomyLumi], Ben Hong, Chris Fritz, Tessa; Frequency: Once a week; Runtime: 40 - 70 mins, regularly ~50 mins
Vue News Podcast
Description: We cover the latest Vue news and tutorials in about 5 minutes. Our goal is to give you the information you need to stay on top of your game as a Vue developer.; Frequency: Once a week; Runtime: 4 - 10 mins, regularly ~5 mins
Views on Vue
Description: Views on Vue; Frequency: Once a week; Runtime: 25 - 85 mins, regularly ~60 mins
Vue >Youtube Channels
freeCodeCamp
Content about: General programming, Computer science, Web Dev, DevOps, etc. Featured playlists: Python Tutorials, Machine Learning, Java Tutorials.
Vue >Tools
Bit
End-to-end component sharing and management. It takes care of component development and publishing in your library (automatic dependency resolution, versioning etc), making each of them individually useful to consume and develop anywhere, so teams can manage and share components at scale.
Bootstrap Vue
comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.
Nuxt.js
Versatile vue-based framework for server-side-rendered, static and traditional single page applications.
Onseen UI
More than 100 components are specially made for Material and Flat design based on original the Onsen UI framework
Quansar Framework
Material Component Framework for Vue.js 2.
Vue Dev Tools
Inspect Vue.js components and manipulate their data.
Vue CLI
🛠️ webpack-based tooling for Vue.js Development
Vuetify
🚨 Issues 🏬 Store 🎮 Play 💬 Discord 🐦 Twitter 👽 Reddit
Vue >Blogs
Vue >Community
Vue >Conferences
Browser extensions
Icons
BoxIcons
Boxicons is a simple vector icons set carefully crafted for designers and developers to use in your next project.
CSS.gg
Open-source CSS, SVG, and Figma UI Icons available in SVG Sprite, styled-components, NPM & API
Freepik
collection of exclusive freebies and all graphic resources that you need for your projects.
Heroicons
Steve schoger's (somewhat limited) svg iconset. another viewer: https://heroicons.dev/
Icontre
a library of free vector icons for personal and commercial projects, designed by first-class designers.
Iconmonstr
Discover 4486+ free icons in 310 collections. SVG, EPS, PSD, PNG. OK without attribution, don't sell it.
Ionicons
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere.
Fonts and Typography
1001Fonts
english font
Befonts
a Decent collection of free fonts.
DaFont
archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.
Google Fonts
Interactive directory of free hosted application programming interfaces for web fonts.
FonstSpace
提供超过80,000种免费字体下载,包括个人使用和商业用途的字体。用户可上传自己的字体作品。
FontsArena
curated typography website with high-quality free fonts, done-for-you research articles, free alternatives to premium fonts, news, and more.
Fontsquirrel
A curated collection of free fonts from a variety of foundries
MyFonts
Paid. Long-running premium font marketplace; perpetual desktop, web, app licenses.
Typo Guide
A Pocket Guide to Master Every Day’s Typographic Adventures.
Illustrations
Blob maker
create vector blob illustrations in the browser, with varying colour, complexity and contrast.
Blush
good random generator by Pablo Stanley. Made for Sketch, Figma, InVision Studio and Adobe XD.
Draw Kit
Hand-drawn vector illustration resources for your next project
Icons 8
vector illustrations to class up your project. Free for both personal and commercial use.
Manypixels
ManyPixels offer free svg illustrations with the possibility to customize the color as well.
Optimization
Google Analytics
Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.
Namecheap
知名域名注册商,提供具有竞争力的价格和优质客户服务。
PageSpeed Insights
Online tool that measures the performance of a page for mobile devices and desktop devices. It fetches the url twice, once with a mobile user-agent, and once with a desktop-user agent.
Woorank
WooRank analyzes your website for optimization best practices and shows how it ranks against your competition. Its real-time brandable reports, consisting of over 150 data-points, help you to instantly spot critical issues that impact traffic, usability and conversions. Sync your analytics, social…
Color Inspiration
0to255
유사 색상의 음영도 확인 도구
Branition Colors
Hand-curated collection of color palettes best fitted for branding.
Coolors
The super fast color schemes generator! Create the perfect palette or get inspired by thousands of beautiful color schemes. Features include color picker, pick palette from photo, create a collage, make your own gradient palette, create a gradient, contrast checker, etc.
Color Hex
Author: Color-Hex.
Color Hunt
free and open platform for color inspiration with thousands of trendy hand-picked color palettes.
Flat UI Colors
Flat color picker which gives you the perfect colors for flat designs.
LOL Color Palettes
Curated color palette inspiration.
Material Palette
Generate & export your Material Design color palette.
myColor Space
the perfect matching color scheme for your next project! Generate nice color palettes.
Paletton
A designer tool for creating color combinations that work together well.
UIGradients
handpicked collection of beautiful color gradients for designers and developers.
Images and Videos
Burst
Burst from Shopify - Free stock photos for everyone
Gratisography
Free high-resolution pictures you can use on your personal and commercial projects. New pictures added weekly.
Life of Pix
Free high-resolution photos, no copyright restrictions. Photographs added weekly.
Pexels
Royalty free high-resolution stock photos, licensed under Creative Commons Zero (CC0)
Reshot
a massive library of handpicked free stock photos you won’t find elsewhere.
Startup Stock Photos
Free photos for startups, bloggers, publishers, websites, designers, developers, creators, & everyone else.
The Stocks
"The best royalty free stock photos are delivered now along with videos, audios, icons, fonts and colors."
Hosting Sites
Amazon Web Services
Rent cloud servers for more timeconsuming calculations (r4.xlarge server is a good place to start).
Digital Ocean
is a cloud infrastructure provider that provides developers cloud services that help to deploy and scale applications that run simultaneously on multiple computers with data centers worldwide.
Firebase
A powerful API to store and sync data in realtime. Build realtime mobile and web apps in minutes using client-side code and the powerful Firebase API. When data changes, apps built with Firebase update instantly across every device -- web or mobile.
Github
Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
Design Inspiration
Awwwards
The awards for design, creativity and innovation on the Internet.
Behance
Showcase and discover the latest work from top online portfolios by creative professionals across industries.
Dribble
an online community for showcasing user-made artwork. A great resource to get inspired by others work.
One Page Love
is the leading showcase of beautiful One Page websites, templates and resources.
Site Inspire
Get inspired.
Site Inspire
is a showcase of the finest web and interactive design.
UI Movement
. Only the best UI design inspiration, right in your inbox.
Portfolio Inspiration
Developer Portfolios - Github Repo
A list of developer portfolios for your inspiration
Youtube Channels
Academind
Content about: Frontend, JavaScript, Web design Featured playlists: React.js + Redux Basics, Vue.js 2 - Getting Started, Amazon Web Services Basics.
The Net Ninja
Content about: Frontend, Frameworks Featured playlists: Flutter Tutorial for Beginners, React.js and React Native playlists, a lot of JavaScript playlists, including JavaScript frameworks, GraphQL Tutorial, many, many more!.
Traversy Media
Content about: Javascript, CSS, HTML, Vue.js, React.js, Tailwind CSS, MongoDB, Express.js, Web development Featured playlists: Vue.js crash course, React.js crash course, Semantic UI in 60 minutes, Full Stack Vue.js, Express and MongoDB, Async JS crash course.
Podcasts
codeNewbies
Description: Stories from people on their coding journey.; Host: Saron Yitbarick @saronyitbarek; Frequency: About twice a month; Runtime: 30-90 minutes
Codepen Radio
Description: The people behind Codepen.io talk business, tech and more!; Frequency: Once a week; Runtime: 25 - 40 mins, regularly ~30 mins
Ladybug Podcast
Description: An all lady-hosted tech podcast for all developers.; Host: Emma Wedekind @emmawedekind, Ali Spittel @aspittel, Kelly Vaughn @kvlly; Frequency: Once a week; Runtime: 30 - 50 mins, regularly ~40 mins
Syntax
Description: A Tasty Treats Podcast for Web Developers.; Host: Wes Bos @wesbos, Scott Tolinski @stolinski; Frequency: Twice a week; Runtime: 20 - 80 mins, regularly ~60 mins
The Changelog
The tagline for the Changelog says it all: “Open Source moves fast. Keep up.” This podcast,and more. It's everything web that matters.
Blogs
Codrops
is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.
CSS-tricks - A blog site for everything CSS
. signup is at the bottom of the page right under the Get the newsletter header!.
Dev.to
Social Network for Developers.
Frontend Focus
. A once–weekly HTML5 and Web Platform technology roundup. CSS 3, Canvas, WebSockets, WebGL, Native Client, and more.
Hacker News
Where a technical audience finds and criticizes new products.
Hashnode
Hashnode는 무료 개발자 블로그 플랫폼으로 자신의 도메인에 기사를 게시할 수 있으며 글로벌 개발자 커뮤니티와 연결될 수 있도록 도와줌
Medium
is a place to read, write, and interact with the stories that matter most to you.
Smashing Magazine
founded in September 2006 in Germany, Smashing Magazine delivers reliable, useful, but most importantly practical articles to web designers and developers.
Interview Prep >Resume Templates
Interview Prep >Resume Editing
Grammarly
a writing assistant that goes deeper than grammar to offer you comprehensive writing feedback.
Interview Prep >Job Sites
Interview Prep >Freelance Jobs Sites
Interview Prep >Mock Interviews
Interviewing.io
Become awesome at technical interviews
Pramp
The service allows you to take five free (!) online #coding and #productmanagement interview training sessions with peers
Interview Prep >Project Pair Programming
Interview Prep >Open Source
Open Source Fridays
Helps you find a project to contribute to.
Interview Prep >YouTube Series
Interview Prep >Articles
Newsletters
CSS Weekly
. Weekly e-mail roundup of css articles, tutorials, experiments and tools curated by Zoran Jambor.
Frontend Focus
. A once–weekly HTML5 and Web Platform technology roundup. CSS 3, Canvas, WebSockets, WebGL, Native Client, and more.
JavaScript Weekly
. A free, once–weekly e-mail round-up of JavaScript news and articles. Archive.
Smashing News Letter
. Email newsletter twice a month with useful tips, tricks and resources for designers and developers.
Related lists in Front-End Development
See categoryAwesome Vue
vuejs/awesome-vue
🎉 A curated list of awesome things related to Vue.js
Awesome DESIGN.md
VoltAgent/awesome-design-md
A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.
Awesome Angular
PatrickJS/awesome-angular
:page_facing_up: A curated list of awesome Angular resources
Awesome Blazor
AdrienTorris/awesome-blazor
Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
Must-Watch CSS
AllThingsSmitty/must-watch-css
CSS talks you have to see covering CSS Grid, flexbox, custom variables, performance, frameworks, tooling, and more! 📺
Awesome React Native
jondot/awesome-react-native
Awesome React Native components, news, tools, and learning material!