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
relativefor your child element ot be positioned inside the element with theabsoluteproperty. - 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.
Top comments (2)
rems are ok, but trust me, don't usevhandvw. They will screw up mobile sites big time. Viewport units work weirdly on android chrome because the url bar hides and shows on scroll, causing layout shifts which are very bad for performance and UX.Also,
100vwcauses horizontal scrollbars on desktop browsers if there is vertical overflow. This happens because scrollbars aren't considered part of your website viewport, causing horizontal scrollbars.I strongly suggest using percentages instead for heights and widths.
Best of luck!
Damn thats helpful thanks for sharing this bruh!
Yeah percentages are pretty clean tho