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 Project 05

#angular#bootstrap#django#editor-x
faizan 2,420

@afaiz-space

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 did solve the width and height problem in the project. which was a problem for me in every project. thanks, community

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey,

Please don't tag tools that you don't use in your solution, it's very misleading...

Your solution overall seems fine, but there's a few things you could do:

  1. You're overusing <section>. The section named main could be swapped for <main>. All the rest should be just divs (perhaps an <article> for "main-one" if you wanted).

  2. Your font-family seems a bit all over the place. I see 4 different font-families right now. This project is supposed to have only one, if I remember correctly. It's the best to declare the font-family on the <body>, that way it doesn't get messy.

  3. For the background-image, you should leave the alt text empty. For the profile image, it could be the name of the person, so "Victor Crest". Alt-texts are helpful for people who can't see the images, they're meant to provide a text alternative (this explains why you wouldn't want "background-image" as an alt text announced >.<).

I hope this helped a bit. Good luck ^^

Marked as helpful

1

faizan 2,420

@afaiz-space

Posted

@FluffyKas please tell me, what right structure to write HTML code and CSS.

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