Getting Started with Front-End Web Development

By

learn to code

So, you want to learn to code? Awesome! Knowing how to code can help you level-up in your current role, open new career opportunities, and empower you to make your app or website ideas come to life. But where should you start?

Although hotly contested among developers, most novice coders begin their education by learning the basics of front-end web development, or the client-facing side of web development. The front-end involves what the end user sees, like the design/appearance of the web page.

In order to become a front-end developer, there are three languages you need to master: HTML, CSS, and Javascript, or as I like to call them, ‘The Holy Trinity.”

Below, I explain the difference between these three “languages,” and how they work in concert to get a simple website up and running.

1. HyperText Markup Language (HTML)

While not technically a programming language, HTML is an underpinning of the internet. If you’re a total newbie, start by learning HTML.

HTML allows you to place text, images, and other content on a web page. It matters because it is the foundation of web pages, with almost every website relying on HTML in some way.

It’s relatively easy to master, which makes it a great starting point. What also makes HTML great is that it’s easy to see—right in your browser. Want to know what HTML looks like?

  1. Right click your mouse.
  2. Select “View page source”.
  3. See the new page that appears? That is HTML.

view-page-source

2. Cascading Style Sheets (CSS)

Like HTML, CSS is not truly a programming language. CSS allows you to customize the appearance of your web page. With CSS you can change fonts, colors, sizing, and the position of elements (like a sidebar).

Think of HTML like the human body, and CSS like the hair, makeup, clothing, and other accessories. You can build a website with HTML alone. But it wouldn’t be pretty. (Imagine a website with just black, Times New Roman text. And a plain white background.)

CSS matters because almost every website uses it. And, like HTML, it is relatively easy to master. You can see CSS on any web page by right-clicking your mouse, and selecting “Inspect” in Chrome (or “Inspect Element” in Firefox).

css-styles

Above are CSS styles that have been added to the General Assembly blog.

When CSS first came out, its functionality was limited. However, today you can do a lot with it. For example animations, like this Husky, which was built with CSS and HTML alone.

Still, HTML and CSS can only do so much. Which brings us to JavaScript.

3. JavaScript (JS)

JavaScript is a programming language that can run in the browser. It is known for its many uses, and it is one of the most popular programming languages out there.

Unlike HTML and CSS, JavaScript is not confined to the front-end. Yet when most beginners start learning JS, they use it in the browser with HTML and CSS to create interactive effects.

What makes JavaScript special is that it allows users to interact with a web page, and input information. For instance, imagine a quiz you take online, where you select answers and at the end receive a score. That is something that can be achieved with JavaScript.

Just like HTML and CSS, JavaScript is used on many websites. But unlike HTML and CSS, which is strictly front-end, JavaScript can be used on the back-end. This means that JavaScript is something many front-end and back-end developers use. Because of this, JavaScript is found across jobs in the web development space.

Learning how to code can be overwhelming. But if you break it down step-by-step starting with the basics of front-end web development, you’ll be coding your own websites and web apps in no time.

Learn HTML, CSS, and Javascript for free through fun projects you can do in your browser.

Explore Dash by General Assembly.

Laurence Bradford is the creator of learntocodewith.me, an online resource for those teaching themselves digital skills. Connect with Laurence on Twitter.