Before I dive into this, I’ll be the first to tell you that I’m still very much a beginner at front-end web development. In fact, it hasn’t even been a year since I decided to take the plunge into this seemingly endless world of coding knowledge.
While my skills are still in development, it’s safe to say that I have learned how to learn.
You learned how to learn? What does that even mean?
Hey, I’m glad you asked – or at least let the thought pop into your head. Learning front-end development, or any coding for that matter, seems like a huge undertaking…because it is. However, it’s not as complex as I initially thought it would be. Web coding is essentially just learning a new language on top of your native tongue, but it’s how you approach your desire to develop the skill that makes the difference.
First, find an online educational program.
This is your advice, Mike?
Give me a chance here! Yes, it’s painfully obvious to tell you that the gateway to learning how to code is to find an online program that will provide you with the building blocks. But it’s important to not just go with the first one that you find.
There are a lot of different programs out there, and while you’re going to learn the same skills regardless of which one you go with, the pedagogy involved will vary from program to program.
I started off with one fast-moving program that I will choose not to name. My brick-by-brick learning style and the fast-paced nature of this program did not mesh well. After some fiddling around, I settled in on Team Treehouse at the advice of a colleague of mine who happens to be an extremely gifted front-end developer.
Some online courses are free, and some are paid (like Treehouse), but most (if not all) online programs will offer to let you try a free trial to see if it’s your speed. Try some out, and don’t settle for the first one.
Set a goal of how many hours spent learning/developing per week
Learning a new skill that could potentially become your career requires a great amount of persistence and patience. If you want to become an effective front-end developer, you need to discipline yourself to stick to it. Like any other field of study, it’s hard to move up to the next level of knowledge and ability without truly maintaining the fundamentals.
Whether it’s one hour per night or three, make sure that you’re regularly taking your courses and really understanding the building blocks of front-end development. (Wait, how do I clear floats again?)
Make best friends with Developer Tools
One of the best sources for learning the makeup of a website is one right click away on any page you happen to be on. If you use Google Chrome like I do, just right click and look for “Inspect”.
This will open Google’s Developer Tools (DevTools), and once you look around, you’ll see why it’s pretty much every web developer’s best friend.
Yep, what you’re seeing is the HTML and CSS of the buyCalls home page, and you can even edit the code right on the page to debug and test out new layouts. A great way to learn front-end is simply explore DevTools on any website you come across. Change things. Play around. Break apart each building block.
Don’t use Chrome? No worries. Mozilla Firefox also provides a similar developer tools program on its browser. In fact, Mozilla hosts one of the most important resources for developers out there: the Mozilla Developer Network. If you’re serious about web development, you’re going to become very familiar with MDN, very quickly.
Make mistakes….and then make more mistakes
I’ve brought this point up to well-seasoned developers, and they all tend to agree with me. One of the best ways to learn how to code is to make mistakes (as long as you’re backing everything up!).
If you’re just getting into coding, diving in and taking a hands-on approach is essential, and you have to be okay with messing up a lot like I do. Such an approach is another reason why I like Treehouse (and no, they did not sponsor this article). With Treehouse courses, you’ll work in a web-based code editor that allows you to see your work directly without having to worry about anyone else seeing it.
But really, it’s totally okay to mess up when you’re beginning front-end skills. Discovering your mistakes gives you the chance to better understand how a certain element or function behaves, and it also makes you a bit more judicious in your subsequent lines of code. Don’t just learn from your mistakes, embrace them.
Stay active in web communities
When I told my colleagues that I was starting to learn front-end dev, I got the same question in response:
Do you have a StackOverflow account?
I realize now why this was one of the first things they asked. StackOverflow (SO) allows programmers and developers of all disciplines and experience to ask questions in a public forum. You don’t have to worry about looking like a fool, nor should you ever be afraid to ask a “stupid question”. All users on SO are there to help others with a coding question or problem, no matter the level of complexity.
Another great community I enjoy exploring is CodePen.IO, which is more of an experimental coding portal that allows developers and programmers to show off what they are working on in a rather simplified format. Here’s an example of what you can do in CodePen:
If you’re getting into coding, it’s because you want to better understand not only why websites look so beautiful these days, but also how they function. You’ll discover more tools and resources as you dive in deeper, and it will seem like a surge of information coming at you. The important thing is to just have fun with it, and learn at the speed that makes sense to you.