Web development resources for free

Mega Thread 🧵 👇🏻

1️⃣ Online learning platforms 📘

- Udemy
- FreeCodeCamp
- Treehouse
- Frontend masters
- Coursera
- Traversy media
- SoloLearn
- Codecademy
- Udacity
- Alison
- Code college
- LinkedIn Learning
- Skillshare
- EdX
2️⃣ Editors and share code snippets ✍🏻

- PlayCode
- JSFiddle
- CodePen
- StackBlitz
- JSBin
- Codesandbox
- Codeinterview .io
- godbolt .org
- wandbox .org
- carbon .now.sh
- pastebin .com
- ideone .com
- ide .judge0.com
3️⃣ Documentations and notes 📄

- w3 schools
- mdn
- Devdocs
- geeksforgeeks
- tutorialspoint
- javapoint
4️⃣ Competitive programming 👩‍💻

- CodeChef
- HackerEarth
- HackerRank
- AlgoExpert
- LeetCode
- TopCoder
- Codewars
- Codeforces
- Coderbyte
- Exercism
5️⃣ Learn by playing game 🎮

- Grid garden
- Flexbox defense
- Codecombat
- Unfold
- Ruby warrior
- Screeps
- coding game
- CodeMonkey
- CSS diner
- Flexbox froggy
- Check IO
- Cyber-dojo
- Untrusted
6️⃣ Colors 🎨

- Colorhunt
- Paletto
- Design Seeds
- Coolors
- Bootflat
- 0 to 255
- uiGradients
- BrandColors
- Image color picker
- Colour Lovers
- WebGradients
- Egg gradient
- Gradient Hunt
- Color-hex
- FlatUIColors
- CSS gradients
7️⃣ Background

- Repeat-X Repeat-Y
- Texture King
- Pattern8
- Subtle Patterns
- Patternico
- BG Patterns
- Lost and Taken
- Freepik
- Cool backgrounds
- BG generator
8️⃣ Icons ♠

- Icons8
- Captain Icon
- Iconmonstr
- Linear Icons
- Pixeden
- Perfect Icons
- Font Awesome
- flaticon
- Fontello
- The Noun Project
- Endless Icons
- Round Icons
- Iconfinder
- Freeicons
- Icon-icons
- Findicons
9️⃣ Illustrations

- Undraw
- Freepik
- IRA design
- DrawKit
- Absurd Illustrations
- Handz
- freeillustrations .xyz
- Freebie Supply
- ManyPixels
- Vivid.js
- Humaaans
- Open Doodles
- Icons8
- Glazestock
- Paper illustrations
- illlustrations .co
- isometric .online
🔟 Fonts 🆎

- Google fonts
- Font Bundles
- Behance
- Dafont
- Font Squirrel
- Abstract Fonts
- 1001 Fonts
1️⃣1️⃣ Photos 📷

- Unsplash
- Pixabay
- PicJumbo
- IM Free
- Pexels
- Flickr
- Gratisography
- Stock Up
- Cupcake
- Adobe Stock
- Icons8
- Rgbstock
- Pikwizard
- Stocksnap
- Shutterstock
- Freestocks
1️⃣2️⃣ Testing 🧪

- Pingdom
- Website Speed Test
- SEO Site Checkup
- Uptrends
- Dotcom-Tools
- GTmetrix
- WebPageTest
- Dareboost
- SEO tools
- Nibbler
- BrowserStack
1️⃣3️⃣ Hosting 🌐

- Github pages
- Netlify
- Firebase
- AWS
- Vercel
- Heroku
1️⃣4️⃣ JavaScript visual libraries

- Chart.js
- D3.js
- React-vis
- Three.js
- Victory
- Chartkick
- Google Charts
- Flexmonster
- ApexCharts
- Echarts
- Frappe Charts
- ReCharts
1️⃣5️⃣ CSS generators

- coolbackgrounds .io
- css3buttongenerator .com
- neumorphism .io
- glassmorphism .com
- css3generator .com
- Fancy-border-radius
- bennettfeely .com/clippy
- cssgradient .io
- blobmaker .app
- getwaves .io
- cssgenerator .org

CONT...
- csssbuttongenerator .com
- svgator .com
- cssbuttoncreator .com
- cssgenerators .net
- svgbackgrounds .com
- bgjar .com
- cssboxshadow .com
- css3generator .com
- cssfiltergenerator .com
- neumorphic .design
1️⃣6️⃣ Code snippets

- Codepen
- Codesandbox
- CSS-Tricks
- Hakim .se
- Code My UI
- CreativesFeed
- Bootsnipp
- 30 seconds of code
- 30 Seconds of CSS
- Stackoverflow
- Code to go
- Tweetsnippet
- GitHub
- W3 Schools
- EnjoyCSS
- Web Code Tool
1️⃣7️⃣ Interview preparation

- CodeChef
- HackerEarth
- LeetCode
- HackerRank
- Interview Cake
- InterviewBuddy
- glassdoor
- AlgoExpert
- interviewing .io
- Interview camp
- Coderbyte
- InterviewBit
- GeeksForGeeks
- AmbitionBox
1️⃣8️⃣ Chrome extensions

- Wappalyzrer
- CSS Scan
- Marmoset
- Pesticide
- Ghostery
- HTML Validator
- Keyframes
- ColorZilla
- Page Ruler
- UX Check
- Checkbot
- LambdaTest
- JSONView
1️⃣9️⃣ Apply for internships

- angel .co
- indeed .com
- chegg .com
- letsintern .com
- perfectintern .com
- remoteok .io
- nodesk .io
- remoteinternships .com
- internhq .com
2️⃣0️⃣ Apply for jobs

- angel .co
- dice .com
- hiring .careerbuilder.com
- devsnap .io
- freshersworld .com
- flexjobs .com
- remote .co
- whoishiring .io
- remoteml .com
- weworkremotely .com
- simplyhired .com
- remoteok .io
- upwork .com
- freelancer .com
Ahh! That's pretty much it. It seems that it took me 100 hours to write this

If you like this thread, please share it with your connections ❤️

More from Pratham 👨‍💻🚀

5 best color palette for every web developer and designer 🎨

🧵👇


1. Color hunt

- Color Hunt is a free and open platform for color inspiration with thousands of trendy hand- picked color palettes

🖇️
https://t.co/xR0FVTjK0L


2. Adobe color wheel

Explore and create accessible color palettes using color wheel, in variety of color variations and contrast levels. It will tell you automatically if two colors are not accessible

🖇️ https://t.co/ndsgBauTEc


3. Palette Ninja

Palette ninja is an online color scheme generator that allows you to create harmonious color schemes in seconds

🖇️ https://t.co/cuzP21tn2Z


4. My color space

Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients and much more! Your space for everything that has to do with color

🖇️ https://t.co/kmjrXOceAj
If you start with the right course then the process becomes a little easier

I found some amazing YouTube videos and courses that will help you start your Web Development journey

🧵👇🏻

HTML and CSS

- A great way to arouse your web dev journey with Gary's (@designcoursecom) course on YouTube

🔗
https://t.co/xjm7nfV2L2


JavaScript

- Although it's impossible to learn JavaScript in 2 hours but JavaScript mastery is one the best YouTube chanel for JavaScript. This 2 hours long crash course will help you start your journey and gives you quick overview.

🔗 https://t.co/1zcSeu4zKE


Git and GitHub

Git is an essential tool. And after learning JavaScript, I think one should go for Git and GitHub. Check out this free great course on Udemy

🔗 https://t.co/E14cibOLXb


React

What you'll learn
- what problems React can solve
- how React solves those problems under the hood
- what JSX is and how it translates to regular JavaScript function calls and objects
- manage state with hooks
- build forms

🔗 https://t.co/3z22aeVQFc
JavaScript is powerful.

But sometimes, you can do great things using CSS.

A long thread of CSS tips and tricks:

1. Smooth


2. Change marker styling


3. Add styling to video


4. Change input caret

More from All

You May Also Like