Get Started in Web Development for Free

What you'll learn in this episode

• A collection of free web development learning resources that range from full blown courses through written guides & blogs

How to support the show

Patreon

Prices subject to change and are listed in USD

• Support the show from as little as ~$1/month
• Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
• Help support the HTML All The Things Podcast: Click Here

Scrimba Discount!

We receive a monetary kickback when you use our link

• Learn to code using Scrimba with their interactive follow along code editor
• Join their exclusive discord communities and network to find your first job!
• Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Show Notes

Introduction

• This holiday season and into the new year many people will want to try their hands at web development for the first time
• Whether it’s the increased free time w/ the extra time off or a new year’s resolution to get into a new career
• Here are some prime ways to get started learning web development that don’t require anything except an internet connection a modern computer

Free Templates

• Start with a site that is “already built” 
• Try and mimic what the template has already made
• Reverse engineer sections that you’re unsure about
• Try and improve what they’ve already built
• HTML Template resource: https://htmlrev.com/ 
• https://www.frontendmentor.io/ 
  - Take designs and recreate them with HTML and CSS

YouTube

• YouTube tutorials are a staple of learning online in 2023/2024
• If you’re just getting started, a “crash course” may be what you’re looking for
• Flashy projects aren’t necessarily the best way to learn - even if they’re arguably the most entertaining
  - To keep the tutorial within a good time frame the creator will need to gloss over things
  - With flashy projects, a lot of topics will need to be glossed over due to the increased work involved
• Simple projects that teach concepts
  - To-do apps teach you how to make elements interactive, save items and their dynamic states, layout a variable amount of information (how many todos will there be, how to we handle overflow, etc.)
• Ensure the video topics are relevant (ie using a modern version of React)

YouTube Channel Suggestions:

• https://www.youtube.com/@TraversyMedia Brad Traversy - crash courses
• https://www.youtube.com/@Fireship Fireship.io
• https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg Net Ninja
• https://www.youtube.com/@t3dotgg Theo
• https://www.youtube.com/@Hyperplexed - Hyperplexed: creating cool UI elements through iterative learning and experimentation
• https://www.youtube.com/@JoyofCodeDev - SvelteKit‍
• https://www.youtube.com/@codewithantonio - Next.js

Blogs and Guides

• Just like YouTube tutorials but in written form
• There are countless blogs that will help you learn web development for free
• Blogs a great way to get started learning:
  - They can be read whenever you have time (no sound like w/ video)
  - Easily printed to PDF for offline use, or onto paper if you like taking paper notes
  - No timeline scrolling, wherever you stop reading is where the blog “stops” for you
• Ensure the blog posts are relevant (ie using a modern version of React)

Blog and Guide Suggestions:

• CSS Tricks (currently inactive, but still a good resource for CSS)
• MDN
• W3Schools
• Web.dev

Free Courses

• If you’re looking for a more formal “course” structure on a budget, then freeCodeCamp has you covered with free courses on HTML, CSS, JavaScript, Node.js, Python, and more

The Odin Project

• Free full stack curriculum including:
  - Foundations
  - Introduction
  - Prerequisites (text editor, how does the web work)
  - Git basics
  - HTML
  - CSS
  - Flexbox
  - JavaScript
• Then a corresponding pathway through either Full Stack JavaScript or Full Stack Ruby on Rails

Scrimba (Free & Paid)

• Free courses HTML, CSS, JavaScript (Official Site)
• If you want to expand to their paid option(s) you can use our link https://scrimba.com/links/hatt

JavaScript 30 by Wes Bos

• Build 30 things with vanilla JavaScript in 30 days
• Check it out here

Interactive

• https://icodethis.com/ - Florin pop
• TypeHero - Trash Dev - typescript: https://typehero.dev/

Links

• ‍Michael LaRocca
  - Author of the Self-Taught the X Generation blog, at selftaughttxg.com
• Learning Resources
  - See the "Show Notes" above for a big collection of learning resources organized by type