Subhroja Chatterjee

<p>The code can be improved by separating the CSS into an external file, adding labels to input fields, and implementing client-side validation. Additionally, unused resources should be removed, HTTPS should be used instead of HTTP, and naming conventions should be improved.</p>

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="shortcut icon" href="https://facebook.com/favicon.ico" type="image/x-icon">

    <style>
        .center{
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 20%;
        }
        body{
        background-color:#f0f8fb;
        }
        footer{
            color: blue;
        }
        button:hover{
            background-color:#1c930f;

        }
        form{
            text-align: center;

        }
        .page{
            border: 2px solid black;
            margin-left: 350px;
            margin-right: 350px;
            padding: 20px;
        }

        .page> .button:hover{
            background-color:  #1c930f;
        }
    </style>

	<title>Sign up for Facebook | Facebook</title>

</head>

<body>
    <form>

	<div>Facebook Sign up clone</div>
    <header>
        <img src="assets/facebook-logo.png" alt="Fb logo" width="100" height="80" class="center">
    </header>


    
    <h1><b>Create a new account</b></h1>
    <h2>It's quick and easy.</h2><hr><br>
    <div class="page">
    <input type="text" id="name" name="name" placeholder="Name"> &ensp;
    <input type="text" id="surname" name="surname" placeholder="surname">
    <br>
    <pre>

    <input type="email" id="email" name="email" placeholder="email address">
    
    <input type="password" id="password" name="password" minlength="8" placeholder="password">
    </pre>
    <label for="dob">Birthday:</label>
    <input type="date" id="dob" name="dob"><br>
    
    <label>Gender:</label>
    <input type="radio" id="g1" name="gender" value="F">
    <label for="g1">Female</label>
    <input type="radio" id="g2" name="gender" value="M">
    <label for="g1">Male</label>
    <input type="radio" id="g3" name="gender" value="C">
    <label for="g1">Custom</label><br>

    <input type="submit" value="Sign Up" style="background-color: #00a400; color: white;" class="button"><br>
    
    <footer>
    <a href="https://www.facebook.com/login.php/">Already have an account?</a>
    </footer>

</div>
    
</form>

</body>

</html>

A Facebook Sign up page clone project. This will test your HTML, CSS skills. All the designs are available inside the project.

Code Analysis

Submission details

No comments so far

Code Analysis

Analysis data

Submission details

No comments so far