CSS profile card

Hi @mehdilehmamy, Welcome to this amazing community and also congratulation on submitting your first project.👏 As @SzymonRojek and @grace-snow already told you about the way to improve, learn from that, those are the very important and valuable tips that only come with experience. Keep it up👍. Happy Coding😀.

Really great feedback from @SzymonRojek there!

I haven't looked at your code as it sounds like there's a fair bit to do still. So I'll just add that your solution isn't mobile-friendly at the moment. Once you work through the suggestions above, and remove the widths and heights on the card, this will become naturally responsive.

One way to make solutions work on mobile is to use media-queries, but I don't think you'll need them for this challenge. I didn't use them on mine, just set a max width on the card. Have a look through my solution and see if it helps your understanding.

I'd recommend viewing in a browser and opening the devtools to the side. Start from a narrow viewport, hover over elements and see how they're styled. Then make the viewport a bit wider etc. That will really help grow your understanding I think.

Good luck with it all, and just keep on learning :)

**Hi Mehdi, **

Good job, step by step you will be better, just give yourself more time. Two hours for this project - it is not a long time. Don't measure your time restrictively.

I have got a few tips for you, which can help you to rebuild this project:

• as you have mentioned, it is not good practice to use absolute positioning for the whole project here so this is another good reason to learn Flexbox and Grid later on. I can recommend Wes Bos's courses for free:
• flexBox;
• grid;

HTML:

• check your HTML validation report, you can fix accessibility and HTML issues;
• you didn't put alt=" " text to the img tags (this is very important, check the MDN documentation);
• instead of span you can use headings, paragraphs, ul/li - of course, it all depends on the context;
• the box-shadow on the card is too strong;
• background circles do not scale: you can use pseudo-elements (before and after) with background url and transform or background img;
• semantic tags matter: Divs are semantically inert elements — elements that don’t really do or say anything. The term "semantic" refers to the meaning of a word or a thing, so "semantic elements" are elements designed to mark up the structure of a document in a more meaningful way, a way that makes it clear what they're for, what purpose they serve in the document. Please, check the MDN documentation about semantic elements.

CSS:

• don't put the style.css inside of the design directory, leave it outside or create another CSS dir;
• you didn't reset the CSS styles, for example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• check the courses on youtube about position relative and absolute (top, bottom, left, right);
• don't use id's inside of CSS file - generally, it is not a good practice to create selectors by id#, that's a reason why we have got classes (also classes should be more readable and should describe what it relates to);

That's it from me. Hopefully, it will help you.

Keep coding and greetings :D