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

Responsive mobile first UI using vanilla CSS (BEM)

@M-AminAlizadeh

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, developers 👋🏼

In this project, I used simple HTML, CSS

I did these things in the project:

  • Use the BEM method for naming my classes in HTML
  • Use CSS variables
  • Use relative units (rem, %) instead of absolute units
  • Use media query to make the component responsive on all devices
  • Use lighthouse, webhint, and stylelint as linters to the project
  • Mobile first

This project is so easy but it's also good for beginners to check that out If you see any issues or have any suggestions to make the code base better don't hesitate and write it down in the comment or click on this Issues Link and make an issue.

I'm looking for your comment

Happy coding

Cheers🎉

Community feedback

Ishmael 330

@Ishmaelsealey

Posted

Hi @M-AminAlizadeh

Well done on completing this challenge! It looks great!

I have a suggestion for you. I noticed that you did not use any headings in the entire document. I think you could place the name of the person in an <h1>.

Using headers provides structure to the page for screen readers to use when navigating a site. It is primarily for accessibility. The name can still be styled as it is, just in an <h1>.

Next, you can also use CSS grid to make the three "statistic" sections at the bottom. It is achieved by using the following code on the profile-card__social-info class

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;

The 1fr means a fraction of the available space and the grid gap is similar to a margin between each grid item!

That being said, utilizing flexbox is a great way of achieving the end result, I just wanted to share another way it could be done! ✌️

Hope you found my suggestions helpful!

Happy Coding ✈️

Marked as helpful

0

@M-AminAlizadeh

Posted

Thank you @Ishmaelsealey for your precious suggestions

0
K.ERD 170

@DrGring

Posted

plz How do fix the background ?

0

@M-AminAlizadeh

Posted

Hi @DrGring

I used background-image and background-position For more info check this link line 27

I hope this was beneficial for you

Happy Coding

Cheers🎉

0
K.ERD 170

@DrGring

Posted

@M-AminAlizadeh I'm not yet top in the calc here is why I have problems but thank you it's helpful

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