How to Optimize Your Time When Coding Frontend

I recently took some serious time to improve my skills in front-end HTML and CSS.

My previous background as a programmer was mostly on back-end, with 5+ years of experience on COBOL (mainframes are not known by fancy design lol) you may rightly guess front-end wasn't on my strengths. I always had a passion for back-end, to work with databases, SQL, algorithms, transactions... so in my first years, I went deeper on that knowledge. I then overlooked the front-end material for more time than I should and after joining Microverse boot camp to update myself, I got dragged to designing front-end with HTML/CSS and for learning purposes, I was cloning some popular websites.

The first thing I had to learn was how to use semantic HTML with tags like:

• <nav> (that should include the navigation links)
• <section> (that defines a section of a document with related group elements)
• <article> (that define a self-contained content, that should make sense alone even outside the main)
• <aside> (a section that should be related with the main element, but doesn't belong to its flow)
• <time> (to represent a date/time) among others.

Most of the tags have their meaning and shows the browser what to expect inside those tags. It also helps search engines so it could realize what pages to return on different queries. Before knowing this, I used to have just a bunch of <div> tags to style everywhere, making the HTML to be meaningless (What now I know it was a bad practice).

After that, I also took plenty of time designing on the CSS stylesheet. Until I could master positioning and styling and become used with CSS uses of Flexbox, Grid, and Media queries.

I realized how important understanding those concepts were, but often felt I was using a lot of time writing generic classes, condensing CSS classes for just one or two style rules and what was supposed to be an organized stylesheet ends up becoming a bunch of generic codes simple to not be repeating code on my stylesheet afterward.

I was almost thinking that is supposed to be part of the front-end, one boring but necessary part of it.

THE TURNING POINT

But then I got introduced to frameworks for designing the CSS. On the boot camp, they showed us some like Bootstrap and Foundation. Almost all of the generic classes that I lose a lot of time creating was already there and ready to use just adding a predefined class on my HTML! It was not always a bed of roses tho, I started designing using Bootstrap and at the beginning, I was weirdly confused.

I felt I was losing some power for fine adjustments and took some time to understand the mechanics of the positioning with those classes. Also because there were A LOT of classes for mostly everything, I spend a long time moving through Bootstrap documentation searching for classes with the right properties that I wanted.

But once that was overcome, and the most used properties come by heart after some time playing with the framework, I realized how fluid and faster the use of a framework made my work. Not just that, but my stylesheet became cleaner and way easier to read!

If you had the time and will I would recommend the current boot camp I'm doing now Microverse that has a great learning program while you code most all the times with a coding partner, that methodology helped a lot especially by having someone to back you when struggling.

And if you feel you are struggling with some of the same issues I had, I strongly recommend that you use a couple of weeks with full focus on mastering one of those CSS frameworks and see the change by yourself.