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
Useful
- Inspect - inspect and debug your mobile web apps and websites on iOS devices directly from Mac or Windows.
Learning
- Command Line Power User - A video series for web developers on learning a modern command-line workflow with ZSH, Z, and related tools.
- 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.
- 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.
- 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.
- 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).
- EggHead - Web development video tutorials in "bite-size" segments. Has both free and "Pro" (paid) memberships.
- 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.
- Khan Academy - A universal online learning platform that also provides the important courses for developers.
- Complete web development tutorials -Lyty.dev complete web development tutorials with well explained examples for free.
- 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 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.
- Full Stack open 2021 - This course serves as an introduction to modern web application development with JavaScript.
A11y
- A11y Style Guide - A living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.
- Colour Contrast Analyser - CCA helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.
- W3C Intro to Web Accessibility - Strategies, standards, resources to make the Web accessible to people with disabilities.
YouTube Channels
- Adrian Twarog- Tutorials on HTML,CSS,Bootstrap,JavaScript,React,React Native,UI/UX and cool Designing stuff
- CSS Tricks - YouTube channel of well-known web design and development blog CSS Tricks by Chris Coyier.
- 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
- 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.
- Mackenzie Child - Design to Code Challenge - Tutorials on UI, how to design & code multiple styles of sites.
- The Net Ninja - Tutorials on HTML, CSS, jQuery, JavaScript, Git and GitHub, Bootstrap, MangoDB, PSD to WordPress, PSD to HTML, and many more.
- 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
- 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
- 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.
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.
- 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.
- CSS Tricks - Daily articles about CSS, HTML, JavaScript, and all things related to web design and development.
- Beginners guide to Gatsby - Gatsby.js: How to set up and use the React Static Site Generator from Aman Mittal
- Frontend Weekly - The best articles, links and news related to Frontend Development delivered once a week to your inbox.
- 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
- 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
- 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.
- 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!
Hiring
Podcasts
- 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.
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
- 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-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
- 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
- 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.
- 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.
- Formatting Toggle - A VS Code extension that allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click.
- 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).
- 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!
- 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
- Better Code Hub - Checks GitHub codebase against software engineering guidelines and gives feedback.
- 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.
- 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.
- 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.
- Glitch - Glitch is like working together in Google Docs–multiple people can work on the same project at the same time.
- 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.
- 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.
- 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.
- Sizzy:Browser Testing Tool - Tool for developing and testing responsive design on multiple devices at once.
- 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.
- Progressive Tooling to optimize your performance on Web - List of tools that can be used to improve page performance.
- Free Bootstrap 5 Cheat Sheet - It is an interactive list of Bootstrap 5 classes, variables, and mixins.
CSS Frameworks
- Halfmoon - Fully customizable and responsive front-end framework for building dashboards and tools.
- 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.
- Spectre CSS - Lightweight, Responsive and Modern CSS framework for faster and extensible development.
Icons
- Google Material Design Icons - An overview of material icons and how to integrate them into projects.
- 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.
- Open Iconic, a free and open icon set - Open source icon set in SVG, webfont, and raster formats.
Colors
- 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.