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
Log in with GitHub
OverviewSolutions4Comments65

All comments

  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    1
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    0
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

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

    0
  • Augusto• 130

    @Augusto248

    Submitted

    Hello everyone, I would like to know if something is right or something failed, any comment is very helpful, thank you!

    Social proof section

    2

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    1
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    1
  • dan-o• 10

    @dpress13

    Submitted

    This is my first successful dev practice project after teaching myself to code off and on since this past March :) Would love feedback on overall project in addition to responsive functionality between mobile and desktop. Also, any tips for Gulp 4 JS with regard to BrowserSync and the plugins in my gulpfile.js would be awesome. Appreciate any feedback in advance!

    Node / Gulp 4 SASS, PostCSS, Autoprefixer / Bootstrap 4 / BrowserSync

    2

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    0
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ 👍✨😃🎉👏

    1
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    0
  • Elliot Case• 295

    @ElliotCase

    Submitted

    Hi guys here is my attempt at the Todo app project,

    Any feedback is welcome!

    This project definitely took me longer than first expected especially setting up draggable functionality, but after a post on StackOverflow and this super helpful Youtube Video I managed to solve my issues! Let me know anything that I can improve on and ill make sure to apply it to my next projects

    Happy Coding!

    Todo app with theme switcher. HTML CSS Vanilla Javascript

    4

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    1
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    0
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~

    0
  • P
    Dave• 5,245

    @dwhenson

    Submitted

    I wanted to retry this challenge as it was the first one I attempted since really going back to basics. I think I did OK, I did it in less than half the time of my last attempt, and I think the code is DRYer and more organised. I chose this one as I want to watch how Kevin Powell does it on YouTube now...

    Any comments or suggestions are most welcome.

    Social proof - Second attempt

    2

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    1
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    0
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    1
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ~ ✨

    0
  • Vytas• 435

    @vytkuklys

    Submitted

    Suggestions, criticism and observations are more than welcome!

    Basics of grid

    4

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    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 ! ✨

    1
  • Iuri Reis• 10

    @ooiuri

    Submitted

    Hello everyone, I really enjoyed this challenge. I'm with some chrome problems i guess, and some mobile scroll problems when the height gets a little small.

    I'm open to suggestions, thanks in advance! (:

    FAQ accordion card HTML + Css + Js

    1

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    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

    0
  • Sarah Kessler• 50

    @serakay

    Submitted

    I couldn't figure out how to add the .svg files as background without accidentally removing the background colour. As you'll see, I just added the images in html and then fidgeted(?) around with positioning and z-index to achieve a similar look. I looked at the solution code provided and saw that url(img.svg) format was used but when I tried it, it did not work.

    My mobile version might be a bit wonky since I'm still working on responsive design skills.

    Beginner "Barebones" HTML/CSS use

    2

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    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

    0
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    Hi, @Gehad Salem Fekry ~ I have studied your work, and good work on your first challenge. Here are some of my opinions on your work.

    1. Font sizes don't match with design. I think you can revise them easily.

    2. Hope you to add padding to container, so that it won't fit whole screen under small resolution.

    3. You can set width of image as 50% or so, so that it won't take too much space compared to content.

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

    0
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

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

    1. You used div for background images. Using background-image was great, but if you use pseudo elements, that would be better. These are only for decoration.

    2. on Avatar image, you can add .avatar {margin: 0 auto;} instead of left property, so that it won't expand areas beyond container in smaller resolutions.

    Here is my work, you can reference it, though it's not perfect.

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

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

    1
  • Aleksandr Aksenov• 750

    @axevldk

    Posted

    Hi, @WarBaddy ~ I have studied your work, and it's great on desktop. Here are some of my opinions ~

    1. Font sizes are too small compared to design.

    2. You used flex for this situation, but I hope you to try using grid. I think that would be easier to implement such cases.

    3. Also when screen becomes smaller, only card on left and right are getting smaller and this is not good. All 4 cards must have same width always. I think using grid can solve this issue.

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

    0
  • Jane• 1,040

    @janegca

    Submitted

    Used a hover effect with CSS only for the 'active' states. Couldn't figure out how to change the 'icon-share.svg' foreground colour, the background-color property worked ok but the color property had no effect. Any hints as to how it can be changed with CSS??

    Getting the hover to work right took a bit of experimenting, was happy to finally get it working.

    HTML, CSS, no JS, mobile first design

    2

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    Hi, @Jane ~ I have studied your work, and it is really great ~ 👍

    Some of my opinions on your work is to add padding to container, so that it won't kiss out with the border on smaller resolutions. And icon sizes seems too small. Hope it to be a little bigger.

    And about svg color, as long as you have imported it as image, you can't change color of it. If you have imported it as svg tag, it will be able by touching fill property.

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

    0
  • Nicholas• 80

    @nicholask98

    Submitted

    This is my first mobile-first design. This is also my first fully independent project using CSS transitions. I used media queries to adjust the size of the background bubbles to fit to the screen size.

    Any feedback is welcome. I'm particularly interested in any feedback related to how I can reduce redundancy and any extra code. Genuinely very interested in anything you have to say though!

    Thanks!

    Mobile First using CSS Transitions

    3

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    Hi, @Nicholas ~ I have studied your work. Great work on your 2nd challenge. I especially like circle animations you implemented. 👍

    The only I can recommend is trying to use BEM naming on your card element. Everything else is wonderful. Keep going with your clean and good code ~ 😊

    1
  • Nikola• 120

    @nikola719

    Submitted

    I am very proud of being an member of this community and I will do my best to become a top member.

    Profile card component

    3

    Aleksandr Aksenov• 750

    @axevldk

    Posted

    Great work on your first challenge, @Nikola ~

    The only thing I can recommend is to import correct font for bold weight, and to add padding to container, so that it wouldn't get kissed with border under 350px. Others are really great.

    Happy coding ~ ✨

    1