how to create a sign up form using HTML and CSS and JS , the sign up form should ask for the following information : 
- first name
- last name
- email adress
- phone number 
- password 
- password confirmation
use form validation to avoid getting false information
Here's an example of how you could create a sign up form using HTML, CSS, and JavaScript with form validation:

```html
<!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>
    <link rel=stylesheet href=style.css>
    <script src=script.js defer><script />
    <title>Sign up</title>
</head>
<body>
    <form id=signup-form>
        <div class=form-group>
          <label for=first-name>First Name:</label>
          <input type=text id=first-name name=first-name required>
        </div>
        <div class=form-group>
          <label for=last-name>Last Name:</label>
          <input type=text id=last-name name=last-name required>
        </div>
        <div class=form-group>
          <label for=email>Email:</label>
          <input type=email id=email name=email required>
        </div>
        <div class=form-group>
          <label for=phone>Phone Number:</label>
          <input type=tel id=phone name=phone required>
        </div>
        <div class=form-group>
          <label for=password>Password:</label>
          <input type=password id=password name=password required>
        </div>
        <div class=form-group>
          <label for=confirm-password>Confirm Password:</label>
          <input type=password id=confirm-password name=confirm-password required>
        </div>
        <button type=submit>Sign Up</button>
      </form>
</body>
</html>
```

```css
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=password] {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  border: 1px solid gray;
}

button[type=submit] {
  padding: 0.5rem 1rem;
  background-color: lightblue;
  color: white;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}
```

```js
const form = document.querySelector(#signup-form);
const passwordInput = document.querySelector(#password);
const confirmPasswordInput = document.querySelector(#confirm-password);

form.addEventListener(submit, (event) => {
    event.preventDefault();

    const inputs = [first-name, last-name, email, phone, password, confirm-password];
    const phoneRegex = new RegExp([0-9][0-9| ]+);
    const values = [];

    for (const input of inputs) {
        const value = form.elements[input].value;

        if (!value) {
            return inputError(input);
        } else {
            form.elements[input].style.border = undefined;
        }

        values.push(value);
    }

    const emailValue = values[inputs.indexOf(email)];
    const phoneValue = values[inputs.indexOf(phone)];
    const passwordValue = values[inputs.indexOf(password)];
    const passwordConfirmValue = values[inputs.indexOf(confirm-password)];

    if (!emailValue.includes(@)) { return inputError(email) }


    if (!phoneRegex.test(phoneValue)) {return inputError(phone)}

    if (passwordValue !== passwordConfirmValue) {
        inputError(password);
        return inputError(confirm-password);
    }


});

function inputError(inputName) {
    form.elements[inputName].style.border = 1px solid red;
}
```