I am very excited about participating Mintbean's Learn-a-bit challenges series. The purpose of Learn-a-bit is about learning one bit of code at a time. In each challenge, I will be building a small project to solidify myself on the fundamentals of web development using HTML, CSS, and JavaScript. Comparing with previous Mintbean's hackathons, these challenges are relaxed and non-competitive, yet are still challenging enough to push me to use all your resources and knowledge to solve each challenge.
Given a HTML starter file with assets (images, colors and fonts) and the design images, the task is to build a webpage with HTML and CSS with responsive layouts for both mobile and desktop. It must be submitted within 48 hours with a live site link and the github repository link.
At first, I thought it was a simple project because I assume it only needs some basic CSS knowledge to complete. However, as I started making progress, I have noticed I have struggled a lot in positioning elements exactly at places I want them to be. I googled and reached out to Mintbean community for some guidance. After I submitted by the deadline, I was not quite satisfied about my mobile media query. I continued getting feedback from my mentor at Mintbean (special thanks to Emsad). Finally, I totally grasped the concept of Flexbox, semantic and mobile first approach. I have learned so much from this challenge alone than any other tutorials I followed along on YouTube. I am looking forward to submit my challenge #2 and get even more better at HTML and CSS.