What is front end web development? Think of a website as a restaurant. When you walk in, there is someone to greet you, take you to your seat, and present you with a menu. That scenario is similar to what the front end of a website is like. The “user side” of a website has everything neatly arranged and is easy to navigate. The back end of web development is more like the kitchen area, where all the functionality takes place. This is where the server, related applications, and database reside. Aside from that, front end developers use different tools and programs like HTML5 and CSS, which are the basic building blocks for a front end developer. Another necessary tool is JavaScript for visual effects and a more user-friendly experience. Each of these website development “languages” perform important roles in the functioning of a website independently from one another (theodinproject.com). In previous generations of the Web, text and simple images were the only things that were supported by the HTML language. Later, web browsers supported images and other content through the use of plugins such as Java and Flash. Then came the latest version of HTML—HTML5, which is backwards compatible with the older standards. This means it is compatible with older software and/or hardware and does not require any additional modification. On the developer end, HTML5 provides a more simple and efficient way to code. On the user end, fewer system resources such as the Central Processing Unit (CPU) are needed since fewer plugins are required. Other advantages of HTML5 over older HTML versions include:

• Audio and video are integrated.
• There is no need for the user to constantly update browsers with newer plugins.
• Because there are fewer plugins, the file sizes are smaller, and web pages download quicker.

While HTML5 deals with the layout of a website, Cascading Style Sheets (CSS) is a separate file used alongside the website’s HTML code by front end developers to configure the appearance of a website. CSS offers developers many advantages over using HTML. A major concern in front end web development is making a website adaptable across many web browsers and devices such as mobile phones and tablets. CSS allows code in HTML to be optimized for different screen sizes, browsers, and devices. Also, instead of going through numerous lines of code in HTML, CSS is a quick way to change fonts, colors, and background styles. Although CSS allows front end developers to manipulate the overall look of a website, it is not to be confused with designing. Front end developers are more of a bridge between designers and back end developers, translating design into code and applying data from the back end into the proper places (theodinproject.com). The foregoing describes how HTML5 and CSS have improved the user experience with layout and content, but what makes a website interactive? JavaScript is the answer. Anytime you see a drop-down list, a form to fill out, or a popup after hovering the mouse over something, JavaScript is the tool behind it all. Without JavaScript, a website based off HTML would be static and boring. In addition to JavaScript, there are other ways to make your website dynamic. CGI scripts, which reside on the server, are tools that serve the same purpose as JavaScript. The advantage of JavaScript over server-based CGI scripts is that there is a reduction in bandwidth between the client and server. The ability to validate forms on the browser without having to wait for a server to process the information first, reduces HTTP traffic. A reduction in traffic between client and server means faster loading webpages and a plus on the server end, especially if a site visited frequently. From a developer’s standpoint, JavaScript is easy to implement because it can reside within the HTML code or as a separate file. Unlike other languages such as PHP, JavaScript can be applied to any web page without the need to change file extensions (iadt.edu). JavaScript is also relatively easy to learn compared to other programming languages. The syntax is easy to understand, almost like English. Most browsers support it, and many websites use it to obtain information from web servers. There are also frameworks, which are libraries that contain pre-written code, to speed up the development process. In other words, frameworks are used by developers to avoid reinventing the wheel for different projects that may require the same lines of code (artandlogic.com). What makes JavaScript so great is also a big flaw. Since JavaScript works in the browser instead of the server, it makes it easier for malicious code to be injected in the client’s computer. So, what can we do to protect ourselves? As users, we should keep browsers updated and frequently check for malware and spyware. For best practices, from the developer’s standpoint, websites should be coded with scripts that are not easily disrupted (iadt.edu). Another disadvantage is that JavaScript does not render content in the same manner across different browsers even though it’s supposed to be a cross-platform tool. Still, JavaScript continues to be widely used and is continuously being upgraded. There is no sign that its going away in the near future. Each tool mentioned in this article performs a vital role in creating a website. A website is structured using HTML5. CSS is used to create the look of a site, and JavaScript allows the developer to make websites dynamic and functional by adding interactive content without sacrificing performance. For beginning developers, there are many online tutorials that teach coding and best practices. With the technical basics of web development covered, it is important to remember who the target audience is and build the site accordingly. A website is a portal for your company and its products or services. It provides crucial information about the company and helps to build the brand. The website developer is a key behind-the-scenes marketing partner helping to ensure that prospective and current customers have the best experience possible while engaging in the company’s brand. How does your firm monitor website user experience? Please share your comments below.

References

“Introduction to the Front End.” theodinproject.com. 12 October 2016. Web. Keefer, Christopher. “The What and Why of JavaScript Frameworks.” artandlogic.com. 29 May 2015. Web. “The Pros and Cons of JavaScript: Is it Still Necessary?” iadt.edu. 21 December 2013. Web.

ABOUT CATMEDIA:

CATMEDIA is an award-winning Inc. 500 company based in Atlanta, Georgia. Founded in 1997, the company specializes in advertising, creative services, media production, program management, training, and human resource management. As a Women Owned Small Business (WOSB), CATMEDIA provides world-class customer service and innovative solutions to government and commercial clients. Current CATMEDIA clients include Centers for Disease Control and Prevention (CDC), Federal Aviation Administration (FAA), Office of Personnel Management (OPM), and the Department of Veterans Affairs (VA).

Stay Connected with CATMEDIA: For more information, please visit CATMEDIA.com Like us on Facebook  Follow us on Twitter