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

3 column preview desktop design

Bhakskar 110

@imbhaskarn

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It is my first challenge here. Please have a look and give your advice.

Community feedback

@pikapikamart

Posted

Hey, a couple of suggestions.

  1. Remove the position: fixed in your main container. By applying this, the essentially cuts it out. You can see the effect when you open up the dev tools at the bottom. A user can't scroll it down. Omitting it will be really good.

  2. Footer. Remove the position: absolute in your footer tag so that it won't go out of the flow because right now, when I inspected it, goes straight in the middle of the screen because the other container as well is in position: fixed.

  3. H1. Multiple usage of H1 in one page is not recommended. We only use one H1 per page. I suggest just making them h2. Semantic markup is essential.

  4. Buttons. It will be better to not add button inside of your a tag. Your a tag itself is already sufficient for that. You could just style the a tag to look like a button so that it will feel more natural and nesting this button inside of it is not a good practice I guess.

  5. Overlapping contents. You can see this as a user resizes the browser. The text not overlaps the supposed anchor tag of learn more. It will be better to add a fixed width or relative width but making sure that overlaps contents will not be present.

  6. No mobile layout. This is very important in responsive web pages. Making it using the media in your css is essential. Try making those and design your layout for mobile

As you had said, it is your first challenge in here. So if you need help regarding those issue, just drop it here okay ^^

0

Bhakskar 110

@imbhaskarn

Posted

@pikamart okay

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