This is a solution to the Profile card component challenge on Frontend Mentor. Frontend Mentor challenges help us to improve our coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
-
Solution URL: Github solution URL here
-
Live Site URL: live site URL is here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I learned the most important thing during solving challenge is that SASS is more usable and flexible to use instead of simple CSS. We can define varibles and functions I can maintain a proper hierarchy for our peoject. Flexbox makes work easy to design mobile layout and I suggest we always hav to go first for mobile design and then look for dekstop design.
- CSS-Tricks - This helped me for understanding flexbox and it's different properites. I really liked this pattern and will use it going forward.
- Frontend Mentor - @MHassaanButt
- Twitter - @MHassaanButt
I am really thankful to @usamakhangt4 who helped me through out the challenge and teach me SASS in detailed.