where your career begins

How to Become a Front-End Developer: A Crash Course in Coding

coding_illustration_smaller
email

Let’s start with the basics. What does a front-end developer actually do?

The front-end developer’s job is to shape your experience on a website. They do this in a few different ways, including creating the layout of a page like headings and paragraphs, the style of the page like color and font, and the features of the page, like animations.

How do they manage to do all that? Magic, obviously.

Okay, maybe there’s a little bit of magic involved, but mostly it’s courtesy of some handy tools in their repertoire. More on those later.

First of all, if you think you might be interested in working as a front-end developer, you’re probably wondering what a typical day at work would be like. You’ll spend some time talking with the folks in design and your project leader or manager. There’s a good chance you’ll be asked to talk with accounts people to estimate the time it’ll take you to complete a project (so they can figure out how much it’ll cost). But you’ll definitely spend the majority of your time sitting in front of your computer, coding.

I talked with several front-end devs to find out what their workday is like and what they love about their jobs, and this is what they had to say:

Pros

+ Magical powers of making words come to life

+ You can be creative and logical at the same time

+ Tons of opportunities for growth & you never stop learning

+ HOT job market

Cons

- Not enough women in the field

- It’s annoying to have to support old, outdated browsers (Internet Explorer, we’re looking at you)

- Can be stressful when working to a deadline

Now let’s get down to the important stuff. What is this coding business all about? I’ll be honest—I knew nothing about coding when I started writing this series, so I had to call on a couple of experts to break it down very simply for me.

Front-end developers usually use at least a few programming languages at any given time. Here are the basic ones and a simple explanation of what they do:

HTML: The “structure” of a web page. Defines elements that make the building block of the web.

CSS: The “style” of a web page. Controls how HTML elements are displayed, including their color and font.

JavaScript: A programming language that is included in all modern browsers. Used to make web sites dynamic, including animations.

jQuery: A JavaScript library that makes common JavaScript tasks much easier.

If you’re interested in programming, you’ll want to start with HTML. This will teach you about the standard elements you’ll see in most pages, like head, body, etc.

Next, you can move on to CSS, which will allow you to add fonts and colors to your pages. Sound scary? Nah, apparently both HTML and CSS are pretty easy to learn.

At this stage, I’m turning the floor over to Jennifer Gilbert, a self-taught developer. This is what she had to say about learning how to code:

Most HTML pages are made up of the same basic pieces over and over again, and as far as CSS goes, once you know “font-family,” “font-size,” “color,” and “background-color” in CSS, for instance, you can already do quite a lot visually. The syntax for both HTML and CSS is pretty repetitive, so it’s easy to pick up if you’re willing to type along with a few examples.

Your next step is JavaScript, which you use to add animation or other effects or interactions. JavaScript does this by adding or removing HTML elements, or by changing the CSS styles of those elements, so it makes sense to learn the other two first. JavaScript listens for events on the page, like “the user has clicked on picture number four,” and then reacts to the events. JavaScript is important for user interaction—when a user operates a chat window, for instance, JavaScript is likely responsible for the user’s ability to type in a new message or see other people’s messages pop up.

JavaScript will be a leap for a lot of new programmers. When they’re ready for the sorts of effects JavaScript provides, some learners start with jQuery first. jQuery is not its own language—it’s a JavaScript library. You can think of it as a set of JavaScript shortcuts. It can be a little simpler for a new programmer to understand. jQuery can accomplish a lot of the same things that plain JavaScript can, but because of that “shortcut layer” it adds to JavaScript, the page itself can sometimes run slower. But even advanced programmers might use it if they’re in a hurry or just testing how something looks and feels—they can always type out the full JavaScript later.

Everything I’ve mentioned is available on Codecademy and a lot of other places on the web, so anyone interested in learning any of it has plenty of opportunity!

I do think just about anyone working as a front-end dev is going to have to learn all of these, but people do specialize and I know developers who work almost exclusively in JavaScript or exclusively in CSS (plus the underlying HTML in both cases, of course).

There are more languages than the ones I’ve discussed here, but HTML, CSS, and JavaScript are extremely common and good places to start. That trio pops up in job apps a lot.

So there you have it! It’s not so scary once you realize you can break everything down into small pieces, right?

Homework time: Watch the Why You Should Learn to Code video from Code.org and then just try to tell us you’re not interested in learning how to code. Go on, we dare you!

email

7 Responses to “How to Become a Front-End Developer: A Crash Course in Coding”

Tell us what you think: