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 using HTML and CSS

Naveen CB 420

@Naveen-CB

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 learn new many concept from this project, it may be look like simple but it has definitely some stuff to make it interesting.

Community feedback

Madhavan 340

@madhavan-ts

Posted

@Naveen-CB You have done a great work making the webpage as close as possible to the design. I too have completed this challenge today, I may not be very experienced person to give a comment, But these are the suggestions that came for my code and I saw same issues on your code

The HTML code of yours is clean and simple but there are some suggestions i would like to give

  1. Use <link> tag in your HTML file when using fonts rather than using @import in CSS when you are accessing an external font like Google Fonts. Reason : Performance, Link tags can help your website fonts render faster.
  2. About semantic HTML, you can replace your div.container with main.container because every HTML page must have a main section.
  3. For semantic reasons, and since your page does not have a main title, you can replace the <p> with <h1> on the name of the person.

All these tag changes may have little or no visual impact but they make your HTML code more semantic and improve SEO and optimization as well as the accessibility of your project.

And you can add the box-shadow property to the card to make a popout effect.

Other than these you have done a great job and this was the most accurate implementation i have ever seen which is so clean.

Marked as helpful

1

Naveen CB 420

@Naveen-CB

Posted

@madhavan-ts hello Madhavan, I glad to get feedback from a other frontend developer like you and it is helpful for me, thankyou for your feedback and I wonder are you Tamil because I too, can we connect and learn together?

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