Awesome
<!-- @format -->
Front-end development
Hi There
<p> This is an open-source repository for all who want to learn front-end Development.</p> <br> <h2 align="center" ><strong>Front-end development</strong></h2><br>Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data. <br>
Make sure to show your support by star mark & sharing the repository
A List of Useful Resources for Front End Developers
Table of Contents
- Front-end development
- Hi There
- A List of Useful Resources for Front End Developers
RoadMap
- Roadmap - For a well described step-by-step roadmap for front-end developers.
Useful
- BGJar - Free SVG background generator for your websites, blogs, and app.
- Inspect - inspect and debug your mobile web apps and websites on iOS devices directly from Mac or Windows.
Learning
- A Complete Guide to Flexbox | CSS-Tricks - A comprehensive guide to the Flexbox Layout.
- A Complete Guide to Grid | CSS-Tricks - A comprehensive guide to the Grid Layout.
- Command Line Power User - A video series for web developers on learning a modern command-line workflow with ZSH, Z, and related tools.
- CSS Grid - Complete video course all about CSS Grid
- Best Of JS A site to check the best GitHub Repos for your favourite js framework
- CodeCademy - A series of interactive courses teaching the world how to code. Offering free and paid subscriptions across a variety of languages.
- Codementor - A tool to get help from experienced developers in various coding languages on your learning journey.
- Scaler Topics - A platform to learn programming languages like HTML, Java, Javascript, Python etc.
- Conquering Responsive Layouts - Made by Kevin Powell(https://twitter.com/KevinJPowell). This course takes you through everything you need to know to create responsive layouts in his brilliant 21-day course.
- Coursera - A selection of courses from highly reputable schools like Stanford and Yale.
- CSS Almanac | CSS-Tricks - A quick reference guide to many features of CSS.
- CSS Grid Playground - A visual guide curated by the Mozilla team to help you learn CSS's grid layout features with lots of code example and demos.
- Design Resources - Design Resources from Skullface.
- dev.to - Where programmers share ideas and help each other grow.
- DevProjects - A free community consists of curated projects from senior developers to help you bridge the gap between theory and practice.
!
- Dicoding Academy - Where everyone can learn programming from fundamentals (Available only in Bahasa Indonesia).
- edx - A series of University-level courses from Harvard, MIT, Wharton, and more.
- EggHead - Web development video tutorials in "bite-size" segments. Has both free and "Pro" (paid) memberships.
- Enboard | Front End Resources - Organized resources about front end development.
- Flexbox - Level up your Flexbox knowledge – an online, Zombie-centric story course.
- freeCodeCamp - A free resource incorporating programming projects and interview preparation for developer jobs.
- Frontend Masters - Web development video tutorials from industry leaders (updated frequently). Has both free (limited-time) and paid memberships.
- Full Stack Open - Course on Full Stack Web Development by University of Helsinski. Learn React, Redux, Node.js, MongoDB, GraphQL and TypeScript in one go! This course will introduce you to modern JavaScript-based web development. The main focus is on building single page applications with ReactJS that use REST APIs built with Node.js.
- GeeksforGeeks - A computer science portal for geeks.
- Khan Academy - A universal online learning platform that also provides the important courses for developers.
- LearnAnything - Search interactive mind maps to learn anything.
- Learn JavaScript - Learn JavaScript in an interactive environment. Read short lessons, take notes, and complete challenges directly in your browser.
- Mastering Markdown - A Mini Series that will change how you write documentation.
- Mozilla Developer Network - The latest information about Open Web technologies.
- Complete web development tutorials -Lyty.dev complete web development tutorials with well explained examples for free.
- Pluralsight - Unlimited online developer training from industry experts.
- Saylor - An open, online learning solution offering college credit opportunities for students.
- Scrimba - Code-screencast-based learning in a variety of languages.
- Scotch - Many Web development courses. Has both free and "Premium" (paid) memberships.
- Search Courses - A selection of trending courses and tutorials.
- SoloLearn- A free portal for learning web development.
- Team Treehouse - Self-paced learning across a variety of languages and subjects.
- The Modern JavaScript Tutorial - Everything about the Javascript Language.
- The Odin Project - An Open-Source Curriculum for Learning Web Development
- Tutorials point - Tutorials for many different languages with interactive code examples.
- Udacity - Learn anything online – deep learning, machine learning, front end languages.
- Udemy - An online learning and teaching marketplace.
- Watch and Code - The computer science school for students that demand intellectual rigor and depth.
- W3School - Web development reference library. Covers HTML, CSS, Javascript (jQuery, AJAX, and more), as well as some server-side languages. Includes descriptions and interactive examples.
- Web APIs | MDN - Everything a beginner needs to know about Web APIs.
- Web Design in 4 minutes by Jeremy Thomas creator of Bulma CSS and marksheet.io.
- WesBos - Free and premium courses in web development
- Web Dev Tricks - All your CSS, js, jQuery trending codes with source codes in one place. Your handy partner for all types of modern web development and designs.
- web.dev - Guides and resources for modern fast websites by google developers.
- Become a Front-End Web Developer - Develop competency with HTML, CSS, JavaScript, and jQuery.
- WebGlossary.info - Glossary for web development and design, with more than 3,500 entries (as per August 2023)
- Web Skills - A visual overview of useful skills to learn as a web developer.
- The App Brewery - All in one platform to cover your web development skills
- Full Stack open 2021 - This course serves as an introduction to modern web application development with JavaScript.
- Devtools Tech - A free interview preparation platform for Frontend Engineers with a focus on high quality real world programming questions.
A11y
- A11y Style Guide - A living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.
- Axe - Accessibility testing toolkit.
- Colour Contrast Analyser - CCA helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.
- Deque University - Online courses on web and mobile accessibility skills.
- W3C Intro to Web Accessibility - Strategies, standards, resources to make the Web accessible to people with disabilities.
YouTube Channels
- Apna College- Tutorials on HTML,CSS,Bootstrap,JavaScript,Git,Github,SQL
- Adrian Twarog- Tutorials on HTML,CSS,Bootstrap,JavaScript,React,React
Native,UI/UX and cool Designing stuff - 1stWebDesigner - Tutorials on WordPress, PSD to HTML
- Brad Hussey - Tutorials on Bootstrap, SASS, jQuery, PHP, Freelancing
- CSS Tricks - YouTube channel of well-known web design and development blog CSS Tricks by Chris Coyier.
- CSS Tutorials - Tutorials in Hindi by Husain sir covering all the basics of CSS.
- Coder’s Guide - Tutorials on HTML, CSS, JavaScript, Bootstrap
- Codevolution - Tutorials on React, Vue, Angular, MongoDB, JavaScript, MEAN stack, HTML, CSS.
- Clever Programmer - Tutorials on React, MongoDB, JavaScript, MERN stack, HTML, CSS, React Native.
- Derek Banas - Tutorials on C#, Visual Basic, Django, Python, NodeJS, AngularJS, MongoDB, jQuery, JavaScript, CSS, Ruby on Rails, Java, SQLite, Android, HTML, PHP, Objective C
- DevTips - Tutorials on HTML5, CSS, SASS, Bootstrap, Foundation, jQuery, Ruby on Rails, GitHub.
- DesignCourse - Tutorials on UI/UX Design or HTML5, CSS, SASS, Animation Library.
- Dennis Ivy - Tutorials on Django & Flask Full-Stack Web Development Projects
- Elzero Web School - Arabic only
- freeCodeCamp - Tutorials on JQuery, JavaScript, React, Math, Science, Software Engineering, Open source software
- Fun Fun Function - Tutorials on JavaScript, React, Functional Programming, GraphQL, Life as a Developer
- Google Chrome Developers - Latest and greatest talks on modern web development with pro-tips, insights, and techniques to help you level up your web development skill.
- Kevin Powell - Tutorials on HTML, CSS, Helping to Understand Css Better in Simple Way
- LearnCode.academy - Tutorials on HTML, CSS, jQuery, JavaScript, React JS / Redux, Node JS
- LevelUpTuts - Tutorials on HTML, CSS, SASS, WordPress, Magento,Drupal, React, Meteor
- Mackenzie Child - Design to Code Challenge - Tutorials on UI, how to design & code multiple styles of sites.
- The Coding Train - Tutorials on JavaScript, Node, Machine Learning, Neural Networks, Algorithms
- The Net Ninja - Tutorials on HTML, CSS, jQuery, JavaScript, Git and GitHub, Bootstrap, MangoDB, PSD to WordPress, PSD to HTML, and many more.
- TheDigiCraft - Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL.
- thenewboston - Tutorials on ECMAScript 6, React JS / Redux, Django, Angular 2, Gulp, Git, Python, SEO, SASS, SCSS, Grunt, Illustrator, MongoDB, PHP, Java, Ruby, Objective C
- Traversy Media - Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL, ECMAScript 6, React JS / Redux, Django, Angular, Ionic, Gulp, Git, Python, Node JS, PHP, Laravel, Cake PHP, Symfony, CodeIgniter, Programming Tips
- CodeWithHarry - Tutorials on HTML, CSS, Javascript, Node JS, MongoDB and hosting.
- Programming With Mosh - Tutorial on React, Nodejs, Python, Javascript, Angular,Typescipt and C#.
- Dev Ed - Learn web development, web design, 3d modelling, tools like figma and more
- Web Dev Simplified - Learn Website Developments with Html , Javascript , Css and other Frameworks with same projects and more
- Mozilla Developer - Videos for helping you with your work as a web designer, web developer, or person involved making websites or web apps
- Academind - There's always something to learn. Whether you want to have look at Angular Tutorials or Guides, Vue.js, other Frontend Development Content or Data Science Topics or anything else - you're probably right
- Sonny Sangha Project Tutorials on React, Redux, Next JS & React Native
- WB Web Development - Tutorials on HTML, CSS, Bootstrap, SASS, JavaScript, Git and GitHub, MongoDB, NodeJS, ReactJS
- Online Tutorials- Top class contents on front end web development. Has exclusive tutorials on HTML,CSS and javascript with amazing effects. A must visit for all front end developers
- Akshay Saini- Videos on Frontend Interview Tips, Interview Experiences, and specially core concepts of Javascript.
- Devtools Tech- Videos on Advanced Frontend Concepts, Interview Questions & Experiences, and focus on intermediate to advanced JavaScript concepts.
Blogs
- 10 Need to Know JavaScript Concepts Courses - From basic to advance Javascript concept explained in simple way that every Javascript developer need to know.
- 100 Ways to be more creative - 100 Ways to be More Creative from Shaunta Grimes.
- 2017 Design RoundUp - Collection of all Codrops web development resources for 2017.
- 50 Things You [Probably] Forgot To Design – UX Power Tools – Medium - 50 Things You Probably Forgot to Design from Jon Moore
- ACM Month Of Code 2k17: Building Moodify - ACM Month Of Code 2k17: Building Moodify from Ajay NS.
- An Illustrated Guide for Setting Up Your Website Using GitHub & Cloudflare - An illustrated guide to setting up your website using GitHub and Cloudflare from Karan Thakkar.
- Brad Frost Blog - Author of Atomic Design, building design systems in CSS & HTML.
- Best Free Fonts - 70+ Best Free Fonts for Designers – Free for Commercial Use in 2019
- CSS Animations vs the Web Animations API: A Case Study
- CSS Tricks - Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.
- Design and Creativity quotes - 72 Quotes about Design and Creativity from Margaret Kelsey.
- Design Resources - List of resources for working in and learning about design.
- Design For Change - Article on regenerative and sustainable designing by Viba Mohan.
- Domain registrars DNS and hosting - Domain Registrars, DNS, and Hosting from Kirby Kohlmorge
- Beginners guide to Gatsby - Gatsby.js: How to set up and use the React Static Site Generator from Aman Mittal
- Examples of everything in ECMAScript in 2016,2017, 2018
- Flavio Copes Tutorials - Daily tutorials about Javascript and Web development by Flavio Copes
- From URL to Interactive - Explanation of how our world wide web works.
- Frontend Dogma - News and tools for frontend development, usually updated twice a day
- Frontend Weekly - The best articles, links and news related to Frontend Development delivered once a week to your inbox.
- How I Animated the bitsofcode Logo with CSS - Process article on a custom CSS animation.
- How the minmax() Function Works - Explanation of the CSS minmax() function, which can be used for CSS grid layouts.
- How to Build an Impressive Portfolio When You're New to Tech - How to Build an Impressive Portfolio When You’re New to Tech from Randle Browning
- How to build a random quote generator with JavaScript and HTML, for absolute beginners - How to Build a Random Quote Generator with JavaScript and HTML, for Absolute Beginners from Sophanarith Sok.
- How to build your first Vue Component - Beginner project tutorial to build a Vue Component by Sarah Dayan.
- Let’s code a Neural Network from scratch — Part 1 – TypeMe – Medium - Let’s Code a Neural Network from Scratch from Charles Fried
- Music Player Inspirations - Music Player Inspiration 2017 from Muzli.
- The Front End CheckList - An Exhaustive List of all the Elements you need to have/test Before Launching your Website To Production.
- What it’s like to build and market a chatbot when you’re only 14 years old - What it’s Like to Build and Market a Chatbot When You’re Only 14 Years Old from Alec Jones
- What's the Deal with Collapsible Margins? - Explanation of CSS' Collapsing Margins feature.
- A well curated list for UX - Curated resource list for UX by fernandocomet.
- Airbnb Open source - Engineering and Data Science articles and open source projects.
- The Cost of JS - How to deliver JavaScript efficiently for valuable user experience by Addy Osmani.
- CSS Scroll-Snap - Tutorial on CSS scroll snapping, which allows you to lock the viewport after a user has finished scrolling.
- Preload, Prefetch and priorities in chrome - Article on how web loading primitives work on Chrome's neworking stack by Addy Osmani.
- Learning Git for yourself - Traditional Chinese
- IDEs for web Developers - Factors to consider when choosing an IDE for web development and examples of good options.
- The Top 8 Weather APIs for 2020 - Top 8 Weather APIs for 2020 - The Best Free Weather APIs for Developers
- Digital Ocean community Tutorials - A free tutorial collection from experts. All contributted from digital ocean community.
- React for Beginners – A React.js Handbook for Front End Developers - A React.js Handbook for Front End Developers
- Ultimate React Resources - The blog includes blog posts, free e-books, Github Repos with curated lists, practical implementation of React.js in the real world with working code.
- Complete Introduction to CSS Grid - A blog to learn the fundamentals of CSS grid by building different complex layouts.
- Rado's Blog) - A blog consisiting of articles on React Dependencies and Implementation, GraphQl and Lot more!
- Roblog - A Go-to destination for all things related to technology, JavaScript, Node.js, and web development.
- Monica Powell Blog - An awesome blog on JavaScript, React, Gatsby and Git.
- Devtools Tech - Carefully curated high quality resources for Frontend Engineers.
Hiring
-
Two Great Places to Discover Tech Talent and How to Attract Them - Hiring tech talent in 2020
Podcasts
- Coding Blocks - Software development podcasts by a team of professional programmers.
- Frontend Happy Hour - Front end, software, and career development podcasts by industry panelists.
- JavaScript Jabber - Podcasts for JavaScript developers. Website also offers many other programming-related podcasts.
- Syntax - Front end development podcasts by Wes Bos and Scott Tolinski from Level Up Tuts.
Code Editors
-
Atom - Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file. Open Source | All Platforms
-
Brackets - With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers. Open Source | All Platforms
-
Geany - Geany is a small and lightweight integrated development environment.
-
IntellijIDEA - A universal IDE from JetBrains. It has code-completion, integrationa, and Version Control System (VCS).
-
Notepad++ - Notepad++ is a free (as in "free speech" and also as in "free beer") source code editor and Notepad replacement that supports several languages. Windows Only
-
Sublime Text - A sophisticated text editor for code, markup and prose. All Platforms
-
Vim - Vim is a highly configurable text editor for efficiently creating and changing any kind of text. It is included as "vi" with most UNIX systems and with Apple OS X.
-
Visual Studio Code - Code editing Redefined. It has syntax highlighting and autocompletion with IntelliSense, Git commands built-in, Extensible and customizable. Open Source | All Platforms
-
WebStorm - The smartest JavaScript IDE, WebStorm is an integrated development environment for JavaScript and related technologies. All Platforms
-
UltraEdit - UltraEdit is a powerful HTML and Code editor available for Mac, Windows, and Linux. It comes with a built-in file comparison utility, autocompletion, advanced layout, multi-tab, multi-pane editors, and syntax highlighting for the most popular programming languages.
-
Nano - GNU nano is a text editor for Unix-like OS's.
-
StackBlitz - An online open-source powerful code editor for JavaScript Frameworks and Libraries, with some awesome features such as GitHub Imports, Live Server and direct commit from the Editor to Github!
Visual Studio Code Extensions
- Auto Rename Tag - When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.
- Better Comments - This extension color codes various types of comments to give them different significance and stand out from the rest of your code.
- Bracket Pair Colorizor - Colors matching brackets to make your code much more readable - very helpful.
- Code Spell Checker - A basic spell checker that works well with camelCase code.
- ES Lint - Javascript linter for highlighting code errors and best practices.
- Formatting Toggle - A VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click.
- Git History - View git log, file history, compare branches or commits
- GitLens - Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
- JS Snippets - This extension contains code snippets for JavaScript in ES6 syntax for VS Code editor (supports both JavaScript and TypeScript).
- Live server - A Quick Development Live Server with live browser reload.
- Material Icon Theme - Google Material themed icon pack.
- Path Intellisense - As you start typing a path in quotations, you will get intellisense for directories and file names.
- Peacock - Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.
- Polacode - You know those fancy code screenshots you see in articles and tweets? Well, most likely they came from Polacode. It's super simple to use. Copy a piece of code to your clipboard, open up the extension, paste the code, and click to save your image!
- Prettier - Format your code automatically on save.
- Quokka.js - Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
- Settings Sync - Settings Sync extension save your setting off in Github. Then, you can load them to any new version of VS Code with one command.
Tools
- API Directory | ProgrammableWeb
- Animista - CSS animation presets/generator
- Better Code Hub - Checks GitHub codebase against software engineering guidelines and gives feedback.
- Browserling - Live interactive cross-browser testing on virtual machines.
- LambdaTest - Test websites & web apps on 2000+ browsers & OS.
- BrowserStack - Test websites and mobile apps on different browsers and mobile devices.
- Can I use... - Support tables for HTML5, CSS3, etc. on desktop and mobile browsers
- Checkbot - Browser extension that tests websites for SEO, speed and security issues
- Codepen - Social development environment where you can write code in the browser and see results as you build.
- Codeply - A HTML, CSS, JavaScript editor playground for designers & developers to compare, prototype and test frontend frameworks.
- Codesandbox - Instant IDE and prototyping tool for web development.
- Create a new fiddle - JSFiddle - Test JS, CSS, HTML, or CoffeeScript in an online code editor.
- Critical Path CSS Generator - by Jonas Ohlsson - Reduces the amount of CSS the browser has to go through to render a webpage.
- CrossBrowserTesting App - Web service for running functional web tests on mobile and desktop web browsers.
- CSS cheat sheet - A very easy to use one page reference for css selectors and properties. It also includes categories for flexbox and grid.
- CSS Minifier - Minify your CSS files!
- CSS Reference - A free visual guide to CSS.
- CSS Triggers - Tells you what gets triggered when mutating a given CSS property.
- CSS Filters - Interactive CSS filter generator
- ColorLisa - Color palette generator based on great artists
- DirtyMarkup - Tidy up your HTML, CSS, and JavaScript code.
- ExtendsClass - Provides tools to add features directly usable in the browser.
- Favicon Generator - Upload an image and generate a favicon for your website.
- Favicon Generator for iOS/Google Progressive Web App Manifest - Online tool to test favicons on different platforms.
- Free Developer Stuff - List of free stuff for developer by developer to use. Some services are free forever or have a free tier at least for 1 year.
- Free for Developers - This website has an extensive amount of free and paid resource lists curated not only for frontend developers but also for any kind of developer.
- Generate favicon based on text - Generate a favicon from text, an image, or emojis.
- Get Waves - Generate many types of SVG waves for use in web design.
- Glitch - Glitch is like working together in Google Docs–multiple people can work on the same project at the same time.
- Graphic Generator - Generates graphics for some common front end applications.
- Google Analytics - Web service that tracks and reports website traffic.
- Google APIs Explorer - Tool to interactively explore various Google APIs.
- Javascript Console in Sublime Text - Tutorial to test JavaScript and execute it via build systems in Sublime Text 3.
- jQuery mega cheat sheet - Cheat sheet of jQuery selectros, manipulation, events, and more in PDF format.
- JS Bin - Live pastebin for HTML, CSS, and JS, as well as a range of processors.
- Lighthouse - Open source, automated tool for improving the quality of webpages.
- Modern JavaScript cheat sheet - This is an excellent collection of JavaScript Tips and concept by Manuel Beaudru works as a nice overview of many of the things you'll need to be familiar with if you're just getting started with JavaScript and other related frameworks.
- Node Package Manager(npm) - Package manager for Javascript.
- Yarn - Package manager for Javascript, Like npm.
- Responsinator - Replicate how responsive sites will look on popular devices.
- React cheat sheet - A documentation based website also a progressive web app which means that works well even in offline. You can search by keyword or select one of the predefined filters.
- Responsive Grid System - Generate flexible grids to create a responsive website.
- Regular Expression (Regex) Editor - Helps create and verify your regular expressions.
- Sans Francisco - a tool for designers - Collection of tools for designers
- Screensizemap - A comparison of screen sizes in device-independent pixel.
- Sizzy:Browser Testing Tool - Tool for developing and testing responsive design on multiple devices at once.
- Stack Overflow - Online community for developers to ask questions and get answers.
- The W3C Markup Validation Service - Checks the markup validity of Web documents in HTML, XHTML, SMIL, MATHML, etc.
- The W3C CSS Validation Service - Checks the validity of CSS and XHTML documents with style sheets.
- Time Helper - Helps convert millis to DateTimes and vice-versa.
- TinyPNG - PNG and JPEG compression/optimizer
- Web Developer Checklist - Categorized checklist for things to cover during web development.
- Progressive Tooling to optimize your performance on Web - List of tools that can be used to improve page performance.
- StackBlitz - Online IDE for Angular and React projects that can be share via link.
- Postman(Tool for testing APIs) - API client to create, share, test, and document APIs.
- Free Bootstrap 5 Cheat Sheet - It is an interactive list of Bootstrap 5 classes, variables, and mixins.
- JSONT - An online simple and powerful JSON formatting tool.
CSS Frameworks
- Bootstrap - Design and customize responsible mobile-first sites.
- Bulma CSS - Modular open source framework based on Flexbox.
- Caramel - A simple, modern, responsive website framework.
- Cardinal - Modular mobile-first framework for performance and scalability.
- Element CSS - Vue 2.0 based component library.
- Foundation CSS - Family of responsive front-end frameworks.
- Halfmoon - Fully customizable and responsive front-end framework for building dashboards and tools.
- Jeet - Fractional grid system for Sass and Stylus.
- Less - CSS grid system for designing adaptive websites.
- Material Design Lite - Implementation of Material Design components in vanilla CSS, JS, and HTML.
- Materialize CSS - CSS framework aimed to allow a unified user experience across all products on any platform.
- Milligram - A minimalist CSS framework.
- Neat - A lightweight and flexible Sass grid.
- Petal CSS - Light CSS UI framework based on LESS.
- Pure CSS - A set of small, responsive CSS modules.
- Semantic UI - UI framework designed for theming and responsive design.
- Skeleton CSS - Simple, responsive boilerplate to kickstart any responsive project.
- Spectre CSS - Lightweight, Responsive and Modern CSS framework for faster and extensible development.
- Tacit - Primitive but attractive framework for beginners in graphic design.
- TailwindCSS - Highly customizable, low level CSS framework.
- UI Kit - Lightweight and modular front-end framework for web interfaces.
- Unsemantic - Fluid grid system based on percentages, rather than a set number of columns.
- Vital CSS - Minimally invasive CSS framework for web applications built with Sass and Slim.
Icons
- Brandicons - Icon font generator and viewer.
- Flat Icon - Database of free icons in PNG, SVG, EPS, PSD, and Base64 formats.
- Font Awesome - Open source icon set and toolkit with consistent styles.
- Glyphicon - Icons for use with Bootstrap, other CSS frameworks, and any web projects.
- Google Material Design Icons - An overview of material icons and how to integrate them into projects.
- Icomoon - Icon font generator and icon collection.
- Icongram - Collection of icon packs from different sources.
- IconSVG - Quick customizable icons for your projects
- Icons8 - Consistently styled and customizable icon packs.
- Ionicons - Open source icons in SVG and webfont.
- Mapicons - Icon font for use with Google Maps API and Google Places API using SVG markers and icon labels.
- Material Design Iconic Font - Full suite of material design icons for easy SVGs on website or desktop.
- MfgLabs-Iconset - MFG Lab's icon set for use in webfonts and CSS.
- Micon - Windows font and CSS toolkit.
- The Noun Project - Comprehensive icon collection.
- Octicons - Collection of GitHub's icons for projects.
- Open Iconic, a free and open icon set - Open source icon set in SVG, webfont, and raster formats.
- OpenWebIcons - Webfont for scalable vector icons and logos.
- ReactIcons -SVG react icons of popular icon packs.
- RemixIcon - Open source neutral style icon system.
- Shape.so - Customizable collection of icons and animations.
- Stackicons - Customizable icons for social brands.
- Typicons - Free-to-use vector icons embedded in a webfont.
- Weather Icons - Weather themed icon font and CSS.
- Zocial | CSS3 Button Set - Create social buttons using CSS and rendering social icons as a font.
Colors
- Adobe Color - Color Wheel, Extract Theme, Extract Gradient, Accessibility Tools and more
- BADA55 Color Codes - Convert leet words into CSS hex colors.
- Branition Colors - Hand-curated collection of color palettes best fitted for branding.
- Color Hunt - Open collections of beautiful color palettes
- Color Theory by Natalya Shelburne - Practical Color Theory for People who Code: Tutorial on the use of color with examples
- Color wheel | Color schemes - Adobe Color CC - Interactive color wheel with different color rules (adjustments possible)
- Colordesigner Tools - The main purpose of this tool is to help with building a color palette and generate tints and shades based on it. Just pick a color, and the app does the rest. You can use the preselected colors or the color picker for more control. Check also the other tools here
- Colormind - Bootstrap - Colormind is a color scheme generator that uses deep learning to automatically apply the color pallete to a live website mockup.
- Coolors- Super fast color scheme creator with a lot of functionalities
- CSS Gradient - Curated list of sites to explore gradients and color palettes.
- Data Color Picker - Generate color palettes with visually equidistant colors. Useful for data visualizations.
- Designing in Color - A complete guide to design in color (article on Medium)
- Flat UI Colors - Color picker for flat designs
- Image Color Picker - Image color picker and palette generator
- LOL Colors - Curated color palette inspirations
- Material Palette - Color palette generator for Material Design
- Palettable - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet
- Paletton - The Color Scheme Designer - Advanced tool for creating color schemes
- Picular - Google, but for colors - Primary color generator using Google's image search.
- Pigment - Palette Generator - Generate color palettes based on lighting and pigment.
- UI Gradients - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code
- W3school Color Picker - Find the perfect color from the color wheel, easy control
- UI Color Picker - Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design. ![Free]
Typography
- A Crash Course in Typography: The Basics of Type - First article of a series on Typography
- Circular Font Combinations | Free Alternatives | Typewolf - A great resource for everything related to Typography
- Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs. - Clean web-tool on How to pair Google Fonts
- Fontspiration - An iOS app for creating custom typographic designs
- Fontsquirrel - A resource for FREE, hand-picked, high-quality, commercial-use fonts
- Google Fonts - A catalog of free & open source fonts, great details and font pair suggestions
- Just My Type - A collection of font pairings
- Table of Contents | The Elements of Typographic Style Applied to the Web - A practical guide to web typography
- Typekit - "Quality fonts from the world’s best foundries"
- Typography Terms - An infographic on Typography Terms + explanations
Design Inspiration
- Admire The Web - Admire the Web is where we showcase the very best in website design inspiration - carefully curated and organised to keep you inspired.
- Awwwards - The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
- Dribble - Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
- Site Inspire - siteInspire is a showcase of the finest web and interactive design.
- Web design Inspiration - Find inspiration for your next web design project. We help web designers, digital agencies and entrepreneurs to be inspired. Everyday, our team of experts hand picks the best new web designs from all over the world.
- Behance - Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things
- Pinterest - Pinterest has a host of design inspirations in a variety of forms and styles.
- Pixpa - Pixpa features some nice modern designs and inspirations for web designers and photographers.
- Lapa Ninja - Lapa Ninja is a gallery featuring the best 4127 landing page examples, free books for designers and free UI kits from around the web.
- Landings - Find the best landing pages for your design inspiration based on your preference.
Animation Frameworks
- Animate CSS - Choose, try out and get the CSS-Code for different animation types (over 70)
- Anime JS - It’s easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
- Bounce JS - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code
- Magic Animations - Showcase of different animations with link to GitHub repo
- MO JS - The library provides built-in components to start animating from scratch like HTML, shape, swirl, burst, and stagger but also brings you tools to help craft your animation in a most natural way.
- Particles JS - A lightweight JavaScript library for creating particles.
- Typed JS - A JavaScript typing animation library with a great documentation on GitHub
- Wow JS - JavaScript library: Reveal CSS animation as you scroll down a page
Stock Resources
- Burst - Free, high-resolution images. All our pictures are free to download for personal and commercial use.
- Canva - 8,000+ free templates and thousands of free photos
- Free stock images and Videos - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free.
- Gratisography - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions.
- Humaaans - Library of editable people illustrations. Free for both commercial and personal use.
- I’d Pin That! - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. I’d Pin That is more than just a source for free images — it is an image editor! Use the tools provided here to add your own text and edit the images right on the site.
- Illlustrations - 120+ Awesome free illustrations made by the artist vijay verma on a 100 days challenge.
- MakerBook - The best free resources for creatives - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools).
- Morguefile - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, they’re all completely free. The website does ask that you credit the photographer when possible.
- Open Doodles - A Free Set of Open-Source Illustrations.
- The Open Photo Project - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing.
- Pexels - Exclusively stock photos of high quality, great feature: Filter photos by color.
- Picalls - Free photos and wallpapers licensed under the Creative Commons CC0 license.
- Pixabay - In addition to photos, Pixabay offers video, vectors and illustrations.
- Pikwizard - Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required
- Public Domain Archive - “a public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
- StockSnap.io - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
- The Stocks - Another awesome directory sharing sites for resources, loading directly on the webpage
- UnDraw - "MIT licensed illustrations for every project you can imagine and create
- UnSplash - "Beautiful, Free Photos" & themed collections of photos
- 3D Bay - "Free, 3D Illustrations" A collection of High-quality 3D Illustration resources
- Design Stripe - "Create beautiful illustrations, no design skills needed
Geolocation
- Geocomplete-location autocomplete - An advanced jQuery plugin that wraps the Google Maps APIs Geocoding and Places Autocomplete services into a dropdown for an input-form.
- Google maps API | Google - Google Map APIs including documentation & learning resources - extensive
- Google maps API | Traversy - Great YouTube tutorial on using the Google Maps APIs
- OpenCage Geocoder - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API
- GeoJS - Free to use API for geolocation lookup by IP address
APIs
- Alexa API | Codecademy - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages.
- Abstract APIs - Free utility API's for compressing images, creating user avatars, validating emails, and more
- jsonplaceholder - Fake Online REST API for Testing and Prototyping
- A list of public APIs
- Lorem Picsum - Easy to use and customize placeholder photos
- OpenWeatherMap - Weather API with free and paid licenses
- Random famous quotes | Rapid APIs - Gets a random quote in JSON format.
- TMDB API - API Service for those who are interested in displaying data/images about different movies, TV Shows or actors in their application.
- Unsplash Source - API to retrieve random images from Unsplash.com
- Web APIs | MDN
- News API - Locate articles and breaking news headlines from news sources and blogs across the web with our JSON API.
- Spotify API - Spotify's Web API allows you to find music and podcasts, manage your Spotify collection, control audio playing, and do a variety of other things.
Mockups
- Am I Responsive - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot.
- Figma - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas
- Adobe XD - One of the best tool for UI/UX Design, Wireframe, animate, prototype, collaborate, and more
- Magic Mockups - Place your product in realistic environment! Free real-life product/app mockup generator. Laptop, Phone, Tablet, Imac.
- Rotato 3D Mockup Generator - Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
- The MockUp Club - Website that offers free downloads of design mockups (mostly Photoshop format).
- MockupsJar - Build mockups with screenshots of your application or web Design for free to share with customers and clients
- MockUPhone - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!
- Multi Device Website Mockup Generator - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser.
- Wireframe.cc - Great tool for sketching out ideas and layouts, super minimalistic
Books
- Ebook Foundation-free programing books: GitHub Repository - A directory of free learning resources, categorized by language
- HTML Basics - A workshop covering the basics of HTML (free pdf/18 pages)
- HTML5 for Masterminds, 2nd Edition - A complete course from Beginner to Mastermind
- HTML5 Pocket Reference (Pocket Reference (O'Reilly) - A comprehensive compact reference for HTML 5
- HTML Tutorialspoint - A thorough tutorial on HTML (free pdf/486 pages)
- Learn How To Code In HTML5 and CSS3 - A free e-book about making websites in HTML5 and CSS for absolute beginners
- Responsive Web Design with HTML5 and CSS3 - A comprehensive book about making RWD
- You don't know JS - Book series diving deep into the core mechanisms of the JavaScript language.
- Guide to Git and Github - A beginner friendly guide to using git and working with Github.
- Introduction to HTTP - Introduction to HTTP, the stateless protocol underlying all of the web.
- Introduction to the Command Line - A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.
- HTML & CSS Books ![Free]
- Web Design Playground, Second Edition - Modern HTML, CSS, and web design standards.Paid
- Build a Frontend Web Framework (From Scratch) - Learn how a frontend web framework works by coding your own.Paid
Challenges / Games
- Ace Front End - Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
- Codepen Challenges - Each month has a theme and every week there is a new challenge prompt that you can use to build a project online using HTML, CSS and JavaScript. The best projects are featured on Codepen's homepage.
- Codewars - Improve your skills by training with others on real code challenges.
- CSS Battle - CSSBattle is an online CSS Code Golfing game. 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 Diner - It's a fun game to learn and practice CSS selectors.
- CSS Zen Garden - A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
- Dev Challenges - Made by Thu Nghiem. devChallenges.io is a community driven platform for anyone who wants to solve practical tasks. It has some tricky and curated challenges.
- Flexbox Defense - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
- Flexbox Froggy - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels.
- Front End Mentor - Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs. Join 192,401 developers building projects, reviewing code, and helping each other get better.
- Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
- Hackerrank - Practice coding, prepare for interviews, and solve interview style coding challenges.
- JavaScript30 - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
- Leetcode - Coding problems to solve in a range of categories and difficulties
- Project Euler - Challenging computer science and mathematical problems.
- 100DaysOfCode - Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.
- Devtools Tech - Devtools Tech is a free platform for Frontend Engineers to practice high quality real world programming interview questions, follow curated learning paths, read blogs, and track progress across various frontend domains.
Free Tools For Students
- JetBrains Student License: Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members.
- Student Developer Pack: The best developer tools, free for students via @githubeducation
YouTube Videos
- Flexbox in 20 minutes - Quick crash-course on the CSS Flexbox model.
- SVGs can do that 😎 - Sarah Drasner's talk on nontypical pratical uses of SVGs.
- CSS Grid Tutorial - Use CSS grid to structure and position websites with ease.
- Git and GitHub for Beginners - Crash Course - Ad-free tutorial by freeCodeCamp.
- 12HR Coding Bootcamp 2021! - Complete frontend bootcamp!
Testing
- Jest - JavaScript testing framework
- Mocha - JavaScript testing framework
- Karma - JavaScript test runner
- Istanbul - JavaScript test coverage tool
- TestCafe - Node.js end-to-end testing
- Cypress - JavaScript end-to-end testing framework
- Puppeteer - Google's Chrome automation tool for E2E testing.
- Playwright - Microsoft's browser automation tool for E2E testing.
- Sinon.JS - Standalone test spies, stubs and mocks for JavaScript
- Chai - Assertation library for JavaScript testing
- PactumJS - REST API Testing Tool used to automate e2e, integration, contract & component (or service level) tests
- Vitest - Vitest is a blazing fast unit test framework powered by Vite