我從頭開始建立終極教育網站 — 第一天

一週前，我的一位朋友 Noah Kleij 聯絡我，希望建立一個網站，讓他可以免費分享他的化學和其他學科知識。諾亞擁有曼徹斯特大學普通化學和有機化學博士學位，他希望成為世界的積極榜樣。他決定在一個沒有任何廣告的網站上創建和發布教育內容。

這對我來說是一個絕佳的機會，因為我一直想創建一個教育網站，但缺乏專業知識來實現這一目標。我喜歡他的想法，並立即開始免費研究它，因為我想為他所從事的崇高事業做出有意義的貢獻。

最初，我考慮使用 React 作為框架，但很快意識到這可能沒有必要，因為他只想要一個基本的網站。我從一個簡單的概念和一個名字開始，這個名字是我從 ChatGPT 得到的——Neuron IQ，一個合適的選擇。

對於框架，我決定堅持使用基本的 HTML、CSS 和 JavaScript。我像專業開發人員一樣使用這些技術建構工具。雖然我可以使用 React，但使用純 HTML、CSS 和 JavaScript 讓我能夠理解路由器和其他功能是如何從頭開始設計的。有趣的是，我也沒有使用 Node.js，保持了專案的輕量級和簡單性。

我最欣賞的是他在設計網站的佈局和風格時給了我很大的創作自由。我真的很珍惜這個機會。雖然我不是專業的 UI/UX 設計師，但我已經開發了足夠的網站來了解設計和排版的基礎知識，是的，我選擇黑暗主題，因為，我不想讓自己癲癇發作。

背景故事很多，讓我們直接進入正文；

第一小時：

像任何優秀的項目一樣，我們從基礎開始。我啟動了 VS Code，並使用 !快捷方式，快速產生我的基本 HTML 樣板：

    <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>

我有這個樣板檔案的自訂修改版本，其中已經包含 style.css 和 script.js，節省了我手動添加它們的精力。

我首先設定標題，這對於 SEO 以及網站在瀏覽器標籤中的顯示方式至關重要。在 ChatGPT 的幫助下，我確定的標題是：「Neuron IQ - 高品質的教育筆記和答案。」

接下來，我專注於使用者體驗，從標題開始。清晰且用戶友好的導航是一個好的網站的關鍵——或者至少，這是我所學到的。

<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 </p>
<h1 id="tag-presents-a-strong-and-immediate-value-proposition-A"> tag presents a strong and immediate value proposition. A </h1>
<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>

<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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg?x-oss-process=image/resize,p_40" 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>

頁腳包含一些我認為對於該網站至關重要的重要連結。

專案進行了三個小時，我們完成了頁面的基本 HTML 結構。接下來的步驟是設定頁面樣式、新增腳本檔案並填滿內容。

第 4 小時：設定基礎知識

我先設定頁面的基本樣式。我總是從身體開始建立整體外觀和感覺。

    <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>

在這裡，我將字體設定為“Poppins”，刪除了預設邊距和填充，調整了行高以提高可讀性，將文字顏色設為淺灰色，並使用深色背景。我選擇深色主題是為了確保沒有人癲癇發作，也因為它看起來更酷，尤其是在一個致力於學習和 STEM 的網站上。

接下來，我繼續設計標題。一個好的標題可以創造或破壞第一印象。

<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 </p>
<h1 id="tag-presents-a-strong-and-immediate-value-proposition-A"> tag presents a strong and immediate value proposition. A </h1>
<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>

<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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg?x-oss-process=image/resize,p_40" 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>

我添加了深灰色背景、填充、微妙的陰影，並將其位置設置為粘性，以確保當用戶滾動時導航欄始終在頂部可見。這提供了連續的導航體驗，就像導航列跟隨您一樣。

現在，我設計了導覽列本身的樣式：

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #e0e0e0;
    background-color: #1a1a1a;
}

這使用 Flexbox 將徽標左對齊，將導航連結右對齊。我還添加了最大寬度以實現響應能力和居中，確保它在大螢幕上不會拉伸太多。

對於標誌，我使用了獨特的字體顏色來提高品牌識別度：

header {
    background: #252525;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

以及導航連結：

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

風格標準且乾淨，但我始終追求簡單而不是使用過於複雜的設計。我刪除了預設的列表樣式，使用 Flexbox 水平顯示鏈接，在每個鏈接之間添加了間距以及漂亮的懸停效果。

為了讓整個網站的間距保持一致，我設計了該部分的樣式：

.logo {
    font-size: 1.8rem;
    font-weight: 600;
    color: #64b5f6;
}

這為所有部分提供了相同的最大寬度、邊距和文字對齊方式。

第 5 小時：設計英雄部分的樣式

轉到英雄部分，我想要一個引人注目的視覺元素來吸引註意力：

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;
}

我使用了線性漸變作為背景，提供了深度和現代感，並添加了填充以獲得更好的間距。

section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

這會設定英雄文字內容的樣式，確保它不會散佈太多，使其水平居中，並在加載英雄部分時提供平滑的過渡效果。

標題和段落樣式簡單且標準：

.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 */
}

這使得按鈕具有視覺吸引力和互動性，而懸停時背景會改變。

第 6 小時：設計介紹、類別和推薦

現在，我需要設計介紹部分的樣式。

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 25px;
}

這會使用網格並排對齊介紹部分，並為每個介紹卡提供微妙的淡入動畫。

對於類別部分：

    <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>

這將創建另一個響應式網格，確保主題以有組織的方式顯示，並帶有微妙的淡入動畫。我使用 Flexbox 來對齊圖像和文本，並添加了填充和間距以及懸停效果。

現在是推薦部分，輪播。

<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 </p>
<h1 id="tag-presents-a-strong-and-immediate-value-proposition-A"> tag presents a strong and immediate value proposition. A </h1>
<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>

<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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg?x-oss-process=image/resize,p_40" 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>

這是推薦輪播的標準 CSS，具有視覺吸引力的轉換和縮放效果。

第 7 小時：設計最新資源與 CTA

我現在設計最新的資源部分。

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #e0e0e0;
    background-color: #1a1a1a;
}

在這裡，我實現了另一個響應式網格，對卡片進行了樣式設置，添加了懸停效果，並包含了淡入動畫以使這些卡片栩栩如生。

現在，對於號召性用語部分，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;
}

這是一個簡單、獨特的部分，可讓使用者更參與網站。

第 8 小時：收尾工作

為了完成樣式，我將重點放在頁腳：

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

此樣式設定頁腳，包括連結列表，並設定懸停效果。

接下來，我使用媒體查詢新增了響應式設計：

.logo {
    font-size: 1.8rem;
    font-weight: 600;
    color: #64b5f6;
}

這可以確保網站在較小的裝置上看起來不錯，調整導航和網格佈局。

第 9 小時：主題和關於頁面樣式

最後，我添加了主題和關於頁面的樣式，使它們盡可能簡單，因為網站的目標是推廣諾亞的知識。因此，設計盡可能保持最小。

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;
}

這些樣式遵循相同的主題，在所有頁面上建立一致的外觀，並進行細微的變更以反映特定的頁面元素。

Neuron IQ 的造型就完成了，花了大約六個小時才得到我想要的一切。現在，是時候深入研究這個難題的最後一塊了：JavaScript。

在轉向 JS 之前，讓我們看看我們的網站現在的樣子：

或者，如果您想查看即時預覽，請點擊這裡：NeuronIQ

這部分，老實說，有點考驗我的耐心。我的意思是，我知道這不會是小菜一碟，但仍然......

第 10 小時：從動畫和滾動效果開始

我一開始的目標是讓網站充滿活力，而不僅僅是一個靜態頁面。我先設定英雄部分動畫：

section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

這很簡單 - 一旦 DOM 完全加載，我就會添加一個類別來觸發英雄部分的動畫，並且它會按照計劃順利地進行動畫處理。

接下來，我的目標是在部分滾動到視口時添加動畫。為此，我使用了 IntersectionObserver API。這部分有點挑戰性。

    <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>

此程式碼為 .intro-grid div 元素設定一個觀察者。當它們進入視圖時，它會添加淡入類，觸發動畫，然後刪除觀察者，因為不再需要它。

我對類別部分做了同樣的事情：

<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 </p>
<h1 id="tag-presents-a-strong-and-immediate-value-proposition-A"> tag presents a strong and immediate value proposition. A </h1>
<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>

<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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg?x-oss-process=image/resize,p_40" 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>

我對類別部分使用了相同的結構，並添加了一個非常基本的延遲延遲。它還需要大量改進。

第 11 小時：見證滑桿

然後我開始實作推薦輪播：

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #e0e0e0;
    background-color: #1a1a1a;
}

這是一個相當標準的滑桿設定。我添加了更新滑桿、控制移動以及設定自動滑動（幻燈片之間有 5 秒延遲）的功能。

最後，我實現了最新資源部分的滾動效果。

header {
    background: #252525;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

我遵循了與之前類似的結構，觀察並向這些卡片添加淡入類，然後不觀察它。

第 12 和 13 小時：挫折與調試

這就是事情變得棘手的地方。經過測試，我意識到滾動動畫並不一致。有時，動畫會過早觸發，有時，它們根本不會觸發，有時，它們只會在頁面上閃爍。真是一團糟。

我花了接下來的兩個小時深入研究程式碼，嘗試不同的閾值，甚至嘗試不同的方法來觸發動畫。我很沮喪，因為無論我做什麼，這些部分都會隨機動畫。

最初，我認為閾值設定不正確，因為它太低了，即使用戶沒有滾動到元素，觀察者也會看到它。所以，我認為 0.2 閾值似乎適合所有元素。嗯，顯然不是；有些元素需要其他數字。

我嘗試記錄每一個步驟，檢查瀏覽器的開發者控制台，甚至用 Google 搜尋我遇到的每一個可能的錯誤訊息（Stack Overflow 成為了我這段時間最好的朋友）。事實證明，我在多個元素上設定每個觀察者只有一個閾值，而對於某些元素，這不起作用。這就是為什麼它會閃爍、隨機動畫或根本不動畫。

我的做法顯然是錯的，我必須調整。我最終花了大約 2 個小時來調試這個爛攤子。最終，我重寫了觀察者以獲得特定的目標閾值。更改後，動畫終於按預期工作了。

我必須修改每個handleIntersection函數才能接收正確的閾值，並且修復了它。

經過 3 個小時的 Ja​​vaScript 編碼和 2 個小時的調試，我終於完成了這個專案的編碼！