Heim >Web-Frontend >js-Tutorial >Ich habe die ULTIMATIVE Bildungswebsite von Grund auf erstellt – Tag 1
Ich habe die ULTIMATIVE Bildungswebsite von Grund auf erstellt – Tag 1
- DDDOriginal
- 2025-01-09 06:33:50351Durchsuche
Vor einer Woche kontaktierte mich einer meiner Freunde, Noah Kleij, mit dem Wunsch, eine Website zu erstellen, auf der er sein Wissen über Chemie und andere Themen kostenlos teilen kann. Noah hat einen Doktortitel in allgemeiner und organischer Chemie von der Universität Manchester und wollte der Welt als positives Beispiel dienen. Er beschloss, Bildungsinhalte auf einer Website ohne Werbung zu erstellen und zu veröffentlichen.
Das war eine fantastische Gelegenheit für mich, da ich schon immer eine Bildungsseite erstellen wollte, mir aber das Fachwissen fehlte, um es lohnenswert zu machen. Ich liebte seine Idee und begann sofort kostenlos daran zu arbeiten, weil ich einen sinnvollen Beitrag zu der edlen Sache leisten wollte, die er sich vorgenommen hatte.
Anfangs habe ich über die Verwendung von React als Framework nachgedacht, aber bald wurde mir klar, dass dies möglicherweise nicht notwendig ist, da er nur eine einfache Website wollte. Ich begann mit einem einfachen Konzept und einem Namen, den ich von ChatGPT bekam – Neuron IQ, eine passende Wahl.
Für das Framework habe ich mich entschieden, bei einfachem HTML, CSS und JavaScript zu bleiben. Ich habe Tools mit diesen Technologien erstellt, wie ein professioneller Entwickler. Während ich React hätte verwenden können, konnte ich durch die Arbeit mit einfachem HTML, CSS und JavaScript verstehen, wie Router und andere Funktionen von Grund auf erstellt werden. Interessanterweise habe ich auch kein Node.js verwendet, um das Projekt leicht und unkompliziert zu halten.
Was ich am meisten schätzte, war, dass er mir viel kreative Freiheit bei der Gestaltung des Layouts und Stils der Website gab. Ich habe diese Gelegenheit wirklich geschätzt. Auch wenn ich kein professioneller UI/UX-Designer bin, habe ich genug Websites entwickelt, um die Grundlagen von Design und Typografie zu verstehen, und ja, ich wähle das dunkle Thema, weil ich mir keinen Krampf geben wollte.
Das ist eine Menge Hintergrundgeschichte, kommen wir gleich zum Inhalt;
Stunde 1:
Wie bei jedem guten Projekt haben wir mit den Grundlagen begonnen. Ich habe VS Code gestartet und mit dem ! Verknüpfung, schnell mein grundlegendes HTML-Boilerplate generiert:
<!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>
Ich habe eine benutzerdefinierte modifizierte Version dieses Boilerplates, in der style.css und script.js bereits enthalten sind, was mir den Aufwand erspart, sie manuell hinzuzufügen.
Ich begann damit, den Titel festzulegen, der für SEO und die Darstellung der Website in Browser-Registerkarten von entscheidender Bedeutung ist. Der Titel, für den ich mich mit Hilfe von ChatGPT entschieden habe, war: „Neuron IQ – Hochwertige pädagogische Notizen und Antworten.“
Als nächstes konzentrierte ich mich auf die Benutzererfahrung, beginnend mit der Kopfzeile. Eine klare und benutzerfreundliche Navigation ist der Schlüssel zu einer guten Website – zumindest wurde mir das beigebracht.
<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>
Die Fußzeile enthält einige wichtige Links, die meiner Meinung nach für die Website wesentlich waren.
Drei Stunden nach Beginn des Projekts haben wir die grundlegende HTML-Struktur der Seite fertiggestellt. Die nächsten Schritte bestehen darin, die Seite zu formatieren, die Skriptdatei hinzuzufügen und sie mit Inhalt zu füllen.
Stunde 4: Einrichten der Grundlagen
Ich begann damit, den grundlegenden Stil für die Seite festzulegen. Ich beginne immer mit dem Körper, um das Gesamtbild und die Haptik festzulegen.
<!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>
Hier habe ich die Schriftart auf „Poppins“ eingestellt, Standardränder und -abstände entfernt, die Zeilenhöhe zur besseren Lesbarkeit angepasst, die Textfarbe auf Hellgrau eingestellt und einen dunklen Hintergrund verwendet. Ich habe das dunkle Thema gewählt, um sicherzustellen, dass niemand einen Anfall bekommt, und weil es auch cooler aussieht, insbesondere auf einer Website, die sich dem Lernen und MINT widmet.
Als nächstes habe ich mit der Gestaltung der Kopfzeile begonnen. Ein guter Header kann über den ersten Eindruck entscheiden.
<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>
Ich habe einen dunkelgrauen Hintergrund, Polsterung und einen subtilen Schatten hinzugefügt und die Position auf „Sticky“ eingestellt, um sicherzustellen, dass die Navigationsleiste beim Scrollen des Benutzers immer oben sichtbar ist. Dies sorgt für ein kontinuierliches Navigationserlebnis, als ob die Navigationsleiste Ihnen folgt.
Jetzt habe ich die Navigationsleiste selbst gestaltet:
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
Dabei wird Flexbox verwendet, um das Logo links und die Navigationslinks rechts auszurichten. Außerdem habe ich „max-width“ für Reaktionsfähigkeit und Zentrierung hinzugefügt, um sicherzustellen, dass es sich auf großen Bildschirmen nicht zu sehr ausdehnt.
Für das Logo habe ich zur Markenwiedererkennung eine einzigartige Schriftfarbe verwendet:
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
Und die Navigationslinks:
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
Der Stil ist standardisiert und klar, aber ich strebe immer nach Einfachheit, anstatt übermäßig komplexe Designs zu verwenden. Ich habe den standardmäßigen Listenstil entfernt, Flexbox verwendet, um die Links horizontal anzuzeigen, einen Abstand zwischen den einzelnen Links hinzugefügt und einen schönen Hover-Effekt hinzugefügt.
Für einheitliche Abstände auf der gesamten Website habe ich den Abschnitt wie folgt gestaltet:
.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
Dadurch erhalten alle Abschnitte die gleiche maximale Breite, den gleichen Rand und die gleiche Textausrichtung.
Stunde 5: Gestaltung des Heldenbereichs
Als ich zum Heldenbereich überging, wollte ich ein auffälliges visuelles Element, um Aufmerksamkeit zu erregen:
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;
}
Ich habe für den Hintergrund einen linearen Farbverlauf verwendet, der für Tiefe und ein modernes Gefühl sorgt, und für bessere Abstände eine Polsterung hinzugefügt.
section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
Dadurch wird der Textinhalt des Helden formatiert, um sicherzustellen, dass er sich nicht zu sehr ausbreitet, er horizontal zentriert wird und beim Laden des Heldenabschnitts ein sanfter Übergangseffekt erzielt wird.
Die Überschriften- und Absatzstile sind einfach und standardmäßig:
.hero {
background: linear-gradient(135deg, #2c3e50, #1a237e);
padding: 80px 20px;
color: #e0e0e0;
}
Endlich der Button:
.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 */
}
Dadurch wird die Schaltfläche optisch ansprechend und interaktiv, da sich der Hintergrund beim Schweben ändert.
Stunde 6: Gestaltung der Einleitung, Kategorien und Testimonials
Jetzt musste ich den Intro-Bereich gestalten.
.hero h1 {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 25px;
}
Dadurch wird ein reaktionsfähiges Raster für den Intro-Abschnitt erstellt, indem ein Raster verwendet wird, um sie nebeneinander auszurichten, und eine subtile Einblendanimation für jede Intro-Karte bereitgestellt wird.
Für den Kategorienbereich:
<!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>
Dadurch wird ein weiteres reaktionsfähiges Raster erstellt, das sicherstellt, dass Themen mit einer subtilen Einblendanimation organisiert angezeigt werden. Ich habe Flexbox verwendet, um die Bilder und den Text auszurichten, Abstände und Abstände sowie Hover-Effekte hinzugefügt.
Und nun zum Testimonial-Bereich, einem Karussell.
<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>
Dies ist ein Standard-CSS für das Testimonial-Karussell mit Übergangs- und Skalierungseffekten für eine visuelle Attraktivität.
Stunde 7: Neueste Ressourcen und CTA gestalten
Ich gestalte jetzt den Abschnitt mit den neuesten Ressourcen.
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
Hier habe ich ein weiteres reaktionsfähiges Raster implementiert, die Karten gestaltet, Hover-Effekte hinzugefügt und eine Einblendanimation eingefügt, um diese Karten zum Leben zu erwecken.
Nun zum Call-to-Action-Abschnitt, 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;
}
Dies ist ein einfacher, eindeutiger Abschnitt, in dem Benutzer sich stärker mit der Website beschäftigen können.
Stunde 8: Letzter Feinschliff
Um das Styling zu vervollständigen, habe ich mich auf die Fußzeile konzentriert:
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
Dadurch wird die Fußzeile gestaltet, eine Liste mit Links hinzugefügt und Hover-Effekte festgelegt.
Als nächstes habe ich responsives Design mithilfe von Medienabfragen hinzugefügt:
.logo {
font-size: 1.8rem;
font-weight: 600;
color: #64b5f6;
}
Dadurch wird sichergestellt, dass die Website auf kleineren Geräten gut aussieht, indem die Navigation und das Rasterlayout angepasst werden.
Stunde 9: Betreff und Info zur Seitengestaltung
Zuletzt füge ich den Stil für die Betreff- und Info-Seiten hinzu und halte sie so minimal wie möglich, da das Ziel dieser Website darin besteht, das Wissen über Noah zu fördern. Daher ist das Design so minimalistisch wie möglich gehalten.
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;
}
Diese Stile folgen dem gleichen Thema und sorgen für ein einheitliches Erscheinungsbild auf allen Seiten, mit geringfügigen Änderungen, um bestimmte Seitenelemente widerzuspiegeln.
Und damit ist das Styling für Neuron IQ abgeschlossen. Es dauert etwa sechs Stunden, bis alles dort ist, wo ich es haben wollte. Jetzt ist es an der Zeit, sich mit dem letzten Teil des Puzzles zu befassen: dem JavaScript.
Bevor wir zum JS wechseln, schauen wir uns an, wie unsere Website jetzt aussieht:
Wenn Sie die Live-Vorschau sehen möchten, finden Sie sie hier: NeuronIQ
Dieser Teil, muss ich ehrlich sein, hat meine Geduld ein wenig auf die Probe gestellt. Ich meine, ich wusste, dass es kein Kinderspiel werden würde, aber trotzdem...
Stunde 10: Beginnend mit Animationen und Scroll-Effekten
Ich begann mit dem Ziel, der Website ein lebendiges Gefühl zu verleihen und nicht nur eine statische Seite. Ich begann damit, die Animation des Heldenabschnitts einzurichten:
section {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
text-align: center;
}
Das ist ganz einfach: Sobald das DOM vollständig geladen ist, füge ich eine Klasse hinzu, die die Animation für den Heldenbereich auslöst und sie reibungslos animiert, genau wie geplant.
Als nächstes wollte ich Animationen hinzufügen, wenn Abschnitte in das Ansichtsfenster scrollen. Hierfür habe ich die IntersectionObserver API verwendet. Dieser Teil war etwas anspruchsvoller.
<!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>
Dieser Code richtet einen Beobachter für die .intro-grid div-Elemente ein. Wenn sie sichtbar werden, fügt es die Einblendklasse hinzu, löst die Animation aus und entfernt dann den Beobachter, da er nicht mehr benötigt wird.
Das Gleiche habe ich für den Kategorienbereich gemacht:
<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>
Ich habe die gleiche Struktur für den Kategorienbereich verwendet und eine Verzögerung hinzugefügt, mit einer sehr einfachen Verzögerung. Es musste noch viel verfeinert werden.
Stunde 11: Der Testimonial-Slider
Dann habe ich ein Testimonial-Karussell implementiert:
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #e0e0e0;
background-color: #1a1a1a;
}
Dies ist ein ziemlich normales Setup für einen Slider. Ich habe Funktionen hinzugefügt, um den Schieberegler zu aktualisieren, die Bewegung zu steuern und das automatische Schieben mit einer Verzögerung von 5 Sekunden zwischen den Schiebereglern einzurichten.
Zuletzt habe ich den Scroll-Effekt für den Abschnitt „Neueste Ressourcen“ implementiert.
header {
background: #252525;
padding: 1rem 0;
box-shadow: 0 2px 4px rgba(255,255,255,0.1);
position: sticky;
top: 0;
z-index: 100;
}
Ich folgte einer ähnlichen Struktur wie zuvor, indem ich diese Karten beobachtete und Einblendungsklassen hinzufügte und sie wieder aufhob.
Stunde 12 und 13: Frustration und Fehlersuche
Hier wurde es haarig. Nach dem Testen stellte ich fest, dass die Scroll-Animationen nicht konsistent funktionierten. Manchmal wurden die Animationen viel zu früh ausgelöst, manchmal überhaupt nicht und manchmal flackerten sie nur auf der Seite. Es war ein Chaos.
Ich habe die nächsten zwei Stunden damit verbracht, mich in den Code zu vertiefen, verschiedene Werte für den Schwellenwert auszuprobieren und sogar verschiedene Methoden zum Auslösen der Animationen auszuprobieren. Ich war frustriert, weil die Abschnitte, egal was ich tat, immer zufällig animiert wurden.
Anfangs dachte ich, der Schwellenwert sei nicht richtig eingestellt, da er zu niedrig sei und die Elemente vom Beobachter auch dann gesehen würden, wenn der Benutzer nicht dorthin gescrollt habe. Daher dachte ich, dass ein Schwellenwert von 0,2 für alle Elemente angemessen erscheint. Nun ja, anscheinend nicht; Einige Elemente benötigten eine andere Nummer.
Ich habe versucht, jeden Schritt zu protokollieren, die Entwicklerkonsole des Browsers zu überprüfen und sogar jede mögliche Fehlermeldung gegoogelt, auf die ich gestoßen bin (und Stack Overflow wurde in dieser Zeit mein bester Freund). Es stellte sich heraus, dass ich jeden Beobachter für mehrere Elemente mit nur einem Schwellenwert eingerichtet hatte, und bei einigen Elementen funktionierte das nicht. Deshalb würde es flackern, zufällig animieren oder überhaupt nicht animieren.
Mein Ansatz war eindeutig falsch und ich musste ihn anpassen. Am Ende habe ich ungefähr zwei Stunden damit verbracht, dieses Durcheinander zu beheben. Schließlich habe ich meinen Beobachter neu geschrieben, um den spezifischen Zielschwellenwert zu erhalten. Nach den Änderungen funktionierten die Animationen endlich wie erwartet.
Ich musste jede handleIntersection-Funktion ändern, um den richtigen Schwellenwert zu erhalten, und das hat das Problem behoben.
Nach 3 Stunden JavaScript-Codierung und 2 Stunden Debugging bin ich endlich mit der Codierung für dieses Projekt fertig!
Das obige ist der detaillierte Inhalt vonIch habe die ULTIMATIVE Bildungswebsite von Grund auf erstellt – Tag 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse