Sign Up Page - A mini Frontend Project

Question

I have designed a a small frontend project, a sign-up page. It uses HTML, CSS, JavaScript and jQuery. Being a beginner to frontend development, I want to adapt to all the best practices. I am looking forward to all your feedback.

My website has the following features:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Receive an error message when the form is submitted if:
  • Any input field is empty.
  • The email address is not formatted correctly (i.e. a correct email address should have this structure: [email protected]).

CODE :

function isEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}

$("button").on("click", function(){
    if (!$(".box1").val()) {
        $(".box1").val("🚫 Name cannot be empty").show();
        $(".box1").css("color", "red");
    }
    if (!$(".box2").val()) {
        $(".box2").val("🚫 Name cannot be empty").show();
        $(".box2").css("color", "red");
    }
    if (!$(".box3").val()) {
        $(".box3").val("🚫 Email cannot be empty").show();
        $(".box3").css("color", "red");
    }
    var email = $(".box3").val();
    if (!isEmail(email)){
        $(".box3").val("🚫 Looks like this is not an email").show();
        $(".box3").css("color", "red");
    }
    if (!$(".box4").val()) {
        $(".box4").val("🚫 Password cannot be empty").show();
        $(".box4").css("color", "red");
        $(".box4").get(0).type = 'text';
    }
})

body {
    background-image: url(images/bg-intro-desktop.png);
    background-color: hsl(0, 100%, 74%);
    font-family: "Poppins";
}

h1 {
    color: white;
    font-size: 45px;
    line-height: 50px;
}

p {
    color: white;
    font-family: "Poppins";
}

footer {
    bottom: 0%;
    width: 100%;
    margin-top: 10px;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

.parent {
    margin-top: 8%;
    display: flex;
}

.left-div {
    padding: 5% 0% 0% 10%;
    width: 35%;
    text-align: left;
    flex: auto;
}

.right-div {
    flex: auto;
    width: 50%;
}

.offer-div {
    color: white;
    background-color: hsl(248, 32%, 49%);
    text-align: center;
    margin: auto;
    margin-bottom: 20px;
    margin-left: 10%;
    padding: 2%;
    width: 55%;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.5);
    border-radius: 4%;
}

.signup-box {
    background-color: white;
    max-width: 55%;
    height: 75%;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.5);
    border-radius: 4%;
    margin: auto;
    margin-left: 10%;
    padding: 3%;
}

.input-box {
    display: block;
    width: 90%;
    padding: 3%;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 3%;
    border-color: rgb(226 211 211);
    font-family: "Poppins";
    font-weight: bold;
}

input[type=text]:focus {
    outline: 1px solid  hsl(248, 32%, 49%);
}

.btn {
    background-color: hsl(154, 59%, 51%);
    color: white;
    display: block;
    width: 97%;
    padding: 3%;
    border: none;
    border-radius: 3%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: "Poppins";
}

.btn:hover{
    background-color: blue;
    cursor: pointer;
}

#terms {
    font-size: 10px;
    text-align: center;
    color: gray;
}

@media only screen and (max-width: 500px){
    body{
        background-image: url(./images/bg-intro-mobile.png);
    }

    h1{
        font-size: 40px;
        line-height: 40px;
    }

    .parent {
        margin-top: 50px;
        display: block;
    }
    
    .left-div {
        display: block;
        padding: 0%;
        margin: auto;
        text-align: justify;
        width: 80%;
    }
    
    .offer-div {
        margin: auto;
        margin-bottom: 20px;
        margin-left: 25px;
        padding: 2%;
        width: 75%;
    }
    
    .signup-box {
        max-width: 75%;
        height: 75%;
        margin: auto;
        margin-left: 25px;
        padding: 3%;
    }

    .right-div {
        display: block;
        margin: auto;
        margin-left: 5%;
        width: 100%;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Frontend Mentor | Sign Up</title>
  <!--CSS Links-->
  <link rel="stylesheet" href="styles.css">
  <!--Google Fonts-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>

  <main>
    <div class="parent">
      <div class="left-div">
       <h1> Learn to code by watching others </h1>
      
       <p> See how experienced developers solve problems in real-time. Watching scripted tutorials is great, but understanding how developers think is invaluable.</p> 
    
      </div>
  
      <div class="right-div">
        <div class="offer-div">
          <b>Try it free 7 days </b> then $20/mo. thereafter
        </div>
        <div class="signup-box">
          <input class="input-box box1" type="text" placeholder="First Name">
          <input class="input-box box2" type="text" placeholder="Last Name">
          <input class="input-box box3" type="text" placeholder="Email Address">
          <input class="input-box box4" type="password" placeholder="Password">
          <button class="btn">Claim your free trial</button>
          <p id="terms">By clicking the button, you are agreeing to our <span style="color: hsl(0, 100%, 74%) ;">Terms and Services</span></p>
        </div>
      </div>
    </div>

  </main>
  <footer>
    <p class="attribution">
      Challenge by <a href="https://www.frontendmentor.io/profile/chayansurana3" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="https://github.com/chayansurana3" target="_blank">Chayan Surana</a>.
    </p>
  </footer>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="./index.js"></script>
</body>
</html>

Live Site URL

Problem Statement

Solution Repository

Answer 1

First, I want to commend you on your organization! Your repo is clean, your code is well organized, and it's nicely documented.

You did a good job overall reproducing the design. Some of the notable deviations from the design files are:

• The border, border-radius, and border-color on the form inputs. The color should change on hover.
• The box-shadow, border-radius, text case (should be uppercase), and hover color on the form button.
• The font-weight on the terms link.
• The form border-radius.
• The font-size on the main heading should be smaller on mobile. I can see how you might interpret the images to show the alignment as justified, but justify isn't great for readability. I would set it to left alignment on desktop and center on mobile. There's quite a lot of additional spacing around the heading on mobile.
• Ditto on the alignment of the paragraph text.
• The form validation styles. While clever to add the error messages to the input, it doesn't produce a good UX. Users have to select the error message and delete it to add the correct input value. Also, your code could overwrite a partially correct value (as you can see with the email value). Most importantly, the error message in the field would result in the "required" validation returning true when the submit button is clicked again!
• Generally, I would check the spacing, sizing, and line-height for all of the elements closely and make adjustments as needed.

In response to your question about best practices, here's where I'd focus:

1. Revisit your markup and make sure you're using the right element types. For example, make sure that you use a <form> to wrap your inputs instead of a div. Make sure that your markup is valid. Use a validator. And particularly for forms, you want to make sure you're using the right attributes. If you're interviewing, make sure that you can talk effectively about the proper use of each element you chose (e.g., how your choices affect accessibility and SEO, and it's important to be able to explain what is valid according to the specs).
2. Similarly, accessibility is not just a hot topic for employers (who can be liable for millions in regulatory fines and civil suits if their sites are not accessible), it's also the right thing to do. Even though this project isn't a production app, use it to demonstrate your knowledge and skills in this area. If you don't know or have any experience with accessibility, this is a great and safe way to experiment and learn. Start here and make sure to focus on forms, which require particular care.
3. Practice mobile-first. A good rule of thumb is that if you're writing your media-queries using max-width in them, you're doing it wrong 😉. Seriously, this is an important concept to learn and practice, but it'll also make your life easier in the end.
4. They say that naming things is the hardest part about being a developer and I'm sure nothing could be truer. That said, something you could definitely improve is the naming of your classes in your CSS. Don't use names like right-div or left-div. Even in this project, on mobile devices, there is no "right" or "left" column, so your names are rendered meaningless. Also, avoid referring to a class as something "div" (like offer-div) or parent because those too can change as your project evolves. (Oh and by the way, never use a color name in your class names either such as "blue-button").
5. Another way to improve your CSS is to favor classes in your CSS. As a general rule, you should never use an id as a selector (like #terms). If your element has an id for convenience in Javascript or use in accessible design, just add a class for CSS.
6. I thought you did a great job keeping your CSS streamlined. One way you could streamline it even further is with CSS grid. Once you go grid, you'll never look back 😉.
7. Learn to use vanilla JavaScript. jQuery isn't useful in modern web application development so it just signals that you're missing a crucial skill if you use it.

Once again, congrats on your project.

** If you're interested to see how someone else would tackle this challenge, I did one for fun. **