Skip to content
OverviewSolutions
28
Comments
8
P
Alexandru Stefan Gherhes
@AlexandruStefanGherhes

All comments

  • Tushar•20
    @Tushar6396Submitted about 2 years ago

    This was my second challenge. Looking for more. Feel free to check and please provide your valuable feedbacks.

    interactive-rating-challenge

    2
    Alexandru Stefan Gherhes•580
    @AlexandruStefanGherhesPosted about 2 years ago

    Hello @Tushar6396, congrats on finishing the challenge and you did a good job on it. To have your card center exactly in the middle of the screen try adding "height:100vh" to the body and remove the margin-top from the main container.

    For the main container, you could add more padding-top to have a bit more space between the start and the border of the container. You could also increase the size of the buttons to 45 px, like that they would be a little closer together and look much better. For the button, try increasing the padding to 12px and the border radius to 25px with a font size of 16px, and see how it looks.

    Good luck on your future challenges.

    Marked as helpful
    0
  • Carlos•20
    @vinci2fastSubmitted about 2 years ago

    My first time doing a front-end project. Any comments? How is my file structured? I would love to learn about best practices.

    Product Preview Card Component

    1
    Alexandru Stefan Gherhes•580
    @AlexandruStefanGherhesPosted about 2 years ago

    Hello @vinci2fast, you did a really good job on this challenge, especially as your first FE project. For the icon in your button, if the icons provided in the resources don't work as they should, I would recommend getting them from font awesome, as they are almost identical.

    0
  • Alexandru Stefan Gherhes•580
    @AlexandruStefanGherhesPosted about 2 years ago

    The project look really good @polukarp, for the hover animation, normally we apply it on elements that are interactive, having it on "intro__form" looks good but does not have a utility. Having it on a button is normal since it's a call to action. Also adding a little more padding on the form would make it look more spacious. Are you going to take care of the JS part of the challenge as well?

    0
  • Alexandru Stefan Gherhes•580
    @AlexandruStefanGherhesPosted about 2 years ago

    Hello @usamariaz2, good job on completing this challenge. I would recommend taking on the challenge to also have the element responsive on mobile display as well. On the body element, try adding the property "height:100vh" to have your container centered exactly in the middle of the screen.

    Outside of that you really did a great job.

    Marked as helpful
    0
  • Alexandru Stefan Gherhes•580
    @AlexandruStefanGherhesPosted about 2 years ago

    Hello @Mondiserh, congrats on finishing the challenge, but there are a few more things needed to polish this one. I see that you built the challenge on desktop first, which is not really an issue, but if you look at your mobile display the design is not responsive.

    Your main container has a fixed height of 48 rem, which leaves you with the white border at the bottom of the display. I would recommend setting it to 100vh, and inside the main container create another div call container that holds the rest of your elements. For the button, you can remove the border to have a sharper look.

    Marked as helpful
    0
  • Alexandru Stefan Gherhes•580
    @AlexandruStefanGherhesPosted about 2 years ago

    Hello @SEIFSEIF4, what i would recommend is that in the container div to have 2 divs instead of your current 3, the first one just for the 'community' part, and the second one to hold both the 'subscription' and 'why us' parts, like that it would be much easier to divide the space and solve your width issue.

    Marked as helpful
    1
  • Alexandru Stefan Gherhes•580
    @AlexandruStefanGherhesPosted about 2 years ago

    Hello, the way I managed to get the notification alert to decrease 1 by 1 after clicking the unread notifications was by checking how many of the total alerts did not have a class of 'active', and once a notification was clicked and it had the new class of active applied, the unread notifications without the class of active was down by 1 and the total counter for them would decrease by 1.

    Marked as helpful
    1
  • Alexandru Stefan Gherhes•580
    @AlexandruStefanGherhesPosted over 2 years ago

    Everything looks and feels good, pay attention to the button that takes you back to the first screen , it only works if you click on the icon and not on the whole button.

    1