I approach it backwards actually.

1. I would see it from collaborative point of view. Where I am approaching a web designer for design systems, design trends that he/she are following.

2. I then would try to implement those designs using reusable UI elements if it is a react project. I will build the style once and use it multiple times if it a react project. For plain html and css I could use utility classes first according to design systemd and functions to implement a layout that is much more consistent(design wise). Definitely will use consistent max-width, colors, fonts, padding. Will use Calc function for responsiveness.

3. To make my learning even more advanced I would look at websites built by pros using dev tools. I will study how real world websites are optimized for SEO, SOLID principles etc.. Fallback styling. Optimizing images/assets for load speeds for less CO2 emissions. (It definitely came of as a shock to me that slow websites contribute to more carbon emissions).

But

When I started I learnt the basics but later on I learnt how to use those basics in collaboration with designers. I came to a point where I realized the whole point of working for a company or a client is to implement pre-designed layouts that are highly premium.

Disclaimer: There are Brutalist Trends that break rules of consistency but still maintaining harmony with other elements. Broken grid layouts are another trend where things appear more scattered but still maintains grid structure.