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

Profile card component using Grid and Flexbox

@jaluk1

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


Hello My name is Gerson Jean Pierre and I am from Lima, Peru. I'm interested in web development and I'm starting with the frontend.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Gerson

Well done :D. I like your RWD and the bg-circles (nice solution).

Great, you started to learn web dev. I have checked your HTML and have a few tips for you:

  • What’s about the main tag instead of div wrapper?
  • the tag article may contain the header, even the footer (this is only a proposition);
  • instead of div class="card__position3 you can use ul > li and each lip can contain p or span;
  • in my opinion this div class="card__position1" it is not necessary: instead of it maybe the pseudo-element :before with { position absolute (left, top => 0, width 100%, hight and background url };
  • in this project, you have used so many headings (don't have to for London, or even for numbers in this example) but without the main one h1: just to let you know, you should only use one h1 per page. Using more than one will not result in an error, but using only one is seen as a best practice. It makes logical sense => h1 is the most important heading, and tells you what the purpose of the overall page is.
  • footer hasn't been added.

Why do you have so many unnecessary files/folders inside of this repository, it is better to create one repository dedicated to this project Profile Card - at the moment it is difficult to navigate between different files.

Finally, congrats! ** Please, don't forget to upvote any comments on here that you find helpful. That's it from me. Hopefully, it will help you.

Greetings :D

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