A requirement for better attention to detail in front-end development
Closer pixel perfect outcomes, and continuing to learn new techniques in HTML / CSS for a better web
I’ve been a front-end developer and designer with a primary focus on HTML/CSS for a little more than a decade. I realize that many focus beyond these initial languages, mostly on Javascript, which makes complete sense. But what I’ve noticed is that most of these developers lack strong, fundamentally essential skills in the initial languages required to build a semantic and beautiful web.
Many times I’ve handed off designs that have been well thought out and pixel perfect, only to get them back and require multiple rounds of revisions to perfect the layout. In these situations, they need my assistance with HTML and CSS, which usually isn’t a problem, but many designers cannot assist with coding the layout.
But where does this problem come from?
Many developers start with HTML and CSS, learn enough to be comfortable, and move on. In many cases, this could be sufficient. Both languages have evolved so fast that it can be intimidating for some to learn more.
What can we do?
We, as developers, should be fluent in HTML and CSS. They’re the initial building blocks of the web, and the outcome of the product depends on it. We won’t even begin to dive into web accessibility right now and how dependent on HTML it is, but if you don’t know, that could be part of the problem.
Design and development require constant learning and upgrading. Otherwise, we get left behind with stale skills. Using tools such as Treehouse and Code Academy a couple of hours a month to brush up on new skills can make a difference in the final product and provide a sense of accomplishment we can be proud of.
We can also work closely with others who have a more robust knowledge of the skills we lack to learn more. Be humble and understand that not everyone can know everything, and it’s the effort we put forward to realize that separates us.
Attention to detail
In some cases, it might not be the lack of skill or knowledge of coding languages that factor in lesser quality results. In some cases, the simple lack of attention to detail can play a significant factor. One of the main things I like to do with designs is open it in a tab in my browser and switch between my dev and the layout to ensure that things are pixel perfect the way they were intended.
I’ve learned over the years that you can’t always be 100% in all situations. But the praise you get for making an effort is certainly worth the extra hassle and time spent to make sure the outcome is as close as possible.
New techniques to learn now
Some new features to pay attention to in the future as a front-end developer could be CSS Grid, variable fonts, text animations, and browser support CSS. You don’t need to master every new feature, but being aware of them is an excellent first step.
- CSS grid
This is a great way to make modular layouts that adapt well to devices with minimal breakpoints (or none at all). CSS grid is awesome when paired with Flexbox, and you won’t even need Bootstrap bloating your product either. - Variable fonts
At the time of writing this, it’s still a pretty new concept. A handful of fonts can be used at the moment, but the idea is a file containing each variation of the font the user could require. - Text animations
Floating, growing, and scrolling fonts are becoming used to increase the interactions and visual interest in websites. Dynamic fonts can help change how users interact and read our content. - Browser support CSS
Using the @support query, you can create browser-specific rules to determine what code is used depending on which browser is supported. Learn more from the Mozilla website.
Conclusion
All-in-all, the web is a pretty big place. It’s rapidly growing with hundreds of thousands of websites every month and new and impressive CSS and HTML features. Developers cannot be expected to know everything, and that’s quite okay. But we can be expected to learn some basics and new features of the core languages that the web is built. I know that sometimes they’re not always fun and exciting for others, but they can help develop a more pleasant web for everyone.
Suppose you want to foster good relationships with your designers and business owners or clients. Some of the skills here are important to improve or grow as a front-end developer.
Did you know if you hold the “clap” button a while, that more people have a chance of seeing this story? — I also have a mailing list if you’d like updates on newly published stories.
