HTML and CSS best practices

[Chandan-devs-tech]

To-Do-list/src/index.html

Lines 16 to 50 in 7109b17

	<section class="mainContainer">
	<!-- Header section -->
	<div class="mainHeading">
	<h1 class="heading">To Do List</h1>
	</div>
	<div class="subContainer">
	<div class="subHeading">
	<p class="subHeadingText">Today's to Do</p>
	<button type="button" class="btn" id="refreshBtn">
	<i class="fas fa-refresh recycle_icon"></i>
	</button>
	</div>
	<!-- Form section -->
	<div class="formHead">
	<div class="form">
	<input
	type="text"
	class="taskInput"
	placeholder="Add to your list..."
	/>
	<button type="button" class="btn" id="addBtn">
	<i class="fa-sharp fa-solid fa-right-to-bracket"></i>
	</button>
	</div>
	</div>
	<!-- To-Do-list section -->
	<div class="toDoList" id="toDoList"></div>
	<!-- Footer section -->
	<div class="footer">
	<button type="button" class="clearList" id="clearBtn">
	Clear All Completed
	</button>
	</div>
	</div>
	</section>

• Here are the suggested changes for using the header, article, and footer tags in three lines each: By using these semantic tags, you can improve the structure and accessibility of your HTML code. Remember to add the opening and closing tags appropriately.

To-Do-list/src/style.css

Lines 84 to 90 in 7109b17

	/* .btn {
	background: transparent;
	border: none;
	cursor: pointer;
	} */

• Try to remove the comment from the It makes the code clean.

To-Do-list/src/style.css

Lines 55 to 62 in 7109b17

	.toDoList {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 15px 10px;
	background-color: #fff1dc;
	}

To-Do-list/src/style.css

Lines 33 to 39 in 7109b17

	.subHeading {
	display: flex;
	justify-content: space-between;
	width: 95%;
	padding: 15px 10px;
	background-color: #fff1dc;
	}

• Instead of writing repeatedly these styles you can create a class with the name space-between and apply it to all of them.