CSS Sunday's

CSS Sunday's

It's been a while since I have written a post here. For the past few days, I have been busy trying to settle in with the new schedules for the day. So to calm my mind I started a new hobby. Fish-keeping.

Waking up everyday and watching the fishes poking their head to get their first meal of the day is fascinating and relaxing to watch. Since we are still on lock-down due to this pandemic everyone is a bit mentally unstable. 

Anyways during these past few weeks, I have been working on a lot of design projects specially designs that involve a lot of CSS. I didn't take the time to learn and understand the CSS because at that time it wasn't that big of a deal. Just using a pre-designed template or a bootstrap theme and be done with it. Nowadays the web apps are getting more and more complex and design systems are getting major refreshes. Knowing vanilla css and how it all works is an awesome skill to have. I always struggled with trying to tweak the CSS. Very recently I came across a framework called tailwindcss. Which provides you with these utility classes which are almost the same naming convention in CSS. Which is a really different way of writing CSS than what I am used to. I immediately got hooked into this framework and tried it in a bunch of projects. At first, it was really intimidating and hard but after a couple of days, I finally got a hang of it. I was still struggling a lot because tailwind expects you to have a lot of CSS knowledge.

To practice and improve myself I started what I am calling CSS Sundays. The idea is for me to sit in my happy corner on a Sunday morning and pick a screenshot of a project from dribble and trying to design the mockup into HTML.

Today was my first day of this challenge and I am absolutely loving it so far. As my first challenge I built a bank landing page called HOLO Bank. It was not perfect but turned out close enough for a first.

Hope you guys are doing well !

Codepen: https://codepen.io/rootfs7/pen/xxVrWQQ

Dribble Shot: https://dribbble.com/shots/14064036-Holo