一周前，我的一位朋友 Noah Kleij 聯(lián)系我，希望建立一個(gè)網(wǎng)站，讓他可以免費(fèi)分享他的化學(xué)和其他學(xué)科知識(shí)。諾亞擁有曼徹斯特大學(xué)普通化學(xué)和有機(jī)化學(xué)博士學(xué)位，他希望成為世界的積極榜樣。他決定在一個(gè)沒(méi)有任何廣告的網(wǎng)站上創(chuàng)建和發(fā)布教育內(nèi)容。
這對(duì)我來(lái)說(shuō)是一個(gè)絕佳的機(jī)會(huì)，因?yàn)槲乙恢毕雱?chuàng)建一個(gè)教育網(wǎng)站，但缺乏專業(yè)知識(shí)來(lái)實(shí)現(xiàn)??這一目標(biāo)。我喜歡他的想法，并立即開(kāi)始免費(fèi)研究它，因?yàn)槲蚁霝樗鶑氖碌某绺呤聵I(yè)做出有意義的貢獻(xiàn)。
最初，我考慮使用 React 作為框架，但很快意識(shí)到這可能沒(méi)有必要，因?yàn)樗幌胍粋€(gè)基本的網(wǎng)站。我從一個(gè)簡(jiǎn)單的概念和一個(gè)名字開(kāi)始，這個(gè)名字是我從 ChatGPT 得到的——Neuron IQ，一個(gè)合適的選擇。
對(duì)于框架，我決定堅(jiān)持使用基本的 HTML、CSS 和 JavaScript。我像專業(yè)開(kāi)發(fā)人員一樣使用這些技術(shù)構(gòu)建工具。雖然我可以使用 React，但使用純 HTML、CSS 和 JavaScript 讓我能夠理解路由器和其他功能是如何從頭開(kāi)始設(shè)計(jì)的。有趣的是，我也沒(méi)有使用 Node.js，保持了項(xiàng)目的輕量級(jí)和簡(jiǎn)單性。
我最欣賞的是他在設(shè)計(jì)網(wǎng)站的布局和風(fēng)格時(shí)給了我很大的創(chuàng)作自由。我真的很珍惜這個(gè)機(jī)會(huì)。雖然我不是專業(yè)的 UI/UX 設(shè)計(jì)師，但我已經(jīng)開(kāi)發(fā)了足夠的網(wǎng)站來(lái)了解設(shè)計(jì)和排版的基礎(chǔ)知識(shí)，是的，我選擇黑暗主題，因?yàn)椋也幌胱屪约喊d癇發(fā)作。
背景故事很多，讓我們直接進(jìn)入正文；
第一小時(shí)：
像任何優(yōu)秀的項(xiàng)目一樣，我們從基礎(chǔ)開(kāi)始。我啟動(dòng)了 VS Code，并使用 !快捷方式，快速生成我的基本 HTML 樣板：
<!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>
我有這個(gè)樣板文件的自定義修改版本，其中已經(jīng)包含 style.css 和 script.js，節(jié)省了我手動(dòng)添加它們的精力。
我首先設(shè)置標(biāo)題，這對(duì)于 SEO 以及網(wǎng)站在瀏覽器選項(xiàng)卡中的顯示方式至關(guān)重要。在 ChatGPT 的幫助下，我確定的標(biāo)題是：“Neuron IQ - 高質(zhì)量的教育筆記和答案?！?/strong>
接下來(lái)，我關(guān)注用戶體驗(yàn)，從標(biāo)題開(kāi)始。清晰且用戶友好的導(dǎo)航是一個(gè)好的網(wǎng)站的關(guān)鍵——或者至少，這是我所學(xué)到的。
<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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" class="lazy" 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>
頁(yè)腳包含一些我認(rèn)為對(duì)于該網(wǎng)站至關(guān)重要的重要鏈接。
項(xiàng)目進(jìn)行了三個(gè)小時(shí)，我們完成了頁(yè)面的基本 HTML 結(jié)構(gòu)。接下來(lái)的步驟是設(shè)置頁(yè)面樣式、添加腳本文件并填充內(nèi)容。
第 4 小時(shí)：設(shè)置基礎(chǔ)知識(shí)
我首先設(shè)置頁(yè)面的基本樣式。我總是從身體開(kāi)始建立整體外觀和感覺(jué)。
<!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>
在這里，我將字體設(shè)置為“Poppins”，刪除了默認(rèn)邊距和填充，調(diào)整了行高以提高可讀性，將文本顏色設(shè)置為淺灰色，并使用深色背景。我選擇深色主題是為了確保沒(méi)有人癲癇發(fā)作，也因?yàn)樗雌饋?lái)更酷，尤其是在一個(gè)致力于學(xué)習(xí)和 STEM 的網(wǎng)站上。
接下來(lái)，我繼續(xù)設(shè)計(jì)標(biāo)題。一個(gè)好的標(biāo)題可以創(chuàng)造或破壞第一印象。
<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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" class="lazy" 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>
我添加了深灰色背景、填充、微妙的陰影，并將其位置設(shè)置為粘性，以確保當(dāng)用戶滾動(dòng)時(shí)導(dǎo)航欄始終在頂部可見(jiàn)。這提供了連續(xù)的導(dǎo)航體驗(yàn)，就像導(dǎo)航欄跟隨您一樣。
現(xiàn)在，我設(shè)計(jì)了導(dǎo)航欄本身的樣式：
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
這使用 Flexbox 將徽標(biāo)左對(duì)齊，將導(dǎo)航鏈接右對(duì)齊。我還添加了最大寬度以實(shí)現(xiàn)響應(yīng)能力和居中，確保它在大屏幕上不會(huì)拉伸太多。
對(duì)于標(biāo)志，我使用了獨(dú)特的字體顏色來(lái)提高品牌識(shí)別度：
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
以及導(dǎo)航鏈接：
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
風(fēng)格標(biāo)準(zhǔn)且干凈，但我始終追求簡(jiǎn)單而不是使用過(guò)于復(fù)雜的設(shè)計(jì)。我刪除了默認(rèn)的列表樣式，使用 Flexbox 水平顯示鏈接，在每個(gè)鏈接之間添加了間距以及漂亮的懸停效果。
為了使整個(gè)網(wǎng)站的間距保持一致，我設(shè)計(jì)了該部分的樣式：
.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
這為所有部分提供了相同的最大寬度、邊距和文本對(duì)齊方式。
第 5 小時(shí)：設(shè)計(jì)英雄部分的樣式
轉(zhuǎn)到英雄部分，我想要一個(gè)引人注目的視覺(jué)元素來(lái)吸引注意力：
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;
}
我使用了線性漸變作為背景，提供了深度和現(xiàn)代感，并添加了填充以獲得更好的間距。
section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
這會(huì)設(shè)置英雄文本內(nèi)容的樣式，確保它不會(huì)散布太多，使其水平居中，并在加載英雄部分時(shí)提供平滑的過(guò)渡效果。
標(biāo)題和段落樣式簡(jiǎn)單且標(biāo)準(zhǔn)：
.hero {
background: linear-gradient(135deg, #2c3e50, #1a237e);
padding: 80px 20px;
color: #e0e0e0;
}
最后，按鈕：
.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 */
}
這使得按鈕具有視覺(jué)吸引力和交互性，懸停時(shí)背景會(huì)發(fā)生變化。
第 6 小時(shí)：設(shè)計(jì)介紹、類別和推薦
現(xiàn)在，我需要設(shè)計(jì)介紹部分的樣式。
.hero h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 25px;
}
這會(huì)使用網(wǎng)格并排對(duì)齊介紹部分，并為每個(gè)介紹卡提供微妙的淡入動(dòng)畫(huà)。
對(duì)于類別部分：
<!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>
這將創(chuàng)建另一個(gè)響應(yīng)式網(wǎng)格，確保主題以有組織的方式顯示，并帶有微妙的淡入動(dòng)畫(huà)。我使用 Flexbox 來(lái)對(duì)齊圖像和文本，添加了填充和間距以及懸停效果。
現(xiàn)在是推薦部分，輪播。
<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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" class="lazy" 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>
這是推薦輪播的標(biāo)準(zhǔn) CSS，具有視覺(jué)吸引力的過(guò)渡和縮放效果。
第 7 小時(shí)：設(shè)計(jì)最新資源和 CTA
我現(xiàn)在設(shè)計(jì)最新的資源部分。
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
在這里，我實(shí)現(xiàn)了另一個(gè)響應(yīng)式網(wǎng)格，對(duì)卡片進(jìn)行了樣式設(shè)置，添加了懸停效果，并包含了淡入動(dòng)畫(huà)以使這些卡片栩栩如生。
現(xiàn)在，對(duì)于號(hào)召性用語(yǔ)部分，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;
}
這是一個(gè)簡(jiǎn)單、獨(dú)特的部分，可讓用戶更多地參與該網(wǎng)站。
第 8 小時(shí)：收尾工作
為了完成樣式，我將重點(diǎn)放在頁(yè)腳上：
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
此樣式設(shè)置頁(yè)腳，包括鏈接列表，并設(shè)置懸停效果。
接下來(lái)，我使用媒體查詢添加了響應(yīng)式設(shè)計(jì)：
.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
這可以確保網(wǎng)站在較小的設(shè)備上看起來(lái)不錯(cuò)，調(diào)整導(dǎo)航和網(wǎng)格布局。
第 9 小時(shí)：主題和關(guān)于頁(yè)面樣式
最后，我添加了主題和關(guān)于頁(yè)面的樣式，使它們盡可能簡(jiǎn)單，因?yàn)樵摼W(wǎng)站的目標(biāo)是推廣諾亞的知識(shí)。因此，設(shè)計(jì)盡可能保持最小。
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;
}
這些樣式遵循相同的主題，在所有頁(yè)面上創(chuàng)建一致的外觀，并進(jìn)行細(xì)微的更改以反映特定的頁(yè)面元素。
Neuron IQ 的造型就完成了，花了大約六個(gè)小時(shí)才得到我想要的一切。現(xiàn)在，是時(shí)候深入研究這個(gè)難題的最后一塊了：JavaScript。
在轉(zhuǎn)向 JS 之前，讓我們看看我們的網(wǎng)站現(xiàn)在的樣子：
或者，如果您想查看實(shí)時(shí)預(yù)覽，請(qǐng)點(diǎn)擊這里：NeuronIQ
這部分，老實(shí)說(shuō)，有點(diǎn)考驗(yàn)我的耐心。我的意思是，我知道這不會(huì)是小菜一碟，但仍然......
第 10 小時(shí)：從動(dòng)畫(huà)和滾動(dòng)效果開(kāi)始
我一開(kāi)始的目標(biāo)是讓網(wǎng)站充滿活力，而不僅僅是一個(gè)靜態(tài)頁(yè)面。我首先設(shè)置英雄部分動(dòng)畫(huà)：
section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
這很簡(jiǎn)單 - 一旦 DOM 完全加載，我就添加一個(gè)類來(lái)觸發(fā)英雄部分的動(dòng)畫(huà)，并且它會(huì)按照計(jì)劃順利地進(jìn)行動(dòng)畫(huà)處理。
接下來(lái)，我的目標(biāo)是在部分滾動(dòng)到視口中時(shí)添加動(dòng)畫(huà)。為此，我使用了 IntersectionObserver API。這部分有點(diǎn)挑戰(zhàn)性。
<!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>
此代碼為 .intro-grid div 元素設(shè)置一個(gè)觀察者。當(dāng)它們進(jìn)入視圖時(shí)，它會(huì)添加淡入類，觸發(fā)動(dòng)畫(huà)，然后刪除觀察者，因?yàn)椴辉傩枰?/p>
我對(duì)類別部分做了同樣的事情：
<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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" class="lazy" 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>
我對(duì)類別部分使用了相同的結(jié)構(gòu)，并添加了一個(gè)非?；镜难舆t延遲。它還需要大量改進(jìn)。
第 11 小時(shí)：見(jiàn)證滑塊
然后我開(kāi)始實(shí)施推薦輪播：
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
這是一個(gè)相當(dāng)標(biāo)準(zhǔn)的滑塊設(shè)置。我添加了更新滑塊、控制移動(dòng)以及設(shè)置自動(dòng)滑動(dòng)（幻燈片之間有 5 秒延遲）的功能。
最后，我實(shí)現(xiàn)了最新資源部分的滾動(dòng)效果。
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
我遵循了與之前類似的結(jié)構(gòu)，觀察并向這些卡片添加淡入類，然后不觀察它。
第 12 和 13 小時(shí)：挫折和調(diào)試
這就是事情變得棘手的地方。經(jīng)過(guò)測(cè)試，我意識(shí)到滾動(dòng)動(dòng)畫(huà)并不一致。有時(shí)，動(dòng)畫(huà)會(huì)過(guò)早觸發(fā)，有時(shí)，它們根本不會(huì)觸發(fā)，有時(shí)，它們只會(huì)在頁(yè)面上閃爍。真是一團(tuán)糟。
我花了接下來(lái)的兩個(gè)小時(shí)深入研究代碼，嘗試不同的閾值，甚至嘗試不同的方法來(lái)觸發(fā)動(dòng)畫(huà)。我很沮喪，因?yàn)闊o(wú)論我做什么，這些部分都會(huì)隨機(jī)動(dòng)畫(huà)。
最初，我認(rèn)為閾值設(shè)置不正確，因?yàn)樗土耍词褂脩魶](méi)有滾動(dòng)到元素，觀察者也會(huì)看到它。所以，我認(rèn)為 0.2 閾值似乎適合所有元素。嗯，顯然不是；有些元素需要其他數(shù)字。
我嘗試記錄每一個(gè)步驟，檢查瀏覽器的開(kāi)發(fā)者控制臺(tái)，甚至用 Google 搜索我遇到的每一個(gè)可能的錯(cuò)誤消息（Stack Overflow 成為了我這段時(shí)間最好的朋友）。事實(shí)證明，我在多個(gè)元素上設(shè)置每個(gè)觀察者只有一個(gè)閾值，而對(duì)于某些元素，這不起作用。這就是為什么它會(huì)閃爍、隨機(jī)動(dòng)畫(huà)或根本不動(dòng)畫(huà)。
我的做法顯然是錯(cuò)誤的，我必須調(diào)整。我最終花了大約 2 個(gè)小時(shí)來(lái)調(diào)試這個(gè)爛攤子。最終，我重寫(xiě)了觀察者以獲得特定的目標(biāo)閾值。更改后，動(dòng)畫(huà)終于按預(yù)期工作了。
我必須修改每個(gè)handleIntersection函數(shù)才能接收正確的閾值，并且修復(fù)了它。
經(jīng)過(guò) 3 個(gè)小時(shí)的 JavaScript 編碼和 2 個(gè)小時(shí)的調(diào)試，我終于完成了這個(gè)項(xiàng)目的編碼！
以上是我從頭開(kāi)始構(gòu)建終極教育網(wǎng)站 — 第一天的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
Java vs. JavaScript：清除混亂
Jun 20, 2025 am 12:27 AM
Java和JavaScript是不同的編程語(yǔ)言，各自適用于不同的應(yīng)用場(chǎng)景。Java用于大型企業(yè)和移動(dòng)應(yīng)用開(kāi)發(fā)，而JavaScript主要用于網(wǎng)頁(yè)開(kāi)發(fā)。
JavaScript評(píng)論：簡(jiǎn)短說(shuō)明
Jun 19, 2025 am 12:40 AM
JavascriptconcommentsenceenceEncorenceEnterential gransimenting，reading and guidingCodeeXecution.1）單inecommentsareusedforquickexplanations.2）多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3）
如何在JS中與日期和時(shí)間合作？
Jul 01, 2025 am 01:27 AM
JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn)：1.創(chuàng)建Date對(duì)象有多種方式，推薦使用ISO格式字符串以保證兼容性；2.獲取和設(shè)置時(shí)間信息可用get和set方法，注意月份從0開(kāi)始；3.手動(dòng)格式化日期需拼接字符串，也可使用第三方庫(kù)；4.處理時(shí)區(qū)問(wèn)題建議使用支持時(shí)區(qū)的庫(kù)，如Luxon。掌握這些要點(diǎn)能有效避免常見(jiàn)錯(cuò)誤。
為什么要將標(biāo)簽放在的底部？
Jul 02, 2025 am 01:22 AM
PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl
JavaScript與Java：開(kāi)發(fā)人員的全面比較
Jun 20, 2025 am 12:21 AM
JavaScriptIspreferredforredforwebdevelverment，而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1）JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2）
什么是在DOM中冒泡和捕獲的事件？
Jul 02, 2025 am 01:19 AM
事件捕獲和冒泡是DOM中事件傳播的兩個(gè)階段，捕獲是從頂層向下到目標(biāo)元素，冒泡是從目標(biāo)元素向上傳播到頂層。1.事件捕獲通過(guò)addEventListener的useCapture參數(shù)設(shè)為true實(shí)現(xiàn)；2.事件冒泡是默認(rèn)行為，useCapture設(shè)為false或省略；3.可使用event.stopPropagation()阻止事件傳播；4.冒泡支持事件委托，提高動(dòng)態(tài)內(nèi)容處理效率；5.捕獲可用于提前攔截事件，如日志記錄或錯(cuò)誤處理。了解這兩個(gè)階段有助于精確控制JavaScript響應(yīng)用戶操作的時(shí)機(jī)和方式。
JavaScript：探索用于高效編碼的數(shù)據(jù)類型
Jun 20, 2025 am 12:46 AM
javascripthassevenfundaMentalDatatypes：數(shù)字，弦，布爾值，未定義，null，object和symbol.1）numberSeadUble-eaduble-ecisionFormat，forwidevaluerangesbutbecautious.2）
如何減少JavaScript應(yīng)用程序的有效載荷大??？
Jun 26, 2025 am 12:54 AM
如果JavaScript應(yīng)用加載慢、性能差，問(wèn)題往往出在payload太大，解決方法包括：1.使用代碼拆分（CodeSplitting），通過(guò)React.lazy()或構(gòu)建工具將大bundle拆分為多個(gè)小文件，按需加載以減少首次下載量；2.移除未使用的代碼（TreeShaking），利用ES6模塊機(jī)制清除“死代碼”，確保引入的庫(kù)支持該特性；3.壓縮和合并資源文件，啟用Gzip/Brotli和Terser壓縮JS，合理合并文件并優(yōu)化靜態(tài)資源；4.替換重型依賴，選用輕量級(jí)庫(kù)如day.js、fetch
