Seminggu yang lalu, salah seorang rakan saya, Noah Kleij, menghubungi saya tentang membina tapak web di mana dia boleh berkongsi pengetahuannya tentang kimia dan subjek lain secara percuma. Noah berkelulusan PhD dalam Kimia Am dan Organik dari Universiti Manchester dan ingin menjadi contoh positif kepada dunia. Dia memutuskan untuk mencipta dan menerbitkan kandungan pendidikan di tapak web tanpa sebarang iklan.
Ini adalah peluang yang hebat untuk saya, kerana saya sentiasa ingin mencipta tapak pendidikan tetapi tidak mempunyai kepakaran untuk menjadikannya berbaloi. Saya menyukai ideanya dan segera mula mengusahakannya secara percuma kerana saya ingin menyumbang secara bermakna kepada tujuan murni yang telah dia lakukan.
Pada mulanya, saya mempertimbangkan untuk menggunakan React sebagai rangka kerja tetapi tidak lama kemudian menyedari ia mungkin tidak perlu kerana dia hanya mahukan tapak web asas. Saya bermula dengan konsep dan nama yang mudah, yang saya dapat daripada ChatGPT—Neuron IQ, pilihan yang sesuai.
Untuk rangka kerja, saya memutuskan untuk menggunakan HTML asas, CSS dan JavaScript. Saya membina alatan menggunakan teknologi ini, seperti pembangun profesional. Walaupun saya boleh menggunakan React, bekerja dengan HTML biasa, CSS dan JavaScript membolehkan saya memahami cara penghala dan ciri lain dibuat dari bawah. Menariknya, saya juga tidak menggunakan Node.js, memastikan projek itu ringan dan mudah.
Apa yang paling saya hargai ialah dia memberi saya banyak kebebasan kreatif dalam mereka bentuk reka letak dan gaya tapak. Saya sangat menghargai peluang ini. Walaupun saya bukan pereka UI/UX profesional, saya telah membangunkan tapak web yang mencukupi untuk memahami asas reka bentuk dan tipografi, dan ya, saya memilih, Tema gelap, kerana, saya tidak mahu membuat diri saya rampas.
Banyak cerita belakang, mari terus ke kandungan;
Seperti mana-mana projek yang bagus, kami bermula dengan asas. Saya melancarkan Kod VS dan, menggunakan ! pintasan, dengan cepat menghasilkan boilerplate HTML asas saya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<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:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
Saya mempunyai versi ubah suai tersuai bagi boilerplate ini dengan style.css dan script.js sudah disertakan, menjimatkan usaha saya untuk menambahkannya secara manual.
Saya bermula dengan menetapkan tajuk, yang penting untuk SEO dan cara tapak muncul dalam tab penyemak imbas. Tajuk yang saya selesaikan, dengan bantuan daripada ChatGPT, ialah: "Neuron IQ - Nota dan Jawapan Pendidikan Berkualiti Tinggi."
Seterusnya, saya menumpukan pada pengalaman pengguna, bermula dengan pengepala. Navigasi yang jelas dan mesra pengguna adalah kunci kepada tapak web yang baik—atau sekurang-kurangnya, itulah yang telah saya ajar.
<header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>© 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
Pengaki termasuk beberapa pautan penting yang saya rasa penting untuk tapak.
Tiga jam selepas projek, kami melengkapkan struktur HTML asas halaman. Langkah seterusnya adalah untuk menggayakan halaman, menambah fail skrip dan mengisinya dengan kandungan.
Saya bermula dengan menyediakan penggayaan asas untuk halaman. Saya sentiasa bermula dengan badan untuk mewujudkan rupa dan rasa keseluruhan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<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:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
Di sini, saya menetapkan fon kepada 'Poppins,' mengalih keluar jidar lalai dan pelapik, melaraskan ketinggian garisan untuk kebolehbacaan, menetapkan warna teks kepada kelabu terang dan menggunakan latar belakang gelap. Saya memilih tema gelap untuk memastikan tiada siapa yang mendapat sawan dan juga kerana ia kelihatan lebih sejuk, terutamanya pada tapak web khusus untuk pembelajaran dan STEM.
Seterusnya, saya beralih kepada menggayakan pengepala. Tajuk yang baik boleh membuat atau memecahkan kesan pertama.
<header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>© 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
Saya menambah latar belakang kelabu gelap, padding, bayang halus dan menetapkan kedudukannya kepada melekit, untuk memastikan bar navigasi sentiasa kelihatan di bahagian atas semasa pengguna menatal. Ini memberikan pengalaman navigasi berterusan, seperti bar navigasi mengikuti anda.
Kini, saya menggayakan bar navigasi itu sendiri:
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
Ini menggunakan flexbox untuk menjajarkan logo ke kiri dan pautan navigasi ke kanan. Saya juga menambah lebar maks untuk responsif dan pemusatan, memastikan ia tidak meregang terlalu banyak pada skrin besar.
Untuk logo, saya menggunakan warna fon unik untuk pengecaman jenama:
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
Dan pautan navigasi:
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
Gayanya standard dan bersih, tetapi saya sentiasa menyasarkan kesederhanaan daripada menggunakan reka bentuk yang terlalu kompleks. Saya mengalih keluar penggayaan senarai lalai, menggunakan flexbox untuk memaparkan pautan secara mendatar, menambah jarak antara setiap pautan dan kesan tuding yang bagus.
Untuk jarak yang konsisten di seluruh tapak, saya menggayakan bahagian:
.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
Ini memberikan semua bahagian lebar maks, jidar dan penjajaran teks yang sama.
Bergerak ke bahagian wira, saya mahukan elemen visual yang menarik untuk menarik perhatian:
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
color: #e0e0e0;
transition: color 0.3s;
}
nav ul li a:hover {
color: #64b5f6;
}
Saya menggunakan kecerunan linear untuk latar belakang, yang memberikan kedalaman dan rasa moden serta menambah padding untuk jarak yang lebih baik.
section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
Ini menggayakan kandungan teks wira, memastikan ia tidak tersebar terlalu banyak, memusatkannya secara mendatar dan memberikan kesan peralihan yang lancar apabila bahagian wira dimuatkan.
Gaya tajuk dan perenggan adalah ringkas dan standard:
.hero {
background: linear-gradient(135deg, #2c3e50, #1a237e);
padding: 80px 20px;
color: #e0e0e0;
}
Akhir sekali, butang:
.hero-content {
max-width: 700px;
margin: 0 auto;
opacity: 0; /* Start hidden */
transform: translateY(20px); /* Slight move down */
transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content {
opacity: 1;
transform: translateY(0); /* Move to original postition */
}
.hero-content h1, .hero-content p{
opacity:0;
transform: translateY(-20px);
transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content h1, .hero.loaded .hero-content p{
opacity: 1;
transform: translateY(0); /* Move to original postition */
}
.hero-content .btn{
opacity:0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease; /* Added transition */
}
.hero.loaded .hero-content .btn{
opacity: 1;
transform: translateY(0); /* Move to original postition */
}
Ini menjadikan butang kelihatan menarik dan interaktif, dengan latar belakang berubah pada tuding.
Sekarang, saya perlu menggayakan bahagian intro.
.hero h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 25px;
}
Ini mencipta grid responsif untuk bahagian intro menggunakan grid untuk menjajarkannya bersebelahan dan menyediakan animasi pudar masuk yang halus untuk setiap kad pengenalan.
Untuk bahagian kategori:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<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:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
Ini mencipta satu lagi grid responsif, memastikan subjek dipaparkan dalam cara yang teratur dengan animasi pudar-masuk yang halus. Saya menggunakan flexbox untuk menjajarkan imej dan teks, menambah kesan pelapik dan jarak serta tuding.
Dan sekarang untuk bahagian testimoni, karusel.
<header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>© 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
Ini ialah css standard untuk karusel testimoni, dengan kesan peralihan dan skala untuk daya tarikan visual.
Saya kini menggayakan bahagian sumber terkini.
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
Di sini, saya melaksanakan satu lagi grid responsif, menggayakan kad, menambah kesan tuding dan menyertakan animasi pudar masuk untuk menghidupkan kad ini.
Sekarang, untuk bahagian seruan tindak, CTA:
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
Ini ialah bahagian yang ringkas dan berbeza untuk pengguna lebih terlibat dengan tapak.
Untuk melengkapkan penggayaan, saya memfokuskan pada pengaki:
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
Ini menggayakan pengaki, termasuk senarai pautan dan menetapkan kesan tuding.
Seterusnya, saya menambah reka bentuk responsif menggunakan pertanyaan media:
.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
Ini memastikan tapak kelihatan baik pada peranti yang lebih kecil, melaraskan navigasi dan reka letak grid.
Akhir sekali, saya menambah penggayaan untuk subjek dan tentang halaman, mengekalkannya seminimum mungkin, kerana objektif laman web ini adalah untuk mempromosikan pengetahuan Nuh. Jadi, reka bentuk disimpan seminimum mungkin.
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
color: #e0e0e0;
transition: color 0.3s;
}
nav ul li a:hover {
color: #64b5f6;
}
Gaya ini mengikut tema yang sama, mencipta rupa yang konsisten merentas semua halaman, dengan perubahan kecil untuk mencerminkan elemen halaman tertentu.
Dan itu melengkapkan penggayaan untuk Neuron IQ, mengambil masa kira-kira enam jam untuk mendapatkan semua yang saya inginkan. Kini, tiba masanya untuk menyelami bahagian terakhir teka-teki: JavaScript.
Sebelum berpindah ke JS, mari lihat rupa laman web kami sekarang:
Atau, jika anda ingin melihat pratonton langsung, ia di sini: NeuronIQ
Bahagian ini, saya harus jujur, menguji kesabaran saya sedikit. Maksud saya, saya tahu ia bukan jalan kek, tetapi masih…
Saya bermula dengan matlamat untuk menjadikan tapak web berasa hidup, bukan hanya halaman statik. Saya bermula dengan menyediakan animasi bahagian wira:
section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
Ini adalah mudah—apabila DOM dimuatkan sepenuhnya, saya menambah kelas yang mencetuskan animasi untuk bahagian wira dan ia bernyawa dengan lancar, seperti yang dirancang.
Seterusnya, saya menyasarkan untuk menambah animasi apabila bahagian menatal ke dalam port pandangan. Untuk ini, saya menggunakan IntersectionObserver API. Bahagian ini lebih mencabar sedikit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
<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:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="script.js" defer></script>
</head>
<body>
</body>
</html>
Kod ini menyediakan pemerhati untuk elemen div .intro-grid. Apabila ia kelihatan, ia menambahkan kelas fade-in, mencetuskan animasi, dan kemudian mengalih keluar pemerhati kerana ia tidak diperlukan lagi.
Saya melakukan perkara yang sama untuk bahagian kategori:
<header>
<nav>
<div>
<p>I used a custom boilerplate for the navigation, which automatically includes these elements. I quickly updated the addresses, except for the contact page, as we were still undecided about its content and structure. For now, I added links to the homepage, subjects page, and about page. Most of these are placeholders, except for the homepage, which is currently my main focus.</p>
<p>I wanted to create a striking visual section to immediately engage visitors, so I designed a hero section with a clear and impactful message:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>The <h1> tag presents a strong and immediate value proposition. A <p> tag provides a concise explanation of what Neuron IQ offers. I included a button labeled "Explore Our Resources" to encourage user interaction and guide them to the next step.
<p>And, for the Hero, I specifically wanted to address the user concerns, specifically, why they should choose NeuronIQ and not something like study.com</p>
<h2>
Hour 2
</h2>
<p>Time flies quickly, but I’ve made some progress on the site. Next, I focused on creating a visually appealing section for subjects. I initially stumbled a bit but eventually returned to basics, opting for a simple and functional layout that works:<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<p>I chose a grid layout instead of a traditional list because it’s clean, standard, and allows users to quickly find the subjects they’re interested in. Plus, I was inspired by how platforms like Udemy organize their categories—it’s intuitive and visually engaging. </p>
<p>Initially, I considered a more playful design: </p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" alt="I Built the ULTIMATE Educational Website from Scratch — Day 1" /> </p>
<p>However, I realized the content Noah would be adding is advanced, and that design felt too simplistic—more suited for kids than for a serious educational platform. This led me to pivot to a more professional and mature look. </p>
<p>And, spent about 45 minutes in this.</p>
<p>Then, I wanted to add a social proof, like a testimonial section. I quickly added it, took about 20 minutes more.<br>
</p>
<pre class="brush:php;toolbar:false"><section>
<h2>
Hour 3
</h2>
<p>Now, with basics done, I want a thing to present over there, a section showing the most recent resources:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>Yeah, this section is intentionally basic—I didn’t want anything more from it. The content should speak for itself, not the design. Of course, I want the website to look modern and not like something from the '90s, but for now, I prefer a clean, simple design rather than going all-in on a flashy Web 3.0 aesthetic. That’s just my style at the moment.</p>
<p>After 2 hours and 40 minutes of work, we had almost everything done. I then added a call-to-action section and wrapped it up with a simple footer:<br>
</p>
<pre class="brush:php;toolbar:false"><footer>
<p>© 2025 Neuron IQ. All rights reserved.</p>
<ul>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</footer>
Saya menggunakan struktur yang sama untuk bahagian kategori dan menambahkan kelewatan, dengan kelewatan yang sangat asas. Ia masih memerlukan banyak penyempurnaan.
Saya kemudian beralih untuk melaksanakan karusel testimoni:
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
Ini ialah persediaan yang agak standard untuk peluncur. Saya menambah fungsi untuk mengemas kini peluncur, mengawal pergerakan dan menyediakan gelongsor automatik dengan kelewatan 5 saat antara slaid.
Akhir sekali, saya melaksanakan kesan tatal untuk bahagian sumber terkini.
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
Saya mengikuti struktur yang sama seperti sebelum ini, memerhati dan menambah kelas fade-in pada kad ini dan tidak memerhatikannya.
Di sinilah keadaan menjadi berbulu. Selepas ujian, saya menyedari bahawa animasi skrol tidak berfungsi secara konsisten. Kadang-kadang, animasi akan mencetuskan terlalu awal, kadang-kadang, mereka tidak akan mencetuskan sama sekali, dan kadang-kadang, mereka hanya akan berkelip pada halaman. Ia adalah huru-hara.
Saya meluangkan masa dua jam seterusnya menyelam ke dalam kod, mencuba nilai yang berbeza untuk ambang, dan juga mencuba kaedah yang berbeza untuk mencetuskan animasi. Saya semakin kecewa kerana tidak kira apa yang saya lakukan, bahagian itu tetap bernyawa secara rawak.
Pada mulanya, saya fikir ambang tidak ditetapkan dengan betul, kerana ia terlalu rendah, dan elemen akan dilihat oleh pemerhati walaupun pengguna belum menatal kepadanya. Jadi, saya fikir, ambang 0.2 nampaknya sesuai untuk semua elemen. Nah, nampaknya tidak; beberapa elemen memerlukan nombor lain.
Saya cuba mengelog setiap langkah, memeriksa konsol pembangun penyemak imbas dan juga Googled setiap kemungkinan mesej ralat yang saya temui (dan Stack Overflow menjadi kawan baik saya pada masa ini). Ternyata, saya telah menyediakan setiap pemerhati pada berbilang elemen dengan hanya satu ambang, dan untuk beberapa elemen, ia tidak berfungsi. Itulah sebabnya ia akan berkelip, bernyawa secara rawak atau tidak bernyawa langsung.
Pendekatan saya jelas salah, dan saya terpaksa menyesuaikannya. Saya akhirnya menghabiskan kira-kira 2 jam menyahpepijat kekacauan ini. Akhirnya, saya menulis semula pemerhati saya untuk mendapatkan ambang sasaran tertentu. Selepas perubahan, akhirnya, animasi berfungsi seperti yang diharapkan.
Saya terpaksa mengubah suai setiap fungsi Intersection pemegang untuk menerima ambang yang betul, dan itu telah membetulkannya.
Jadi selepas 3 jam pengekodan JavaScript dan 2 jam penyahpepijatan, akhirnya saya selesai dengan pengekodan saya untuk projek ini!
Atas ialah kandungan terperinci Saya Membina Laman Web Pendidikan ULTIMATE dari Gores — Hari 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
