The frontend, also known as the client-side, is the part of a website that users interact with directly. It’s comprised of HTML, CSS, and JavaScript, which work together to create the visual and interactive elements of a webpage.

HTML – Create the structure

HTML, or Hypertext Markup Language, is the foundation of any web page. It’s used to:

• Add content to the webpage
• Controls the layout of the content
• The fundamental building block of any web page

It’s a markup language that uses tags, which are surrounded by angle brackets, to define different elements in the webpage. For instance, the "<h1>" tag defines the main heading of a webpage, while the "<p>" tag defines a paragraph of text.

This is a simple example of the HTML (on the left) and webpage (on the right)

CSS – Stylize the website

CSS, or Cascading Style Sheets, is used to add visual style and layout to a webpage on top of the content set by HTML. It controls the look and feel of a website, including

• Primarily handles the “look and feel” of a web page (i.e. color, sizes, spacing, fonts,…)
• Targets various screen sizes to make web pages responsive

This is how the page might look after applying CSS

Bootstrap is a widely used CSS framework that makes it easy to design responsive websites. With Bootstrap, developers can utilize pre-designed components and classes that help to create a consistent look-and-feel across webpages.

For instance, Bootstrap includes popular components such as navbar, card, modal, and more. By using these components, developers can easily design beautiful and responsive web pages without writing a lot of custom CSS.

JavaScript – Increase interactivity

JavaScript is a powerful programming language that is used to create dynamic and interactive elements on a webpage. It allows the developers to:

• Adds interactivity to a web page
• Handles complex functions and features
• Programmatic code which enhances functionality

For example, when we select the filter (on the left), it will trigger the JavaScript rules to filter the product list (on the right)

A JavaScript framework is a pre-written and standardized library of JavaScript code that allows developers to kickstart their development process and significantly speed up their workflow.

The purpose of a JavaScript framework is to provide a structure, pattern, and reusable codebase that makes the development process more efficient, manageable, and scalable. Some popular frameworks for JavaScript are:

• ReactJS enables developers to create reusable components that can be easily used across multiple pages. Developed by Facebook, React is commonly used for building large web applications, and it is known for its speed and performance.

• Angular is a full-featured framework that includes everything developers need to build complex applications. Developed by Google, Angular is known for its scalability, robustness, and ease of use.

• VueJS is a lightweight and performant framework that is easy to learn and perfect for building small to medium size applications. It is known for its ease of integration and maintainability.

Conclusion

In general, frontend development can be broken down into three key elements that work together seamlessly:

• HTML sets the foundation and structure for everything on the webpage, including text, images, and videos.
• CSS takes care of the visual elements, including fonts, colors, and page layout.
• JavaScript defines how things behave on the frontend, making a webpage interactive, dynamic, and responsive.

The website can work just fine with the HTML only. But mastering the other 2 layers would bring a massive enhancement.

‍