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

Fylo data storage component /w CSS

P

@billgeorgop93

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I made this with more advanced CSS by using some properties that I never used them before. I googled a lot and I found the following here: css-tricks.com.

  1. ::after : The ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML.
  2. :nth-child : The :nth-child selector allows you to select one or more elements based on their source order, according to a formula.
  3. em instead of rem : As Jeremy Church said: While em is relative to the font-size of its direct or nearest parent, rem is only relative to the html (root) font-size.
  4. object-fit: The object-fit property defines how an element responds to the height and width of its content box. It’s intended for images, videos and other embeddable media formats in conjunction with the object-position property.

Any feedback for improvement is welcome.

Community feedback

P
Ctrl+FJ 750

@FlorianJourde

Posted

Prety cool ! I was waiting for a kind of API response, but it seems this challenge is static. However, you did a pretty nice job with pseudo elements. Also, responsive is really good !

My only suggestion would be to go by mobile-first workflow, but I guess it's a choice. Your integration seems pretty strong, so keep coding ! It's already great

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