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-card-component-main

@Georgeinnerside

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


Looking forward to your corrections, especially on the font family

Community feedback

P

@tarasis

Posted

Congrats on finishing the challenge. Some thoughts/notes:

  1. The Readme-template.md is intended to replace the Readme.md, so you can write up your experience and make notes.
  2. Don't put the css folder in the design folder :)
  3. Either load the fonts in the HTML (using Link) OR do it in the CSS file (using the import)
  4. When loading fonts via HTML, put them BEFORE you link to the CSS file. Otherwise the page will be rendered, and won't be re-rendered when the font's are loaded.
  5. Personally I'd add a colour name to the CSS properties, --primary-color1 doesn't tell me much
  6. You need to specify font-family: 'Lexend Deca', sans-serif; in the appropriate place. For instance either body or container. Then specify Big Shoulders for your h1
  7. Supposedly there should only be 1 H1 per page. So you would be better using h2's here
  8. Try building a mobile version first, then just add the tweaks needed for the desktop version in media queries. For instance have a gander at mine https://github.com/tarasis/tarasis.github.io/blob/main/projects/FrontendMentor/newbie/3-column-preview-card-component/css/style.css
  9. The hollow buttons are only supposed to be for the hover/focused state. Not solid for mobile, and hollow for desktop

Marked as helpful

0

@Georgeinnerside

Posted

@tarasis Thank you so much, will make the changes

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