README

Front-end development

Hi There

This is an open-source repository for all who want to learn front-end Development.

Front-end development

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.
Make sure to show your support by star mark & sharing the repository

A List of Useful Resources for Front End Developers

Table of Contents

RoadMap

  • Roadmap - For a well described step-by-step roadmap for front-end developers.
    Free

Useful

  • BGJar - Free SVG background generator for your websites, blogs, and app.
    Free
  • 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.
    Free
  • A Complete Guide to Grid | CSS-Tricks - A comprehensive guide to the Grid Layout.
    Free
  • Command Line Power User - A video series for web developers on learning a modern command-line workflow with ZSH, Z, and related tools.
    Free
  • CSS Grid - Complete video course all about CSS Grid
    Free
  • Best Of JS A site to check the best GitHub Repos for your favourite js framework
    Free
  • CodeCademy - A series of interactive courses teaching the world how to code. Offering free and paid subscriptions across a variety of languages.
    Free
    Paid
  • Codementor - A tool to get help from experienced developers in various coding languages on your learning journey.
    Paid
  • Scaler Topics - A platform to learn programming languages like HTML, Java, Javascript, Python etc.
    Free
  • 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.
    Paid
  • Coursera - A selection of courses from highly reputable schools like Stanford and Yale.
    Free
    Paid
  • CSS Almanac | CSS-Tricks - A quick reference guide to many features of CSS.
    Free
  • 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.
    Free
  • Design Resources - Design Resources from Skullface.
    Free
  • dev.to - Where programmers share ideas and help each other grow.
    Free
  • DevProjects - A free community consists of curated projects from senior developers to help you bridge the gap between theory and practice.
    Free
    !
  • Dicoding Academy - Where everyone can learn programming from fundamentals (Available only in Bahasa Indonesia).
    Free
    Paid
  • edx - A series of University-level courses from Harvard, MIT, Wharton, and more.
    Free
  • EggHead - Web development video tutorials in "bite-size" segments. Has both free and "Pro" (paid) memberships.
    Free
    Paid
  • Enboard | Front End Resources - Organized resources about front end development.
    Free
  • Flexbox - Level up your Flexbox knowledge – an online, Zombie-centric story course.
    Free
  • freeCodeCamp - A free resource incorporating programming projects and interview preparation for developer jobs.
    Free
  • Frontend Masters - Web development video tutorials from industry leaders (updated frequently). Has both free (limited-time) and paid memberships.
    Free
    Paid
  • 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.
    Free
  • GeeksforGeeks - A computer science portal for geeks.
    Free
  • Khan Academy - A universal online learning platform that also provides the important courses for developers.
    Free
    Paid
  • LearnAnything - Search interactive mind maps to learn anything.
    Free
  • Learn JavaScript - Learn JavaScript in an interactive environment. Read short lessons, take notes, and complete challenges directly in your browser.
    Free
    Paid
  • Mastering Markdown - A Mini Series that will change how you write documentation.
    Free
  • Mozilla Developer Network - The latest information about Open Web technologies.
    Free
  • Complete web development tutorials -Lyty.dev complete web development tutorials with well explained examples for free.
    Free
  • Pluralsight - Unlimited online developer training from industry experts.
    Free
    Paid
  • Saylor - An open, online learning solution offering college credit opportunities for students.
    Free
  • Scrimba - Code-screencast-based learning in a variety of languages.
    Free
    Paid
  • Scotch - Many Web development courses. Has both free and "Premium" (paid) memberships.
    Free
    Paid
  • Search Courses - A selection of trending courses and tutorials.
    Free
    Paid
  • SoloLearn- A free portal for learning web development.
    Free
  • Team Treehouse - Self-paced learning across a variety of languages and subjects.
    Free
    Paid
  • The Modern JavaScript Tutorial - Everything about the Javascript Language.
    Free
  • The Odin Project - An Open-Source Curriculum for Learning Web Development
    Free
  • Tutorials point - Tutorials for many different languages with interactive code examples.
    Free
  • Udacity - Learn anything online – deep learning, machine learning, front end languages.
    Free
    Paid
  • Udemy - An online learning and teaching marketplace.
    Free
    Paid
  • Watch and Code - The computer science school for students that demand intellectual rigor and depth.
    Paid
  • 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.
    Free
  • Web APIs | MDN - Everything a beginner needs to know about Web APIs.
    Free
  • Web Design in 4 minutes by Jeremy Thomas creator of Bulma CSS and marksheet.io.
    Free
  • WesBos - Free and premium courses in web development
    Free
    Paid
  • 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.
    Free
  • web.dev - Guides and resources for modern fast websites by google developers.
    Free
  • Become a Front-End Web Developer - Develop competency with HTML, CSS, JavaScript, and jQuery.
    Free
    Paid
  • Web Skills - A visual overview of useful skills to learn as a web developer.
    Free
  • The App Brewery - All in one platform to cover your web development skills
    Paid
  • Full Stack open 2021 - This course serves as an introduction to modern web application development with JavaScript.
    Free
  • Devtools Tech - A free interview preparation platform for Frontend Engineers with a focus on high quality real world programming questions.
    Free

A11y

  • A11y Style Guide - A living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.
    Free
  • Axe - Accessibility testing toolkit.
    Free
    Paid
  • Colour Contrast Analyser - CCA helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.
    Free
  • Deque University - Online courses on web and mobile accessibility skills.
    Free
    Paid
  • W3C Intro to Web Accessibility - Strategies, standards, resources to make the Web accessible to people with disabilities.
    Free

YouTube Channels

  • Adrian Twarog- Tutorials on HTML,CSS,Bootstrap,JavaScript,React,React Native,UI/UX and cool Designing stuff
    Free
  • 1stWebDesigner - Tutorials on WordPress, PSD to HTML
    Free
  • Brad Hussey - Tutorials on Bootstrap, SASS, jQuery, PHP, Freelancing
    Free
  • CSS Tricks - YouTube channel of well-known web design and development blog CSS Tricks by Chris Coyier.
    Free
  • CSS Tutorials - Tutorials in Hindi by Husain sir covering all the basics of CSS.
    Free
  • Coder’s Guide - Tutorials on HTML, CSS, JavaScript, Bootstrap
    Free
  • Codevolution - Tutorials on React, Vue, Angular, MongoDB, JavaScript, MEAN stack, HTML, CSS.
    Free
  • Clever Programmer - Tutorials on React, MongoDB, JavaScript, MERN stack, HTML, CSS, React Native.
    Free
  • 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
    Free
  • DevTips - Tutorials on HTML5, CSS, SASS, Bootstrap, Foundation, jQuery, Ruby on Rails, GitHub.
    Free
  • DesignCourse - Tutorials on UI/UX Design or HTML5, CSS, SASS, Animation Library.
    Free
  • Dennis Ivy - Tutorials on Django & Flask Full-Stack Web Development Projects
    Free
  • Elzero Web School - Arabic only
    Free
  • freeCodeCamp - Tutorials on JQuery, JavaScript, React, Math, Science, Software Engineering, Open source software
    Free
  • Fun Fun Function - Tutorials on JavaScript, React, Functional Programming, GraphQL, Life as a Developer
    Free
  • 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.
    Free
  • Kevin Powell - Tutorials on HTML, CSS, Helping to Understand Css Better in Simple Way
    Free
  • LearnCode.academy - Tutorials on HTML, CSS, jQuery, JavaScript, React JS / Redux, Node JS
    Free
  • LevelUpTuts - Tutorials on HTML, CSS, SASS, WordPress, Magento,Drupal, React, Meteor
    Free
  • Mackenzie Child - Design to Code Challenge - Tutorials on UI, how to design & code multiple styles of sites.
    Free
  • The Coding Train - Tutorials on JavaScript, Node, Machine Learning, Neural Networks, Algorithms
    Free
  • The Net Ninja - Tutorials on HTML, CSS, jQuery, JavaScript, Git and GitHub, Bootstrap, MangoDB, PSD to WordPress, PSD to HTML, and many more.
    Free
  • TheDigiCraft - Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL.
    Free
  • 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
    Free
  • 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
    Free
  • CodeWithHarry - Tutorials on HTML, CSS, Javascript, Node JS, MongoDB and hosting.
    Free
  • Programming With Mosh - Tutorial on React, Nodejs, Python, Javascript, Angular,Typescipt and C#.
    Free
  • Dev Ed - Learn web development, web design, 3d modelling, tools like figma and more
    Free
  • Web Dev Simplified - Learn Website Developments with Html , Javascript , Css and other Frameworks with same projects and more
    Free
  • Mozilla Developer - Videos for helping you with your work as a web designer, web developer, or person involved making websites or web apps
    Free
  • 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
    Free
  • Sonny Sangha Project Tutorials on React, Redux, Next JS & React Native
    Free
  • WB Web Development - Tutorials on HTML, CSS, Bootstrap, SASS, JavaScript, Git and GitHub, MongoDB, NodeJS, ReactJS
    Free
  • 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
    Free
  • 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.
    Free

Blogs

Hiring

Podcasts

  • Coding Blocks - Software development podcasts by a team of professional programmers.
    Free
  • Frontend Happy Hour - Front end, software, and career development podcasts by industry panelists.
    Free
  • JavaScript Jabber - Podcasts for JavaScript developers. Website also offers many other programming-related podcasts.
    Free
  • Syntax - Front end development podcasts by Wes Bos and Scott Tolinski from Level Up Tuts.
    Free

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
    Free
  • 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
    Free
  • Geany - Geany is a small and lightweight integrated development environment.
    Free
  • IntellijIDEA - A universal IDE from JetBrains. It has code-completion, integrationa, and Version Control System (VCS).
    Free
    Paid
  • 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
    Free
    -Pycharm-Used specially for python language,It provides code analysis,a graphical debugger,an integrated unit tester,integration with version control systems and supports web development with Django as well as data science with Anaconda. All Platforms | Open Source
    Free
  • Sublime Text - A sophisticated text editor for code, markup and prose. All Platforms
    Free
    Paid
  • 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.
    Free
  • 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
    Free
  • WebStorm - The smartest JavaScript IDE, WebStorm is an integrated development environment for JavaScript and related technologies. All Platforms
    Free
    Paid
  • 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.
    Free
    Paid
  • Nano - GNU nano is a text editor for Unix-like OS's.
    Free
  • 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!
    Free

Visual Studio Code Extensions

  • Auto Rename Tag - When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag.
    Free
  • Better Comments - This extension color codes various types of comments to give them different significance and stand out from the rest of your code.
    Free
  • Bracket Pair Colorizor - Colors matching brackets to make your code much more readable - very helpful.
    Free
  • Code Spell Checker - A basic spell checker that works well with camelCase code.
    Free
  • ES Lint - Javascript linter for highlighting code errors and best practices.
    Free
  • Formatting Toggle - A VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click.
    Free
  • Git History - View git log, file history, compare branches or commits
    Free
  • 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.
    Free
  • JS Snippets - This extension contains code snippets for JavaScript in ES6 syntax for VS Code editor (supports both JavaScript and TypeScript).
    Free
  • Live server - A Quick Development Live Server with live browser reload.
    Free
  • Material Icon Theme - Google Material themed icon pack.
    Free
  • Path Intellisense - As you start typing a path in quotations, you will get intellisense for directories and file names.
    Free
  • 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.
    Free
  • 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!
    Free
  • Prettier - Format your code automatically on save.
    Free
  • 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.
    Free
    Paid
  • 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.
    Free

Tools

  • Animista - CSS animation presets/generator
    Free
  • Better Code Hub - Checks GitHub codebase against software engineering guidelines and gives feedback.
    Free
  • Browserling - Live interactive cross-browser testing on virtual machines.
    Free
    Paid
  • LambdaTest - Test websites & web apps on 2000+ browsers & OS.
    Free
    Paid
  • BrowserStack - Test websites and mobile apps on different browsers and mobile devices.
    Free
    Paid
  • Can I use... - Support tables for HTML5, CSS3, etc. on desktop and mobile browsers
    Free
  • Checkbot - Browser extension that tests websites for SEO, speed and security issues
    Free
    Paid
  • Codepen - Social development environment where you can write code in the browser and see results as you build.
    Free
    Paid
  • Codeply - A HTML, CSS, JavaScript editor playground for designers & developers to compare, prototype and test frontend frameworks.
    Free
    Paid
  • Codesandbox - Instant IDE and prototyping tool for web development.
    Free
    Paid
  • Create a new fiddle - JSFiddle - Test JS, CSS, HTML, or CoffeeScript in an online code editor.
    Free
  • Critical Path CSS Generator - by Jonas Ohlsson - Reduces the amount of CSS the browser has to go through to render a webpage.
    Free
  • CrossBrowserTesting App - Web service for running functional web tests on mobile and desktop web browsers.
    Free
  • CSS cheat sheet - A very easy to use one page reference for css selectors and properties. It also includes categories for flexbox and grid.
    Free
  • CSS Minifier - Minify your CSS files!
    Free
  • CSS Reference - A free visual guide to CSS.
    Free
  • CSS Triggers - Tells you what gets triggered when mutating a given CSS property.
    Free
  • CSS Filters - Interactive CSS filter generator
    Free
  • ColorLisa - Color palette generator based on great artists
    Free
  • DirtyMarkup - Tidy up your HTML, CSS, and JavaScript code.
    Free
  • ExtendsClass - Provides tools to add features directly usable in the browser.
    Free
  • Favicon Generator - Upload an image and generate a favicon for your website.
    Free
  • Favicon Generator for iOS/Google Progressive Web App Manifest - Online tool to test favicons on different platforms.
    Free
  • 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
    Paid
  • 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.
    Free
    Paid
  • Generate favicon based on text - Generate a favicon from text, an image, or emojis.
    Free
  • Get Waves - Generate many types of SVG waves for use in web design.
    Free
  • Glitch - Glitch is like working together in Google Docs–multiple people can work on the same project at the same time.
    Free
  • Graphic Generator - Generates graphics for some common front end applications.
  • Google Analytics - Web service that tracks and reports website traffic.
    Free
  • Google APIs Explorer - Tool to interactively explore various Google APIs.
    Free
  • Javascript Console in Sublime Text - Tutorial to test JavaScript and execute it via build systems in Sublime Text 3.
    Free
  • jQuery mega cheat sheet - Cheat sheet of jQuery selectros, manipulation, events, and more in PDF format.
    Free
  • JS Bin - Live pastebin for HTML, CSS, and JS, as well as a range of processors.
    Free
    Free
    Paid
  • Lighthouse - Open source, automated tool for improving the quality of webpages.
    Free
  • 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.
    Free
  • Node Package Manager(npm) - Package manager for Javascript.
    Free
  • Yarn - Package manager for Javascript, Like npm.
    Free
  • Responsinator - Replicate how responsive sites will look on popular devices.
    Free
  • 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.
    Free
  • Responsive Grid System - Generate flexible grids to create a responsive website.
    Free
  • Regular Expression (Regex) Editor - Helps create and verify your regular expressions.
  • Sans Francisco - a tool for designers - Collection of tools for designers
    Free
  • Screensizemap - A comparison of screen sizes in device-independent pixel.
    Free
  • Sizzy:Browser Testing Tool - Tool for developing and testing responsive design on multiple devices at once.
    Free
  • Stack Overflow - Online community for developers to ask questions and get answers.
    Free
  • The W3C Markup Validation Service - Checks the markup validity of Web documents in HTML, XHTML, SMIL, MATHML, etc.
    Free
  • The W3C CSS Validation Service - Checks the validity of CSS and XHTML documents with style sheets.
    Free
  • Time Helper - Helps convert millis to DateTimes and vice-versa.
  • TinyPNG - PNG and JPEG compression/optimizer
    Free
  • Web Developer Checklist - Categorized checklist for things to cover during web development.
    Free
  • Progressive Tooling to optimize your performance on Web - List of tools that can be used to improve page performance.
    Free
  • StackBlitz - Online IDE for Angular and React projects that can be share via link.
    Free
  • Postman(Tool for testing APIs) - API client to create, share, test, and document APIs.
    Free
  • Free Bootstrap 5 Cheat Sheet - It is an interactive list of Bootstrap 5 classes, variables, and mixins.
    Free
  • JSONT - An online simple and powerful JSON formatting tool.
    Free

CSS Frameworks

  • Bootstrap - Design and customize responsible mobile-first sites.
    Free
  • Bulma CSS - Modular open source framework based on Flexbox.
    Free
  • Caramel - A simple, modern, responsive website framework.
    Free
  • Cardinal - Modular mobile-first framework for performance and scalability.
    Free
  • Element CSS - Vue 2.0 based component library.
    Free
  • Foundation CSS - Family of responsive front-end frameworks.
    Free
  • Halfmoon - Fully customizable and responsive front-end framework for building dashboards and tools.
    Free
  • Jeet - Fractional grid system for Sass and Stylus.
    Free
  • Less - CSS grid system for designing adaptive websites.
    Free
  • Material Design Lite - Implementation of Material Design components in vanilla CSS, JS, and HTML.
    Free
  • Materialize CSS - CSS framework aimed to allow a unified user experience across all products on any platform.
    Free
  • Milligram - A minimalist CSS framework.
    Free
  • Neat - A lightweight and flexible Sass grid.
    Free
  • Petal CSS - Light CSS UI framework based on LESS.
    Free
  • Pure CSS - A set of small, responsive CSS modules.
    Free
  • Semantic UI - UI framework designed for theming and responsive design.
    Free
  • Skeleton CSS - Simple, responsive boilerplate to kickstart any responsive project.
    Free
  • Spectre CSS - Lightweight, Responsive and Modern CSS framework for faster and extensible development.
    Free
  • Tacit - Primitive but attractive framework for beginners in graphic design.
    Free
  • TailwindCSS - Highly customizable, low level CSS framework.
    Free
  • UI Kit - Lightweight and modular front-end framework for web interfaces.
    Free
  • Unsemantic - Fluid grid system based on percentages, rather than a set number of columns.
    Free
  • Vital CSS - Minimally invasive CSS framework for web applications built with Sass and Slim.
    Free

Icons

  • Brandicons - Icon font generator and viewer.
    Free
  • Flat Icon - Database of free icons in PNG, SVG, EPS, PSD, and Base64 formats.
    Free
  • Font Awesome - Open source icon set and toolkit with consistent styles.
    Free
    Paid
  • Glyphicon - Icons for use with Bootstrap, other CSS frameworks, and any web projects.
    Free
  • Google Material Design Icons - An overview of material icons and how to integrate them into projects.
    Free
  • Icomoon - Icon font generator and icon collection.
    Free
    Paid
  • Icongram - Collection of icon packs from different sources.
    Free
  • IconSVG - Quick customizable icons for your projects
    Free
    Paid
  • Icons8 - Consistently styled and customizable icon packs.
    Free
  • Ionicons - Open source icons in SVG and webfont.
    Free
  • Mapicons - Icon font for use with Google Maps API and Google Places API using SVG markers and icon labels.
    Free
  • Material Design Iconic Font - Full suite of material design icons for easy SVGs on website or desktop.
    Free
  • MfgLabs-Iconset - MFG Lab's icon set for use in webfonts and CSS.
    Free
  • Micon - Windows font and CSS toolkit.
    Free