Easy To Understand Guide To Front-End & Back-End Web Design

As you no doubt know already, the world of web design is loaded with jargon and terminology, which can sometimes be tricky to follow. To make matters worse, some terms are so widely used, that they're applied to many things...or they mean different things to different people. As a business owner, it's important to understand even some basic web design concepts. This makes it easier to communicate with others, and hunt for solutions on our own. So in this tutorial, we'll get some clarity on the jargonny, wacky world of web design!

Specifically, we'll be addressing the difference between web design's two primary areas, front-end and back-end development. By understanding the difference between these two specialized areas of web design, you'll get a better understanding of web design as a whole. And, you'll be able to isolate what areas of web design you want to focus on, and what areas are beyond your interest. I hope that sounds like a plan!

By the end of this tutorial, you'll have a very clear idea of web design's two main areas, you'll understand their differences, and you'll know what areas to focus on and develop your skills in. As we go along, you'll find out what tools, coding languages, and software applications you should be learning if you want to be able to own and maintain your business website yourself, and which ones you can safely ignore.

It's all about gaining clarity in the world of web design here, so let's get started!

What Is Front-End Web Design?

Let's start things off by taking a look at front-end web design. This is sometimes called client-side web design, or client side web development. Dorky computer nerds sure love to complicate things! But just what is front-end web design or web development? Here's an easy way to think about it: Front-end design is anything that you can see inside your web browser. This is why it’s sometimes called client-side—the client being your web browser. Does that make sense?

Learn how to build your small business website!

So front-end web design includes things like HTML, CSS, JavaScript, mobile or responsive design, and a few other components. So again, anything that relates to what a visitor would see inside their browser when they navigate to your website falls into the category of front-end design.

The visual aspects of web design are often handled by Photoshop.

The visual aspects of web design are often handled by Photoshop.

Front-end web design covers a pretty huge area. In addition to coding like JavaScript, HTML, and CSS, someone who calls themselves a front-end designer also concerns themselves with things like typography, layouts, debugging code, mobile design, and on and on. Front-end design is definitely creative and artsy, but it can also span into more technical areas, too.

A job title for someone who does front-end design might be web designer, front-end developer, or UX or UI Designer. But these job titles might mean different things to different people and different companies. It could mean that a designer only builds static layouts in Photoshop and then hands them off to someone else for coding. Or it might mean that the designer handles the entire sha-bang—from initial design, choosing fonts and colours, to Photoshop layout, all the way through to the final, responsive HTML and CSS coding.

A front-end designer, might use a combination of any of the following tools and software: Web languages like HTML, CSS, and JavaScript; Graphics applications like Photoshop and Illustrator (particularly as they apply to web design); A code editor like Atom, Brackets, Sublime Text, and a platform like WordPress. They may also make use of what's called a front-end framework, like Bootstrap (particularly for responsive design, also called mobile design), and Adobe Typekit for typography.

On the issue of front-end code editors, you may want to check out my tutorial, The Best Code Editors For Online Business Owners.

Now that you have a solid understanding of front-end, or client-side web design, let's now talk about back-end web design...

What Is Back-End Web Design?

Okay next, let's talk about back-end web development. This is sometimes called server-side web development. As you might suspect, this area of web development is much more technical. Back-end web design deals with how a website functions. This includes anything that a visitor to your website can’t see in their browser, like the web server or the database that your site runs off of.

Typically, back-end web development is concerned with databases, web servers, web applications, and other techie stuff. Back-end web technologies might include PHP, Ruby On Rails, Java, MySQL, Python, .NET, and so on.

Feeling light-headed yet?

As for job titles for back-end web developers, typically titles like programmer or web developer are used. But as always, those titles might mean different things to different people and different companies.

An IDE like NetBeans is a part of every back-end developer's tool kit.

An IDE like NetBeans is a part of every back-end developer's tool kit.

Often, back-end web developers have at least a general understanding of front-end web design (meaning, they might know HTML and some CSS), but because their focus is on server-side development, they use tools like MySQL, PHP MyAdmin, or SQLite, which all run directly off a web server. To handle programming in languages like Java, Python, and others, a full IDE like Vim, Netbeans, Eclipse, or Aptana Studio is usually used. IDE’s are development applications that contain powerful compiler and debugging features for building and maintaining web applications.

So that's the gist on back-end, or server-side, web development. And despite how technical it can get, interestingly, we can bridge the two worlds of front-end and back-end web design. Let's take a look...

Bridging Front-End And Back-End Web Design

In web design circles, there's a term called full-stack developer. Maybe you've heard it before. Some web developers are so skilled that they can handle both front-end and back-end web technologies. That's what a full-stack web developer is—someone who has a full stack of skills and can handle it all, from Photoshop and responsive design to PHP, MySQL, and more. These sorts of people are well skilled, very expensive, and not much fun at dinner parties.

Because it's so difficult to be very skilled in so many areas, full-stack developers are usually jack-of-all-trade types. Often, they'll have deep skills in specific areas of front and back-end web design, while maintaining a general familiarity with other areas. But often, they'll lack the knowledge and experience of those who completely specialize in either front-end or back end web development.

I'd like to mention here that WordPress, interestingly, is a great example of a piece of technology that spans both front-end and back-end web design. WordPress uses HTML, CSS, and PHP (and optionally JavaScript) in the front-end. But, it’s driven off a MySQL database that runs on a web server in the back-end. So, WordPress bridges skills and technologies found in both front-end and back-end web development.

Relying on HTML, CSS, PHP, and MySQL, WordPress spans both front-end and back-end web development.

Relying on HTML, CSS, PHP, and MySQL, WordPress spans both front-end and back-end web development.

On a personal note (and so you know where I'm coming from), I do mostly front-end web design work. As an artsy, creative guy running a few online businesses, I’m not terribly interested in anything too technical...unless my projects and businesses can directly benefit from learning about it myself. This means that I do sometimes have dig into minimal PHP and even MySQL work. But I have to stress, I only do this techie stuff in small doses to save the time and cost of hiring the task out to someone else. If something comes up that I think I can handle, I'll go for it. Otherwise, I'll hire a freelancer. Beyond minimal back-end stuff, I'm just not that interested—I'd rather focus on teaching, creating, running my businesses, and doing other fun things!

In Closing...

So there ya go—that's the difference between front-end and back-end web development. I hope this clears things up a bit for you as you continue building and working on your small business project.

We learned that front-end web design is all about whatever the visitor sees and experiences within their browser, while back-end web design is all about what they don't see. For both areas of web design, I wanted to point out specific tools, technologies, and software so you can look further into those if you want. We also talked about full-stack web design, and how WordPress is a great example of an application that spans both front and back-end web development.

As for yourself, you’ll have to decide what areas of web design you’re interested in learning more about, which areas your business can most benefit from, and which aspects you can leave to the pros. My goal with Ten Ton is to share what I've learned over the years, primarily about front-end design, as it relates to building and running businesses online. And if you choose to go further into back-end development, then hopefully Ten Ton can be a springboard for that, too.

If you'd like to move forward into more front-end web design, be sure to find a code editor that'll suit your needs, seriously consider looking further into WordPress, and if you don't know 'em yet, be sure to learn Photoshop and Illustrator—Photoshop especially is critical for handling your web graphics and layouts.

I look forward to seeing you there!

Share this!
  • 5
  •  
  •  
  •  
  •  
Geoff Blake, Ten Ton Online

Hey, I’m Geoff. I teach small business owners how to build and grow their websites themselves. Start here (free!)