If you're just getting into learning about code and the web, you've probably heard the term "front-end" used a lot, especially in relation to jobs. We've covered the difference between the front-end and back-end, but now we're going to focus solely on the front-end and all that's involved, so that when you see a job posting for "front-end developer" or "front-end designer" you'll know what that means. The front-end refers to everything that the user sees and interacts with on a website. Often it's split up into two different sections, the front-end designer and the front-end developer. Usually the big distinction between the two is that a designer doesn't work with code, whereas a developer writes the HTML, CSS and JavaScript for the site.

Designer

The term front-end designer is a little redundant, especially since there's not a back-end designer. The term "web designer" is often interchangeable with front-end designer. A front-end designer is someone who's more involved with the visual design or the site as opposed to how it works. They use design tools like Photoshop, Illustrator, and InDesign to help create wireframes and assets for their sites. People working on the front-end create mockups and develop visual standards. They work on structuring semantic content and site accessibility, as well as working on typography, layout, form design and interactivity. They're also responsible for site imagery, like the look of icons and buttons. Whether or not there's code involved, someone who's working on the front-end should be able to understand, critique, and improve layout with the use of wireframes. Some designers specialize in specific areas, whereas some have a blended skill set in order to work across a broader area. But no matter what their skill set, someone working the front-end of a site should always be thinking about the user and his or her experience, whether or not there's a UX Designer on their team. User Experience should be the focus of all design work. For example, it's not usable to put light gray text on a white background because it's hard to read. Designers always need to be thinking about how the way the specific design elements they've created will effect the user's experience.

Developer

Developers work mostly with code, so their main tool is a text editor. The main languages involved with the front-end are HTML, CSS, and JavaScript. Those three languages are also referred to as "client-side" languages. A front-end developer should be proficient in some mixture of these languages. Front-end developers good understanding of browsers and can perform browser testing, since not every browser will display your site the same way. It's important for usability that older versions of browsers are addressed as well. There are a wide range of tools that exist for front-end developers. Developers are explorers who are always on the lookout for new techniques and to add as many tools as possible to their tool belts. The best developers are constantly writing code and exploring new techniques both in and out of work.

Tools for Developers and Designers

Unless you’re building a site for yourself by yourself you’ll have to communicate with someone about the direction of the project eventually. Having great communication skills and being aware of the work other people on your team are doing can be your greatest assets.

If you’re a front-end developer, that means communicating with both the client, the design team (if it’s separate from the front-end team) and the back-end team. That’s a lot of different people with different jobs who all have a common goal. A great way to learn how to communicate with all the different people involved in web projects is to try and get familiar with the languages and tools they work with on a daily basis.

That doesn’t mean that you need to know how to create a Content Management System using server-side languages like PHP and MySQL, but you should know what server-side languages are and what they do so your communication with your back-end team will be more productive.

Problem-solving is the core skill of every web developer. “Wait a minute!,” you say. “I’m a designer, not a developer!” Even if you think of yourself as more of a designer than a developer,  that’s still a valid statement for you too. Analytic thinking is not only at the core of development, it’s also important to design. When you’re creating a site for a client, you’re solving a problem for them. Whether their old site was outdated, or they need to add new features, you need to find a solution to the problem. Whatever the need, you’re there to also help define the problem as well.

 

Get Started

If you want to start learning some front-end development, and you have a computer with an internet connection, you already have tools you need to be a front-end developer. If you have questions, there are oodles of places for you to find answers. The web community is an open community filled with people who genuinely want to help you. Also, if you have question about something, it’s probably safe to say that someone else has already asked it. You’ll quickly learn that Google and StackOverflow will become your best friends. Use Digital-Tutors and Pluralsight to your advantage as well, and follow along! You’ll learn web design by doing, not just watching.

A great way to practice problem solving is to take a look at some websites that you visit and think about how they could be better. Then starting thinking about the ways that you could implement that design. Practice making design comps in Photoshop or try to recreate the header just with HTML and CSS.

Maybe you think that you really want to just be a designer and only work in Photoshop and Illustrator, but you’ve never even attempted to try to write code. You might surprise yourself buy actually enjoying writing the code that matches your design. If you can be both a front-end designer and developer, so many more doors will open for you.