Hackabull 2021 Intro to Web Dev

Introduction – Tools

Tools

Overview

There's only really 2 big things you need to code for the web (besides a computer of some sort). And that's a browser and a text editor. Every developer has very strong opinions about their tools they'll tell why you should use their tool. Don't listen to them, find out what works for you. If you feel frustrated, then try switching to something else!

Go ahead and download these two things if you haven't already!!

Browser

There are a bunch of modern browsers that you can use. Chrome, Firefox, Safari, Microsoft Edge, the list goes on there's quite a bunch actually.

The ones I recommend:

That being said, you can use other ones, but the developer tools (from what I've heard) are the best on these bad bois. If you use Safari, be sure to turn on the developer tools. Don't use Internet Explorer.

Text Editor

This is also pretty controversial for some reason. It all really depends on what you like. Do you like a lot of features? Do you want things to not get in the way too much?

The ones I recommend:

  • Visual Studio Code - Most popular. Got's a lot of plugins to do a bunch of things. The one I'll be using in this course.
  • Sublime Text 3: - Fast. It's an unlimited free trial, but $80 license. I started out with this guy tbh.
  • Atom - Open source. Also cute af, good community.

Real Editors XKCD Comic


Notable Mentions:

  • Web Storm - This is an IDE (Integrated Development Environment). So not as lightweight as a lot of text editors. It's a powerhouse with a bunch of features. I have nothing but good things to say about JetBrains products. They're well built. You can buy a license but it's free for students to use. It's just a lot, and you don't really need all of that right now.
  • Vim - Terminal based. Huge learning curve. I LOVE vim, but would never in my right mind recommend this starting out. I'll have to do a class on it one day though!
  • Emacs - Also terminal based. It encourages configurability, but it requires a lot of it and not very beginner friendly.

Other Tools

  • Good Documentation! - For anything to do with HTML, CSS, or JavaScript --> Mozilla's MDN.
  • Other good docs/blogs -> CSS Tricks.
  • A terminal. We're not gonna do anything backend related in this course, so do not worry too much about worrying about the terminal. You can use the default one you have installed when that time comes.