Thử thách ôn tập
Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 16 trên 35.
Thử thách
DễBạn được cung cấp một trang HTML về đầu tư và tự do tài chính. Nhiệm vụ của bạn là áp dụng những gì đã học về tạo giao diện theo chủ đề:
- Màu chính và màu phụ
- Định nghĩa
--primary-colorvà--secondary-colortrong:root. - Dùng
--primary-colorlàm màu nền cho phần đầu trang và chân trang, và dùng--secondary-colorlàm màu nền cho phần thân trang.
- Định nghĩa
- Chế độ tối
- Tạo lớp
.dark-modeđể thay đổi màu nền, màu chữ và màu tiêu đề. - Kiểm tra bằng cách thêm thủ công
class="dark-mode"vào<body>.
- Tạo lớp
- Màu nhấn
- Định nghĩa
--accent-colorvà dùng màu này làm màu nền của nút và màu chữ cho liên kết ở chân trang (rgb(249, 168, 37)).
- Định nghĩa
- Kiểu chữ
- Định nghĩa
--h1-sizevà--h2-size, rồi áp dụng cho các tiêu đề.
- Định nghĩa
Mục tiêu: Làm cho trang trông nhất quán, chuyên nghiệp và dễ đọc trong cả giao diện sáng lẫn tối.
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<title>Recap Challenge</title>
<style>
/* Theme variables */
:root {
--text-color: #333333;
--heading-color: #1a3a6d;
--primary-font: "Georgia", serif;
--secondary-font: "Arial", sans-serif;
}
body {
font-family: var(--primary-font);
color: var(--text-color);
margin: 0;
line-height: 1.6;
}
header {
color: white;
text-align: center;
padding: 2rem 1rem;
background-color: #000000;
}
h1 {
font-family: var(--secondary-font);
margin-bottom: 0.5rem;
}
h2 {
font-family: var(--secondary-font);
color: var(--heading-color);
}
main {
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
}
section {
margin-bottom: 2rem;
background: #fff;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
ul li {
margin-bottom: 0.6rem;
}
button {
background-color: #000000;
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #c17900;
}
footer {
text-align: center;
padding: 1rem;
color: white;
background-color: #000000;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>Financial Freedom</h1>
<p>Smart habits for building wealth and living on your own terms.</p>
</header>
<main>
<section>
<h2>What is Financial Freedom?</h2>
<p>Financial freedom means having enough savings, investments, and cash on hand to afford the lifestyle you want, without worrying about money day-to-day.</p>
</section>
<section>
<h2>Timeless Investing Advice</h2>
<ul>
<li>Start early — the power of compounding works best with time.</li>
<li>Live below your means and save consistently.</li>
<li>Diversify your investments to reduce risk.</li>
<li>Stay patient — avoid emotional decisions during market ups and downs.</li>
</ul>
</section>
<section>
<h2>Money Mindset</h2>
<p>Money is less about numbers and more about behavior. Your mindset and habits matter more than chasing the highest returns.</p>
<button>Learn More</button>
</section>
</main>
<footer>
<p>More resources on <a href="#">Investing & Financial Freedom</a></p>
</footer>
</body>
</html>
Tất cả bài học trong Thực hành frontend
3Chủ đề và phong cách trực quan
Tạo chủ đề bằng CSSCơ bản về chế độ sáng và tốiMàu nhấn và làm nổi bậtTạo chủ đề cho kiểu chữThử thách ôn tậpTự luyện tập: Playground Web