Do you understand all the roles working on your digital project?
When people or organizations think about the components of a digital project, often the focus is on back-end development or traditional design.
In this blog, we'll take a look at the important piece that falls in between, front-end development.
What is a front-end developer?
As many of you can imagine, building a website is almost like putting together a building’s structure. This process requires multiple phases and work is divided among differently skilled trades. Five or ten years ago, however, there wasn’t much differentiation when it came to digital professionals.
All of the people with some kind of web programming knowledge were simply called “Web Developers” or “Webmasters”. These developers worked with very traditional, Photoshop-based designers. But that era of “do-it-all” folks has passed. With the evolution of web technologies, one person can’t simply handle everything (or can’t handle everything well). Roles are also no longer as delineated.
Since I’m in front-end development section of that spectrum, I’ll explain what our involvement is in building a website. I’ll help you understand what our day-to-day and project-to-project work requires.
The name “Front-end Developer” tells you a bit about our job, which is to build components and features that are displayed on the front of your website. By front, I mean the elements that users see and interact with in their browser. I like to say that we’re the bridge connecting beautiful designs coming from the creative department with complex functionality written by back-end developers.
The work of front-end developers used to be focused all around simple user interface (UI) work. Basic IU work involved coding prepared designs into website templates. As time and technologies progressed, the front-end world became more complex and we as front-end developers are now involved in accomplishing bigger, better, and more interactive things. You can build a complete website application and with some of the latest development frameworks and tools, sky is the limit!
Again, front-end development in a nutshell: we take the design and prepare it for back end development. How does that happen exactly? I’ve divided our work into three areas and provided some detail about each one. Each section is based around a term that you would probably hear the coming from any FED team or department.
I’m talking about Markup, Styling, and Scripts.
The M in HTML stands for Markup (Hyper Text Markup Language), which is the base for any website. Every web page that you visit is using HTML. Even this very blog article is rendered with HTML so your browser can display all the elements with data that developer wants. Markup is the foundation for any front-end developer and the structure for every site or component.
We could just write the markup and call it a day, but your website wouldn’t look anything like the beautiful design prepared by your creative department. Styling gives us the ability to bring the boring markup to life: to really make it shine and stand out!
All styling is rendered using Cascading Style Sheets (CSS). A lot of developers use preprocesses (program that takes one type of data and converts it to another type of data) to make code more readable and life easier. At Adage, we use Syntactically Awesome StyleSheets (SASS), which later is compiled to CSS. Stylesheet gives us the ability to change colors, backgrounds, set widths, and more on our site.
So after all markup is done and all styles are plugged in, we have a website that looks good, but has no interactivity to it!
Splitting front-end development into these three areas is a bit of an oversimplification, but it still provides solid overview of the different tasks that FEDs work on. These three areas also demonstrate areas where the work of front-ends is notably different from our peers on the back-end.
Want to dive deeper into the intersection of back-end development, front-end development, and UX/design?
View the webcast by our Design Director, The New World of User Experience.
View the webinar now!