Skip to content
Submitted over 1 year ago

Responsive mobile first UI using vanilla CSS (BEM)

Amin Alizadeh•200
@M-AminAlizadeh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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
    @IshmaelsealeyPosted over 1 year ago

    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
    Amin Alizadeh•200
    @M-AminAlizadehPosted over 1 year ago

    Thank you @Ishmaelsealey for your precious suggestions

    0
  • K.ERD•170
    @DrGringPosted over 1 year ago

    plz How do fix the background ?

    0
    Amin Alizadeh•200
    @M-AminAlizadehPosted over 1 year ago

    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
    @DrGringPosted over 1 year ago

    @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

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