Best matchRelated: array methodsBeginner
Emoji Rating
Transform collections of data into dynamic page content.
Build an emoji rating →Q&A Section
Build a q&a section with HTML, CSS, and JavaScript while practicing click events and DOM selection.
Beginner20–30 minutesHTML5CSS3JavaScript
You’ll practice
Click EventsDOM SelectionCSS Class Toggling
01 — What you’ll build
Q&A Section
This project shows you how HTML, CSS, and JavaScript work together in a q&a section. You’ll connect user interactions to visible changes on the page, then practice click events, DOM selection, and CSS class toggling as you build the complete project from scratch.
02 — Included
- Click-based interactions
- Q&A Section interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You’ll practice
- Handle user clicks
- Select HTML elements from the DOM
- Change styles by updating CSS classes
- Process data with array methods
- Perform calculations with JavaScript
Recommended knowledge: Basic HTML and CSS, JavaScript arrays and array methods, JavaScript variables and number operations, DOM selection and click events.
Complete project files
Build It from the Source Code
This project runs directly in the browser with HTML, CSS, and JavaScript.
- 1Create 3 files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for external assets.
Project structure
q-and-a-section/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Q & A</title>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="questions">
<!-- questions -->
<div class="section-center">
<!-- single question -->
<article class="question">
<!-- question title -->
<div class="question-title">
<p>do you accept all major credit cards?</p>
<button type="button" class="question-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<!-- question text -->
<div class="question-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
dolore illo dolores quia nemo doloribus quaerat, magni numquam
repellat reprehenderit.
</p>
</div>
</article>
<!-- end of single question -->
<!-- single question -->
<article class="question">
<!-- question title -->
<div class="question-title">
<p>do you suppport local farmers?</p>
<button type="button" class="question-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<!-- question text -->
<div class="question-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
dolore illo dolores quia nemo doloribus quaerat, magni numquam
repellat reprehenderit.
</p>
</div>
</article>
<!-- end of single question -->
<!-- single question -->
<article class="question">
<!-- question title -->
<div class="question-title">
<p>do you use organic ingredients?</p>
<!-- button -->
<button type="button" class="question-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<!-- question text -->
<div class="question-text">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, obcaecati. Esse maxime doloremque, libero, repellat quae debitis quis illo ab odio vero iste molestias accusantium expedita dolorum ipsam officia nesciunt?.
</p>
</div>
</article>
<!-- end of single question -->
</section>
</main>
<!-- javascript -->
<script src="app.js"></script>
</body>
</html>
JS Related Projects
Practice with Related Projects
Practice array methods, javaScript calculations, and click events with these related projects.
Best match
Related: JavaScript calculations
Social Media Selector Menu
Turn JavaScript calculations into clear visual results.
Build the selector menu →
Related: click eventsBeginner
Tabs Section
Connect user clicks to visible interface changes.
Build a tabs section →Related: array methodsBest match
Emoji Rating
Transform collections of data into dynamic page content.
Build an emoji ratingRelated: JavaScript calculations
Social Media Selector Menu
Turn JavaScript calculations into clear visual results.
Build the selector menuRelated: click events
Tabs Section
Connect user clicks to visible interface changes.
Build a tabs section