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 as the human body, and CSS as 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.

Dive into coding at General Assembly. Become a full-stack developer in our transformative full-time Software Engineering Immersive course. To learn part-time, explore our on-campus courses in Front-End Web Development and JavaScript Development. Or start your journey with GA’s free Dash tool and learn HTML, CSS, and JavaScript through fun projects right in your browser.

Explore Coding Courses & Workshops at GA

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

Disclaimer: General Assembly referred to their Bootcamps and Short Courses as “Immersive” and “Part-time” courses respectfully and you may see that reference in posts prior to 2023.