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

Atom text editor, Chrome's developer tools and Debug CSS

@Enoah35

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have started learning HTML and CSS, and for practice purpose I have challenged this project. I think I managed to get as close as it can be on the design. But if there are any pointers, suggestions on what I should correct, what not to do, anything I am all ears since I wish to improve myself. Took me roughly 6 hours to complete.

Community feedback

@analuzcervantes

Posted

Welcome to the frontendmentor community! 🎉

Your design is very good, but if you allow me I would recommend the following:

  • Notice that your background is in a div tag with the card-layer class, to avoid the white borders, move everything related to the background to the body. So it would cover the whole page.
  • In the card-layer, note that your height has a value of 700px, it would be a better practice to use values 100vh for heights and 100vw for widths, [I leave you more information here](https://css-tricks.com/fun- viewport-units/)

I will leave you some articles that will serve you for this and future challenges:

Be well, keep coding! 💻👾

5

@Enoah35

Posted

@analuzcervantes Hello! Sorry for the delay. I appreciate a lot your feedback. I have been going back to re-visit the HTML and CSS after I have tired my second challenge. There, I learned about vh, Flexbox, Grid and I am planning to re-try this challenge. I will try applying your advice and the new knowledge I got from re-visiting these topics.

Thanks again!

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