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 card using semantic HTML 5 and CSS custom properties

Sopeā€¢ 20

@Mosopeoluwa

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


  • I haven't learnt the use of CSS frameworks, is my design still accurate?
  • I made used the break tag a lot in my html code, I'm quite unsure if that's the best practice considering the type of challenge that was given

Community feedback

Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

Hey good job completing this challenge.

Keep up the good work

I think that your stylesheet is referenced incorrectly since you used absolute referencing which is only limited to your own computer however instead of using absolute referencing you should use relative referencing like this ./styles.css. This will ensure that the styles applied in the stylesheet will be available wherever this challenge is hosted.

In terms of your validation errors simply wrap all your content between main tags.

I hope this helps

Cheers Happy coding šŸ‘

Marked as helpful

1

Sopeā€¢ 20

@Mosopeoluwa

Posted

@TheCoderGuru thank you soooo much for the feedback and encouragement. I've seen the mistake I made in the referencing and corrected it. On the other hand, I don't really understand what you meant by wrapping the content between the main tags

0
Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

@Mosopeoluwa Within your body tag you can have a main tag which encloses all the content like this <body><main></main></body>.

I hope this clarifies what I am referring to

Cheers Happy coding šŸ‘

Marked as helpful

0
Sopeā€¢ 20

@Mosopeoluwa

Posted

@TheCoderGuru yes it clarifies it. Thank you

0
Emmanuel Kumahā€¢ 130

@emmanuelkumah

Posted

Nice try @TheCoderGuru, like has been said, do well to use relative referencing for your Style sheet. Also, avoid using the <br> tags but rather use the padding properties if you want to have some spacing within your content. For instance, padding-right: 20px, can cause some our your content to move to the next line. Lastly, let the class name be descriptive of the task at hand, eg class="cardContainer" . Avoid using names like class="one", class="two".

Keep practising!

Marked as helpful

0

Sopeā€¢ 20

@Mosopeoluwa

Posted

@emmanuelkumah I'm truly grateful for the encouragement and feedback! I have taken note of the right way to name my class selectors and how my content can be properly spaced. Thank you very much

1

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