I can’t call myself a frontend developer, but I was there before migrating to the backend. The knowledge has helped me build full-stack sites. Am not perfect, neither are you, we are just trying to come up with the best rules to achieve certain goals. Companies nowadays operate differently. There is always a frontend group/person and the backend team. Each one plays a vital role.

Frontend developer deals with the client’s side, the human interaction computer. They are required to create a good platform that can make customers come back to the site. One must be familiar with HTML, CSS, basic JS, graphics, and photoshop knowledge. Here we discuss some simple mistakes to avoid while learning or working on your site.

Don’t jump to bootstrap before mastering CSS

The main function of bootstrap is to save time creative responsive website for all the screen devices. It makes your work easier. But you must be an expert in using CSS before shifting to bootstrap. If you are a beginner, try building your site without bootstrap to test your knowledge. Uptake online CSS challenges and tricks from experienced people. Then you can shift to bootstrap, material UI, or tailwind CSS.

Avoiding Image optimization

Am not sure, but according to my knowledge, JPEG images load faster than PNG. So try to convert your images into a form that could take a small space. Don’t just add an image to a page without considering its weight. Put in mind the bandwidth and download time that the site takes, it might annoy the client. Even if the image is added to the backend, just find a way to optimize it. Using tools like SVGO and ImageOptim might help you.

Developing site for computers

Be aware that backend developers do have this heck. But for fronted, it has always gotten me annoyed when certain CSS doesn’t perform a certain role. You must be aware that 62% of traffic comes from mobile phones. Since they are of different types, you must test almost 10 versions while designing your site. The designer must consider as many screen sizes as possible, not neglect any. Only a few people will use a computer unless it’s a desktop application. 😂For newbies, kindly press F12 to view different mobile screen sizes.

Leaving behind redundant style

Any repetitive and unimportant styles will increase the loading time. Whether it’s JS or CSS, they will slow down the site. As you grow your skills, experienced techies will teach you how to write shortcodes. Let’s say you want all the headings to be at the center. Just make sure you use an id=” center”, then in your external CSS, write the properties which will cater to all the headings. If you realize a JS code is doing nothing, or you commented earlier, then do away with it.

Not learning flex and Grid box

This goes back to responsiveness. We all struggle with floats and inline CSS. In fact, I almost broke my computer because of float: left. Up to now, I don’t use it(have another trick). If you learn the flex and grid boxes, they are cleaner and easier to implement. Some tutors might discourage you because they make it look harder. Looking out for FlexBox Froggy might be of help.

Giving too much attention to details

Yes, the manager or CEO might want the site to look the way he/she thinks, but when it comes to reality, it can’t be the same on all the devices. That’s now the question of “Is it achievable technically” while following the software engineering process. Don’t get over-pressured, something that might take many months yet unimplemented. Talk to the person I need of that design and let them know how messy it is. Remember, you are a technical person, and you need to communicate what can be achieved.

Create a website for a single browser

When we come here, every experienced developer has had a hard time with this. You can create complex designs with CSS and bootstrap, but when you observe on the firefox browser, it looks bad. The reason is that some features are not compatible with other browsers. Ensure you observe your site after every added feature. Confirm on four popular browsers, i.e. Chrome, Firefox, edge, and opera.

Not observing the SEO

This is what differentiates a good designer from a coder. You have to think about business, how will the site be of impact to clients. If your organization is working on eCommerce, SEO is one of the essential things. Don’t skip minor things like using alt attributes in images. Remember that Google uses SEO to rank various sites. Crawlers have the knowledge of reading the attributes and predicting the importance of images on the site.

Again. Using inappropriate tags might make the browser wonder what is the meaning of the line written. This means an increase in delay time. Before releasing the site, ensure all the links are not broken.

Adding autoplay to videos

It’s okay because a video catches the attention of the user, but how many people get annoyed when loud music starts playing on their ears?. It’s a nuisance. Try to explain this to the managers or whoever told you to autoplay. Even if you add autoplay false, it is wrong. Just to avoid the attribute, browsers have already enhanced the false character.