Help Center
Front-End Code.

Front-End Code

Universal languages allow you to design across browsers.

Ryan Riddle . 5 min read

It pre-dates PHP, Java and the W3C. It’s the foundation of Foundation. Front-end code the lingua franca — not of the web, but of web browsers.

Front-end development in progress.

You’ve likely heard of the most popular front-end languages: HTML, CSS and JavaScript. View source in your browser to find one or all of them, and therein lies its defining trait. On the web, front-end code tells your browser what to do.

The opposite of front-end code is back-end code — files that web servers run, but they’re part of the same process. Servers use back-end code to generate front-end code. A developer may write a single loop in PHP, for example, to create a long list in HTML. The server might run this code …

… to generate this …

… which goes to the browser. Web browsers never see back-end code. In the example above, a browser wouldn’t know that PHP chased its tail for a few milliseconds. It would only knows that the server sent back nine <li> elements. If it did, it couldn’t care less. It only needs the HTML, CSS and JavaScript to tell it what to do.

The Design Advantage

This is good news for designers who want to learn the web as a medium. While an understanding of Ruby, PHP, SQL and other server-side languages help, front-end code is a clear first step. Some people may choose to never worry about back-end code. There’s plenty a front-end savvy designer can do:

  • Responsive design: Being able to change layouts per device requires a working knowledge of HTML media queries and CSS floats.
  • User feedback: On-the-fly form testing, alerts, changing elements based on user preferences all require good JavaScript skills.
  • Plan for tomorrow: Web technologies evolve quickly. Websites based on proven code techniques last longer than fly-by-night tricks.
  • Impress friends: Not to mention potential employers. Graphic skills alone don’t always get the job.
  • Shift more work to the browser: Understand which visual techniques do not have to be downloaded, thus saving bandwidth and improving load time. For example, you don’t need JPG files to create gradients — WebKit-based browsers render shades automatically. (In fact, WebKit is surprisingly capable.)

Foundation is written with front-end code to facilitate rapid prototyping. A keen grasp of front-end code empowered us to build Helio.

While learning, it’s hard to understand one language without the other. CSS selectors, for example, relate directly to HTML tags and class attributes. JavaScript can find and manipulate specific HTML elements based on their IDs. All of them depend on the browser’s ability — and willingness — to interpret their instructions.

Browser Disobedience

Front-end languages are sets of rules no one is required to follow. But you can’t just invent new tags because browsers ignore tags they don’t recognize. An <img/> is an <img/> by common consent. But it wasn’t always that way.

Microsoft Internet Explorer 6 interpreted the W3C’s rules differently than other browsers of its day. With more than 80% of users surfing the web in IE6 in the late 1990s, Microsoft’s interpretation of HTML/CSS was effectively the rule. Tomayto, tomahto — designers found themselves writing different sets of front-end code for each exception.

Microsoft wasn’t the only offender. Early versions of Netscape Navigator followed rules of its own, sometimes to notorious results. Luckily, that’s changed. Recent versions of Explorer follow same rules as Chrome, Firefox and Safari. Today’s compatibility challenge is more about device sizes.

A Front-End Future

Knowing front-end code wasn’t just important to how we created Foundation and our apps — it helped us reach a wider audience than compiled apps ever could. Android? iOS? Windows? Mac? We reach them all. Anything with a browser can read front-end code generated by a web server. The web is our platform.

Front-end is code the lingua franca of web design. Its strength lies in the common ground: browsers’ willingness to obey the rules. Your strength lies in your ability to apply them.

You can test whether your audience comprehends what you’ve coded up. Helio’s test template below makes it easy! 

Use Template

UI Comprehension Test

Take the ambiguity out of your user’s actions. Your users need a clear, easy-to use UI to achieve their goals without being overcome with frustration.

Use this template for:

  • Product Design
  • See if what you built makes sense with an actual audience
  • Plan better for further iterations of your design
Use Template