A Beginner’s Guide to Front-End Development

For anyone who doesn’t work directly with web development, concepts like front-end vs. back-end development can be challenging to wrap your head around. Pile on all of the frameworks, programming languages, APIs, and libraries that front-end developers use to build apps, and it can get very confusing.

The good news? You don’t have to write code to understand the basics of the development process. And knowing how to talk about development is helpful whether you’re a copywriter, a hiring manager, a marketer for a tech-based startup, or a product manager planning an upcoming sprint for a new app.

To help you become a pro in all things front-end development, we’ve written a series of articles that cover what you need to know about this area of web development—in a way non-developers can understand. You’ll not only know what front-end development is and what front-end engineers do, you’ll know the pros and cons of the different tools they use, how to make decisions about what frameworks are best for your app, and exactly how your designs and prototypes come to life.

The Fundamentals: The Front End vs. The Back End

To understand the front end, you also have to know the back end. The front end, also called “client-side” programming, is what happens in the browser. It’s everything the users sees and interacts with. The back end, also called “server-side” programming, happens on the server and the database. It’s the machinery that works behind the scenes to power those fancy features users interact with on the client side.

Here are a couple of visuals to give you an idea of how front-end development flows.

You can see how the server-side manages all those client requests that make interactive websites possible. Front-end scripts process those user requests then volley them over to the server side. This process often happens in a constant loop of requests and responses. To learn more about the process, start by reading The Role of a Front-End Web Developer: Creating User Experience and Interactivity, then see how all those client-side scripts work in our article Front-End Web Development: Client-Side Scripting & User Experience.

Now, let’s take a look at the bigger picture. For a little more context, here’s how the back-end architecture is set up—the software and machinery that take over in step four in the above graphic.

Without getting too in-depth, it’s easy to see that the back end is a mix of the server, databases, APIs, and operating systems that power an app’s front end. You can dive into this aspect of a software stack in our article Server-Side Scripting: Back-End Web Development Technology or get a broad view of back-end technology with our article The Role of the Back-End Developer.

Now, let’s go a little deeper into the front-end by talking about the basic technologies that make it all run.

The Basics of Front-End Tools & Technology

Back in the day, websites were simple, static text sites with a bit of formatting and maybe even some animation. That was all thanks to HTML and CSS. But how did we get from there to today, where we interact with sites, fill out forms, play videos, and load parts of other websites within a page—all without clicking refresh?

It’s important to note that front-end development has changed significantly over the past 10 to 15 years with the explosive growth of JavaScript, which wasn’t as ubiquitous on the front end as it is now, or even as common on the back end, thanks to Node.js. Before JavaScript was such a big player, even a PHP developer could work in front-end development—a crossover that’s less common now than it was then.

Some of the core technologies used in front-end web development include:

HTML: The Organizer

HTML is how every site on the web is organized, so it’s a big one you can’t live without in front-end development.

• HTML5 is the latest HTML specification. Get a full run-down of this evolving backbone of front-end web technology and learn about one of its cooler features, Canvas.
• We know HTML is a markup language—but what’s a markup language? Learn all about these foundational web technologies and what they do.
• Similar terms getting confusing? Get an overview of the difference between HTML vs. XHTML vs. HTML5.

JavaScript: The Multitasker

What was once a supplementary tool to make web pages more interactive is now the most ubiquitous client-side technology. JavaScript is more than just a language—it’s an entire ecosystem that spans frameworks, task runners, server-side development, and more. Do a deep dive into this fundamental front-end technology with articles like:

• The AngularJS Framework
• jQuery: A Write Less, Do More JavaScript Library
• Grunt and Gulp: Task Runner Tools to Streamline Front-End Development
• The Advantages of TypeScript and TypeScript & CoffeeScript: Two Tools to Write Faster, Cleaner JavaScript

CSS: The Stylist

Cascading Style Sheets (CSS) are how developers add styling and effects to a website. Styles can be added globally, then layered on without changing that fundamental styling that gets applied to a whole site.

• CSS is always evolving. Get to know what’s new with the latest and greatest version, CSS3.
• Many front-end developers use a CSS preprocessor to make writing lots of lines of CSS even faster. Learn about a popular one, Sass.
• Stay in the know and learn about one of its recent specifications, CSS Grid.
• CSS front-end frameworks like Foundation or Bootstrap can help you create polished websites in a snap.

AJAX: The “Gofer”

AJAX (Asynchronous JavaScript and XML) is a technology that’s used to create dynamic applications and webpages. It allows a page to update data within certain elements separate from the whole page, so portions can be refreshed without reloading the entire app. Read this article about AJAX to learn more.

• JSON is a fundamental part of AJAX, and also a really common data transfer format you’ll come across a lot when talking about front-end strategies. Get a look at this with our article What is JSON?

That covers the most basic concepts and tools of front-end development, but there’s still more to learn.

UI and UX Design: Bringing the Front-end to Life

We’d be remiss to talk about front-end development without mentioning the design aspect—two things that go hand in hand in website and app development. Many front-end developers wear a few hats, with web designers and UI/UX skills in their toolbox. If a designer knows what kinds of things are possible with front-end code, they’re better able to design intuitive, interactive UIs—and vice versa.

Dive into where front-end development UI and UX design meet with some of the following articles:

• Web Design vs. Web Development
• UX, UI, IA? 7 Confusing Digital Design Terms Defined
• What is Responsive Web Design & Why Do You Need It?
• What Are Web Fonts & Why Are They Important?
• A Look at Sketch: A tool for UI designers
• What Type of Designer Do You Need?
• A Designer’s Toolbox: All Things Adobe

Hiring that Perfect Front-End Developer

When it comes time to hire that top-notch front-end developer, we’ve put together a few more resources for you.

If you’re building a single-page application, creating a WordPress site, or even just pulling together a landing page, you may know you need some front-end development and design work, but may not know what goes into your project or who you’ll need to get it done. Upwork’s Hiring Guides have resources to help you find, hire, and write job descriptions for a variety of front-end developers like HTML developers, CSS developers, and JavaScript developers.

Check out the following resources to help you kick off a successful search for a front-end developer:

• Writing A Job Description to Find a Great Front-End Developer
• How Do You Hire a Front-End Developer?
• How Much Does it Cost to Hire a Front-End Web Developer?

Comparing Front-end Technologies

Want to learn even more? There are a slew of frameworks like AngularJS, React, Bootstrap, and jQuery available to developers to streamline front-end development. If you and your team are trying to decide which framework may be best for a certain module of your application’s front-end, we’ve got plenty of comparison articles that stack up some of the top frameworks, tools, and libraries.

Your developer will be able to recommend the tech that’s best for your needs, but having a broad view of what’s out there can help you make an informed decision.

• Polymer vs. React
• AngularJS vs. React
• Battle of the Text Editors: Atom vs. Sublime vs. Brackets
• AngularJS vs. EmberJS
• Bootstrap vs. Foundation
• AngularJS vs. jQuery

Upwork. Get more work done faster with freelancers. Post a job today—it’s free!

Read more: Polymer vs. React: Comparing Two Front-end JavaScript Libraries