Open in app

Sign in

Write

Sign in

Abuzar Nazarov
10 min readJul 4, 2023

Hi, I’m writing this blog to help you start front-end engineering. Besides the blog, I will provide various sources to help you become a front-end engineering hero from scratch. So, embrace the roadmap, explore the resources

Let’s go!

Fundamental knowledge of web

First, it is essential to understand how the web works, including concepts like Dosting, Domains, IP addresses, Protocols, etc. I’ll give you some examples:

  1. HTTP (Hypertext Transfer Protocol): The protocol used for transmitting data between a web browser and a web server. Video explain
  2. URL (Uniform Resource Locator): A string of characters that provides the address of a resource on the web. Video explain
  3. DNS (Domain Name System): The system that translates domain names (e.g., www.example.com) into IP addresses. Video explain
  4. FTP (File Transfer Protocol): A protocol used for transferring files between a client and a server on a computer network, commonly used for website maintenance and file sharing. Video explain
  5. Web Browsers: Software applications that interpret and display web content, allowing users to access websites. Video explain

These resources will give you an understanding of how the web works:

Once you have prepared your fundamental knowledge in these areas, you can proceed. It’s not necessary to have an in-depth understanding of every aspect of the web; rather, focus on gaining a working knowledge of how things function.

Set up your text editor or IDE:

Setting up the right text editor or IDE is essential for front-end development. While I recommend Visual Studio Code (VS Code) for its versatility, extensive extensions, and user-friendly interface, it’s worth exploring other options to find the perfect fit for your workflow and preferences.

Learn HTML and CSS:

HTML (Hypertext Markup Language) is the building block of every web page. It provides the structure and content that makes up the foundation of a website. To begin learning HTML, start with the basic structure of an HTML document, understanding tags, attributes, and the Document Object Model (DOM).

  • You can learn HTML from w3schools or this great youtube video which I prefer for you. Besides that, I can recommend to you take boot watch video and read the w3school HTML course

HTML code looks like this:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>

CSS (Cascading Style Sheets) brings life and visual appeal to web pages. CSS allows you to control the layout, colors, fonts, and overall design of your website. To learn CSS effectively, start by grasping the basic syntax and selectors.

CSS code looks like this:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Learning HTML and CSS is the first step toward becoming a front-end web developer. I’m recommended to you make many website clones to learn HTML & CSS. Stay curious, and soon you’ll be on your way to building beautiful and functional websites.

Learn Javascript:

JavaScript is a powerful programming language that enables dynamic interactions on the web. It allows you to create responsive elements, handle user events, and perform complex computations. Begin learning JavaScript by understanding variables, data types, operators, and control structures.

Javascript code looks like this:

var message = Hello world
console.log(message)

When learning JavaScript, it’s important to avoid rushing into other frameworks without a solid foundation (which will be discussed in this article). Spend much more time with javascript, remember that fundamental knowledge is so important.

Learn Git & GitHub:

Git and GitHub have revolutionized the way developers work together, enabling seamless collaboration, efficient code management, and version control.

Git: The Distributed Version Control System: Git is a free and open-source distributed version control system that allows multiple developers to work on a project simultaneously.

GitHub: Collaboration and Code Hosting Platform: GitHub is a web-based platform built on top of Git that provides a collaborative environment for developers. It offers a range of features to enhance collaboration, code review, and project management.

Congratulations you can now build your website. Apply your newfound knowledge by building small web projects. So, please make sure you are familiar with these concepts before continuing to read.

Package Managers:

Frontend development often involves managing numerous dependencies, libraries, and frameworks to build robust web applications. Manually handling these dependencies can be time-consuming and error-prone. This is where package managers come into play.

npm: The Default Package Manager for Node.js: npm is the default package manager for Node.js and is widely used in the JavaScript ecosystem.

Yarn is a fast, reliable, and secure package manager created by Facebook. It was developed as an alternative to npm (Node Package Manager) to address some of the limitations and performance issues associated with managing packages.

Choosing between npm and Yarn: Both npm and Yarn are powerful tools for managing dependencies in frontend development. The choice between them ultimately depends on your specific needs and preferences. If you’re already using Node.js, npm is readily available and widely supported. On the other hand, if you prioritize speed and deterministic builds, Yarn might be a more suitable option.

Learn CSS Preprocessors ( Sass & PostCSS ):

Frontend styling plays a crucial role in creating visually appealing and engaging web applications. However, writing and managing CSS code can become complex and time-consuming, especially for large-scale projects. These powerful tools can take your front-end styling workflow to the next level.

Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor that extends the capabilities of CSS and introduces features like variables, mixins, nesting, and more.

PostCSS is a JavaScript-based tool that allows you to transform and extend CSS using JavaScript plugins. It operates on the concept of transforming CSS through a series of plugins, enabling developers to leverage cutting-edge CSS features, automate tasks, and optimize their stylesheets.

Sass and PostCSS are powerful tools that elevate your frontend styling workflow, making it more efficient, maintainable, and future-proof.

Frontend & CSS framework:

Frontend development often involves creating user interfaces that are visually appealing, responsive, and user-friendly. To streamline the process and save time, developers rely on UI libraries and frameworks. In this article, we’ll explore two popular frontend UI libraries:

Bootstrap: The Classic Frontend Framework: Bootstrap is a game-changer for front-end development, providing a powerful set of tools, pre-styled components, and responsive design features. Its ease of use and flexibility make it an excellent choice for developers of all skill levels.

Tailwind CSS brings a fresh approach to frontend development, providing a comprehensive set of utility classes that empower developers to rapidly build customizable and consistent user interfaces. By adopting the utility-first approach and leveraging the extensive features of Tailwind CSS, you can streamline your development workflow, save time, and maintain a cohesive design system.

Bootstrap, Tailwind CSS, etc. are powerful frontend UI libraries that offer different approaches to building interfaces. Consider the requirements of your project, your preferred development style, and the design language you want to adopt to choose.

Module Bundlers:

Modern front-end development involves managing complex JavaScript applications with numerous dependencies, modules, and assets. Module bundlers play a crucial role in organizing and optimizing these resources. We’ll explore two popular module bundlers:

Webpack: The Powerful and Versatile Bundler: Webpack is a widely adopted module bundler that offers a range of features to optimize front-end workflows.

Vite: The Next-Generation Bundler for Modern Development: Vite is a newer and rapidly growing front-end build tool that focuses on developer experience and fast development feedback loops.

Webpack and Vite are powerful tools for front-end developers, offering efficient module bundling and asset optimization. Webpack, with its robust feature set and extensive customization options, is a versatile choice suitable for a wide range of projects. On the other hand, Vite’s focus on developer experience, fast development feedback loops, and lightning-fast builds make it an excellent option for modern front-end development.

Learn TypeScript:

TypeScript is a powerful programming language that builds upon JavaScript by adding static typing and advanced tooling capabilities. By catching errors early, improving code quality, and enhancing the development experience, TypeScript allows developers to build scalable, maintainable, and robust applications.

TypeScript code looks like this:

let word: string = "Hello World";
console.log(word)

Learn Javascript Frameworks:

JavaScript frameworks have revolutionized frontend development, providing developers with powerful tools and abstractions to build interactive and dynamic web applications.

React: Declarative and Component-Based UI Development: React, developed by Facebook, is a widely adopted JavaScript framework that emphasizes component-based UI development.

Vue: Approachable and Versatile Framework: Vue.js is a progressive JavaScript framework known for its simplicity, ease of adoption, and versatility. Here’s why Vue.js is popular among developers

Angular: Full-Featured and Opinionated Framework: Angular, developed and maintained by Google, is a comprehensive JavaScript framework for building large-scale, enterprise-grade applications.

Svelte: Next-Generation Framework with Compiler Approach: Svelte is a modern JavaScript framework that takes a different approach to front-end development. It introduces a compiler that transforms declarative code into highly efficient JavaScript.

React, Vue.js, Angular, and Svelte are powerful JavaScript frameworks that cater to different development needs and preferences. I highly recommend learning React due to its extensive community and user-friendly learning curve.

Learn Testing:

Testing helps identify and prevent bugs, errors, and regressions that may arise during development or when making changes to the codebase. To facilitate testing, frontend developers commonly use testing frameworks and libraries such as Jest, Cypress, React Testing Library, and Testing Library. I’m recommending to you learn Jest.js:

Jest: Jest is a popular JavaScript testing framework used for testing code. It provides an easy way to write tests, offers features like mocking and code coverage analysis, and is suitable for unit testing and integration testing.

There’re many tools that simplify testing in front-end development and are widely used in the community.

Learn SSR & SSG:

SSR (Server-side rendering) is a technique used in web development that involves generating the initial HTML of a web page on the server and sending it to the client’s browser. Unlike traditional client-side rendering, where the web page is rendered entirely on the client’s side using JavaScript, SSR allows the server to pre-render the HTML content before it is sent to the user.

  • I’m recommending to you learn Next.js. It is designed to simplify the development of server-rendered React applications by providing a comprehensive set of features and conventions. You can learn Next.js from a Youtube tutorial or Next.js documentation

SSG (Static Site Generators) are tools used in web development to generate static HTML, CSS, and JavaScript files that can be served directly to clients without the need for server-side processing. Unlike dynamic websites that generate HTML content on each request, static sites are pre-generated and can be hosted on simple web servers or content delivery networks (CDNs).

  • I’m recommending to you learn Gatsby.js. It is built on React and follows the Jamstack (JavaScript, APIs, Markup) architecture, which emphasizes performance, scalability, and security. You can learn Gatsby.js from a Youtube tutorial or Gatsby.js documentation

Static Site Generators are ideal for websites with mostly static content and offer benefits such as simplicity, security, and performance. Server-Side Renderers, on the other hand, dynamically generate HTML on the server for each user request.

Conclusion:

Becoming a front-end engineering hero requires continuous learning, practice, and a passion for building exceptional user experiences. Throughout this blog, we have explored various aspects of frontend engineering, ranging from HTML, CSS, and JavaScript to advanced frameworks and libraries. Remember, the journey is ongoing, and staying up to date with the latest trends and technologies will keep you at the forefront of front-end engineering.

HTML
CSS
JavaScript
React
Web
Abuzar Nazarov
Abuzar Nazarov

Written by Abuzar Nazarov

18 Followers
57 Following

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams