Levelling up: lessons from learning the basics of front-end web development

There are many reasons why I wanted to learn to code.

I’ve always loved the idea of being able to build things – of coming up with an idea and being able to turn it into reality. Unfortunately, I’m pretty terrible with making physical things. I’m not very strong, I’m not very patient, I don’t have the money to buy lots of tools – or the space to store them, and I don’t have a steady hand.

Coding, however, gives you the ability to come up with all kinds of wonderful and creative things, and you can build them without needing numerous different tools. And while anything you physically build on your own can only have so much impact on the world, something you code on your own can easily get hundreds and thousands of views from all corners of the globe.

 

pexels-photo-213077.jpeg

But I didn’t get around to it until just recently.

As most people can attest to, wanting to do something and getting around to actually doing it are two very different things.

I’d been really keen on learning web development at school, but when I was in year 11 and 12, only a tiny handful of people put their names down for any of the tech courses and my school decided not to run them.

Then when I got to university, I mistakenly believed that everyone who studied computer science, software design, or any other tech related courses must already know so much about computers that I’d never catch up, ever, and would just be lost.

But I could always teach myself! I figured I’d start with front-end, since it was less complex than back-end. There were so many resources on the web devoted to teaching you front-end web development that it should be easy, right?

Except…. there were too many resources. And so many different things that people would tell you you needed to learn – html, css, LESS, SASS, git, jquery, JSON, javascript, npm, command line, react, angular, Foundation…. what did all these terms mean?!? I didn’t know where to start. I didn’t know which of the myriad available resources I should use, and what I should trust – and a lot of them gave differing (and at times even completely conflicting) pieces of advice.

I just felt overwhelmed. I managed to get through the Codecademy html and css course, which was lovely in theory, but I still didn’t know where to start if I wanted to build an actual website.

computer-pc-workplace-home-office-159760

So I did a course at General Assembly.

Eventually, I dropped $4500 on the General Assembly Front End Web Development part time course. This was a terrible mistake and I’d strongly recommend NOT doing this.

Why? They will teach you to code a little, but they won’t teach you good practices, they won’t teach you thoroughly or explain to you why you should do anything. Our teacher just didn’t know the answers to most questions and would Google them in front of us. They also just teach you to use a framework to build a website. A framework is a library of code, and you can put bits and pieces of it together to make a website. It’s like using packet mix to make cake, rather than making it from scratch.

If you’re thinking of doing it just to put on your resume, I should tell you that everyone in my class got 100% even though some of the websites were only half finished and very basic. I got 100% before submitting my final assignment, my teacher forgot to mark one of my assignments, and he neither looked at nor gave me any feedback on my final assignment.

There are a lot of other problems I had with the class, including our teacher telling us to use the wrong syntax, but to avoid having this post turn into just one long whinge, I think I can best compare the experience to one of those community college classes for the elderly that teaches them ‘Microsoft Word basics’. Sure, you’ll learn some things, but you’ll be learning at a very, very, low level, and you won’t understand why anything works the way it does.

*Just to clarify, I don’t think General Assembly is always terrible – I really like some of the other things they do, and I’ve heard they’ve had better teachers for this course in the past. I guess they just dropped the ball on this one.

But there was one good thing about it.

The upside of this, however, was that it gave me a starting point. As a writer, we often get told to just start by writing something, anything – because even if it is terrible, it’s easier to look at something bad and say ‘no, it actually needs to be done this way’, and ‘this is wrong’, than to create something perfect from nothing. The same definitely applies to coding.

I’m incredibly fortunate in that I work at a software company, and I have a lot of brilliant friends and colleagues who are top-notch developers. A lot of them were wonderful enough to spend time with me telling me what I was doing wrong, showing me what I actually should be learning, and directing me towards better resources than the GA course recommended.

This (click to go to the site) is what I’d created by the end of it.

It’s fully responsive, I designed it myself (which took the longest time because I’m not too great at graphic design), I built it without using any frameworks, and I created all the written content myself.

It’s not going to win any awards, but it is pretty decent for my very first website. I’m still learning, and I spend time practicing and playing around with front end stuff every single week – so my next website should be way, way, cooler.

 


 

The three important things that will help you learn successfully

Learning new things can be so tough as a full-time working adult because you’ve got so many other responsibilities and so little time. Having tried – and failed – many times to learn things, I’ve found that these are the most important things that help me learn anything successfully.

pexels-photo-196660

Pick a course with a deadline

If you’re a natural procrastinator like I am, you will never get around to doing this if you don’t have a deadline. And I’m not going to lie – if you want to learn front-end web development, you’re going to have to put in a lot of time, and be really disciplined about doing it regularly every week – even if that means you have to take something else out of your usual routine. Having a deadline makes it easier to make those sacrifices, because you know that it’s only for a short time, and then you’ll be able to go back to your regular, carefree life with some additional mad skills.

Make yourself accountable to people who you want to impress

You know, those people who you so badly want to think that you’re cool and smart and talented? Yea, tell those people that you’re making a website, and that it’s going to be kick-ass. Then, when you feel like being lazy or you’re struggling to get yourself to sit down and code, just think about how blown away they’ll be when you create something awesome, or how embarrassed you’ll be when you have to show them something sub-par.

Choose a project that you really care about

Working on a project is the single most useful piece of advice I got given. A lot of front-end web development seems simple in theory, but is more nuanced in practice, and learning those nuances is hella tough in the abstract – but you pick them up very quickly when you’re actually building something.

If you’ve got a real project, and it’s something that you legitimately want to create – like a portfolio, online resume, or website for your business – then you’re less likely to cut corners. You’ll feel less inclined to leave something out just because it’s hard or time consuming. You’ll come across a lot of real challenges, like having images that you can’t swap out, but that your text doesn’t show very clearly against. Which means you have to play around with text shadows and opacity and things like that and you’ll learn so much more.

Besides, if it’s something you really care about, you won’t feel like you’re wasting your time, it’ll be easier to motivate yourself, and you’ll feel a lot more satisfied when you get it to the point of being awesome.

 


 

I’ll write a follow up soon with some of the best resources to learn from :)

 

Leave a Reply