FREDERIK DIAMOND• 70
@FrederikDiamonD
Submitted
I made this using SCSS.
Please come with feedback. There's most likely something I could have done differently :)
Papa Elhadj Abdoulaye NDOYE
@NDOY3M4N
All comments
@NDOY3M4N
Posted
Hi there. Great work on this challenge. I think you used the features (nesting mostly) correctly. Now there are some things in the design that you forgot.
On mobile, because of the
height: 100vhon themainthe content is not showing properly. To fix this issue, you could replace that property withmin-height: 100vhso that themainwill only fill up the minimum space needed.You could also add some vertical padding on mobile.
Happy coding 🎉️
Marked as helpful
1- wyliemickelson• 290
@wyliemickelson
Submitted
@NDOY3M4N
Posted
Wonderful 😍️😍️😍️.
You just need to fix:
- on
1366x750screen, the modal is not showing properly (the close button is off the page), you could reduce the size of the carousel to accommodate for that. - on desktop, when hovering on the links the whole navbar is slightly moving. You could add the border with a transparent color on the default state, when in hover state you just change the color of the border.
- you could also allow the users to open the navbar on mobile
Happy coding 🎉️
0 - on
- Matias• 160
@uspaz
Submitted
Buenas, cualquier comentario que pueda ayudarme a mejorar tanto este, como otros desafíos es bienvenido. Saludos!
@NDOY3M4N
Posted
Nice job on this challenge. On mobile you could replace the
height: 100vhtomin-height: 100vhon thecontainerclass. You could also add some vertical padding on mobile. Other than that I think everything is okay. @Lucas feedback is also great. I use a similar technique when doing this challenge. Happy coding 🎉️Marked as helpful
1 - Michelle• 150
@mcdulingm
Submitted
Trying to do these challenges as quickly as I can when I have time. Any feedback will be much appreciated. :)
@NDOY3M4N
Posted
Hi, great work on this challenge. There are just some things that need fixing like:
- on mobile the padding is not applied to the screen since you set
height: 100vhon the main. You could fix this by just replacing it withmin-height: 100vh. - on mobile you could also increase the padding (like in the design)
- on line 37 (
index.html) there is a typo, the closing tag should beainstead ofbutton.
Happy coding 🎉️
Marked as helpful
1 - on mobile the padding is not applied to the screen since you set
- MJ• 30
@MJ1001
Submitted
Is there anything I can improve upon?
@NDOY3M4N
Posted
You could add a
max-widthto thecontainerclass to sort-of constraint the width on mobile display. Great work1 - imjackfrost1997• 145
@imjackfrost1997
Submitted
Testing my HTML5 CSS3 skills
@NDOY3M4N
Posted
congrats, that's a super nice reproduction of the design. Keep at it!
0 @NDOY3M4N
Submitted
Hi, everyone! I learned a lot with this challenge by using some web API like MutationObserver and modularize my javascript. If you have any feedback (specially on my BEM naming convention or on how to help me minimize my CSS), feel free to let me know.
@NDOY3M4N
Posted
Oups, you're right. I totally forgot to change the hover styles on mobile. Thanks for the feedback
1- Andro87• 1,370
@Andro87
Submitted
Hello! Any feedback is welcome ! ;)
@NDOY3M4N
Posted
Hi @Andro87, nice reproduction of the design. Maybe you can try adding the hover effect on the cards to complete the challenge.
0 - Fatih• 865
@fatihcandev
Submitted
You can see the slider codes in the utils folder in GitHub repo. It is pretty easy with only JS and CSS.
@NDOY3M4N
Posted
Yay @fatihcaen congratulations on your implementation of the slider. It looks super smooth. One thing I might suggest is to add an
overflow: hiddenwhen the mobile navbar is open to prevent vertical scrolling.Happy coding :smile:
Marked as helpful
1 - Alpha Romeo• 10
@N1612N
Submitted
@NDOY3M4N
Posted
Nice reproduction of the design. For the mobile view, you could set the max-width to 500px or 700px instead of 300px to cover the range of most of the mobile devices
0 - Madi• 45
@madizhaksylyk
Submitted
Hi everyone! I worked on atom and the final code looked just fine. But now the last box is not where it should be. I know, my code seems a bit long and messy, so I want your tips.
@NDOY3M4N
Posted
Hi, nice approach with the positioning but there is a lot of repetition in your CSS. Also it seems like you forgot the mobile approach. You could start with the mobile approach and then adapt your code for the desktop view.
1 - AlexanderDev• 295
@Devcrowmaster
Submitted
@NDOY3M4N
Posted
Yo! You did a great job at following the designs in the mobile and desktop layout. Bravo! In your desktop layout, maybe you should set the background-size to cover in desktop and 100% in mobile
1 - pavan-areti• 30
@pavan-areti
Submitted
@NDOY3M4N
Posted
Hello friend. You did a great job in the desktop design. You just forget to add a margin-top at your document. In mobile, the element are not stacked one on another, I think it’s because of the img size (width: 100%). Also in your media query I don’t think you need a grid-template-columns if you have a grid-template-areas defined
1 - Akshay Magrani• 975
@akshaymagrani
Submitted
@NDOY3M4N
Posted
Hello, nice design on desktop. But I think you should rethink your mobile design, specially in the definition of the media-queries. Also there is a lot of repetition in your css. You have to adopt a DRY approach
0 - Akshay Magrani• 975
@akshaymagrani
Submitted
@NDOY3M4N
Posted
Hello, nice design on desktop. But I think you should rethink your mobile design, specially in the definition of the media-queries. Also there is a lot of repetition in your css. You have to adopt a DRY approach
1 - Alicia-M-M• 85
@Alicia-M-M
Submitted
@NDOY3M4N
Posted
Nice design on the desktop layout but for the mobile layout l, maybe you could put the max-width to 700px or 500px
1 - Alicia-M-M• 85
@Alicia-M-M
Submitted
@NDOY3M4N
Posted
Nice design on the desktop layout but for the mobile layout l, maybe you could put the max-width to 700px or 500px
1 - jaseveen• 130
@jaseveen
Submitted
I will be very happy to get some feedback :)
@NDOY3M4N
Posted
Hi there! I think you did great in the desktop layout but in the mobile layout, you forgot to add some margins and padding to your code.
1 - DeweshSoc• 40
@DeweshSoc
Submitted
I am not sure about form validation code that i wrote. Anyone suggestions are appreciated
@NDOY3M4N
Posted
Nice design you got there. But I feel like the logic for the input validation is a bit heavy (overkill). You could've loop for the different input of the form and check if that said input is empty. For the email validation I think it's okay.
1
