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.
Mastering Markdown – A Mini Series that will change how you write documentation.
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® – Build a strong JavaScript foundation for web development.
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.
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.
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
Adrian Twarog– Tutorials on HTML,CSS,Bootstrap,JavaScript,React,React Native,UI/UX and cool Designing stuff
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
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.
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.
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 –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
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
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.
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.
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.
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.
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.
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)
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
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.
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.
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.
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
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
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
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.
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.
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
