Submitted 2 months ago

Page with 4 adaptive function cards (HTML, CSS, JS)

Natali 👻 Grimm•1,150

@Grimm-N

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I finally started getting cozy with CSS Grid. I used to be all about Flexbox like it was my safety blanket, but now Grid and I? We’re pretty tight. Less “wait, what?” moments and more “I got this.”

What challenges did you encounter, and how did you overcome them?

So, I’ve been messing around with JavaScript lately, and honestly, it's like giving my site a shot of espresso—it’s all animated and interactive now! No more boring static pages, everything’s moving and grooving, making the whole thing look way more legit.

Oh, and I learned how to throw in modal windows like a pro. Seriously, it’s a game-changer—especially for mobile users. Pop-ups have never been so satisfying.

What specific areas of your project would you like help with?

I’d love some advice on optimizing my code. I'm looking to make it cleaner and faster. If you have any tips for writing concise, efficient code that performs better, I’m all ears! And hey, any other advice is more than welcome, because there’s no such thing as too much improvement!

Community feedback

Steven Stroud•11,910
@StroudyPosted 2 months ago
Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

For future project, You could downloading and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
Marked as helpful
1
MikDra1•6,980
@MikDra1Posted 2 months ago
Nice one 😀

If you are curious how you can do this straight lines on the top of each card here is my tip:

Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉
Marked as helpful
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord