A good craftsperson needs reliable tools. Let's get you set up and going. I have opinions, and as a person who has been teaching people how to code for over a decade, I think I have pretty good opinions on what tools you should use. That said, I will give you a few options and you can choose. If you know what you are doing, feel free to stick with what you know. If you don't, I suggest at least for this class use the tools I am using and then later revisit what tools you're using.
The Code Editor
Recommended: Visual Studio Code
I admit some bias here as I used to be a program manager on the VS Code team. It's a lovely tool that's free, has a great ecosystem of plugins, and works well across many platforms. I strongly suggest getting started here with VS Code.
Alternatives:
- Sublime Text: I used this editor for years. Similar in style to VS Code. It also has a great ecosystem and is a fast editor. It's free to evaluate (indefinitely as far as I know) and then they ask you to pay $99 every three years. IMO a fair price for such an important tool.
- WebStorm: Sublime and VS Code's MO is more "here's a useful editor and not much more" whereas WebStorm is much "here's a useful editor and the kitchen sink". Whereas with VS Code you will likely install a few plugins to get everything you need, WebStorm will likely ship already with everything you need. You'll need to decide which approach suits you better. $60/year to use.
- Nova - I confess I'm far less familiar with Nova but it seems worth talking about. It's a very new product that in my view fills the gap between VS Code and WebStorm. I'm interested to see how they evolve. $99/year.
- vim and emacs - Don't use these … Okay, now that I've said that I've either made you mad and you're going to do it anyway or you're going to take my advice and not do it. These two tools are very difficult to learn and if you're taking this class you're already learning some difficult concepts and you don't want to layer in more difficulty. If you're going to learn them, take the time to focus and learn just them.
The Browser
Recommended: Google Chrome
The standard at the moment for web development. It has great dev tools and is the number one most used browser in the world. Lots of great developer-focused extensions
Alternatives:
- Firefox - I confess this is the browser I use. Honestly, it's a great browser and in my opinion just as good as Chrome. Very valid choice here. I'm showing you Chrome because it is the industry standard and this course is about showing you the tools that best prepare you to be the best coder and not enforce my opinions.
In-Browser Code Editor
In this course we will use CodePen a few times. It's an in-browser code editing experience and it makes it easy for you to learn. I suggest you head here and sign up for a free account so you fork the assignments to your own CodePen and you can refer to them later.
The Resources
Something really important is that you choose to learn from good sources. Just like it's important to get your news from quality sources, it's important to get your technical information from sound sources. Here are some of my personal favorites:
- For anything to do with HTML, CSS, or JavaScript, Mozilla's MDN is my go-to. I literally have it open all the time.
- CSS Tricks has fashioned itself into a premier development website. It has great content not just for CSS but for HTML and JavaScript too. If I want a tutorial, I'll head there. If I want more technical how-to info, I head to MDN.
- For video content, you really can't beat the rest of the content on Frontend Masters. I love it.
- If I'm working with a library or a framework, it's a good idea to head directly to their GitHub (we'll talk about GitHub later) page or their official documentation. It's best to head straight to the source.
Frontend Masters also puts out a really awesome book every year called the Frontend Handbook. It's a good way to get an overview of the whole industry.
