Member-only story
Front-End Web Development Best Practices From My Experience in the Industry
If you’re not following these already, consider starting right away
A few months ago, I started working on a one-year web application development project, and I realized how many developers are not quite aware of the best industrial practices in the front-end development of web apps. Even I was not aware of some practices as well. So I decided to write this article to share what I know and what I have learned about the best practices to follow when developing a web application.
This article will focus on best practices in front-end development because the quality of the front-end code is the most deciding factor of a great web app in my experience, but most developers fail to follow these practices and develop their individual components. If front-end developers do not follow these practices, it will be really difficult to manage the code, there will be no consistency across the design, and the web app’s speed will also have a negative impact. Following these practices will make the code clean and easy to manage, and will increase the productivity of all the developers.
In this article, I am going to talk about best practices to follow when structuring the project’s front-end architecture, writing front-end code, and preparing for deployment. So let’s get started.
Best Practices When Structuring the Front-End
When you get started on the project, the first thing is to structure the front-end code architecture properly. And these are the best practices that each front-end developer of the project needs to follow.
Structuring the style code
Inside the styles folder, create separate folders for configurations, base, layout, components, and pages depending on your web application. Use a separate typography file to define sizes and colors for all the HTML text tags(such as h1,h2,…) used in the web app. Colors should be defined in a variables file and assign colors to variables with suitable names and use those variables when colors need to be applied throughout the website. Include these style files inside the folders created similar to the below image.
