This challenge required that I use a mobile-first approach to produce a product-preview card for a perfume.
The task
This required that I change my workflow from desktop to mobile-first.
Approach
I approached the task with a Flex layout in mind. This design is similar to previous easier ones where flex was sufficient. However, I came to find that I had to depend on a combination of Flex rows and columns, which got a bit finnicky. I wonder if Grid would have been a better option.
Outcome
The outcome is true to the design and functions well responsively. Although, it took me longer than I hoped. This was mainly due to the media queries that I added for the desktop design, which was structured differently than the mobile. Since I had done mobile first, I didn’t anticipate the amount of restructuring it would take and that slowed me down a bit. But I’d say the outcome itself is successful.
🧩 Live Site - https://i000o.github.io/fem-product-preview-card/
✏️ Frontend Mentor Solution - https://www.frontendmentor.io/solutions/perfume-mobile-first-kfsuDZ_cU-
👾 GitHub Repository - https://github.com/i000o/fem-product-preview-card.git
Feedback
I haven’t received any significant feedback from peers on this project, but I have perused Frontend Mentor to see if/how people used Grid instead of Flex. Some did, but it seems that Flex is an acceptable option to. I think simply, for my workflow, I’d be curious to try as aligning content was finnicky using Flex.
“Good job”
Source: https://www.frontendmentor.io/solutions/perfume-mobile-first-kfsuDZ_cU-
Lessons
’Art direction’- A concept used to swap out loaded images from the browser for efficiency and responsive design. I learnt about the<picture>tag in this instance, as I’d only previous used<img>. This took some research, but was rewarding to understand in the end. I shared my code snippet with other learners who struggling with the same thing on this task.border-bottom-right-radius: 0;- How to target specific corners of a border-radius to create the straight line on one side for the desktop version. Tiny, but cool.<s>- HTML strikethrough. Super easy, super useful. Anything I don’t need to do in CSS, I don’t want to.This was my first time using Floats! - I know it’s not readily done, but I can see how it’d be useful in specific cases.
Extras
text-transform: uppercase;letter-spacing: .5rem;
Take forward…
❕I’d like to get more confident with more complex layouts that include rows/columns in tandem.
❕ Learning about ‘art direction’ was really useful
❕ I found mobile-first difficult but I’ll try it a couple more times before I decide on a personal workflow ☁️