Front End (Client Side)

The front end of a web application is the layer where users interact with the website.

The front end of a web application is the layer where users interact with the website. With HTML, a structure is created for how the content on the web page should be seen by the browsers.

Don't think of a mere interface that has to do with the design and layout of websites when you think about the front end. As in this layer, intense personal data processing activities are carried out. In comparison to the backend, the front end stores less sensitive data in your web applications.

Yet, the front end is the main gate to your web applications.

A modern website consists of many different layers, and some of the tools and technologies used include data sharing with third parties.

Implementing third-party libraries on your web application increases your privacy and security risks due to the constant data exchange.

Let's look at an example.

Let's create a registration form for our galactic website, we want our users to register with our website through this form.

Email address and password are all we need right now.

That's why we build a form where we request the email address and the password required for registration.

You can find the sample code snippet below to create a web form with HTML that allows users to enter their email addresses and password.

<form action="action_page.php"
  <div class="container">
    <h1>Register</h1>
    <p>Please fill in this form to create an account.</p>
    <hr>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" id="email" required>
    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
    <hr>
    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
    <button type="submit" class="registerbtn">Register</button>
  </div>
  <div class="container signin">
    <p>Already have an account? <a href="#">Sign in</a>.</p>
  </div>
</form>
>

We should not forget that we have to provide a privacy notice before asking the users for their input.

In addition, it's a best practice to collect as little information as possible at this stage due to both user experience and complying with the data minimization principle.