What went wrong in my Hackathon Submission?!

First of all Congratulations to all the winners and runners-up of the Digitial Ocean X Dev Hackathon, but participants no need to get demotivated, be proud of your creation just as I am!😊

What did I build?

I built a personal site for the category Personal Site/Portfolio using TailWind CSS and AOS library for scroll animations.

I then started to plan a prototype of my site using Figma on which I included sections for :-

• Landing
• About Me
• What services I can provide
• Languages and Frameworks I use
• And finally the social handle links.

After giving the basic structure to my site I began customizing the page using TailWind CSS color pallete which was super easy.


At the end what was finally left was making the site responsive. As a matter of fact TailWind CSS provides really easy pseudo classes to add responsive tag just like BootStrap but the difference is that TailWind by default uses Mobile First Breakpoint System.


What I realised while doing this was, I used the CSS property position: absolute; on most of my elements, without even adding the position: relative; to its parent element! Which actually did screw up my layout because each element soon had their own independent position and yeah if you have guessed it right, adding responsiveness was hectic because the positon of each element had to be tweeked. Thats the major error I did! If you look up my code on Github I have it for all my elements in there!


With that, Yes!.. I learnt a lesson and I would pledge to write a cleaner code next time 😁 anddd I just want to share some tips to ease the process of adding responsiveness to your project.

• Use relative units more like rem, vh, em, vw. (Do feel free to correct me if I'm wrong😸)
• Try giving sensible class names to the div elements so that it will be easier to add media queries at last.
• Yeah and dont mess up your code like how I did basically stick to the fundamentals always and understand what your code does; like here as I said, your parent element has to be relative for your child element ot be positioned inside the element with the absolute property.
• Set a meta tag for all your pages.
• And yeah Try learning to use libraries like BootStrap to fasten the process!

Finally do let me know in the comments if any newbies out there found this useful and...I'll be putting up this same article on CodeNewbies.

Till then Adios🖖!
Follow me on Twitter
and Dev