A Beginner’s Guide to Front-End Development

By Carey Wodehouse

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 Go to the full article.

Source:: Business 2 Community

Be Sociable, Share!