Skip to content
Submitted 24 days ago

Newsletter Subscription UI with Carousel Slider (Responsive Design)

sass/scss, bem
Nata•170
@kristianusdianata
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

For this challenge, I experimented with using a carousel to navigate between the subscription form and the confirmation page. Overall, I'm quite pleased with the result!

What specific areas of your project would you like help with?

I'd really appreciate any feedback, especially on the fluid layout part. I found it a bit challenging to wrap my head around and get it just right.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Andrey•4,480
    @dar-ju

    Hi, Nata!

    I really like neat works, yours is one of them!

    Your work is great - good responsiveness, BEM without errors, semantics are correct. Carousel is super! The project structure is designed for a medium and large project, this is great for practice.

    I found several points that can be corrected:

    • look at the mobile design, there should be no indents in .carousel, you need to remove 2 lines:
    align-items: center;
padding: 0.5em;
    • there is an error in html:
    <ul class="list mt-6">↩
  <div class="list__container">↩

    ul should not contain a div tag

    • do not use defer and module together, leave one or the other, otherwise it is an error <script defer src="./script/index.js" type="module">
    • camelCase is usually used in naming constants, not snake_case in js
    • there is a problem in the carousel: if you use keyboard navigation, then after the button you go to the confirmation window, this needs to be fixed

    Otherwise everything is great, good luck with your development!

    Marked as helpful
  • John Gorman•150
    @Johng117

    The carousel works nicely. The focus states are nice too.

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