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

Pure CSS

crooz 95

@bobbycrooz

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


It's a beginner level code, where do i need to improve on?

Community feedback

P

@carlosloureda

Posted

Hi Crooz! Great start with CSS skills.

I am also new at this site. I was checking your solution and if you see the report that is generated by the site you have 4 accesability issues and 2 HTML issues, check the report here

If you want to check your HTML/CSS validation you can use these online resources:

Tips about folder arquitecture

For these projects it might not be needed but it can be a good training to begin to add .js files into a js folder and .css files into a css or styles folder, you can check a nice medium post about this

Icons Nice addition of _fontawesome` icons, I use them a lot, but for this exercise if I recall it well they asked to use only the assets provided, so in this project you have 3 svg icons provided on the images folder. The result is very nice but for the sake of the exercise I would try to use them, remembe: r that in this industry we will be needing to follow orders from product owners or designers.

Css

Checking out your code everything looks great, good work! I only see you used some ids for styling: #share-icon, #share-icon2. It is recommened to use classes over ids

Design

  • I see a little line break between the side image and the content on the right, maybe making the container have the corner borders instead of adding borders to the card2 element would improve that little difference.
  • If you check the original side image you can see that the right margin is cutting the image at the end of the green table, in my solution I moved the image using:

object-fit and object-position

Great overall design and cool code! I am also learning CSS hope these tips help you and don´t hesitate to ask anything!

1

crooz 95

@bobbycrooz

Posted

@carlosloureda Thanks a whole lot I'll fix that ASAP. You have helped a lot

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