Skip to content
Submitted 4 months ago

Mobile-first solution using CSS Grid and Flexbox

Enriek Naldo Patera•20
@EnriekNP
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

What I am most proud of in this project is that I finally mastered using both Grid and Flexbox to create a layout. Prior to this, I had never used Grid and Flexbox for layout design. Achieving this is truly an exciting milestone for me.

What challenges did you encounter, and how did you overcome them?

One of the challenges I encountered was positioning the modal (newsletter/success) in the center of the layout using Grid. Initially, I struggled to center the modal. However, I discovered that using align-content: center;, justify-content: center;, and justify-items: center; solved the problem and perfectly centered the modal.

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

If possible, please review my CSS. I am a complete beginner when it comes to CSS; previously, I was only taught to use it in a way that worked for desktop layouts without considering responsiveness. Please teach me the best practices in CSS if there are areas that need improvement.

Community feedback

  • Andi Fachriansyah Dwipangga•710
    @fachridpPosted 4 months ago
    1. First of all, you can start from now on compiling your html tags with the semantic HTML format and you can find it on google, on youtube or on MDN Web Docs. Because this is very vital in a web so you have to start from now learning it and implementing it from now on.
    2. You can remove the default padding and margin from the browser by adding styles to *, *::before, *::after of the form padding: 0 and margin: 0.
    3. Give margins for the vertical and horizontal axes so that the newslatter-modal class does not stick to the side of the browser when on mobile screen.
    4. For desktop screen size it looks good, but for mobile size there is still something you have to add which is margin. Add it to your media queries.
    5. Likewise with the success-modal class, provide margins for the vertical and horizontal axes at mobile screen. Add it to your media queries as well.

    But you've done your best, the rest is to stay consistent and keep practicing by doing small challenge projects (don't watch too many tutorials without hands-on experience) first from this website or from other websites or from other sources. Have a nice day mate! 😊

    Marked as helpful
    1
    Enriek Naldo Patera•20
    @EnriekNPPosted 4 months ago

    @fachridp ok thank you for your feedback mate

    0

Please log in to post a comment

Log in with GitHub

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