Getting Started Guide: Chapter 1

Front-end and Backend Development

Front-end and Backend Development

What is the difference between front-end and back-end development?

Now that you’re a bit more familiar with how coding and programming languages work, let’s dive into how websites and applications are constructed.

Usually, the development of all web projects and programs in general can be divided into four categories, according to the code’s purpose and function.

1) Appearance

Appearance is the part of the web project that is visible to the user, i.e. to you and me. This includes the content itself, like text and images, as well as any styling that is used to make the interface more appealing and interesting.

This category is called the front-end and it is created with programming languages such as HTML, CSS, and JavaScript.

2) Logic

Logic determines the underlying dynamics of the web project. In other words, what you see and when while using a web application or a website, is determined by its logic.

The logic is part of the back-end of a web project and developers responsible for it work with programming languages like PHP, Python, and Ruby.

3) Storage

Storage saves any data that is generated by the website or its users. For instance, when you create a user profile on a website, your information must be stored somehow. That way, when you visit the website later on, your information is simply retrieved so that you don’t have to start from scratch every time.

Storage is also part of the back-end and it uses databases like MySQL and MongoDB.

4) Infrastructure

Infrastructure refers to the part of a website or application that delivers the website from the server to your computer, the client machine.

When everything is configured and set up properly, you won’t even notice the infrastructure working in the background. But you will surely notice it when something isn’t working well, for example when the infrastructure can’t handle extreme amounts of traffic.

p

Summary

  • Web projects consist of four main parts: Appearance is the front-end, while logic, storage, and infrastructure make up the back-end

Specialising in either front-end or back-end development

Usually, a single web developer specialises in either one or two of these areas or categories. That is why you will often read and hear about front-end developers and backend developers. Since each area requires a significant amount of effort to master, it’s a good idea to focus on just one or two of them.

All in all, it’s a good idea to give some thought to which area you would be more interested in.

As a beginner programmer, you will have to decide what you wish to create or achieve with programming. Based on your decision and interests, you’ll focus on either front-end or backend development first.

To help you out, let’s take a closer look at both front-end and backend development and the tools used for each area next.

Front-end development and tools used for it

Front end developers create the look and feel of every website you visit. In other words, they are responsible for the part of a web page you interact with directly. They create and determine the final layout and all the colors and fonts for it, for example.

Front-end developers also make sure to consider such factors as brand identity and emotional experience a particular website wishes to convey to its end users.

Programming languages for front-end development

The tools for frontend developers are the ones that you will most likely start with when you first begin learning coding. These include mainly

  • HTML
  • CSS
  • JavaScript

These programming languages construct all the visual aspects of a website you visit.

As I mentioned in the previous part of this guide, HTML creates the actual content, such as text, links, lists, tables, images, and other media. All of these elements are then styled to look better using CSS.

Finally, to make the user experience more dynamic and interesting, frontend developers use JavaScript to add interactive and responsive elements to the website or application.

So if a frontend developer makes everything look pretty and work intuitively, what happens in the background then?

Let’s look at backend development next.

p

Summary

  • Front-end developers create the look and feel of a website or application
  • Programming languages used by front-end developers include HTML, CSS, and JavaScript

Backend development and tools used for it

These days, most websites are dynamic and show different content depending on who’s using the site.

For instance, you can use your username and password to log into your email account and not see the emails of some other user. Or you can use a social medium and see your own posts and messages from your contacts, not those of other users.

But how does the website know who you’re friends with? And how can it remember everything you ever posted or wrote on your profile?

This is where backend developers work their magic.

Backend developers use databases to store all data that is linked to you. To be able to retrieve this data correctly and quickly when needed, backend programmers use a suitable infrastructure, such as servers and hardware, as well as a certain logic for the website or application.

Depending on the nature, scope, and purpose of a certain web project, backend developers design data structures and other necessary frameworks and solutions that best suit that specific project.

For instance, backend developers need to figure out how to store user data in an efficient way. That way you and I can enjoy a smooth and fast user experience.

Programming languages for back-end development

The tools backend developers use focus on database management and the various dynamics and functionalities of a website. These are often called server-side languages, including:

  • Java
  • PHP
  • Python
  • Ruby

Backend developers also use a language called SQL (‘sequel’) to create and manage tables for the database itself for a specific project.

The database recognises the other languages, which construct the actual functionalities of the website, such as creating a user account. In a way they translate user inputs into something that can be stored in the database.

p

Summary

  • Back-end developers are responsible for the logic, infrastructure, and data storage of a web project
  • Programming languages used by front-end developers include PHP, Python, Ruby, and SQL

Full-stack development – combining frontend and backend

If you feel like you’re not ready to make up your mind and choose either frontend or backend development to focus on, I’ve got some good news for you!

You can also simply start learning both areas. Of course, this approach is rather time-consuming for a beginner, since you will simply encounter way too much of new terminology that you need to figure out first.

Someone who masters both the front-end and the backend development for creating and maintaining a website is called a full-stack developer. In fact, oftentimes it’s not even that easy to draw a line between these two areas for a single web project. Each of them needs to work together seamlessly, requiring at least some understanding of both areas from the developers working on a project.

In the future, web projects are only going to become more complex and diverse. Therefore, having an understanding of both sides of the development process is an invaluable asset to have.

p

Summary

  • Full-stack developers master both the front-end and the back-end tools for building websites or applications

Conclusion

If you are just starting with learning how to code and feeling a bit confused about the difference between front-end and backend development, don’t worry. It’s perfectly normal not to have a clear idea about which area to start with or to specialise in.

All that matters is that you start, simple as that. Once you take the first step and start learning more about one area or the other, you’ll find out if it’s for you or not quite quickly. And if you don’t like it, it’s never too late to change your mind and start learning something else.

Personally I started with learning backend development first using Python. However, my very first bigger project included creating a web application from scratch, so I learned HTML and CSS at the same time. Of course, the front-end was very simple but it worked and looked quite beautiful in its minimalism. 

I’d recommend starting with simple HTML and CSS by building a simple website for yourself. The two languages are very easy to pick up on and you will see the results of your code right away when you open your HTML files in your web browser.

Want to start learning right away? Great! Check out my page for some great resources for learning HTML and CSS right here.

What’s next?

Now that you know how the front end is tied together with the back end, it’s a good time to take a closer look at how the web works. 

In the next part of this chapter, you will learn about the dynamics of the Internet and its infrastructure. This will give you a better idea at what is actually happening when you visit websites and use web applications.

HI THERE!

HOW ABOUT A FREE E-BOOK?

Sign up now and get 15 awesome tips for learning coding more quickly and easily!

Yay, thanks for subscribing! Please check your email to confirm your subscription and to receive your download link.

Share This