Tushar• 20
@Tushar6396
Submitted
This was my second challenge. Looking for more. Feel free to check and please provide your valuable feedbacks.
P
Alexandru Stefan Gherhes
@AlexandruStefanGherhes
All comments
- P
@AlexandruStefanGherhes
Posted
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
@vinci2fast
Submitted
My first time doing a front-end project. Any comments? How is my file structured? I would love to learn about best practices.
P@AlexandruStefanGherhes
Posted
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 - polukarp• 190
@polukarp
Submitted
I'm unsure about the hover animations. Can you suggest anything I can make better here?
P@AlexandruStefanGherhes
Posted
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 - Usama Riaz• 10
@usamariaz2
Submitted
P@AlexandruStefanGherhes
Posted
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 - Xolani Alfred• 30
@Mondiserh
Submitted
P@AlexandruStefanGherhes
Posted
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 - SEIFELESLLAM SEIF• 110
@SEIFSEIF4
Submitted
Maybe the width is not correct, other than that Any Feedback welcome
P@AlexandruStefanGherhes
Posted
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 - Joshua Steed• 190
@0xjoshva
Submitted
How could I filter through the array to count the amount of times
readMessage === false?P@AlexandruStefanGherhes
Posted
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
