Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Section

@AlexChann

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Tell me what do you think about this project? Your feedback is much appreciated. Feel free to open up an issue if you find anything wrong. Have a good day.

Community feedback

@folathecoder

Posted

Hi Eugene!

Cool attempt, keep it up! I can tell this is your first challenge on frontendmentor.

For easy implementation, always use the index.html file provided in the zip file because it has all the details you need to get started, like:

1.) The text content 2.) The copyright text at the bottom of the page, etc.

It will save you valuable time!

Also try to make sure your implementation closely resembles the mock-up on both desktop and mobile.

When you are done coding, compare your design by placing it side-by-side with the mock-up to know if it is visually === .

On mobile - You need padding on the left and right sides, to prevent the cards from touching both sides of the screen. Also, take note of the font colors, and font sizes.

Your font size across all devices ought to be different. (e.g, Desktop (2 rem), Tablet (1.6 rem), Mobile (1.2 rem)). Your font size must be relative to the screen!

I only viewed it on my phone, so I only have a mobile feedback. 🙂

2

@LKA-LORIS

Posted

Hi Eugene,

It's a good start to your first project :)

I find Folarin Akinloye on all of these proposals.

Beware of the misuse of parental positions. Make sure all your items stay in the flow (not floating).

Remember to open the Code Inspector (F12) to verify that all the elements remain in place and do not come out of their container.

For comparison purposes, below is a link to my design for the same project. I assure you, it is not perfect and can be further optimized.

https://four-card-feature-section-inky.now.sh/

Hope to have helped you :)

Good luck

1

@folathecoder

Posted

@LKA-LORIS 😄 I am just trying to stay consistent with coding. Still learning everyday non-stop!

0

@AlexChann

Posted

@LKA-LORIS May I know what do you mean by items stay in flow?

0

@AlexChann

Posted

@folathecoder Thank you for the feedback.

0

@LKA-LORIS

Posted

elements positioned with 'relative (top: 'number'px etccc) or absolute or float' are no longer part of the vertical rhythm and therefore can potentially overlap at resize. that's what I wanted to explain

when you resize your browser, img elements go out of their containers

0

Please log in to post a comment

Log in with GitHub
Discord logo

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