Ultimate-Web-Development-Resources

A collection of Web Developement Resources at one place

Contributing

Please see CONTRIBUTING, CODE-OF-CONDUCT for details before you contribute.

Table of Contents

• Ultimate-Web-Development-Resources
  • Web Development Roadmaps
  • Web design softwares
  • Prototyping tools for UI/UX
  • Free Hosting
  • Websites to learn
  • Websites for code challenges
  • Web Images or Photos
  • Web Color Palettes
  • Chrome Extensions For Web Developers
  • Chart Visualizations
  • Web Illustrations
  • Web fonts
  • Website Optimization Tools
  • Interview Preparation
  • Free Website Templates For Inspiration
  • Website Copier
  • Bio Links
  • Github Student Developer Pack Resources
  • Website for Project Management and Notes
  • User Authentication
  • Animations and Graphics
  • Awesome CSS generators
  • Free YouTube resources
  • Code Playgrounds
  • HTML Learning Resources
  • CSS Learning Resources
  • JS Learning Resources
  • Top React Component Libraries
  • Top JavaScript Libraries
  • Top JavaScript Frameworks
  • List Of Projects

Web Development Roadmaps

• Frontend Development
• Backend Development
• FullStack Development

Web design softwares

• Adobe Dreamweaver
• Rapidweaver
• Coffeecup HTML Editor
• VsCode
• Wix
• Zeplin
• Figma
• InVision
• Sketch
• Webflow
• Lunacy
• Origami
• FluidUI
• Vectr

Prototyping tools for UI/UX

• Figma
• Invision
• AdobeXD
• Canva
• Sketch
• Webflow
• Justinmind
• Fluid UI
• Framer
• Penpot
• Balsamiq Wireframing
• Axure RP
• Origami Studio

Free Hosting

• Vercel
• Amazon
• Byethost
• 000webhost
• Netlify
• Firebase
• Gitlab
• Github
• glitch
• pagecloud
• Render
• Surge
• Wix
• cyclic
• InfinityFree
• Deta
• Railway
• Supabase
• Glitch
• Fleek

• ByetHost

• Strikingly
• WordPress
• Weebly
• Jimdo
• AwardSpace
• Anglefire
• Neocities
• Tripod
• uCoz
• FreeHostingEU
• u Host Full
• Freehostia
• 000webhost.com

Websites to learn

• Freecodecamp
• Codeacademy
• w3schools
• GeeksforGeeks
• Javascript30
• Frontendmentor
• Test automation
• Coursera
• Coding Ninja
• Udemy
• Khanacademy
• Sololearn
• Treehouse
• javatpoint
• Odin Project
• Select Star SQL
• MDN Webdocs
• Exercism
• InternetingIsHard
• Full Stack Open
• Open Classrooms
• DevDocs.io
• codewithharry.com
• CodePen
• Stack Overflow
• Tutorialspoint

Websites for code challenges

• AtCoder
• BFE.dev
• CodeStudio
• Code Chef
• Code Wars
• Codeforces
• Coder Byte
• Codingame
• CSS Battle
• Exercism
• Frontend Mento
• Frontend Practice
• GeeksforGeeks
• Hacker Rank
• HackerEarth
• InterviewBit
• JavaScript30
• KodeKloud
• Leet Code
• Project Euler
• Sphere Online Judge
• Top Coder
• CSES

Web Images or Photos

• Flickr
• Unsplash
• Pixabay
• Pexels
• Burst.shopify
• Freepik
• MorgueFile
• Undraw

Web Color Palettes

• Coolors
• Colorhunt
• Paletton
• Color Hex
• ColorSpace
• Color Picker
• MyColor
• Khroma
• UIColorPicker
• Realtime Colors
• Adobe Colors

Chrome Extensions For Web Developers

• CSS3 GENERATOR
• CSSPeeper
• Fake Filler
• Stylebot
• PERFECTPIXEL
• WhatFont
• Pesticide for Chrome
• JSON Viewer Pro
• Check My Links
• Wappalyzer
• Page Ruler
• Page load time
• ColorPick Eyedropper
• WhatRuns
• ColorZilla
• daily.dev
• LT Debug
• React Developer Tools
• Redux DevTools

Chart Visualizations

• Chart.js
• D3.js
• ECharts
• EpochJS
• FusionCharts
• Google Data Studio
• SigmaJS

Web Illustrations

• Freepik
• Open Doodles
• ManyPixels
• Open Peeps
• Flaticon
• Bulbman.art
• Drawkit.io
• Icons8.com
• Blush.design
• Interfacer.xyz
• Fffuel
• Illustrations-figma
• Storyset
• Sketch Valley
• SVG Repo
• Vector-illustrations
• 3dicons
• Noun Project
• Iconshock
• Handz
• FreeIllustrations
• HeroIcons
• UnDraw
• ShapeFest
• Graphic Burger
• Illustrations Kit
• UI Illustrations
• Humaaans
• UI Store

Web fonts

• Google fonts
• Font Squirrel
• Fontspace
• 1001fonts
• fontawesome
• Font Bundles

Website Optimization Tools

• Google PageSpeed Insights
• GTmetrix
• Webpagetest
• Yslow
• Optimizeimages
• JSON validator and formatter
• DebugBear Speed Test
• TinyPNG
• JPEG Optimizer
• CloudConvert

Interview Preparation

• Front End Interview Handbook
• Tech Interview Handbook
• React Interview Questions
• Interview Cake
• Google Interview Warmup
• JS Challenger Interview Handbook

Free Website Templates For Inspiration

• One Page Love
• UIdeck
• Tooplate
• Colorlib
• Cruip
• Startbootstrap
• templatemo
• HTML5up
• StyleShout
• Awwwards
• Themes For App
• Divi

Website Copier

• Httrack
• Cyotek WebCopy
• GNU Wget
• WebCopy by Cyotek

HTML Learning Resources

• Learn HTML – Full Tutorial for Beginners(Freecodecamp)
• Learn HTML - Codecademy
• HTML Tutorial - W3schools
• HTML Tutorial - Tutorialspoint
• HTML Full Course - Build a Website Tutorial(Freecodecamp)
• HTML Crash Course For Absolute Beginners - Traversy Media
• HTML Tutorial - How to Make a Super Simple Website(Freecodecamp)
• HTML & CSS Full Course - Beginner to Pro(SuperSimpleDev
• HTML: HyperText Markup Language
• HTML Full Course For Beginners - Brocode

CSS Learning Resources

• Learn CSS - web.dev
• Learn CSS - Codecademy
• CSS Tutorial - W3schools
• CSS Tutorial - Zero to Hero (Complete Course)(Freecodecamp)
• CSS tips and tricks - Kevin Powell
• Introduction to CSS - Web Dev Simplified
• A Complete Guide to Flexbox

JS Learning Resources

• Learn JavaScript - Full Course for Beginners (YouTube - FreeCodeCamp)
• JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour (YouTube - Programming With Mosh)
• JavaScript Programming - Full Course (YouTube - FreeCodeCamp)
• JavaScript Tutorial (W3Schools - Documentation)
• Learn JavaScript - (CodeAcademy - Course)
• Learn JavaScript: Free JS Courses for Beginners (FreeCodeCamp - Documentation)
• Chai aur Javascript / (Chai aur Code)

Let’s pick a framework/library for you

• React-Tutorial
• React-Docs
• Vue JS-Tutorial
• Vue JS-Docs
• Angular-Tutorial
• Angular-Docs
• NextJS-Tutorial
• NextJS-Docs

Bio Links

• Linktree
• HeyLink
• BioLink
• BioDrop

Github Student Developer Pack Resources

More information about the pack can be found here Github Student Developer Pack

• FrontendMaster
• OneMonth
• Datacamp
• Microsoft

Website for Project Management and Notes

• Notion
• Asana
• Evernote

User Authentication

• Auth0
• Passport.JS
• KeyCloak
• Firebase
• Clerk
• Next Auth
• Appwrite
• Okta

Animations and Graphics

• Lottie Animations
• Rive Animations

Awesome CSS generators

• Buttons CSS generator
• Animista
• Clippy
• Fancy Buttons generator
• Shapes CSS generator
• Neumorphism/Soft UI generator
• CSS Grid Generator
• Get Waves
• Fancy Border Radius Generator
• Glassmorphism CSS Generator
• Ready-made CSS animations
• Keyframes Generators

Free YouTube resources

• Codewithharry
• Traversy Media
• The Net Ninja
• LearnCode.academy
• Wes Bos
• CSS-Tricks
• freeCodeCamp
• DevTips
• LevelUpTuts
• Florin Pop
• The New Boston
• codeSTACKr
• James Q Quick
• Wed dev Simplified
• Thapa Technical
• Coder Coder
• Coder’s Gyan
• JavaScript Mastery
• developedbyed
• Apna College
• AsmrProg
• Akshay Saini
• Codevolution
• Kevin Powell
• codedamn
• Chai aur Code
• developedbyed
• Hitesh Choudhary
• Clever Programmer
• Sonny Sangha
• Sheryians Coding School

HTML Learning Resources

• Learn HTML – Full Tutorial for Beginners(Freecodecamp)
• Learn HTML - Codecademy
• HTML Tutorial - W3schools
• HTML Tutorial - Tutorialspoint
• HTML Full Course - Build a Website Tutorial(Freecodecamp)
• HTML Crash Course For Absolute Beginners - Traversy Media
• HTML Tutorial - How to Make a Super Simple Website(Freecodecamp)

CSS Learning Resources

• Learn CSS - web.dev
• Learn CSS - Codecademy
• CSS Tutorial - W3schools
• CSS Tutorial - Zero to Hero (Complete Course)(Freecodecamp)
• CSS tips and tricks - Kevin Powell
• Introduction to CSS - Web Dev Simplified
• CSS: Cascading Style Sheets - Mozilla
• CSS-Tricks

JS Learning Resources

• Learn JavaScript - Full Course for Beginners (YouTube - FreeCodeCamp)
• JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour (YouTube - Programming With Mosh)
• JavaScript Programming - Full Course (YouTube - FreeCodeCamp)
• JavaScript Tutorial (W3Schools - Documentation)
• Learn JavaScript - (CodeAcademy - Course)
• Learn JavaScript: Free JS Courses for Beginners (FreeCodeCamp - Documentation)

Code Playgrounds

• CodePen
• JSFiddle
• JS Bin
• CSS Deck
• CodeSandbox
• PLAYCODE
• Plunker
• StackBlitz
• Replit

Top React Component Libraries

• Material UI
• Ant Design
• React-Bootstrap
• React Router
• React Motion
• Redux
• Chakra UI
• ThemeUI

Top JavaScript Libraries

• jQuery
• React.js
• D3.js
• Bideo.js
• Anime.js
• Chart.js
• Three.js
• Glimmer
• TensorFlow.js
• face-api.js

Top JavaScript Frameworks

• AngularJS
• Bootstrap
• Vue.js
• Ember.js
• Next.js
• Gatsby
• Astro

Top JavaScript Runtime

• Node.js
• Bun
• Deno

Top JavaScript Frameworks Backend

• Express.js
• Hapi.js
• Meteor.js
• Koa.js
• Nest.js

List Of Projects

3D Portfolio	3D	Blog Website	Bloggers Website
Bootstrap Portfolio	Calculator	Catch Me Card Game		Chess	City Finder
3D Portfolio	3D	ASCII VALUE GENERATOR	Blog Website	Bloggers Website
Bootstrap Portfolio	Calculator	Chess	City Finder
Clock Project	Disney Character Game	Drum Kit	Dice Challenge
E-Commerce	English Dictionary	Expense Tracker App	Google Auth Firebase
Guess My Number	Hangman Game	JS Quiz App	Love Calculator	Mario Matching
Memory Cards	Meme Generator	Mern Blog App	Mouse Hover Animation
Music Player	Morse Code Generator	Myntra Customize	Netflix UI Clone	Notes App
Password Generator	Portfolio 1	Portfolio 2	QR Code Generator 1
QR Code Generator	Quiz	Random Background Generator	Recipe Finder
Scannable QR Code Generator	Stone Paper Scissor Game	Table Tennis Scorekeeper	Task Management App	Temperature Convertor
Tic Tac Toe	To Do List	Typing Progress Bar	Weather App
Wix Template	URL Shortner	Aim Training	Flappy Bird Game	Desktop Notification	Linear_gradient_background	Tic Tac Toe Game
Joke Generator	Rock-Paper-Scissor-Game-V2	Book Cricket Game	Voice-Recorder

Please note that the links provided are the GitHub repository URLs for each project.

Web For Testing and Check The Security Score

• Security Headers
• SSL Labs
• HackerTarget
• Qualys SSL Labs

License

This project is licensed under the CC0 1.0 Universal - see the LICENSE file for details.

Tutorial in Other Languages

• Indonesian

Hey, I’m Dhanush N. You can connect with me and follow my work via X / (Twitter) / Instagram / Youtube

Searching for a job? This may help you Ultimate Tech Job List

Want to start learning Node Js? Don’t miss to check this out Ultimate NodeJs Resources

If you liked this repository support it by starring ⭐

Thank You for being here :)

This site is open source. Improve this page.