Frontend web development - a complete overview Building the Frontend of a Web Application This blog post summarizes the key technologies used in building the frontend of a web application, as explained in a video. We'll explore the core technologies and supporting tools that make up a modern frontend stack. Introduction Every website consists of two main parts: the frontend and the backend . The frontend is the visual part ā what users see and interact with , including images, text, and buttons. The backend manages and stores data , such as an Amazon order history. This post focuses on frontend technologies. Core Frontend Technologies HTML (HyperText Markup Language) : The foundation of web pages. HTML provides the structure and content. For example, Click me adds a button to the page. It defines elements like headings, paragraphs, images, and links. CSS (Cascading Style Sheets) : Used for styling and presentation. CSS enhances the visual appeal by controlling colors, sizes, spacing, and layout. It makes the website look visually appealing and consistent. JavaScript : Adds interactivity. While HTML provides structure and CSS styling, JavaScript makes the website dynamic and interactive. It responds to user actions such as clicks, form submissions, and other events. A key feature is the DOM (Document Object Model) , which allows JavaScript to manipulate the web page's content and structure. Enhancing JavaScript Development JavaScript Frameworks : These simplify and streamline JavaScript development. Popular frameworks include React.js , Angular , and Vue.js . They provide structure, manage updates to the DOM efficiently, and improve code organization, making it easier to build complex interactive web applications. Bundlers : JavaScript projects often involve multiple files. A bundler , such as Webpack , combines these files into a single file for efficient loading in the browser. This improves performance and maintainability. Transpilers : A transpiler , like TypeScript , extends JavaScript's capabilities by adding features not natively supported. It compiles this enhanced JavaScript into standard JavaScript that browsers can understand. Enhancing CSS Development CSS Preprocessors : Similar to JavaScript bundlers and transpilers, CSS preprocessors like Sass provide features not available in standard CSS, such as variables, nesting, and mixins. They also handle bundling multiple CSS files into a single file. They combine the functionalities of a bundler and a transpiler for CSS. CSS Frameworks : Bootstrap is a popular example. These provide pre-built CSS styles and components, saving developers time and effort by offering ready-made solutions for common design elements and layouts. Frontend-Backend Communication XMLHttpRequest, Axios, and Fetch : These tools facilitate communication between the frontend and backend. They allow the frontend to send requests (e.g., an order to Amazon) to the backend server via URLs. The backend then processes the request and sends a response back to the frontend. Summary of Frontend Technologies Technology Description Example HTML Defines the structure and content of a web page. This is a paragraph. CSS Styles the visual presentation of a web page. body { background-color: #f0f0f0; } JavaScript Adds interactivity and dynamic behavior. alert("Hello, world!"); JavaScript Frameworks Provides structure and simplifies development of JavaScript applications. React, Angular, Vue.js Bundlers Combine multiple JavaScript files into a single file for better performance. Webpack Transpilers Add features to JavaScript, then compile to standard JavaScript. TypeScript CSS Preprocessors Combine multiple CSS files and add features to CSS. Sass CSS Frameworks Provide pre-built CSS styles and components. Bootstrap Communication Tools Facilitate communication between frontend and backend. XMLHttpRequest, Axios, Fetch Key Takeaways The frontend of a web application relies heavily on HTML, CSS, and JavaScript. Supporting tools like frameworks, bundlers, and transpilers significantly improve the development process, making it more efficient and manageable. Understanding these technologies is crucial for building modern, interactive web applications.