What is Front-End Web Development?

Step 1: The Hard Part; Prototyping

When you are experienced in front-end web development, you start to get good at the design and development side of things. The part that requires a lot of problem-solving techniques is the prototype or “How will this all fit together, have a simple, interactive user interface, and work on all screen sizes and devices?” stage. In this step, you have to figure out how everything should flow, how it all connects, and how to help the user do what you need them to do. It’s also what sets the groundwork for everything that comes, so getting it down right is critical to keeping the project on a timely schedule and keeping it as headache-free as possible.

Sometimes developers work with a team that provides a mockup or flow map, but oftentimes this is left to the developer to put together after collaborating with a team or client to figure out all of the requirements and how they should fit together cohesively. There are many great tools out there, such as Adobe XD and Figma, that make the prototyping phase much easier by giving the developer a drag-and-drop creative interface to play around with the elements of the layout.

The result of this step is usually nothing more than a few PDFs or flowcharts, but the impact it has on getting the project done well can’t be overstated. Like other professions, getting your bearings, in the beginning, helps keep you on the right path and reach targets easier.

Step 2: Design; Make it Look Pretty

In this step, a developer takes the rough draft from step one and starts to polish it and make it look good. Since the front end is what everyone looks at, it makes sense that it should look great, right? “But wait, I thought this article is about front-end web development–not web design!” To that, I say, “You’re right, but also no.” The job description for a modern front-end web developer usually makes design experience a required, core skill for the job. People in this position (especially in smaller teams) are expected to have good development skills and practices–like using GitHub for version control and being up-to-date on development trends–as well as an understanding of user interface and user experience.

It makes sense when you think about it. Sure, you need somebody who can build out a functional design, but if you have somebody who also has a sense of design it cuts out a lot of back-and-forths to get things like spacing, colors, and sizing done correctly. Don’t get me wrong, there are people out there that do a fantastic job of purely developing given an image or photoshop file of what’s needed, but the profession has evolved a lot over the past few decades, and design prowess is now an expectation and even something we as a web design and internet marketing company preferentially hire based on.

There are a few ways to approach getting it done, but most front-end developers work to create a scheme of basic elements like buttons, headers, forms, paragraphs, and image styles that all share a similar look and feel.

At this point, it’s also important to look into accessibility features, and web browser support, ensuring the layout is a fully responsive design, and iron out any major user experience issues. There will be adjustments to all of these points later on, but getting them mostly figured out will save you time later.

Some people like to work in creative suites like Adobe Photoshop or Affinity Photo, while others jump straight into an iterative, live-creation process and meld this step with…

Step 3: Make it Happen, Cap’n

A front-end web developer will go through this step a few times on the same project as they get feedback from the team/client/rubber ducky on their desk. Now that there is a solid prototype that lays out the requirements for the project and there is a cohesive design language, it’s time to start building.

Developing for the front end makes use of style, markup, and programming languages. The most common three–and the only ones you must know for modern web development–are as follows:

• CSS–for the styling of the webpage (also critical in responsive design)
• HTML–for the “structure” of the webpage and its components, also required to build in accessibility functionality
• Javascript–for more interactive bits and effects. Also used for any client-to-server communication

There are a ton of pre-processors (like HAML and SASS), frameworks (like bootstrap), APIs, and libraries out there that give more functionality to the languages or extend upon them, but you don’t have to be a software engineer to make it to this step–the basics will get you far, you’ll just get there a little slower.

As long as you have a basic understanding of the main front-end tools (CSS, HTML, and Javascript,) you have a fundamental understanding of how the majority of websites on the internet work. If all else fails, the nice thing about the industry is that a lot of us are a little nerdy and like to share what we’ve made and how we made it. That way, you can usually find tutorials, online courses, boot camps, and long Stack Overflow threads on just about any front-end web development question or topic that your heart fancies.