Select Page

503 Free Ebooks, Tutorials, Tools, Videos and Resources for Web Developers and Designers

503 Free Ebooks, Tutorials, Tools, Videos and Resources for Web Developers and Designers
A web designer is a graphic artist who is responsible for designing the layout, usability, and visual appearance of a website. A successful web designer must possess an array of creative, graphic, and technical skills. A web developer is someone who builds and maintains the core structure of a website. They’re tasked with converting the web design into a functional website, using coding languages such as HTML, JavaScript, PHP, jQuery, etc. To summarize, a web designer is a person that makes the website looks good and a web developer is generally called programmer / coders.

In this post, you’ll find a repository that contains content which will be helpful in your journey as a Web Developer as well as a Web Designer. Besides free ebooks, tutorials, resources and tools, you’ll find a collection of useful YouTube channels for javascript developers and web designers. The list of videos come in various languages – feel free to choose one that suites your best!

503 Free Ebooks, Tutorials, Tools, Videos and Resources for Web Developers and Designers

No code. No hassle.

Divi takes the power and freedom of WordPress and adds a wonderful visual design interface on top. Now you get the best of both worlds.

WordpressGAME CHANGER!

Books

  1. HTML Tutorialspoint
    A thorough tutorial on HTML (free pdf/486 pages).
  2. Learn How To Code In HTML5 and CSS3
    A free e-book about making websites in HTML5 and CSS for absolute beginners.
  3. You don’t know JS
    Book series diving deep into the core mechanisms of the JavaScript language.
  4. Guide to Git and Github
    A beginner friendly guide to using git and working with Github.
  5. Introduction to HTTP
    Introduction to HTTP, the stateless protocol underlying all of the web.
  6. Introduction to the Command Line
    A short and beginner friendly introduction to the command line, covering common commands that will make you immediately productive.

Learning

  1. A Complete Guide to Flexbox | CSS-Tricks
    A comprehensive guide to the Flexbox Layout.
  2. A Complete Guide to Grid | CSS-Tricks
    A comprehensive guide to the Grid Layout.
  3. Command Line Power User
    A video series for web developers on learning a modern command-line workflow with ZSH, Z, and related tools.
  4. CSS Grid
    Complete video course all about CSS Grid.
  5. Best Of JS
    A site to check the best GitHub Repos for your favourite js framework.
  6. CodeCademy
    A series of interactive courses teaching the world how to code. Offering free and paid subscriptions across a variety of languages.
  7. Codementor
    A tool to get help from experienced developers in various coding languages on your learning journey.
  8. Conquering Responsive Layouts
    Made by Kevin Powell
  9. Coursera
    A selection of courses from highly reputable schools like Stanford and Yale.
  10. CSS Almanac | CSS-Tricks
    A quick reference guide to many features of CSS.
  11. 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.
  12. Design Resources
    Design Resources from Skullface.
  13. dev.to
    Where programmers share ideas and help each other grow.
  14. DevProjects
    A free community consists of curated projects from senior developers to help you bridge the gap between theory and practice. !.
  15. Dicoding Academy
    Where everyone can learn programming from fundamentals (Available only in Indonesian language).
  16. edx
    A series of University-level courses from Harvard, MIT, Wharton, and more.
  17. EggHead
    Web development video tutorials in “bite-size” segments. Has both free and “Pro” (paid) memberships.
  18. Flexbox
    Level up your Flexbox knowledge – an online, Zombie-centric story course.
  19. freeCodeCamp
    A free resource incorporating programming projects and interview preparation for developer jobs.
  20. Frontend Masters
    Web development video tutorials from industry leaders (updated frequently). Has both free (limited-time) and paid memberships.
  21. 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.
  22. GeeksforGeeks
    A computer science portal for geeks.
  23. Khan Academy
    A universal online learning platform that also provides the important courses for developers.
  24. LearnAnything
    Search interactive mind maps to learn anything.
  25. Mastering Markdown
    A Mini Series that will change how you write documentation.
  26. Mozilla Developer Network
    The latest information about Open Web technologies.
  27. Complete web development tutorials
    Lyty.dev complete web development tutorials with well explained examples for free.
  28. Pluralsight
    Unlimited online developer training from industry experts.
  29. Saylor
    An open, online learning solution offering college credit opportunities for students.
  30. Scrimba
    Code-screencast-based learning in a variety of languages.
  31. Scotch
    Many Web development courses. Has both free and “Premium” (paid) memberships.
  32. Search Courses
    A selection of trending courses and tutorials.
  33. SoloLearn
    A free portal for learning web development.
  34. Team Treehouse
    Self-paced learning across a variety of languages and subjects.
  35. The Modern JavaScript Tutorial
    Everything about the Javascript Language.
  36. The Odin Project
    An Open-Source Curriculum for Learning Web Development.
  37. Tutorials point
    Tutorials for many different languages with interactive code examples.
  38. Udacity
    Learn anything online – deep learning, machine learning, front end languages.
  39. Udemy
    An online learning and teaching marketplace.
  40. 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.
  41. Web APIs | MDN
    Everything a beginner needs to know about Web APIs.
  42. Web Design in 4 minutes
    by Jeremy Thomas creator of
  43. WesBos
    Free and premium courses in web development.
  44. 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.
  45. web.dev
    Guides and resources for modern fast websites by google developers.
  46. Become a Front-End Web Developer
    Develop competency with HTML, CSS, JavaScript, and jQuery.
  47. Web Skills
    A visual overview of useful skills to learn as a web developer.

Related / Past Compilations

  1. 171 KICK ASS WEB APPS THAT YOU CAN USE WITHOUT AN ACCOUNT
  2. 112 AMAZING SERVICES AND ADD ONS FOR YOUR STATIC WEBSITES
  3. Web Design Posts

Code Editors

  1. 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.
  2. 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.
  3. Geany
    Geany is a small and lightweight integrated development environment.
  4. IntellijIDEA
    A universal IDE from JetBrains. It has code-completion, integrationa, and Version Control System (VCS).
  5. Notepad++
    Notepad++ is a free source code editor and Notepad replacement that supports several languages.
  6. Sublime Text
    A sophisticated text editor for code, markup and prose.
  7. 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.
  8. Visual Studio Code
    Code editing Redefined. It has syntax highlighting and autocompletion with IntelliSense, Git commands built-in, Extensible and customizable.
  9. 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.
  10. Nano
    GNU nano is a text editor for Unix-like OS’s.
  11. 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

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

  1. API Directory | ProgrammableWeb.
  2. Animista
    CSS animation presets/generator.
  3. Browserling
    Live interactive cross-browser testing on virtual machines.
  4. LambdaTest
    Test websites & web apps on 2000+ browsers & OS.
  5. BrowserStack
    Test websites and mobile apps on different browsers and mobile devices.
  6. Can I use.
    Support tables for HTML5, CSS3, etc. on desktop and mobile browsers.
  7. Checkbot
    Browser extension that tests websites for SEO, speed and security issues.
  8. Codepen
    Social development environment where you can write code in the browser and see results as you build.
  9. Codeply
    A HTML, CSS, JavaScript editor playground for designers & developers to compare, prototype and test frontend frameworks.
  10. Codesandbox
    Instant IDE and prototyping tool for web development.
  11. Create a new fiddle – JSFiddle
    Test JS, CSS, HTML, or CoffeeScript in an online code editor.
  12. Critical Path CSS Generator – by Jonas Ohlsson
    Reduces the amount of CSS the browser has to go through to render a webpage.
  13. CSS cheat sheet
    A very easy to use one page reference for css selectors and properties. It also includes categories for flexbox and grid.
  14. CSS Minifier
    Minify your CSS files!
  15. CSS Reference
    A free visual guide to CSS.
  16. CSS Triggers
    Tells you what gets triggered when mutating a given CSS property.
  17. CSS Filters
    Interactive CSS filter generator.
  18. ColorLisa
    Color palette generator based on great artists.
  19. ExtendsClass
    Provides tools to add features directly usable in the browser.
  20. Favicon Generator
    Upload an image and generate a favicon for your website.
  21. Favicon Generator for iOS/Google Progressive Web App Manifest
    Online tool to test favicons on different platforms.
  22. 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.
  23. 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.
  24. Generate favicon based on text
    Generate a favicon from text, an image, or emojis.
  25. Get Waves
    Generate many types of SVG waves for use in web design.
  26. Glitch
    Glitch is like working together in Google Docs–multiple people can work on the same project at the same time.
  27. Google Analytics
    Web service that tracks and reports website traffic.
  28. Google APIs Explorer
    Tool to interactively explore various Google APIs.
  29. Javascript Console in Sublime Text
    Tutorial to test JavaScript and execute it via build systems in Sublime Text 3.
  30. JS Bin
    Live pastebin for HTML, CSS, and JS, as well as a range of processors.
  31. Lighthouse
    Open source, automated tool for improving the quality of webpages.
  32. 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.
  33. Node Package Manager(npm)
    Package manager for Javascript.
  34. Yarn
    Package manager for Javascript, Like npm.
  35. Responsinator
    Replicate how responsive sites will look on popular devices.
  36. 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.
  37. Responsive Grid System
    Generate flexible grids to create a responsive website.
  38. Sans Francisco – a tool for designers
    Collection of tools for designers.
  39. Screensizemap
    A comparison of screen sizes in device-independent pixel.
  40. Stack Overflow
    Online community for developers to ask questions and get answers.
  41. The W3C Markup Validation Service
    Checks the markup validity of Web documents in HTML, XHTML, SMIL, MATHML, etc.
  42. The W3C CSS Validation Service
    Checks the validity of CSS and XHTML documents with style sheets.
  43. TinyPNG
    PNG and JPEG compression/optimizer.
  44. Web Developer Checklist
    Categorized checklist for things to cover during web development.
  45. Progressive Tooling to optimize your performance on Web
    List of tools that can be used to improve page performance.
  46. StackBlitz
    Online IDE for Angular and React projects that can be share via link.
  47. Postman(Tool for testing APIs)
    API client to create, share, test, and document APIs.
  48. Free Bootstrap 5 Cheat Sheet
    It is an interactive list of Bootstrap 5 classes, variables, and mixins.

CSS Frameworks

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

Icons

  1. Brandicons
    Icon font generator and viewer.
  2. Flat Icon
    Database of free icons in PNG, SVG, EPS, PSD, and Base64 formats.
  3. Font Awesome
    Open source icon set and toolkit with consistent styles.
  4. Glyphicon
    Icons for use with Bootstrap, other CSS frameworks, and any web projects.
  5. Google Material Design Icons
    An overview of material icons and how to integrate them into projects.
  6. Icomoon
    Icon font generator and icon collection.
  7. Icongram
    Collection of icon packs from different sources.
  8. IconSVG
    Quick customizable icons for your projects.
  9. Icons8
    Consistently styled and customizable icon packs.
  10. Ionicons
    Open source icons in SVG and webfont.
  11. Mapicons
    Icon font for use with Google Maps API and Google Places API using SVG markers and icon labels.
  12. Material Design Iconic Font
    Full suite of material design icons for easy SVGs on website or desktop.
  13. MfgLabs-Iconset
    MFG Lab’s icon set for use in webfonts and CSS.
  14. Micon
    Windows font and CSS toolkit.
  15. The Noun Project
    Comprehensive icon collection.
  16. Octicons
    Collection of GitHub’s icons for projects.
  17. Open Iconic, a free and open icon set
    Open source icon set in SVG, webfont, and raster formats.
  18. OpenWebIcons
    Webfont for scalable vector icons and logos.
  19. ReactIcons
    SVG react icons of popular icon packs.
  20. RemixIcon
    Open source neutral style icon system.
  21. Shape.so
    Customizable collection of icons and animations.
  22. Stackicons
    Customizable icons for social brands.
  23. Typicons
    Free-to-use vector icons embedded in a webfont.
  24. Weather Icons
    Weather themed icon font and CSS.
  25. Zocial | CSS3 Button Set
    Create social buttons using CSS and rendering social icons as a font.

Colors

  1. Adobe Color
    Color Wheel, Extract Theme, Extract Gradient, Accessibility Tools and more.
  2. Color Hunt
    Open collections of beautiful color palettes.
  3. Color Theory by Natalya Shelburne
    Practical Color Theory for People who Code: Tutorial on the use of color with examples.
  4. 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.
  5. Colormind – Bootstrap
    Colormind is a color scheme generator that uses deep learning to automatically apply the color pallete to a live website mockup.
  6. Coolors
    Super fast color scheme creator with a lot of functionalities.
  7. CSS Gradient
    Curated list of sites to explore gradients and color palettes.
  8. Data Color Picker
    Generate color palettes with visually equidistant colors. Useful for data visualizations.
  9. Designing in Color
    A complete guide to design in color (article on Medium).
  10. Flat UI Colors
    Color picker for flat designs.
  11. Image Color Picker
    Image color picker and palette generator.
  12. LOL Colors
    Curated color palette inspirations.
  13. Material Palette
    Color palette generator for Material Design.
  14. Palettable
    Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet.
  15. Paletton – The Color Scheme Designer
    Advanced tool for creating color schemes.
  16. Picular – Google, but for colors
    Primary color generator using Google’s image search.
  17. Pigment – Palette Generator
    Generate color palettes based on lighting and pigment.
  18. UI Gradients
    Scroll through or pick from beautiful gradients, download JPG and copy CSS Code.
  19. W3school Color Picker
    Find the perfect color from the color wheel, easy control.
  20. UI Color Picker
    Best colors in few selected shades to choose from very helpful for quickly choosing and adding color to design.

Typography

  1. A Crash Course in Typography: The Basics of Type
    First article of a series on Typography.
  2. Circular Font Combinations | Free Alternatives | Typewolf
    A great resource for everything related to Typography.
  3. Font Pair – Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
    Clean web-tool on How to pair Google Fonts.
  4. Fontspiration
    An iOS app for creating custom typographic designs.
  5. Fontsquirrel
    A resource for FREE, hand-picked, high-quality, commercial-use fonts.
  6. Google Fonts
    A catalog of free & open source fonts, great details and font pair suggestions.
  7. Just My Type
    A collection of font pairings.
  8. Table of Contents | The Elements of Typographic Style Applied to the Web
    A practical guide to web typography.
  9. Typekit
    Quality fonts from the world’s best foundries.
  10. Typography Terms
    An infographic on Typography Terms + explanations.

Design Inspiration

  1. 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.
  2. Awwwards
    The Website Awards that recognize and promote the talent and effort of the best developers, designers and web agencies in the world.
  3. Dribble
    Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
  4. Site Inspire
    SiteInspire is a showcase of the finest web and interactive design.
  5. 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.
  6. Behance
    Behance is a social media platform to showcase and discover creative work like Graphic Design, Illustration, Game Design and many more things.
  7. 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

  1. Animate CSS
    Choose, try out and get the CSS-Code for different animation types (over 70).
  2. Anime JS
    It’s easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.
  3. Bounce JS
    Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code.
  4. Magic Animations
    Showcase of different animations with link to GitHub repo.
  5. 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.
  6. Particles JS
    A lightweight JavaScript library for creating particles.
  7. Typed JS
    A JavaScript typing animation library with a great documentation on GitHub.
  8. Wow JS
    JavaScript library: Reveal CSS animation as you scroll down a page.

Stock Resources

  1. Burst
    Free, high-resolution images. All our pictures are free to download for personal and commercial use.
  2. Canva
    8,000+ free templates and thousands of free photos.
  3. 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.
  4. 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.
  5. Humaaans
    Library of editable people illustrations. Free for both commercial and personal use.
  6. 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.
  7. 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.
  8. 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.
  9. Pexels
    Exclusively stock photos of high quality, great feature: Filter photos by color.
  10. Picalls
    Free photos and wallpapers licensed under the Creative Commons CC0 license.
  11. Pixabay
    In addition to photos, Pixabay offers video, vectors and illustrations..
  12. Pikwizard
    Free stock photo library for commercial and editorial use. Huge library of stunning, high quality, royalty free images. No attribution required.
  13. Public Domain Archive
    “A public domain image repository” created by Matt a graphic designer, web designer and photographer.Vintage and modern images.
  14. StockSnap.io
    High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license.
  15. The Stocks
    Another awesome directory sharing sites for resources, loading directly on the webpage.
  16. UnDraw
    MIT licensed illustrations for every project you can imagine and create.
  17. UnSplash
    Beautiful, Free Photos” & themed collections of photos.
  18. 3D Bay
    Free, 3D Illustrations A collection of High-quality 3D Illustration resources.

Geolocation

  1. 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.
  2. Google maps API | Google
    Google Map APIs including documentation & learning resources – extensive.
  3. Google maps API | Traversy
    Great YouTube tutorial on using the Google Maps APIs.
  4. OpenCage Geocoder
    Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API.
  5. GeoJS
    Free to use API for geolocation lookup by IP address.

APIs

  1. Alexa API | Codecademy
    Learn to develop a custom Amazon Alexa skill that respond to the user’s voice with custom messages.
  2. Abstract APIs
    Free utility API’s for compressing images, creating user avatars, validating emails, and more.
  3. jsonplaceholder
    Fake Online REST API for Testing and Prototyping.
  4. A list of public APIs.
  5. Lorem Picsum
    Easy to use and customize placeholder photos.
  6. OpenWeatherMap
    Weather API with free and paid licenses.
  7. Random famous quotes | Rapid APIs
    Gets a random quote in JSON format.
  8. Unsplash Source
    API to retrieve random images from Unsplash.com.
  9. Web APIs | MDN.

Mockups

  1. 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.
  2. Figma
    Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas.
  3. Rotato 3D Mockup Generator
    Make video 3D mockups and images. No experience required. Unlimited renders. MacOS.
  4. The MockUp Club
    Website that offers free downloads of design mockups (mostly Photoshop format).
  5. MockupsJar
    Build mockups with screenshots of your application or web Design for free to share with customers and clients.
  6. MockUPhone
    Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks!.
  7. 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.
  8. Wireframe.cc
    Great tool for sketching out ideas and layouts, super minimalistic.

Challenges / Games

  1. Ace Front End
    Ace Front End has complete and practical coding challenges, with a detailed walk through of a perfect interview solution.
  2. 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.
  3. Codewars
    Improve your skills by training with others on real code challenges.
  4. CSS Battle
    CSSBattle is an online CSS
  5. CSS Diner
    It’s a fun game to learn and practice CSS selectors.
  6. CSS Zen Garden
    A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
  7. Dev Challenges
    Made by @thunghiemdinh.
  8. Flexbox Defense
    It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels.
  9. 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.
  10. 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.
  11. Grid Garden
    Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout.
  12. Hackerrank
    Practice coding, prepare for interviews, and solve interview style coding challenges.
  13. JavaScript30
    A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.
  14. Leetcode
    Coding problems to solve in a range of categories and difficulties.
  15. Project Euler
    Challenging computer science and mathematical problems.
  16. 100DaysOfCode
    Regardless of your coding skills or your language of choice, this challenge invites you to code for at least 1 hour a day.

Testing

  1. Jest
    JavaScript testing framework.
  2. Mocha
    JavaScript testing framework.
  3. Karma
    JavaScript test runner.
  4. Istanbul
    JavaScript test coverage tool.
  5. TestCafe
    Node.js end-to-end testing.
  6. Cypress
    JavaScript end-to-end testing framework.
  7. Puppeteer
    Google’s Chrome automation tool for E2E testing.
  8. Playwright
    Microsoft’s browser automation tool for E2E testing.
  9. Sinon.JS
    Standalone test spies, stubs and mocks for JavaScript.
  10. Chai
    Assertation library for JavaScript testing.

YouTube Channels

English

  1. 1stWebDesigner – Tutorials on WordPress, PSD to HTML.
  2. 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.
  3. Adrian Twarog – Tutorials on HTML, CSS, Bootstrap, JavaScript, React, React, Native, UI/UX and cool Designing stuff.
  4. Alex Carpenter – HTML, CSS, & JavaScript
  5. Ana Tudor – CSS and SVG animation
  6. AngularAir – A live videocast all about Angular
  7. Ania Kubów – Teaching JavaScript, HTML and CSS in game form
  8. Ben Awad – React, React Native, Redux, MobX, GraphQL, Next.js, software architecture
  9. Brad Hussey – Tutorials on Bootstrap, SASS, jQuery, PHP, Freelancing.
  10. Byte-Sized Javascript – short (five-to-ten minute) screencasts about JavaScript and related technologies
  11. Chris Coyier – HTML, CSS, JavaScript, a lot of screencasts
  12. CJ Gammon – Snap.svg, Three.js
  13. Clever Programmer – Tutorials on React, MongoDB, JavaScript, MERN stack, HTML, CSS, React Native.
  14. ClojureTV – Clojure
  15. Coder’s Guide – Tutorials on HTML, CSS, JavaScript, Bootstrap.
  16. Codevolution – Tutorials on React, Vue, Angular, MongoDB, JavaScript, MEAN stack, HTML, CSS.
  17. CodeWithHarry – Tutorials on HTML, CSS, Javascript, Node JS, MongoDB and hosting.
  18. CodeWorkr – JavaScript, Node.js, REST API
  19. Coding Math – An ongoing series of video tutorials designed to teach you the math you need to understand as a programmer
  20. Coding with Dom – Javascript, End-to-end testing, NightwatchJS, live coding
  21. CodyHouse – CSS, Sass, tutorials, screencasts
  22. Computerphile – Lots of videos on general computer science topics
  23. CSS Grid Tutorial – Use CSS grid to structure and position websites with ease.
  24. CSS Tricks – YouTube channel of well-known web design and development blog CSS Tricks by Chris Coyier.
  25. Daniel Stern – JavaScript, Node.js
  26. Dennis Ivy – Tutorials on Django & Flask Full-Stack Web Development Projects.
  27. 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.
  28. Design Code Blade Nepal – CSS, JavaScript, Node.js, Angular
  29. DesignCourse – Tutorials on UI/UX Design or HTML5, CSS, SASS, Animation Library.
  30. Dev Coffee – Meteor, React.js
  31. Dev Ed – Learn web development, web design, 3d modelling, tools like figma and more.
  32. DevMarketer – Git, Vue.js
  33. devmentorlive – React, JavaScript, ES6, functional programming, programming practices
  34. DevTips – Tutorials on HTML5, CSS, SASS, Bootstrap, Foundation, jQuery, Ruby on Rails, GitHub.
  35. Dr Richard Stibbard – jQuery UI
  36. easydevtuts – Bootstrap, Foundation, Sass
  37. Elzero Web School – Arabic only.
  38. Envato Tuts+ – HTML, CSS
  39. Facebook Developers – JavaScript, React
  40. Flexbox in 20 minutes – Quick crash-course on the CSS Flexbox model.
  41. freeCodeCamp – Tutorials on JQuery, JavaScript, React, Math, Science, Software Engineering, Open source software.
  42. Front End TV – JavaScript, ES6, Node.js
  43. Fun Fun Function – Tutorials on JavaScript, React, Functional Programming, GraphQL, Life as a Developer.
  44. funfunfunction – JavaScript, ES6, functional programming, programming practices
  45. Git and GitHub for Beginners – Crash Course – Ad-free tutorial by freeCodeCamp.
  46. GitHub Training & Guides – All about GitHub from GitHub Training team
  47. 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.
  48. Google Developers – Tools, events recordings
  49. Helping Develop – jQuery, HTML, CSS
  50. Ihatetomatoes – GreenSock, ScrollMagick, tools
  51. Jakob Jenkov – SVG
  52. Java Brains – JavaScript, Angular
  53. Kent C. Dodds – Javascript, React, live coding
  54. kevinpowell – HTML, CSS, Layout/Design and JavaScript
  55. keyframers – CSS, Sass, animations, tutorials, live coding, screencasts
  56. Kirupa Chinnathambi – Javascript, CSS, HTML
  57. Kyle Robinson Young – JavaScript, Node.js, Ember.js, Electron, Browserify
  58. LearnCode.academy – Tutorials on HTML, CSS, jQuery, JavaScript, React JS / Redux, Node JS.
  59. LearnWebCode – RWD, HTML, CSS, JavaScript, jQuery
  60. LevelUpTuts – Tutorials on HTML, CSS, SASS, WordPress, Magento,Drupal, React, Meteor.
  61. Low Level JavaScript – JavaScript
  62. Mackenzie Child – Design to Code Challenge – Tutorials on UI, how to design & code multiple styles of sites.
  63. Meteor – Videos on Meteor and stuff around it
  64. Meth Meth Method – Game development with JavaScript
  65. Mindspace – Node.js, Angular, ReactJS, Redux, Vue.js
  66. mjdwebdesign – CSS, HTML, JavaScript
  67. Mozilla Developer – Videos for helping you with your work as a web designer, web developer, or person involved making websites or web apps.
  68. OK GROW! – Meteor, HashBang podcast, Transmission podcast
  69. Paul Lewis – JavaScript, WebComponents, HTML, CSS
  70. Prisma – GraphQL
  71. Programming With Mosh – Tutorial on React, Nodejs, Python, Javascript, Angular,Typescipt and C#.
  72. Quentin Watt – HTML, CSS, Bootstrap, JavaScript
  73. Rally Coding – React and Redux, JavaScript
  74. ReactCasts – Weekly, short React screencasts containing tips, tricks and tutorials
  75. Rem Zolotykh – React, Redux, Ember
  76. RoboSquidTV – Basics of HTML/CSS, CSS animations, live web design
  77. Ryan Christiani – ES6, JavaScript focused code-alongs
  78. Sam Saccone – Performance optimization
  79. Sass Bites Podcast – Sass
  80. SitePoint – HTML, CSS, JavaScript, Sass, Web Design
  81. SketchpunkLabs – WebGL 2 screencasts
  82. Sonny Sangha – Project Tutorials on React, Redux, Next JS & React Native.
  83. Source Decoded – JavaScript, Coding Principles
  84. SVGs can do that – Sarah Drasner’s talk on nontypical pratical uses of SVGs.
  85. The Coding Train – Tutorials on JavaScript, Node, Machine Learning, Neural Networks, Algorithms.
  86. The Net Ninja – Tutorials on HTML, CSS, jQuery, JavaScript, Git and GitHub, Bootstrap, MangoDB, PSD to WordPress, PSD to HTML, and many more.
  87. The Web Platform Podcast – Podcast about HTML, CSS, JavaScript, tools, workflow and much more
  88. TheDigiCraft – Tutorials on HTML, CSS, jQuery, PHP, Ajax, Bootstrap, MySQL.
  89. 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.
  90. Tim Ermilov – Building products with JavaScript, from an idea to production-ready product
  91. 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.
  92. Treehouse – CSS, HTML, JavaScript
  93. Up & Running Tutorials – React, Gatsby
  94. Watch and Learn – Building SPA with Vue.js and Drupal
  95. WB Web Development – Tutorials on HTML, CSS, Bootstrap, SASS, JavaScript, Git and GitHub, MongoDB, NodeJS, ReactJS.
  96. Web Dev Simplified – Learn Website Developments with Html , Javascript , Css and other Frameworks with same projects and more.
  97. Wes Bos – Redux, Markdown, command line, Flexbox, Sublime Text
  98. Zaiste Programming – TypeScript/JavaScript & Node.js
  99. Zell Liew – Tooling, tips & tricks

Russian

  1. All Your HTML (Юрий Артюх)
    лайвстримы по вёрстке и анимации
  2. Artem Demo
    разработка гибридных приложений под Android на веб-технологиях, Angular, jQuery mobile
  3. Ausite Blog
    Vue.js, RiotJS, Socket.io
  4. CSSSR
    лайвстримы, Vue.js
  5. Dev Talk
    Vim
  6. devschacht
    скринкасты, подкасты, интервью, Node.js
  7. FrontCoder
    вёрстка, JavaScript, Pug, Gulp
  8. Glo Academy
    HTML, CSS, JavaScript
  9. Habrahabr
    доклады и интервью с конференции HighLoad++
  10. Hexlet
    курсы по Computer Science, введение в JavaScript, вебинары, подкаст об информатике
  11. HTML Academy
    обзоры инструментов, автоматизация
  12. Javascript.Ninja
    JavaScript, Node.js, Vue.js
  13. JSPirates
    уроки по Node.js
  14. loftblog
    новости, обзоры, всевозможные курсы по HTML, CSS, JavaScript и разным инструментам/библиотекам
  15. Magisters
    основы HTML и JavaScript, видеокурс по Bootstrap
  16. MakeWeb.me
    CSS, Bootstrap, инструменты, переводы англоязычных видео
  17. Master-CSS
    HTML, CSS, JavaScript
  18. Monsterlessons
    JavaScript, Node.js, Angular, React, Redux, Webpack, Lodash, Git
  19. Moscow Coding School
    курсы JavaScript
  20. ngRuAir
    лайвстримы про Angular
  21. Pa Dam Tuts
    HTML5 Canvas, CSS
  22. Procode
    HTML5, GameDev
  23. roman01la
    функциональный JavaScript, ClojureScript, React & Flux, доступность
  24. Ros Ivanov
    БЭМ, PostCSS, Jade, инструменты
  25. SkanerSoft
    создание игр на JavaScript, PointJS
  26. SkillBranch
    дизайн, Node.js + React
  27. Sorax
    основы CSS и JavaScript, обзоры инструментов, подкасты
  28. Timur Shemsedinov
    скринкасты академического уровня по JavaScript и Node.js
  29. uWebDesign
    CSS, Sass, обзоры инструментов, подкасты
  30. Vadim Makeev
    CSS, SVG, доступность, скринкасты, разборы сайтов
  31. Vladilen Minin
    Vue.js, React, Svelte
  32. Web Developer Blog
    основы JavaScript, HTML, CSS, Bootstrap 3, Foundation, обзор редакторов Sublime Text и Atom
  33. WebDesign Master
    вёрстка, обзоры плагинов и инструментов
  34. webDev
    React, GraphQL, Vue, скринкасты, разборы сайтов
  35. webformyself
    CSS, HTML, обзоры
  36. webtheory
    HTML5 и CSS3, CoffeeScript
  37. WebUpBlog
    HTML, CSS, Sass, JavaScript
  38. Дмитрий Лаврик
    основы HTML и CSS, JavaScript, NPM, WebGL, Three.js
  39. Илья Кантор
    скринкасты по Node.js, Gulp и Webpack
  40. Технострим Mail.Ru Group
    лекции образовательных проектов Mail.ru group

Conferences and Meetups Recordings (Russian)

  1. 404fest
  2. 4front
  3. Angular Moscow
  4. AvitoTech
  5. Badoo Development
  6. ChernivtsiJS
  7. CodeFest
  8. FPConf
  9. FrontendDevConf
  10. FrontendFellows
  11. Fronthub
  12. FrontTalks
  13. fwdays
  14. HolyJS
  15. it73 — ИТ в Ульяновске
  16. JS NN
  17. JSib Community
  18. KharkivCSS Conf
  19. KharkivJS Community
  20. Krasnodar Dev Days
  21. KyivJS
  22. LvivJS
  23. MinskJS
  24. moscowcss
  25. MoscowJS
  26. Novosibirsk DevDays
  27. Odessa GeeksLab & WebCamp
  28. Odessa WebCamp
  29. OdessaJS
  30. Ontico Team
  31. PenzaJS
  32. pitercss_meetup
  33. PiterJS
  34. React Kyiv
  35. SPB Frontend
  36. TomskJS
  37. TverIO
  38. UralJS
  39. Yaroslavl Frontend
  40. Веб-стандарты
  41. Яндекс.Фронтенд (+ лекции Школы разработки интерфейсов)

French

  1. Grafikart – HTML, CSS, JavaScript, NodeJS

Arabic

  1. Elzero Web School – HTML, CSS, Sass, JavaScript, jQuery, PHP, Ajax, Bootstrap, MySQL, WordPress.

Portuguese

  1. BrazilJS – Conferences recordings (BrazilJS, FrontInPOA, FrontInSM, RSJS), weekly podcast about JavaScript
  2. Css CastShow – CSS, Polymer
  3. Curso em Vídeo – HTML
  4. Fabio Vedovelli – Vue.js
  5. João Ribeiro – HTML, CSS, Javascript, Angular, TypeScript
  6. Loiane Groner – JavaScript, Angular 2, Phonegap/Cordova, CSS3, Sass, Compass
  7. Rodrigo Branas – JavaScript, Node.js, Angular, Grunt/Gulp, Git, Bower
  8. Tony França – Vue.js, Angular
  9. UpInside Treinamentos – HTML, CSS
  10. WebSchool – MEAN (MongoDB, Express, Angular, Node.js), PostCSS, Sass, Koa, Git

Czech

  1. Frontendisti.cz – HTML, CSS, Front-end

Hebrew

  1. GoCode Sderot – Full-Stack course (HTML, CSS, Javascript, Vue.js, Node.js) with presentations & live coding.
  2. AngularJS Israel
  3. FullStack Developer Israel
  4. GDG Israel
  5. Javascript Israel
  6. ReactIL

Polish

  1. AlgoSmart – Marcin Czarkowski – React, TypeScript, JavaScript, CSS, HTML
  2. Hello Roman – Front-end development
  3. Koduje – HTML, CSS, JavaScript
  4. Maciej Aniserowicz – General web development and IT topics
  5. Od zera do WebDeva – Angular 2
  6. overment – Medium web development, JavaScript (Vue, React), Node.js (Express.js, Nest.js)
  7. Pasja informatyki – HTML, CSS, JavaScript
  8. Samuraj Programowania – Web development for beginners
  9. WarsawJS

Dutch

  1. Fronteers – HTML, CSS, JavaScript.

Spanish

  1. midudev – Fullstack JS courses, tips and live coding.
  2. NodersJS – Node.js, spanish meetups recordings.

Podcasts

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

Related / Past Compilations

via GetFreeEbooks.com

  1. 250 Free Web Design, UI / UX, CSS, Usability and Programming Ebooks – 2017
  2. 50 Free eBooks for Web Designers & Developers – 2015
  3. Web Design Posts

No code. No hassle.

Divi takes the power and freedom of WordPress and adds a wonderful visual design interface on top. Now you get the best of both worlds.

WordpressGAME CHANGER!