Blog preview card

For this challenge, I was asked to create a static blog preview card showcasing some content, a call to action with emphasis on hover and focus states.

The task

I was provided some design images of both desktop and mobile, no Figma file this time, but I did have a style-guide.md file to work with so that I didn’t have to estimate fonts and colours etc.

Approach

I approached this task with more confidence since I knew to keep it simple and use a Flex layout with a flex-direction: column;.

Again, I wrote down every HTML element I could see and some initial styles like background-color.

Outcome

I was really happy with my outcome because I was loyal to the design and had fun finding ways to capture design elements like box-shadow. I was also able to work a lot faster on this one.

🧩 Live Site - https://i000o.github.io/fem-blog-preview/
✏️ Frontend Mentor Solution - https://www.frontendmentor.io/solutions/blog-preview-card-eFv1MOEmq2
👾 GitHub Repository - https://github.com/i000o/fem-blog-preview.git

Feedback

I received positive feedback on this solution namely that it captures the original design accurately. I also discussed some challenges I had with peer-learners.

“Great design, looks very close to the original! The code is well-written and easy to read.”

Lessons

1. focus vs. focus-visible: The difference is still mysterious to me, but I will keep an eye out to pay attention to this in future because it had implications on this solution that I’d like to understand

2. Ordering elements in a stack visually: I wanted to use the order property by making a flex container but this seemed to complicate the problem… Instead I reordered in the HTML, which I didn’t want to do ☹️ What’s the best way to address this?

3. My design-y focus states only work in Safari… not Chrome 🫠 I had fun making them, though

Take forward…

❕I can really loyally pull off a design with CSS. What else can CSS do? Excited to get into animations etc…

❕Pay attention to focus states in the future… I hadn’t really considered these before.

❕I can work a lot faster than I thought. HTML + CSS are coming more naturally to me now…

❕Hover states are fun