Thread by @tucker_dev, A big of free web development resources Learning platformsLearn HTML, [...]

James Tucker

tucker_dev

Read on Twitter

A big

of free web development resources

Learning platforms

Learn HTML, CSS, JS, Algo and DS, other web certs: https://www.freecodecamp.org/

Learn HTML, CSS, JS, and Rails: https://www.theodinproject.com/

freeCodeCamp.org

Learn to code. Build projects. Earn certifications.Since 2015, 40,000 graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.

https://www.freecodecamp.org/

Learning HTML

Visual guide: https://htmlreference.io/

Crash course by Brad Traversy:

Learning CSS

Visual guide: https://cssreference.io/

Fun game for learning CSS Flexbox: https://flexboxfroggy.com/

Playground for learning CSS Grid: https://mozilladevelopers.github.io/playground/css-grid

CSS Grid Layout + Firefox = ❤️

CSS Grid Layout is a game-changer for web developers. Learn more about CSS Grid and the CSS Grid Layout panel in Firefox.

https://cssreference.io/

Learning JavaScript

Best docs in my opinion: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

JavaScript guide: https://javascript.info/

Build 30 apps in 30 days: https://javascript30.com/

Eloquent JavaScript book: http://eloquentjavascript.net/

Key concepts visualized: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

✨♻️ JavaScript Visualized: Event Loop

Oh boi the event loop. It’s one of those things that every JavaScript developer has to deal with in o...

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Practice and Problem-solving

CodeWars: https://www.codewars.com/

Edabit: https://edabit.com/

Exercism: https://exercism.io/

Exercism

Code Practice and Mentorship for Everyone. Level up your programming skills with 1,879 exercises across 38 languages, and insightful discussion with our dedicated team of welcoming mentors. Exercism...

https://www.codewars.com/

Cheatsheets

Devhints: https://devhints.io/

Devhints — TL;DR for developer documentation

A ridiculous collection of web development cheatsheets · One-page guide to

https://devhints.io/

Free hosting

Heroku: https://www.heroku.com/

Netlify: https://www.netlify.com/

Vercel: https://vercel.com/

Develop. Preview. Ship. – Vercel

Vercel is the easiest way to deploy websites. Host your web projects with zero configuration, automatic SSL, and global CDN.

https://www.heroku.com/

Icons

Development themed: https://vorillaz.github.io/devicons/#/main

Fontawesome: https://fontawesome.com/

Feathericons (minimalist style): https://feathericons.com/

Feather – Simply beautiful open source icons

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

https://vorillaz.github.io/devicons/#/main

Illustrations

IRA Design: https://iradesign.io/

unDraw: https://undraw.co/

Hero Patterns: https://www.heropatterns.com/

Blush: https://blush.design/

Blush, Illustrations for everyone

Blush makes it easy to add illustrations to your projects. With collections made by artists across the globe, there’s something for everyone—and every project.

https://iradesign.io/

Color Palettes

Coolors: https://coolors.co/

Color Hunt: https://colorhunt.co/

Color Hunt - Color Palettes for Designers and Artists

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

https://coolors.co/

Photos

Unsplash: https://unsplash.com/

Pexels: https://www.pexels.com/

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

https://unsplash.com/

Design Tools

Figma (wireframes, prototyping): https://www.figma.com/

Excalidraw (lo-fi sketching, diagrams): https://excalidraw.com/

Canva (free photoshop/Illustrator alternative): https://www.canva.com/

Excalidraw

Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

https://www.figma.com/

UI Inspiration

CollectUI: https://collectui.com

Httpster: https://httpster.net

UI Garage: https://uigarage.net

CSS Nectar: https://cssnectar.com/

CSS Gallery for Web Design Inspiration - CSS Nectar

CSS Nectar is a css website design showcase for web designers and developers. Every day we select the best of the web design and add it to our gallery. Submit or suggest a website.

https://collectui.com

Computer Science Fundamentals

Self-teaching roadmap with free books and videos: https://teachyourselfcs.com/

YouTube instructors

Net Ninja: https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg

Brad Traversy: https://www.youtube.com/user/TechGuyWeb

Dev Ed: https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q

Academind: https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w

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 T...

https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg

You can follow @tucker_dev.

Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: