WHERE CREATIVITY & INNOVATION COLLIDE: A LOOK AT A SITE’S FRONT-END
The front-end developer creates interaction and user experience with scripts embedded in a site’s HTML. Everything a visitor to your site sees, clicks, or uses to input or retrieve information is the work of the front-end developer who creates client-side software that brings the site’s design to life. Scripts are downloaded by the browser, processed, and then run apart from the server.
This takes equal parts technology and vision. Front-end developers are the bridge between the designer and the back-end programmer, which means they have to be both creative and tech-savvy. Wondering how a designer’s final design becomes a living, breathing site? That’s front-end code in action—code that breaks the design down into components, then delivers information and functionality made possible by the back-end developer.
Overall, they’re creating a web-based application that comes as close to a desktop experience as possible. Their focus is on user experience, and the technology they implement will hinge on how well it accomplishes that speed, efficiency, and smooth functionality.
HIRING A FRONT-END DEVELOPER: THE FRONT-END DEVELOPER’S SKILL SET
You may require some crossover knowledge from your front-end developer. If you need interdisciplinary skills—visual design, back-end development, or even database design—look for someone with a working knowledge of languages like SQL, Java, PHP, Ruby, and the .NET framework.
Generally, a front-end web developer’s services include:
- Tailoring user experience
- Production, modification, and maintenance of websites and web application user interfaces
- Creating tools that enhance how users see and interact with your site in any browser
- Implementing responsive design for mobile sites
- Contributing some back-end experience, collaborating on APIs, and more
- Maintaining software workflow management with a project management tool like GitHub and task runners like Grunt and Gulp
- Consulting on SEO best practices
- Testing the site during development for usability and fixing any bugs
Popular client-side languages that front-end developers use regularly and should know include
- HTML5: HTML dictates a site’s organization and content, all interaction aside, so it’s something every front-end developer needs to know. HTML elements can annotate footers, headers, how text displays, how media and images appear, and more.
- CSS3: The latest standard for cascading style sheets (CSS), CSS3 is broken into modules and comprises the code for every graphic element—from backgrounds to font—that make up the look and feel of a website.
- Also helpful: a CSS pre-compiler like Sass or LESS
For more detailed information on which client-side scripts are the best fit for your project, take a look at Client-Side Web Development: How Scripting Languages Work.
Frameworks make quick work of development with libraries of pre-packaged, shareable code and software add-ons. Here are some popular frameworks that are good to know. Your developer may use one or a combination of these when building the front end of your site.
- Foundation: Created by ZURB, this business-minded, responsive front-end framework is used by sites like Facebook, Yahoo!, and eBay.
- Semantic UI: This front-end user interface framework focuses on code readability, clean logic and structure, and has tons of features.
- Pure.css: Created by Yahoo!, this lightweight, small framework is a set of responsive CSS modules to help streamline designing mobile sites. When you don’t need a ton of features layered into your framework, Pure offers just the basics.
- Skeleton.css: Another responsive CSS framework that’s on the rise, Skeleton is what it sounds like: the baseline, no-frills foundation for a responsive site. This framework is a great place to start and doesn’t require any compiling, so it gets sites up and running fast.