More than brick-and-mortar, computer code and pixels are the foundation of the 21st century economy. If you've ever looked at "Page Source" or "Developer Tools" in your browser, you've likely encountered a mess of text, and wondered how that makes the web page work.

Web developers call Graphical User Interfaces (GUIs) collectively the front-end of a web page, in contrast to the back-end. The front-end is what the user can manipulate, take action with, and otherwise use. The back-end can be thought of as the infrastructure that contains and supports all the information and tasks implied by the front-end.

This article is about the front-end. We'll map out the territory so that you can get an understanding of the distinctions and capabilities that make the front-end what it is, and show you how to start to make sense -- and use -- of web developer's tools for creating appealing and interactive web pages.

Web Design versus Front-End Development

In large organizations, design and development are tasks undertaken by teams of professionals with different skill sets. Designers would create a specific visual and interaction design; front-end developers would implement it.

For an individual, however, there's no reason to confine your exploration: just because you're interested in development, doesn't mean you have no vision for design, and vice-versa. A modest amount of knowledge about basic web technologies or design principles can prove hugely beneficial in your career or business.

Front-end development is both more and less a coding activity. More because it's more than half design in its thinking: many concepts are drawn from the world of print production. Less because while it is using computer code, that code is a variety that's less complex, more forgiving, and requires less foundation knowledge of programming than other web programming languages (many of which can be found on the back-end).

The Web's Front-End: Markup, Style Sheet, and Programming Languages

Most web pages are constructed with a trio of technologies: hypertext markup language (HTML), cascading style sheets (CSS), and JavaScript (JS):

  • Markup languages like HTML mark a document with tags. Tags demarcate semantic content and structure the document. Structured documents can be styled.
  • CSS  is a style sheet language and descendant of print-style directions to a page compositor (who creates the final printable image for a printing press); on the web, CSS dictates the presentation of content like  typography and layout generally, as well as placing graphics.
  • JavaScript, in contrast to the previous two, is a programming language. JS handles interaction and user input, and is focused on the events an user produces. To fill in the picture a little more, the opposite of an event-driven paradigm is one where programming executes regardless of user input.

HTML

It's been over twenty years, and the core purpose of HTML remains the same: to separate the text meant for a reader from the structure needed to parse the document.

Why You Need It

Why is HTML still important? To put it simply, HTML is where the semantic meaning of your content lies. That’s necessary for machine readers like search engine spiders and screen readers (for accessibility). Over time, the relevance of separating what is semantic versus what is structural has grown rather than diminished over time. The most recent version of HTML (5) introduced tags like <article>, <aside>, <nav>, <header>, and <footer> for the purpose of clarifying semantics and structure. This benefits both human and machine readers.

Anatomy of an HTML Element

HTML elements, at a minimum, are pairs of opening and closing tags, each tag enclosed in <angle brackets>, such the paragraph tag, below in cyan. Elements can take attributes, as below in magenta, such as a "class," which would make the element a member of a group that HTML and JS can affect. The style attribute, whose contents is written in red below, is actually a way of creating a one-off CSS rule just for that element. (CSS is best written on the site or page level, as we'll discuss below.)

An diagram indicating the major parts of an HTML element

The result of this markup:

Plain paragraph text here.

Extra Credit (Advanced)

Developers of all kinds are obsessed with speed of execution. To this end, they'll optimize the languages themselves for speed in writing and creating readable lines. This is called syntactic sugarcoating. The HTML community has produced a few of these efforts.

Why use a developer-centric shortcut when you're, presumably, a novice? By creating things in simpler markup, you can focus on the intention, not the expression, while validating against a standard last of all. The source files you generate in the simplified markup will either compile into valid HTML, or the compiler will throw an error at a specific line number. You might find that more instructive than hunting through "tag soup" for a missing angle bracket. They each require an intermediary piece of software to transcompile them into HTML. (It is extra credit, after all.)

CSS

CSS enables semantic content and document presentation to be housed separately, making stylistic features like layout, colors, and typography portable and applicable to different documents. When content and visual design are separate, the developer gains more flexibility and consistency in visual design.

Why You Need It

Unstyled websites look terrible and unappealing. While they might be readable, CSS is the cornerstone of visual information hierarchy because of the layout that it enables. For example, the figure below partly illustrates the current top navigation menu of makeuseof.com, without any CSS applied.

muo-menu

Notice that apart from typography and color, the unstyled menu is vertical because that's the default style of the browser. It's unlikely that you'd want to re-create the internet of 1990, so you'll want a healthy and continual dose of CSS knowledge to truly be competent. Additionally, with the rise of differently-sized and connected devices like iPhones, tablets, et cetera, one of the most important skills has become "Responsive Design," or webpages that adapt to different screen sizes. This is all accomplished via CSS.

Anatomy of a CSS Rule

CSS rules are written in one of three places: a) inline within an element, b) by creating a <style> section within the <head> tag of an HTML document, c) in a separate style sheet, such as style.css.

Ideally, styles are written in separate style sheets that multiple web pages may reference. By using the same set of rules, authors can save time and create visual presentation with more order and consistency. (Inline styles can't help you form the bedrock of site- or even page-wide style -- that's why they're best used sparingly to meet specific needs.)

CSS rules begin with a selector, written in green below. In this case, the selector for the rule is p, for paragraph: the rule applies to paragraph elements. The rule is enclosed in {curly braces}, as opposed to <angle brackets>. In this case, the rule makes the typeface for paragraph text normal.

CSS rules can get more complex and complicated than this introduction allows for. That's why, in terms of time committed, you can expect CSS will take much longer to master than HTML.

Extra Credit (Advanced)

Much like HTML, CSS has its optimizations for those who want to achieve more, faster.

  • SASS (and SCSS) | Requires Ruby, as above
  • Less | Requires Node.js, as above

JavaScript

When many people think of coding, they think of it as instructing the computer how to do something. This is the task of a programming language, our final addend to the front-end equation.

javascript-udemy-courses

Programming languages are usually classified by the level of abstraction they employ in their semantics, their ancestor languages, their paradigms, and their typing disciplines. JavaScript defies simple classification because it's been extended into so many frameworks, to fit so many different purposes. It's a flexible, vaguely-derived-from-the-C-family, multi-paradigm, loosely-typed hybrid chameleon playing magpie with coding concepts. It's either a great example of a very general purpose language, or a very poor example of many different types of languages.

Why You Need It

Why learn JavaScript? As my colleague points out, JavaScript has its champions and detractors, particularly in the case of its suitability for first-time learners. It is possibly the most popular programming language of today. While it doesn't impart a strong foundation to understand the rest of the coding kingdom, there's a good argument to be made for learning JS alongside Ruby or PHP.

That said, vanilla JS doesn't go very far -- frameworks are responsible for the web pages of today.

Popular Frameworks

  • Angular, Google's JS framework for web applications like GMail and the rest.
  • JQuery, already covered by MUO here, which powers WordPress among other applications.
  • React, built by the Facebook engineering legions, is made for creating UIs.

Extra Credit (Advanced)

JavaScript's palimpsest nature begs for some imposition of structure. Each of the sugarcoats below goes some of the way toward implementing

Where to Start Learning

Since front-end development is now widely considered a crucial job skill for knowledge workers of all kinds, you'll find many starting points in the form of e-learning courses. Here is a curated list that we made for our readers:

  • Coursera (Paid)Coursera collects online courses from universities and institutions of learning. The price range falls from 50-250 USD for a course, but they advertise a high standard of knowledge and high-competency outcomes.
  • General Assembly Dash (Free)General Assembly is a popular option for paid professional education. Dash is their free offering, and covers HTML/CSS/JS.
  • MakeUseOf.com -- The Learn to Code 2017 Bundle (Paid, Plug)Lifetime access to 10 classes covering the gamut of front- and back-end web development, for as few as 20 USD.
  • Mozilla Developer Network (Free)MDN is authoritative, but partakes of the style of documentation more so than classroom-style instruction or gamified online-only offerings.
  • Treehouse (Paid)Another online offering, this one paid per month rather than course. This comes at the recommendation of Karen X Cheng in her viral Medium post "How to get a job as a designer without going to design school."
  • Web Design Tutorials by Envato Tuts+ (Mixed of Free and Paid Content of Equal Quality)A bevy of one-off articles and multi-part series of high-quality, specific, and targeted information usually on one subject.

Getting Started

One of the advantages that front-end development holds for the beginner is that, for the most part, it doesn't require expensive proprietary tools: the most basic tool of front-end development is the text editor paired with the browser of your choice:

More convenient, if less permanent, alternatives are web-based live editors such as:

Short Cuts

HTML structures are, for the most part, well-understood, and not exactly worthy of re-keying with great frequency. For CSS, the average site's style sheet is thousands of lines long, and you can bet that few modern ones are written exclusively by hand. And in terms of interactivity, certain standards have emerged. By virtue of those facts, you'll find that many front-end developers use pre-built frameworks as a backbone, and then tweak, remove, or substitute as needed.

  • Bootstrap, developed originally by Twitter, contains HTML, CSS, and JS templates which are widely found on the web today. Bootstrap is almost a lingua franca in beginning web development.
  • Foundation bills itself as the most advanced framework in the world, and is built with an emphasis on small size and speed.

Reference Material

Conclusion

We hope you enjoyed this orientation to the world of front-end. As you can see, front-end development is a field that's filled with a lot of possibility, but has many entry points. Learning it will add an impressive skill to your portfolio, and enable you to take the next step in your career, or transition to an entirely new one.

Developers: What’s in your front-end stack?

Beginners: What else could we have included to orient you?