What is Frontend Web Development?

Web Design and Development; much less full stack development has a multitude of facets within the sphere of the Internet. There are static technologies, interactive technologies, databases, networking, APIs, and so much more. But first let us start from the very beginning with the web browser experience; the frontend. The frontend presents the user interface and provides an interactive graphic layer upon which the user can interact with the application. The frontend passes data to the backend so it may be processed and stored for later use. There are a wide variety of frameworks and methodologies which may assist a developer in creating an application to establish both a frontend and a backend to the web application. The frontend may exist on a different server from the backend entirely. The backend may be a grouping of serverless functions which facilitate the business logic of the application. None the less the frontend serves the users; and sends data to the backend to be processed, stored, and used.

Frontend web development is largely the process of developing the client-facing code for a web application or web site. Frontend developers in digital marketing may perform Google Analytics and Tag Manager development tasks. Frontend developers in eCommerce may have similar tasks but focused with ORM and CRM details on interactions with their products. Digital Marketing, ECommerce, Graphic Arts Design, and many other regions constantly intersect with the practice of frontend web design; but in itself frontend web design is a simple art. The art of rendering the content within a webpage to provide a set of functionality to a user. Mainly, displaying information, potentially with interactive elements.

If you are new to web design and development; and are interested in learning things like GenAI website development; or becoming a web designer yourself; there is a lot of ground to cover. HTML, CSS, and JavaScript are the foundations of modern web applications. And then principles of design; such as Google Material Design is applied to developing content so it is usable and effective for the purpose of communicating information. Simply asking an AI to generate a website for you will result in a product you have to maintain. The best way to maintain these products, is to actually understand the code you need to edit. Now if you are using Wix or Squarespace to do codeless websites; this may not be the article for you. However if you are interested in becoming a fullstack developer or a web developer or web designer; this blog post will help share some resources that can help you learn HTML, CSS, and JavaScript. In future posts; we will go into other technologies which are related to these powerful three. Also included in resources are the standards to the languages, developer reference documentation, and tutorials; most of the content is free to access. Only a few of the courses are paid; the rest has been free information since before 2010.

A frontend is a grouping of programming languages which are organized to facilitate communication over the HTTP/S networking protocols. These frontend programming languages are capable of controlling UI logic, and application logic to establish controls for confidentiality, integrity, and availability in the user interface. The languages used in the frontend are also highly standardized and have a great deal of documentation available for free on the internet due to the open-source nature of the technology.

Ultimately HTML presents the content of the HTTP response which was sent from the server you requested at a website like visionlighter.com. The CSS will style and provide design elements to the HTML content which is served in the browser. The HEAD tag will load important information about how to present the web page. The BODY tag will display the content which the user will see once the page loads. Once the HTML and CSS has rendered the page; the JavaScript will start doing most of the heavy lifting in a modern web application. JavaScript is now the powerhouse of most web applications. It also relies on a heavy set of networking capabilities to facilitate communication with various cloud services. The user will interact with UI controls which are controlled by JavaScript, styled with CSS, and designed in HTML. The UI controls may also have state data configured by JavaScript, but it is implementation specific. This is largely how a single web page may function regardless of what APIs are chosen.

Within a web site there is generally a folder called htdocs or www, or wwwroot. Within this shared directory which is used by a web server; the backend will serve the front-end content to be consumed. The backend listens commonly on TCP port 80 for HTTP, and TCP port 443 for HTTPS. Then the website is given a DNS address associated with its IPv4 and IPv6 address in the hosting platform. Once the website has a DNS address it can associate with the FQDN or fully qualified domain name. There a user can find a  website such as “www.visionlighter.com”, and the web browser will find out the IPv4 or IPv6 address associated with the web server hosting the website. The web browser will then initiate a direct connection with the web server  at www.visionlighter.com and begin requesting the web site. If the web page is a static HTML website; the server will find the default, index.html site in the web root folder (www, wwwroot, htdocs, etc.) and then send the contents of that file over the HTTP/S protocol to the web browser. Once the index.html web page is loaded, the browser parses all the links and code within the document. It begins to load CSS scripts, JavaScript tags, and other assets like the favicon and any other coded elements which are present in index.html. Then the browser will parse each URL and fetch the resource from the website in question if permitted (many websites request data from their own platform, but many sites allow direct CDN linking to their served content, production servers host their own). Then after the links are loaded; all the scripts, images, media, and code events are funneled into the document object model and rendered on the page for you to see. Then once the JavaScript finishes all its configuration; the page will be fully loaded.

Frontend web technology ultimately came from the origins of HTML strict and transitional. Eventually CSS came around; then JavaScript. The modern internet started becoming popular in the 1990s, and websites were extremely limited. Later on, browsers started to grow their object models and implementation techniques; the APIs started to bloom. There was a point in web design, between 2005 and 2010; where HTML 4.01 transitional, and CSS2.0 came into existence with the hope of CSS3 coming soon. Later JavaScript ECMAScript 5 came into existence; and companies like Google, GitHub, and Oracle started to majorly participate with organizations like the W3C and the WHATWG to implement a modern web language set. Around this time, AJAX and dynamic HTTP/S queries became extremely popular. But we had the frontend stack, HTML 4, CSS2&3, ECMAScript 5 or JavaScript, and technologies like JSON (JavaScript Object Notation), and XML.

Now adays developers must deal with a large multitude of technologies in the front-end. SVG graphics, image assets, interactive media elements, UI frameworks, design methodologies, and many other forms of code and organization logic. Modern web applications can have dynamic images which are coded in JavaScript and languages like WebGL and Web Assembly to make the web-browser a more immersive experience. However, these topics are a little more advanced than what will be covered in this article. There will be another article coming up soon that will cover various front-end APIs. And we’ll also dip into a bit of web cybersecurity and topics like cookies, XSS, sessions, local storage, and other parts of the web browser that JavaScript has access to.

Now I know what you’re thinking. Hey, you said you would show me frontend web design? Well, I have explained the basics of the concepts of frontend web design. What I would like for you to do now; is take a look at the links below. Each link has a purpose in assisting you learn how to do development with HTML, CSS, and JavaScript. There will also be a little bit of text describing each link.