Online Courses
freecodecamp
Offering some amazing tracks, freeCodeCamp is one of the top resources for learning HTML, CSS and JavaScript online. Plus...it's free! Can't really argue with that.
Visit
Codecademy
Codecademy offers a number of free lessons for a variety of languages. To get the full courses, you typically need to sign up to the pro membership. But you can get a lot of learning done for free.
Visit
CS50
A brilliant resource for anyone who wants to learn some Computer Science. David J. Malan does an amazing job delivering the course in an engaging way.
Visit
Udacity
Udacity offers an incredible array of free individual courses. They also offer paid nanodegree programmes if you're looking for something with more structure.
Visit
BitDegree
BitDegree is the world's first blockchain-powered, smart-incentive based online education platform which will revolutionize global education and tech recruiting.
Visit
Udemy
Udemy is an online learning and teaching marketplace with over 130000 courses and 35 million students.
Visit
Envato Tuts+
Learn new creative and technical skills with 1,290+ video-based courses and short courses to help you develop. From code and web design courses to photography and design & illustration courses, it’s all here.
Visit
Khan Academy
Khan Academy offers some amazing introductory courses to HTML, CSS and JavaScript. There is a good mixture of video lessons and coding challenges to keep you interested.
Visit
Frontend Masters Bootcamp
The free Frontend Masters Bootcamp is a great way to get up and running with HTML, CSS, and JavaScript.
Visit
Wes Bos: Flexbox
Flexbox makes CSS just work, which is no easy feat. Get a perfect introduction to it here.
Visit
Wes Bos: CSS Grid
CSS Grid will change how you create website layouts. Learn how for free from Wes Bos in this brilliant CSS Grid course.
Visit
Wes Bos: JavaScript 30
Wes Bos offers another amazing (and free) course to help you develop your JavaScript skills.
Visit
Conquering Responsive Layouts
Kevin Powell takes you through everything you need to know to create responsive layouts in his brilliant 21-day course.
Visit
Upcase by thoughtbot
thoughtbot have very kindly open sourced Upcase, their online learning platform. It's full of extremely useful "trails" to help you upskill with topics like Mastering Git and Design for Developers.
VisitInteractive Tutorials
General Assembly Dash
Dash is an amazing, free resource offered by General Assembly with engaging challenges that get harder as you progress.
Visit
Scrimba
Scrimba is an awesome learning platform that allows you to interact with the code directly in the screencast player. Subjects include HTML, CSS, JS, React, Vue, and more.
Visit
Flexbox Froggy
Once you've learned Flexbox, you can test your CSS skills with this fun, interactive Flexbox tutorial/challenge.
Visit
Flexbox Defense
Another great interactive Flexbox challenge is Flexbox Defense. Once you've completed this and Flexbox Froggy you'll be a Flexbox ninja!
VisitGrid Garden
Test your CSS Grid chops with this interactive tutorial/challenge. It gets pretty tricky towards the end!
Visit
Flexbox Zombies
A really fun way to learn Flexbox. Make your way through a zombie-infested world with nothing more than a crossbow and your trusty Flexbox skills.
Visit
SoloLearn
A great platform for learning HTML, CSS, JS, and more. Small, interactive tutorials help you progress at a steady pace. There is also a large community where you can ask questions if you get stuck.
Visit
Grasshopper
Grasshopper is a fun app for helping beginners learn to code. Learn JavaScript through short, interactive lessons and move through the levels as you progress.
VisitYoutube Channels
Traversy Media
Brad has a comprehensive list of videos covering seemingly every programming topic. No matter what I'm learning, there's a walkthrough, along with the source code.
VisitfreeCodeCamp
freeCodeCamp is an an open source community of busy people who learn to code and build projects for nonprofits. Their youtube channel is loaded with tutorials that take the shape of an online course, due to the length of the videos.
Visit
CodingTheSmartWay
CodingTheSmartWay provides you with tutorials on fullstack web development with a small mixture of machine learning.
Visit
Design Course
Owned by Gary Simon, this channel has been around for about 8 years. Design Course provides you with videos that will help elevate your UI/UX skills using tools like photoshop and Adobe XD.
Visit
Programming with Mosh
Programming with Mosh provides you with tutorials that will help you become the best coder you can be. His channel is fully loader with both frontend and back end languages, libraries and framework.
Visit
Dev Ed
From teaching frontend languages and libraries like javascript and react, backend runtime environment like node js, to teaching about design using tools like figma and photoshop.
Visit
Tyler Moore
When it comes to Tyler Moore's channel, he focuses on teaching you how to build responsive and user friendly websites with the use of wordpress. This channel may be geared towards designers.
Visit
Tech Lead
Tech Lead channel does not teach your practical examples of how to write code. Rather, Patrick Shyu who is the creator of the channel pours out his knowledge of years of experience as a former tech lead in Google.
Visit
Coding Addict
This channel by John Smilga features a whole bunch of high quality tutorials on various topics such as Bootstrap, CSS, React, ES6, etc.
Visit
dcode
reated by Dom, a web developer from Australia, the channel has 100s of awesome tutorials on technologies like JavaScript, Rust, PHP, CSS and many more.
Visit
codeSTACKr
The channel has some great content related to HTML, CSS, JavaScript, SASS, React.js and Node.js to name a few.
Visit
Online Tutorials
If a CSS Ninja is what you aspire to be, ‘Online Tutorials’ is a channel you should be subscribing to right away.
Visit
Code Explained
One of the best ways to move from being a JavaScript beginner to an intermediate is to build apps. If you are looking for code-along video tutorials on how to build fancy JavaScript apps, check out Code Explained.
Visit
Ania Kubów
If building JavaScript games is what excites you the most, this channel is sure to further add up to your excitement. Minesweeper, Tetris, Candy Crush, Pac Man and of course, the classic snake game, this channel can help you build all of these.
Visit
Mozilla Developer
If you're interested in web development Mozilla has this great new channel where different web devs dive into interesting CSS properties, site layout techniques, and leveraging the power of Firefox's developer tools.
Visit
Hitesh Choudhary
Hitesh Choudhary brings regular videos on various programming languages and discussing the latest market trends as well as doing a live session on Saturday where he takes your questions.
Visit
Academind Channel
Academind provides comprehensive video tutorials on website languages including JavaScript, Angular, React, Vue, Node js and etc. He provides crash courses also.
Visit
edureka Channel
Edureka is one of the youtube channels to learn development, as it covers a variety of videos from Tableau, Machine Learning, Python, Data Science and etc.
Visit
Hussein Nasser
This channel discusses various software engineering topics with examples and adding fun elements to it.
Visit
Ben Awad
Open thoughts on various topics (not necessarily direct coding-related always). Knows his stuff and a nice touch of humor here and there.
Visit
Clever Programmer
Great videos on languages, tools, practices, tips to become a developer. Lately a lot of live coding on the channel.
Visit
Coding Garden
Lots of live coding there, with live viewer interaction in the chat. Will answer your questions when possible. Might be fast-paced at times.
Visit
Web Dev Simplified
High-quality content. Topics are deep researched and the content is well-thought-out and easy to follow.
Visit
Computerphile
A must-have if you are in computers in general. A closer look at how things work, what's happening behind the scenes, and more.
Visit
Florin Pop
Likes challenges, like doing X projects in X amount of time. Lot's of live coding mixed with separate videos on specific topics.
Visit
Javascript Mastery
A must-have for full-stack JS engineers. Lots of awesome projects focusing on both sides of the stack and how to deploy them.
Visit
CS Dojo
Awesome channel if you are learning algorithms and data structures. Would highly recommend especially if you are in the job-seeking phase and preparing for interviews.
Visit
The Coding Train
Very enthusiastic about the topics. Surely knows his stuff. Usually fan interaction simultaneously during live coding sessions.
Visit
Colt Steele
One of the best selling instructors on Udemy has an awesome YouTube channel. Visually pleasing and high-quality content.
Visit
Learncode.academy
Great content, knows his stuff. Has been inactive lately, tho lots of great resources there, especially yearly developer roadmaps.
Visit
Meth Meth Method
High-quality content. Great if you are looking for advanced JS or learning Canvas. Lots of best practices and elegant code.
Visit
Tyler Potts
If you want to learn about Game or Web Development, JavaScript, CSS, PHP or anything else relating to programming then subscribe to the channel.
Visit
Coding Tech
This is basically TED for coders. A lot of awesome full-length tech talks posted there.
Visit
Derek Banas
Among the first YouTube dev channels. Very detailed, tho pretty fast-paced cover of features. Great for refreshing the particular tech.
Visit
LevelUpTuts
Great channel on a wide variety of tech. Lots of tutorials sorted in the playlists based on the experience level of the viewer.
Visit
Google Developers
Latest updates and future plans, news on cutting-edge tech. Also reports from events and interesting talks.
Visit
Chris Coyier
Founder of css-tricks.com. As you might guess - mainly front-end oriented stuff in the channel. Grid, responsive design and all the good stuff.
Visit
Chris Hawkes
Mainly thoughts on broader and open topics like tool comparisons, career tips, top tech lists, advice on how to's, opinions, etc.
Visit
JSConf
Lots of awesome talks on all the JS related topics. A great resource to follow along with modern trends and ever-evolving environment.
Visit
Joshua Fluke
It will help you on ways to structure your CV better and much more. Highly recommended from me.
Visit
Honest Careers
They make videos that help you find your dream job. Whether that's digital work, working from home, or starting your first online business.
Visit
Numberphile
Everything around math and numbers. Awesome and enthusiastic hosts. Interesting topics and easy to follow.
Visit
Easy Tutorials
This channel is created with the aim to help you to learn Website development, blogging, Digital Marketing and other technical things.
VisitReading
Front-end Developer Roadmap
This brilliant roadmap by Kamran Ahmed gives an amazing overview of the front-end ecosystem and the potential routes you can take as a front-end developer.
Visit
Shay Howe: Learn HTML & CSS
Shay Howe has put together a seriously impressive guide to HTML & CSS. I would consider it required reading for anybody learning front-end web development.
Visit
BEM
Without a defined structure, CSS can get pretty messy pretty quickly. BEM principles are only one possible solution, but I've found it to be the sanest approach to structuring CSS.
Visit
ITCSS
Inverted Triangle CSS (ITCSS) is a great method for architecting your CSS code. If you're building medium to large projects, you might find it useful.
Visit
You don't know JS
Take a deep dive into JavaScript with this free series, which was originally funded on Kickstarter.
Visit
Eloquent JavaScript
Eloquent JavaScript be should high up on any beginner JavaScript developer's reading list. It is a great introduction to the language and touches on some more advanced features of the language.
Visit
JavaScript Design Patterns
This book is an amazing resource for learning the varying ways problems can be solved with design patterns and reusable solutions. Perfect for any new JavaScript developer wanting to boost their skills.
Visit
Code Analogies
If you're someone who learns coding principles best through analogies then this is the site for you. You'll find tons of programming concepts broken down using everyday examples.
Visit
Try Git
A series of valuable resources to help you get up-to-speed with version control and Git.
Visit
33 Concepts Every JavaScript Developer Should Know
This goes in the reading section, but there are also plenty of videos linked in this resource. If you're a JavaScript developer (current or aspiring) this GitHub repo is a goldmine of information.
Visit
"web.dev
web.dev is a site created by Google to help developers learn how to create high quality websites. On top of being a learning resource it also provides site auditing and reporting tools.
Visit
Interneting is Hard
An extremely comprehensive resource to help people learn HTML & CSS. The tutorials offer beautiful diagrams and hands-on examples.
Visit
Coder Coder
Coder Coder is a great learning resource aimed at self-taught web developers. It's run by Jessica Chan, who has also done a number of live coding sessions with Frontend Mentor challenges.
Visit
A11y Style Guide
The A11y Style Guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive.
Visit
JavaScript.info
An extremely comprehensive resource that goes from basic to advanced concepts offering detailed explanations for every topic.
Visit
30 Seconds of Code
Short code snippets for all your development needs. This website is a great resource to look through and learn some new tricks.
Visit
MarkSheet
MarkSheet is a nicely presented written HTML & CSS tutorial. It's written in an engaging way with lots of code snippets and simple explanations.
Visit
Inclusive Components
This blog by Heydon Pickering will help you build better interfaces. Each post explores a common interface component and comes up with a better, more robust, and accessible version of it.
Visit
Modern CSS Solutions for Old CSS Problems
This blog series by Stephanie Eckles will help you upgrade your CSS skills. Every post presents modern CSS techniques in an engaging, easy to understand manner that will help you grow as a developer.
Visit
Josh Comeau
Josh Comeau has an incredible knack for explaining topics in an engaging way. Each article is beautifully presented and will have you reading all the way to the end.
VisitReferences & CheatSheets
HTML Reference
A free HTML reference featuring all elements and attributes. It's a great website to refer back to if you need to check up on something HTML-related.
Visit
CSS Reference
A free visual guide to CSS. It features the most popular properties and explains them with illustrated and animated examples.
Visit
MDN
MDN is an incredible resource from Mozilla for HTML, CSS, JavaScript and beyond. Useful for beginners and seniors alike. You'll often find yourself coming back throughout your development journey.
Visit
Emmet Cheat Sheet
This cheat sheet will be a valuable resource in your early days of using Emmet.
Visit
HTML Cheat Sheet
Although called HTML Cheat Sheet, this site is also a great resource for CSS and JavaScript. Perfect for when you're getting started as a front-end developer.
Visit
HTML Entity Reference by CSS-Tricks
Super useful reference, gives you HTML entitiy name, numeric code, hex code and ISO code.
Visit
Codrops CSS Reference
A great reference for CSS from Codrops. Be sure to have a look if you need a hand.
Visit
Accessibility Matters
Your site needs to be usable by everyone. Accessibility Matters is a great resource, offering HTML patterns to help teach you the ins and outs of accessible markup.
Visit
Can I Use
Can I Use will tell you what the browser support is like for the latest and greatest advances in front-end technologies.
Visit
Airbnb CSS Styleguide
For a little insight into how a large company, such as Airbnb, structures their CSS, have a read through their CSS styleguide. It will give you plenty of tips and tricks.
VisitAirbnb JavaScript Styleguide
Like the CSS style guide, Airbnb's JavaScript style guide is very insightful. They also include their style guide for React inside it.
Visit
Superhero.js
Some resource-ception here with Superhero.js. The site has an amazing collection of articles, videos and presentations on all things JavaScript. Definitely worth checking out!
Visit
Website Setup JS Cheat Sheet
A great, in-depth JavaScript cheat sheet that is a one-stop-shop reference guide for the language.
VisitSVG Compendium
The definitive resource for all things SVG. Be sure to bookmark this article and come back to it whenever you need.
Visit
Flexbox Cheat Sheet
This is a great visual cheat sheet to help you get to grips with Flexbox. Well-worth a bookmark!
Visit
Grid Cheat Sheet
This CSS Grid cheat sheet will prove a valuable resource in the early days of building Grid layouts.
VisitA Complete Guide to Flexbox
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
VisitChallenges & Problem-Solving
Frontend Mentor
Improve your front-end coding skills by building real projects. Join over 70,000 developers building projects, reviewing code & helping each other get better.
Visit
Codewars
Build your understanding of JavaScript through logic-based challenges. Codewars is a great place to improve your problem-solving skills.
Visit
30 Seconds of Interviews
30 Seconds of Interviews is a great place to come if you want to test yourself with dev-related questions. Perfect for some last minute interview prep!
Visit
RegexOne
It is always useful to keep your regular expression game sharp. You never know when you might need it! RegexOne is a great practice ground for boosting your skills.
Visit
Exercism
If you learn better by problem-solving, Exercism is an incredible resource. Out of the front-end languages, you can only do challenges for JavaScript, but the track will help you become a JS master!
Visit
CSSBattle
CSS code-golfing is here! Use your CSS skills to replicate targets with the least code possible.
Visit
JavaScript Questions
Want to put your JavaSript knowledge to the test? This awesome collection of JavaScript questions created by Lydia Hallie will definitely do that!
VisitCommunities - Blogs
Dev.to
Dev.to is a vibrant community of developers writing articles and helping each other out. The codebase itself is open source, so anyone in the community can get involved and contribute.
VisitCSS Tricks
CSS Tricks focuses mostly on...you guessed it: CSS. However, many articles go beyond CSS and it is a truly incredible resource.
Visit
Hashnode
Hashnode is a free content creation platform and community that allows you to publish articles on your own domain and helps you stay connected with a growing developer community.
VisitfreeCodeCamp News
freeCodeCamp News is a great place to read articles for developers of all levels and stacks.
Visit
Smashing Magazine
A very popular web design and development blog, writing about all things coding and designing.
VisitCodrops
Another blog, writing articles and tutorials about latest web trends, techniques and new possibilities.
Visit
Sitepoint
A hub for web developers to share their passion for building incredible Internet things.
Visit
Front End Front
A place where front-end developers can ask questions, share links, and show their work.
Visit
Designer News
A community of people in design and tech, to discuss and share interesting things in the industry.
Visit
Stack Overflow
Stack Overflow is the mecca for coding Q&A. It is the world's largest developer community and is an amazing resource for any developer.
Visit
Discord
Discord is the easiest way to talk over voice, video, and text. Talk, chat, hang out, and stay close with communities.
Visit
Code Project
Code Project is a community for computer programmers with articles on different topics and programming languages such as web development, software development, C++, Java, and other topics.
VisitDev Tools
Visual Studio Code
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.
Visit
Codepen
CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets.
VisitEmmet
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
Visit
Git
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Visit
GitHub
GitHub, Inc. is a subsidiary of Microsoft which provides hosting for software development and version control using Git.
Visit
GitLab
GitLab is an open source end-to-end software development platform with built-in version control, issue tracking, code review, CI/CD, and more
Visit
Figma
Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.
Visit
Insomnia
Insomnia is a great application to help you work with APIs as a developer. It's really easy to customize to suit your own workflows and preferences.
Visit
CodeSandbox
CodeSandbox is an amazing tool to help you prototype ideas with code. Quickly spin up new sandboxes with pre-configured templates and easily share your code with others.
Visit
Hyper
Hyper is a beautiful and fast Electron-based terminal created by the team at Vercel. It's fully extensible and easy to customize to help speed up your workflow.
VisitCSS
Animate.css
Just-add-water CSS animations. A simple CSS library that lates you add animations with ease.
Visit
Responsive Grid System
A quick, flexible and easy fluid grid for spectacularly easy responsive web design.
Visit
CSS for People Who Hate CSS
Excellent guide on how to write better, cleaner and more reusable CSS code.
Visit
Cubic-bezier function generator
A tool for visually generating timing animation functions to use in CSS transitions and animations.
Visit
CSS easing functions
An amazing collection of easing functions bo be used in CSS transitions and animations.
Visit
Animista
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
Visit
Free Frontend
Free hand-picked HTML, CSS and JavaScript (jQuery, React, Vue) code examples, tutorials and articles.
Visit
LOADING.IO
Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.
Visit
Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards.
Visit
fancy-border-radius
A visual generator to build organic looking shapes with the help of CSS3 border-radius property.
Visit
CSS Box Shadow Generator
Generate CSS3 Box Shadow code for your Div, Frame, Buttons or any other HTML element with Outline, and Inset (inner) type shadow effects
VisitFrameworks - Libraries
React
React is a JavaScript library from Facebook. It re-defined how front-end developers build the interactive user interfaces. Now a very mature library, it has a strong ecosystem of developers and packages.
Visit
Angular
Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.
Visit
Tailwind CSS
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs.
Visit
Vue.js
Vue.js is a very popular JavaScript framework. It offers a beautiful syntax and is a pleasure to work with. It has a strong ecosystem around it and so is a great choice on the front-end.
Visit
Next.js
Next.js is a React framework that helps you build server-side rendered applications with zero configuration. There are lots of benefits to building Next applications, so it's well worth checking out.
Visit
GatsbyJS
Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps
Visit
Bootstrap
Bootstrap is the most well-known front-end component library. It's a very well-written tool, perfect for rapid prototyping or web development.
Visit
Foundation
Foundation is another well-written front-end framework. It's very simple to use and you can build complex interfaces in no time at all.
Visit
Materialize
If you like Google's Material Design, then you'll love Materialize. It's a great library for quick development using Material Design principles.
Visit
Bulma
Bulma is a nice CSS framework based on Flexbox. It makes building mobile-first, responsive layouts is a breeze.
Visit
jQuery
With the massive adoption of JS frameworks, the need for jQuery in new projects is dwindling. But, for new front-end developers and for building smaller sites, it is still very much worthwhile to learn.
Visit
React Native
React Native allows developers to build out native mobile apps in JavaScript. It is a very powerful tool, especially for small teams building out their first apps.
Visit
Parsley
Parsley allows you to add extremely simple client-side validations to your forms that are easily customizable
VisitInspiration
Dribbble
The ultimate design inspiration resource, not just for web design. The show and tell for designers.
Visit
Land Book
Product landing page gallery. My #1 inspiration resource when I build a landing page.
Visit
Site Inspire
A showcase of the finest web and interactive design. Currently over 4900 websites.
Visit
Call To idea
Get quick inspiration for common website elements such as forms, sliders, navigations, etc.
Visit
Awwwards
Awwwards has an incredible gallery of websites to look around. The sites on here are pushing the boundaries of what's possible on the web. So it's a great place to get ideas.
Visit
Glitch
Glitch is a friendly community that offers free tools to create and use apps. Their code editor allows for seamless collaboration on projects and can connect to the dev tools you already use.
Visit
Pinterest can also serve as a Design Inspiration platform. There are many great design boards on Pinterest.
VisitUI Graphics
Unsplash
My go-to site if I need to find images. Unsplash has an unbelievable gallery of royalty-free, high-resolution images for you to use.
Visit
Pixabay
Pixabay is another amazing resource for royalty-free images, videos, illustrations and vector graphics.
Visit
Pexels Videos
If it's royalty-free videos you're after, then Pexels Videos is an amazing resource with a huge library.
Visit
Coverr
7 new high-quality, beautiful videos every Monday. Amazing library of videos to choose from.
Visit
TinyPNG
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!
Visit
SVGOMG
SVGOMG is the missing GUI for SVGO. If you have SVGs on your site and you need to optimize them, then this is the tool for you.
Visit
unDraw
unDraw is an incredible collection of beautiful illustrations. All illustrations are available under the MIT License, so you're free to use them any way you like.
Visit
DrawKit
DrawKit is a collection of free, beautiful, and customizable SVG illustrations. All the free illustrations are available under the MIT License, so you're able to use them any way you like.
Visit
humaaans
This library of mix-and-match illustrations of people is a great resource to add some stylish imagery to your website.
Visit
Ouch!
Ouch! offers a library of beautiful vector illustrations in a range of styles. Perfect for when you're looking to add some extra style to your website.
Visit
Cool Backgrounds
Cool Backgrounds offers a selection of beautiful, enticing image backgrounds to add to your blog post, website, or wallpaper.
Visit
Get Waves
Get Waves is a simple web app to generate SVG waves, which you can then use in your projects.
Visit
Blobmaker
Easily create random, unique, and organic-looking SVG shapes to use in your websites.
Visit
Random User Generator
Generate random user data, including photos. Like Lorem Ipsum, but for people.
Visit
Startup Stock Photos
Lots of great pictures of startup offices, people, devices and more. I love it.
Visit
100 Daily UI Free
100 Daily UI Challenge is a free Figma library of elements and screens. You can customize all of them by changing colors, shapes, or elements. You can create some pretty awesome UI designs and create better products.
Visit
Icons 8
Icons 8 helps creators who don’t draw overcome the lack of quality graphics. Download the free PNG and SVG illustrations from top Dribbble artists to class up your product.
Visit
Invision App
Invision app is the digital product design platform powering the world’s best user experiences. With intuitive tools for ideation, design, prototyping, and design management, the InVision platform gives you everything you need for digital product design, all in one place.
Visit
Uplabs
UpLabs is a website for designers and developers to find and share resources to build apps and sites.
Visit
Avataaars
Create avatar illustrations in Sketch App with this free library. Combine clothes, hair, emotions, accessories, and colors.
Visit
Blush
Blush is a tool that brings illustrations to everyone from artists around the world. The best thing is that you can customize every piece of an illustration to create your own compositions.
Visit
IRA Design
IRA comes with a great variety of ready-to-use features, gradients, and components. You can use the samples as they are or you can add a new block from the UI Kit.
Visit
UI Design Daily
UI Daily Design is a source where designers can get thousands of UI resources (i.e. XD, Sketch, Figma, etc.) for free. It is updated daily so that you never miss the best one you need.
Visit
UI Space
High quality hand-crafted Free Sketch files, PSDs and AI freebies, free fonts, mockups, the latest free icons sets and other free vectorial resources.
Visit
Open Doodles
Open Doodles is a set of free illustrations that embraces the idea of Open Design. You can copy, edit, remix, share, or redraw these images for any purpose without restriction under copyright or database law.
Visit
Open Peeps
Open Peeps is a hand-drawn illustration library to create scenes of people. You can use them in product illustration, marketing, comics, product states, user flows, personas, storyboarding, quinceañera invitations, or whatever you want.
Visit
Free Illustrations
This is a library of Free Illustrations and Icons for everyone. You can use them for anything you like. It is free for commercial and personal use.
Visit
Colors
Coolors
Struggling for inspiration when creating a color palette? No worries, Coolors offers a helping hand with their auto-generator.
Visit
ColorSpace Palette
ColorSpace offers a great way of creating beautiful palettes based around a single color. Add your primary color and ColorSpace will generate some palettes to compliment it.
Visit
CSS Gradient
Another brilliant gradient generator for you to play around with. CSS Gradient is also an excellent resource if you want to learn more about the different types of gradient available to you.
Visit
Colormind
Colormind is an amazing resource for generating color palettes. You can even feed it a picture and it will create a color palette from that.
Visit
ColorBox
ColorBox is an amazing tool, open sourced by Lyft, that helps create accessible color systems. The GUI allows you to tweak your requirements as much as you like. It's a seriously powerful tool!
VisitColorSpace Gradient
Another great tool from ColorSpace, but this time to help create CSS gradients.
Visit
Colorsinspo
Colorsinspo is all in one resource to find everything about colors with extreme ease.
Visit
Material Palette
Another great set of colors, inspired in material design. Generate and download your palette.
Visit
Colorhunt Palettes
Don't know what colors to use for your website? Colorhunt helps you with beautiful color palettes.
Visit
LOL Colors Palettes
Curated color palettes inspiration. Another source for great color palettes.
Visit
UI Gradients
Collection of beautiful color gradients for you to choose from and export to your project.
Visit
Paletton
A very popular tool which allows you to create color combinations that play well together.
Visit
0to255
A simple tool that helps you find variations of any color. Perfect for hovers, borders and gradients.
Visit
Typography
Google Fonts
Hands down the best resource for free web fonts. It offers a huge font library for you to choose from.
Visit
Font Squirrel
Font Squirrel is another brilliant resource for free web fonts. The site also offers other tools, such as a font generator.
Visit
Wordmark.it
Not sure what font to use for your next project? Type in a word or phrase on Wordmark.it and scroll through a huge library of fonts to compare.
Visit
The 100 best free fonts by Creative Bloq
List of free fonts, from vintage-inspired typefaces to slab serifs, for a range of projects.
Visit
A Pocket Guide to Typography
Amazing resource to learn about typography. Learn typography basics in less than 30 minutes.
Visit
FontPair
Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
Visit
Fontjoy
Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
VisitIcons
Font Awesome
A very popular font icon library with vector icons and social logos. Plenty for you to choose from.
Visit
Devicon
If you need coding-related vector icons then Devicon has you covered. It offers a large number of programming languages, design and development tool icons.
Visit
Material Icons
If you're building a site using Material Design then Material Icons is a great font icon library for you.
Visit
Gradientify SVG Icons
A useful resource from Iconshock providing an interactive free SVG icon pack made especially for gradient lovers.
Visit
Fontastic
Create a customized icon font from your icons. Choose from 9000 icons or import your own.
Visit
Freeicons
Freeicons is a free platform for download vector icons in SVG, PNG, EPS, AI and PSD format.
Visit
Noun Project
Noun Project features the most diverse collection of icons and stock photos ever. Download SVG and PNG. Browse over 3 million art-quality icons and photos.
Visit
Orion
Line, Solid, Color & Flat icons with a precise and unified style. Adapts to any type of project with different stroke weights, color control and great legibility.
Visit
Streamline Icons
Over 10,500 in three different weights. 53 categories, 720 sub categories, and over 30,000 something in total.
Visit
Iconscout
Iconscout is a collection of millions of different icons, in every possible category you can just imagine
Visit
Nucleo
Nucleo is a beautiful library of 30635 icons, and a powerful application to collect, customize and export all your icons.
Visit
Deployment - Testing
Vercel
Vercel is an amazing hosting service for static & JAMstack sites. It's super simple to set up. Connect your GitHub, GitLab or Bitbucket, point to a repo and your site will be deployed.
Visit
Netlify
Build, test, and deploy globally with Netlify’s all-in-one platform for modern web projects.
Visit
LambdaTest
LambdaTest is an awesome cross-browser testing tool. They have a free tier, which is a great way to get started with the service. Cross-browser testing is a crucial part of a professional workflow.
Visit
W3C HTML Validator
It's always good to know if you have errors in your HTML. Use this official W3C tool to make sure your markup is valid.
VisitW3C CSS Validator
Be sure your CSS code contains no errors with this official W3C code validator.
Visit
Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, and more.
Visit
SEOptimer
Get detailed (and free!) insights on how your website stacks up for Search Engine Optimization.
Visit
Front-End Checklist
Don't launch a site without running through this front-end checklist. It's a crucial resource to make sure you've checked all the necessary boxes before deployment.
Visit
Nibbler
Receive a free report on some important areas of your site. See how your site scores for SEO, accessibility and social media.
Visit
Google Pagespeed
Test key speed metrics for your site and receive a detailed breakdown of what needs fixing and how you can fix it.
Visit
Google Mobile Speed Test
See how your site performs on mobile devices and how it stacks up against other sites.
Visit
Real Favicon Generator
Generate all the favicon assets and HTML code you need to include favicons for all platforms.
Visit
Pingdom
Receive a detailed report of your website's performance. The report includes prioritized tasks for how you can improve.
Visit
HTML & CSS Security Checklist
If you thought HTML & CSS weren't vulnerable to malicious attacks you'd be wrong! This is a very useful checklist to help you avoid potential vulnerabilities.
Visit
Front-End Performance Checklist
Another crucial checklist to go through is your performance checklist. If your site takes ages to load you'll have a hard time getting users to stick around.
Visit
Yellow Lab Tools
Yellow Lab Tools run an audit on your HTML, CSS and JS. It also runs performance tests to make sure you're sticking to the best practices.
Visit
Uptime Robot
Uptime Robot is an invaluable tool for monitoring your site. Setup monitors to ping your website every 5 minutes for the free plan or every minute for the paid plan. Get sent an email straight away if your site is down when it gets pinged.
Visit
Wave
Wave is an extremely valuable accessibility evaluation tool. Run your site through it to get a detailed report on what changes you need to make to improve how accessible it is.
Visit
Basin
An easy-to-configure form backend for static HTML sites, Wordpress, or any website. Trigger branded emails sent from your own domain.
Visit