일주일 전, 내 친구 중 한 명인 Noah Kleij가 화학 및 기타 주제에 대한 지식을 무료로 공유할 수 있는 웹사이트 구축에 대해 나에게 연락했습니다. Noah는 맨체스터 대학교에서 일반 및 유기 화학 박사 학위를 취득했으며 세상에 긍정적인 모범이 되고 싶었습니다. 그는 광고 없이 교육 콘텐츠를 제작하여 웹사이트에 게시하기로 결정했습니다.
저는 항상 교육 사이트를 만들고 싶었지만 이를 실현할 전문 지식이 부족했기 때문에 이것은 저에게 정말 좋은 기회였습니다. 나는 그의 아이디어가 마음에 들었고 그가 수행한 고귀한 대의에 의미 있게 기여하고 싶었기 때문에 즉시 무료로 작업을 시작했습니다.
처음에는 React를 프레임워크로 사용하는 것을 고려했지만 곧 기본 웹사이트만 원했기 때문에 그것이 필요하지 않을 수도 있다는 것을 깨달았습니다. ChatGPT에서 얻은 간단한 개념과 이름, 즉 Neuron IQ로 시작했는데, 딱 맞는 선택이었습니다.
프레임워크는 기본 HTML, CSS, JavaScript를 사용하기로 결정했습니다. 나는 전문 개발자처럼 이러한 기술을 사용하여 도구를 만들었습니다. React를 사용할 수도 있었지만 일반 HTML, CSS 및 JavaScript를 사용하여 작업하면 라우터 및 기타 기능이 처음부터 어떻게 제작되는지 이해할 수 있었습니다. 흥미롭게도 저는 프로젝트를 가볍고 간단하게 유지하기 위해 Node.js도 사용하지 않았습니다.
제가 가장 감사했던 점은 사이트 레이아웃과 스타일을 디자인할 때 창의적인 자유를 많이 주셨다는 것입니다. 저는 이 기회를 진심으로 소중히 여겼습니다. 저는 전문 UI/UX 디자이너는 아니지만 디자인과 타이포그래피의 기본을 이해할 만큼 충분한 웹사이트를 개발했으며, 발작을 일으키고 싶지 않았기 때문에 어두운 테마를 선택했습니다.
뒷이야기가 너무 많네요. 바로 내용으로 들어가겠습니다.
모든 좋은 프로젝트가 그렇듯이 우리도 기본부터 시작했습니다. 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>
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 <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>
바닥글에는 사이트에 필수적이라고 생각되는 몇 가지 중요한 링크가 포함되어 있습니다.
프로젝트 시작 3시간 만에 페이지의 기본 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>
여기서는 글꼴을 '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 <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>
사용자가 스크롤할 때 탐색바가 항상 상단에 표시되도록 어두운 회색 배경, 패딩, 미묘한 그림자를 추가하고 위치를 고정으로 설정했습니다. 이는 탐색 표시줄이 사용자를 따라다니는 것처럼 지속적인 탐색 경험을 제공합니다.
이제 탐색 모음 자체의 스타일을 지정했습니다.
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;
}
이렇게 하면 모든 섹션에 동일한 최대 너비, 여백 및 텍스트 정렬이 적용됩니다.
히어로 섹션으로 넘어가서 주목을 끌 수 있는 눈에 띄는 시각적 요소를 원했습니다.
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 */
}
이렇게 하면 버튼을 시각적으로 매력적이고 대화형으로 만들 수 있으며, 마우스를 올리면 배경이 변경됩니다.
이제 인트로 부분의 스타일을 지정해야 합니다.
.hero h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 25px;
}
그리드를 사용하여 인트로 섹션에 반응형 그리드를 만들어 나란히 정렬하고 각 인트로 카드에 미묘한 페이드인 애니메이션을 제공합니다.
카테고리 섹션:
<!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>
이렇게 하면 또 다른 반응형 그리드가 생성되어 미묘한 페이드인 애니메이션으로 피사체가 체계적으로 표시됩니다. 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 <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>
이것은 시각적 매력을 위한 전환 및 크기 조절 효과를 갖춘 회원평가 캐러셀의 표준 CSS입니다.
이제 최신 리소스 섹션의 스타일을 지정합니다.
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;
}
이 섹션은 사용자가 사이트에 더 많이 참여할 수 있도록 하는 간단하고 뚜렷한 섹션입니다.
스타일링을 완성하기 위해 바닥글에 중점을 두었습니다.
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;
}
이렇게 하면 탐색 및 그리드 레이아웃을 조정하여 작은 기기에서도 사이트가 보기 좋게 표시됩니다.
마지막으로, 이 웹사이트의 목적은 노아에 대한 지식을 홍보하는 것이기 때문에 주제와 페이지에 대한 스타일을 추가하고 가능한 한 최소화합니다. 그래서 디자인은 최대한 미니멀하게 유지했습니다.
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의 스타일링이 완료되어 원하는 위치에 모든 것을 가져오는 데 약 6시간이 소요됩니다. 이제 퍼즐의 마지막 조각인 JavaScript에 대해 알아볼 시간입니다.
JS로 이동하기 전에 현재 웹사이트의 모습을 살펴보겠습니다.
또는 실시간 미리보기를 보고 싶다면 여기 NeuronIQ를 방문하세요
이 부분은 솔직히 말해서 인내심을 조금 테스트했습니다. 즉, 식상한 산책이 아닐 것이라는 것을 알았지만 그래도...
정적인 페이지가 아닌 살아있는 듯한 웹사이트를 만들고자 하는 목표로 시작했습니다. 저는 영웅 섹션 애니메이션을 설정하는 것부터 시작했습니다.
section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
이것은 간단합니다. DOM이 완전히 로드되면 영웅 섹션에 대한 애니메이션을 트리거하는 클래스를 추가하고 계획대로 부드럽게 애니메이션됩니다.
다음으로 섹션이 뷰포트로 스크롤될 때 애니메이션을 추가하는 것을 목표로 했습니다. 이를 위해 IntersectionObserver API를 사용했습니다. 이 부분이 조금 더 어려웠습니다.
<!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 요소에 대한 관찰자를 설정합니다. 뷰에 들어오면 페이드인 클래스를 추가하여 애니메이션을 트리거한 다음 다시 필요하지 않으므로 관찰자를 제거합니다.
카테고리 섹션에도 동일한 작업을 수행했습니다.
<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>
카테고리 섹션에 동일한 구조를 사용하고 매우 기본적인 지연으로 지연을 추가했습니다. 아직은 다듬기가 많이 필요했습니다.
그런 다음 추천 캐러셀을 구현했습니다.
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;
}
전과 비슷한 구조를 따랐는데, 이 카드들을 관찰하고 페이드인 클래스를 추가하고 관찰하지 않았습니다.
여기서 문제가 발생했습니다. 테스트 후 스크롤 애니메이션이 일관되게 작동하지 않는다는 것을 깨달았습니다. 애니메이션이 너무 일찍 실행되는 경우도 있고 전혀 실행되지 않는 경우도 있고 페이지에서 깜박이는 경우도 있습니다. 엉망이었죠.
저는 다음 2시간 동안 코드를 살펴보고 임계값에 대해 다양한 값을 시도하고 애니메이션을 트리거하는 다양한 방법도 시도했습니다. 뭘 해도 섹션이 계속 랜덤하게 애니메이션이 나와서 답답했어요.
처음에는 임계값이 너무 낮고 사용자가 스크롤하지 않아도 관찰자가 요소를 볼 수 있기 때문에 임계값이 올바르게 설정되지 않았다고 생각했습니다. 그래서 저는 0.2 임계값이 모든 요소에 적합하다고 생각했습니다. 글쎄, 분명히 그렇지 않습니다. 일부 요소에는 다른 숫자가 필요했습니다.
모든 단계를 기록하고 브라우저의 개발자 콘솔을 검사했으며, 발생할 수 있는 모든 오류 메시지를 Google에서 검색하기도 했습니다(이 기간 동안 Stack Overflow는 저의 가장 친한 친구가 되었습니다). 알고 보니 임계값이 하나만 있는 여러 요소에 각 관찰자를 설정했는데 일부 요소의 경우 작동하지 않았습니다. 그렇기 때문에 깜박이거나 무작위로 애니메이션이 적용되거나 전혀 애니메이션이 적용되지 않는 것입니다.
내 접근 방식이 확실히 잘못되어 조정해야 했습니다. 나는 이 난잡함을 디버깅하는 데 약 2시간을 소비했습니다. 결국 나는 특정 목표 임계값을 얻기 위해 관찰자를 다시 작성했습니다. 변경 후 마침내 애니메이션이 예상대로 작동했습니다.
적절한 임계값을 수신하려면 각 handlerIntersection 함수를 수정해야 했고, 이를 통해 문제가 해결되었습니다.
그래서 3시간의 JavaScript 코딩과 2시간의 디버깅 끝에 드디어 이 프로젝트의 코딩이 끝났습니다!
위 내용은 나는 처음부터 ULTIMATE 교육 웹사이트를 구축했습니다 — 1일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
