FAQ Page using HTML, CSS & JavaScript
Published: 2022-11-19 06:30:00

Hello Guys! Welcome to [Coding Torque](https://codingtorque.com). In this blog, I'm going to explain to you how to make FAQ Page using HTML, CSS, and JavaScript. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

## **Let's cover HTML Part**
We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the font awesome CDN in our HTML `<head>` tag. fontawesome is a library that is used for icons in a website.

```html
<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
```


Now let's import the fonts using Google Fonts API. Below is the code for `Poppins` Font. Paste the below code in `<head>` tag.

```html
<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&display=swap" rel="stylesheet">
```

```html
<h2>Frequently Asked Questions</h2>
<button class="accordion">What is codingtorque.com?</button>
<div class="panel">
    <p>Coding Torque (codingtorque.com) is a free platform to learn coding for free by making amazing projects. Here
        we share source code of projects that you can copy or keep on secondary screen and type yourself by looking
        into it.</p>
</div>

<button class="accordion">How can I downlaod your app?</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates adipisci deserunt asperiores delectus
        repellat magni!</p>
</div>

<button class="accordion">How can I buy your ebook?</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates adipisci deserunt asperiores delectus
        repellat magni!</p>
</div>
```


## **Here is the final HTML code**

```html
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- 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&display=swap" rel="stylesheet">

    <title>FAQ Page using HTML CSS, and JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <h2>Frequently Asked Questions</h2>
    <button class="accordion">What is codingtorque.com?</button>
    <div class="panel">
        <p>Coding Torque (codingtorque.com) is a free platform to learn coding for free by making amazing projects. Here
            we share source code of projects that you can copy or keep on secondary screen and type yourself by looking
            into it.</p>
    </div>

    <button class="accordion">How can I downlaod your app?</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates adipisci deserunt asperiores delectus
            repellat magni!</p>
    </div>

    <button class="accordion">How can I buy your ebook?</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates adipisci deserunt asperiores delectus
            repellat magni!</p>
    </div>
</body>

</html>
```


### **Output Till Now**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8th3ztco1lcx73210k86.png)

[continue reading](https://www.codingtorque.com/2022/09/faq-page-using-html-css-and-javascript.html)