我从头开始构建终极教育网站 — 第一天

一周前，我的一位朋友 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 个小时的 JavaScript 编码和 2 个小时的调试，我终于完成了这个项目的编码！