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

Submitted

Single Page Design using Javascript, HTML, CSS/SCSS

@nyrellcl

Desktop design screenshot for the Single-page design portfolio coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Loved completing this project. I had some trouble with the JS image slider. There is a few bugs that needs to fixed with the slider part. Such as:

  • looping back to the first photo when the user reaches the last photo -looping to the last photo if the user clicks past the first photo

Any suggestions and feedback are very much appreciated!

Thank you!

Community feedback

David 8,000

@DavidMorgade

Posted

Hello Nyrell congrats on finishing the challenge!

Regarding your question about the slider, I will suggest you to use a external library that can help you a lot, you don't need to recreate the wheel in this case, you can use swiper.js, and create awesome Sliders in no-time, they have a good documentation and support for every framework (including, ofc, vanilla Javascript).

The other thing that I think is falling a bit on your project is the layout for mobile devices, in your .grid-container for example, you are using a max-width: 414px wich is making your grid overlay from the screen, instead try using 768px wich is the limit for mobile screen sizes.

Hope my feedback helps you, if you have any questions don't hesitate to ask, I will try to help you as much as I can!

Marked as helpful

0

@nyrellcl

Posted

@DavidMorgade

Hello David,

Thanks so much for the suggestions. I will definitely replace the slider code with swiper.js it'll help me practice with using external libraries more.

Ah yes i had some minor issues with the responsive part. using 768px might just do the trick.

Thanks again!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord