Want to learn front-end web development? Here’s what you need.

One of the most confusing things when you decide to learn front-end web development is figuring out what you need. There are so many options and it can very easily feel overwhelming try to pick out your tools.

So, having recently gotten to the level of being decent with front-end web dev (thanks to a LOT of help from my friends), and now understanding those tools better, I thought I’d share with you the things you’ll actually need and some others that you’ll find super useful.


You need:

A text editor

This is what you’ll write your code in. Most people recommend using Sublime Text to start with. It doesn’t really matter, so don’t stress if you want to use something different, like VSCode . You can easily switch between text editors. If you get Sublime Text, I always get the latest version. It’s free but they request that you buy a license, and if you do decide to keep coding, I always think that you should buy a license because it’s pretty cheap and without getting any money, they won’t be able to continue making and improving the software.

What makes text editors like Sublime Text far better than whatever comes preinstalled on your machine (notepad or textedit) is that they have a bunch of plugins that do cool things like automatically format your code in different colours so it’s easy to read, add indents and line breaks into your code so it’s nicely formatted, and autocomplete so that you don’t have to worry about spelling or syntax mistakes. It makes it way faster to code, and with less chance of making errors.

Download Sublime Text

Download emmet (the plugin that formats and autocompletes your code)

Read about how to use emmet (instruction to install and use it in Sublime Text)

 

A browser

This is obvious, right? When you write code, you want to see what it looks like when it’s rendered in a browser.

Browsers have a few different defaults; this isn’t a big problem because you’ll usually declare your own specs, so it’s not like you’re likely to rely on the defaults anyway – but you should test your code in every (modern) browser just to double check.

But you can leave that to the end, once you’ve already built your website, and if anything needs fixing it should be easy.

To start with, just pick one browser to focus on, so you can get used to using its dev tools. I like Chrome. You can read how to use dev tools, but the main point is that dev tools opens up a little toolbar in which you can play with the code of whatever is currently displaying in the browser.

So for example, if you’re in the middle of building a website, but you’re not sure what colour would look best for the background, open it up in Chrome, open dev tools, and put in different hex/rgba values until you find one you like (it’ll change what you see on the page), and then copy that value into your code.

Dev tools doesn’t change the code permanently, it just changes what’s currently visible. Hit refresh, and all the changes you make will disappear!

 


How to get started:

1. Set yourself up in Stack Overflow

Stack Overflow is the best place to get answers for everything. Any time I’d get stuck, or something didn’t work, or I wanted to figure out how to do something, I’d check Stack Overflow.

It takes hardly any time to set up an account and you don’t need to bother filling in your profile or anything like that. Just have it ready so that when you have a question or need help, you can jump straight on and find your answers.

 

2. Get a JSFiddle or CodePen account

JSFiddle and CodePen are code playgrounds. These are awesome because people put up bits and pieces of code, all of which you can fork (in layman’s terms, ‘copy’), save, and then play around with yourself. It’s like getting to see behind the scenes of a whole lot of awesome effects and features.

Want to use a css transition but don’t quite know how it works? Find an example that someone else has created, fork it, and play around with it. Try changing various bits and pieces to understand how it can be manipulated and what part of the code tells it to do what.

I thought these were so unnecessary at the start, but again, these websites are SUPER helpful when you get stuck or confused about something.

 

3. Learn with Udacity

If you’re willing to pay for it, I 100% recommend doing the Front End Web Developer nanodegree. If you need a break from learning at any point, you can put your nanodegree on hold so you’re not just continuing to pay while you don’t use it.

Udacity courses are taught in conjunction with Google, Facebook, Amazon and other tech giants, so you know that you can actually trust them and that what you’re learning are industry best practices. They get you building things along with them, in real life – things that you can actually use, like an online resume. And they explain why you should do various things, so you’ll end up with a really thorough understanding of how web development works.

If, however, you want to learn for free rather than paying for the nanodegree, which means you won’t have the same support, I’d recommend these Udacity courses:

  1. Intro to HTML and CSS
  2. JavaScript Basics
  3. Responsive Web Design Fundamentals
  4. Responsive Images

 

4. Use git

Git is a version control system. Basically what it means is that you can keep saving your website as you go, and if anything goes wrong, you can revert back to a previous version.

You can also branch your code, which means that if you decide you want to try two different things, you can create two branches, mess around with them, and then pick the one you like, and merge that back to master.

Those terms I just mentioned might not make a lot of sense, but here’s what you need to do:

  1. Get a Bitbucket or GitHub account.
  2. Download SourceTree or GitHub desktop
  3. Read Learn Git in 30 minutes
  4. Need more help? Do the Codecademy Git course (it’s not very long – you can do it in one sitting) or use the tutorials from Bitbucket or GitHub.

I promise it’s actually a LOT easier and simpler than it sounds. This shouldn’t take you very long to set up at all, and once you do, every time you save you can also push to master. This will save you a lot of time later on.

 


Some other useful things to know

Learn to debug using your browser’s dev tools:

This was the biggest problem I had when I was previously learning on my own. Something would go wrong, I would have no idea why, I’d struggle for a while, then get fed up and give up. Luckily, this time Jake Miller and Christian Iacullo taught me a bit about how to debug, and it changed my life. Read up about how to debug html and how to debug css. These won’t mean much before you start coding, so don’t worry about reading these until you’ve started and get to a point where you’re stuck. Then you can put them into action!

 

Use a linter

Linters analyse your code for potential errors, including checking whether you’re using anything that’s been made obsolete, or if you’ve forgotten to close any tags.

It’s so easy to make little syntax errors, even if you think you’ve gone over your code with a fine toothed comb and checked everything manually – but a linter will pick it up. It takes no time at all and is free – use it if you think you’ve got an error somewhere in your code, and use it after you’re done and you’re ready to take your site public.

 


More Useful Resources

Learn some super cool things

Once you’ve mastered the basics and want to learn more, these websites are will teach you a bunch of cool tips and tricks that will make your website next-level awesome.

 

Different sources are telling me different things. Who should I trust?

The Mozilla Developer Network is super reliable – just head on over and look things up there.

 


Hope that helps! If any of these things aren’t very clear and you need more information, don’t hesitate to drop me a line.

Happy coding!

 

Leave a Reply