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?
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.
- The AngularJS Framework
- Grunt and Gulp: Task Runner Tools to Streamline Front-End Development
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”
- 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 engage that top-notch front-end developer, we’ve put together a few more resources for you.
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 is a freelancing marketplace where businesses of all sizes can find talented professionals across multiple disciplines and categories. If you are a business and are looking to get projects done, consider signing up!