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

Used Sass

@psiqueiros

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


This is my first project ever, I'm transitioning from tutorials and courses to the real life workflow. I realize my code is messy so be gentle, any feedback is much appreciated.

Community feedback

@luisdevworks

Posted

Hello Fer,

For being your first project, it is very good, I like it.

About your code, I think you should use better names for the classes, it's just my opinion, I suggest you check the BEM Method, in my case, helped me a lot. The BEM Method is in most cases for bigger projects but as I say, helped me to understand better the context of organizing my code between HTML and CSS.

I also noticed that the transition from mobile to desktop the background didn't change..

So I checked your code and you can add this code to fix it

@media only screen and (min-width: 769px) { //You can add this to change the background body { background-image: url(../images/bg-desktop.png); background-color: hsl(229, 57%, 11%); background-size: 100% 50%; background-position: bottom; background-repeat: no-repeat; }

Keep doing good work!

1
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Nice job for your first challenge, Fer Siqueiros!

Like @luisdevworks mentioned, make sure the background changes between the desktop and mobile layouts, and you should be all good to go!

Keep coding (and happy coding, too)!

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