Skip to content
Submitted 3 months ago

Intro component with sign-up form

Rahma Bahaa•40
@RahmaBahaa
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Rebecca Padgett•2,080
    @bccpadgePosted 3 months ago

    Hi @RahmaBahaa. Congratulations on completing this challenge!!!🎉

    Your project looks good so far! I have a few suggestions to improve your solution.**

    HTML 📃:

    • Every website must have at least one landmark like a <main> tag

    Example:

    <body>
<div class="container"><div>
<main class="container"></main>
</body>

    The difference between the <div> and <main> tag is the <div> is non-semantic element that doesn't explain the content.

    More info📚:

    CSS 🎨:

    • CSS has two layout options: Flexbox and CSS Grid to center your content on the page

    Flexbox

    • You can remove the padding because it is not needed.
    .container{
 display: flex;
 align-items: center; 
 /*padding: 20px 100px; */
 justify-content: center;
 min-height: 100vh;
}

    CSS Grid

    .container{
 display:grid;
 place-content: center;
 min-height: 100vh;
}
    • You can also add max-width instead of the width to .leftSection and .rightSection so the content will not stretch the page.
    • Providing a width gives elements a fixed width that doesn't change

    More info📚:

    Here is my solution to this challenge: Responsive Sign up form using HTML, CSS & JS

    • The reason why the background-color is blue because the title and paragraph meets WCAG AAA accessible text for Color and Contrast fix.

    I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

    Marked as helpful
    0
    Rahma Bahaa•40
    @RahmaBahaaPosted 3 months ago

    @bccpadge Thanks for your tips

    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