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

only HTML and CSS (flex)

MKGIT• 160

@menokemo

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


just i hope if there is any way to make the code better i will be happy to know it thx Meno Kemo

Community feedback

Account Deleted

Good job! Here are some observations:

  • I would give a min-width to the container
  • You are missing the border-radious to the container
  • Every document must have ONLY one h1 tag, that's why it reports an error
  • After an h1, follow h2, h3 ... Don't skip the h? tag
  • This tool is very good "https://validator.w3.org/#validate_by_input" check that your HTML is ok
  • This checks the specificity of your CSS: "https://jonassebastianohlsson.com/specificity-graph/" have fun coding 😉

Marked as helpful

1

MKGIT• 160

@menokemo

Posted

@Irs-mp Thanks a lot I did change somethings on it . your replay was helpful

0
T
Grace• 29,310

@grace-snow

Posted

Hello

Biggest improvements I can suggest are

  • swap the buttons for anchor tags. Clicking those "learn more" buttons would trigger navigation not do an action so button elements would not be right
  • stop nesting css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors
  • no need to position absolute the section
  • try to get closer to the design with the spacings, border radius and background color
  • instead of setting so many widths in this, consider using max-width. That will let the component grow up to a point and be limited. Then you should only need one media query for the challenge

Good luck

Marked as helpful

0

MKGIT• 160

@menokemo

Posted

@grace-snow thx a lot (swap the buttons for anchor tags) what u mean with that?

(stop nesting css selectors.) that is right im just tray to practice nesting .

( no need to position absolute the section) i did that jut to centering it with transform

(instead of setting so many widths in this, consider using max-width.) that is correct .

0
T
Grace• 29,310

@grace-snow

Posted

@menokemo button elements are for actions like submitting a form, toggling content, opening a modal etc

Anchor tags are for navigation - moving to different page or content on the same screen.

It's essential to use the correct elements

Marked as helpful

0
T
Grace• 29,310

@grace-snow

Posted

@menokemo no need to nest unnecessarily. Practicing bad habits is not what you want to do. There are only certain very specific circumstances where you'd want to nest css selectors.

There's no need to center with the old position absolute transition transform trick these days. That can introduce bugs. Instead use modern techniques like grid or flex to acheive the same thing without bugs and in shorter more performant code

Marked as helpful

0
MKGIT• 160

@menokemo

Posted

if someone can say for me what is my mistake why its not same on the screen shot on the solution :) thx

0
MKGIT• 160

@menokemo

Posted

thax i did also some changes

0
ADN_7• 20

@Hachikoi-the-creator

Posted

Lovely css code, I think you'll love to work whit SASS, the variables are way easier, only search for that, the @use & @forward, and _part files

0

MKGIT• 160

@menokemo

Posted

@Hachikoi-the-creator SASS sound great :) i cant wait to start with it. but I'm still busy with CSS after I finish all the HTML & CSS i will start with javascript after that I will do SASS everybody say that i have to finish javascript before I learn SASS. what do you think?

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