Skip to content
OverviewSolutions
4
Comments
65
Aleksandr Aksenov
@axevldk

All comments

  • Aleksandr Aksenov•750
    @axevldk

    Hi, Raunak Jain ~ I have studied your work, and here are some of my opinions.

    1. You can update background image to match design exactly.

    2. For the social meta data on the card footer, I hope you to use flex rather than table. Flex and grid can replace table in these cases.

    3. Card top image can be set to background image ~

    Here is my solution to this challenge, hope this will help you even a bit, though it's not perfect.

    https://www.frontendmentor.io/solutions/profile-card-component-2n53OyvZb

    Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, Moncles Junior Herisse ~ I have studied your work and here are some of my opinions.

    1. You used image tags for background, but I think that's not good. You can use background image style or pseudo elements in this case.

    2. You can add some padding to your card footer.

    3. Also card top image can be set to background-image.

    Here is link to my solution. Hope this will help you even a bit, though it's not perfect ~

    https://www.frontendmentor.io/solutions/profile-card-component-2n53OyvZb

    Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    hi, @apocc, I have studied your work, and it's really great ~ Nothing to say, but 'Beautiful!' ~ Happy coding ~ 👍

  • Aleksandr Aksenov•750
    @axevldk

    Hi, Augusto ~ I have studied your work and good work so far. Here are some of my opinions.

    1. There is no background on the whole page.

    2. Star rating section is different from design. You can give margin-left to individual sections, or can use grid in this case. Also border radius and background-color is missing.

    3. And I think cards to go mobile mode too early. Hope it to maintain desktop vision until 769px or 993px.

    Hope this will help you even a bit. Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @FahrulZul ~ I have studied your work and it looks really great ~ 👍 Here are some of my opinions.

    1. I hope you to try to use BEM naming convention in this situation. It will help you naming classes.

    2. You can add max-width: 100% to your card component.

    Hope this will help you even a bit. Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @dpress13 ! I have studied your work, and it looks really great. Especially I like the way star review sections move. Other guys used to make it full width on smaller resolution, but you did it in other way. And it looks awesome.

    I am really surprised that this is your first one after teaching yourself. 👍

    Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @Nikola ~ I have studied your work, it really looks great ~ Good usage of BEM naming and also great on using grid.

    Keep it up ~ 👍✨😃🎉👏

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @Stephen Dueñas ~ I have just studied your work, and it really looks great ~ 👍 Here is tiny opinion on your work.

    Cards container is not responsive from 1200px width resolution. I think that's because of fixed width of 275px from grid-template-columns: 1fr repeat(4, [col-start] 275px [col-end]) 1fr;. I am not sure how to change this style on your case, but it should be solved in my thought.

    Hope this will help you even a bit ~ Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @Elliot Case ~ I have studied you work, and I think it's really great ~ 👍 Here are some of my opinions on your work.

    1. I hope you to try to use BEM naming convention for the list objects.

    2. There are some HTML and Accessibility errors as you can see on the report. As you said, they have to be get eliminated ~

    3. I think there was hover effect on list items - circle border gradient. That is also tricky part in this challenge. I hope you to solve that one.

    Anyway, overall looks great ~ Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @Omar Ahmed ~ I have studied your work, and it's really great ~ 👍

    Here are some of my tips.

    1. You can use ul instead of div for .advs elements. I think that would be more appropriate for semantic requirement.

    2. I think if you use BEM naming convention here, it would become greater.

    Hope this will help you even a bit ~ Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @wenadev ~ I have studied your work, and it's really great! 👍

    One thing I want to comment is to add email validation to your great form. That will make your form perfect.

    Anyway, overall looks wonderful! ✨ Happy coding ~

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @dave ! I have studied your work, and it's really great ~ 👍 Clean in code and perfect in using grid.

    I have learnt a lot from your code. Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @wenadev ~ I have studied your work. It's really a great work ~ 👍 Here is my one tiny opinion.

    Hope you to add .slider::before { top: 0; } under 800px resolution, so that background image wouldn't be cut off.

    Keep it up ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @rafet~ I have studied your work, and it's really great ~ 👍 Here are some of tiny opinions on your work.

    1. I hope you to add background-size: 100% to header element so that it fills whole area above 1440px.

    2. Semantically, section elements must have heading tags.

    Everything else is perfect! Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @Muhammad Ahmad Hassan ~ I have studied your work, and good work so far ~ Here are some of my opinions.

    1. You used image elements for background images, but that's not appropriate in such cases. I hope you to use pseudo elements or background-image css properties.

    2. You used main tag for header part, but it would better to wrap all of header and card section inside it. <main> tag is used for wrapping whole content conventionally.

    3. Also you set padding to body element. I suggest you to use max-width: 1440px; to sub container of body.

    Hope my words can help you even a bit. Happy coding ~ ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @Vytautas~ I have studied your work, and it is really great work so far. You used beautiful grid properties.

    The only I want to say is to try BEM naming convention on your card element.

    Happy coding ! ✨

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @Iuri Reis ~ I have studied your work. Really good work! I like animation on box particularly.

    My only opinion for your work is to add max-width: 100% and padding: 0 15px; to your container so that it won't fit whole screen on smaller resolution sizes. Such as 1024px or 375px.

    Here is a link to my work. Hope this can help you even a bit. Happy coding ! ✨

    https://www.frontendmentor.io/solutions/faq-accordion-card-zhPzhVDQM

  • Aleksandr Aksenov•750
    @axevldk

    Hi, @Sarah Kessler ~ Good work so far. Here are my opinions for your question.

    You can use pseudo elements for the background-image. It is much better to use in such cases.

    Here is a link to my solution. Hope this will help you even a bit. Happy coding ~ ✨

    https://www.frontendmentor.io/solutions/profile-card-component-2n53OyvZb