Hello Guys! Welcome to Coding Torque. 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.
<!-- 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.
<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">
<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
<!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
Top comments (0)