recherche

Maison >interface Web >js tutoriel >J'ai créé le site Web éducatif ULTIME à partir de zéro — Jour 1

J'ai créé le site Web éducatif ULTIME à partir de zéro — Jour 1

DDD
DDDoriginal
2025-01-09 06:33:50334parcourir

Il y a une semaine, un de mes amis, Noah Kleij, m'a contacté pour créer un site Web sur lequel il pourrait partager gratuitement ses connaissances en chimie et sur d'autres sujets. Noah est titulaire d'un doctorat en chimie générale et organique de l'Université de Manchester et souhaitait servir d'exemple positif au monde. Il a décidé de créer et de publier du contenu éducatif sur un site Web sans aucune publicité.

C'était une opportunité fantastique pour moi, car j'avais toujours voulu créer un site éducatif mais je n'avais pas l'expertise nécessaire pour que cela en vaille la peine. J'ai adoré son idée et j'ai immédiatement commencé à y travailler gratuitement parce que je voulais contribuer de manière significative à la noble cause qu'il avait entreprise.

Au départ, j'ai envisagé d'utiliser React comme framework, mais j'ai vite réalisé que cela n'était peut-être pas nécessaire puisqu'il voulait seulement un site Web de base. J'ai commencé avec un concept simple et un nom, que j'ai obtenu de ChatGPT : Neuron IQ, un choix approprié.

Pour le framework, j'ai décidé de m'en tenir aux bases HTML, CSS et JavaScript. J'ai construit des outils en utilisant ces technologies, comme un développeur professionnel. Même si j'aurais pu utiliser React, travailler avec du HTML, du CSS et du JavaScript m'a permis de comprendre comment les routeurs et autres fonctionnalités sont conçus à partir de zéro. Fait intéressant, je n'ai pas non plus utilisé Node.js, ce qui a permis de garder le projet léger et simple.

Ce que j'ai le plus apprécié, c'est qu'il m'a laissé une grande liberté de création dans la conception de la mise en page et du style du site. J'ai vraiment apprécié cette opportunité. Bien que je ne sois pas un concepteur UI/UX professionnel, j'ai développé suffisamment de sites Web pour comprendre les bases du design et de la typographie, et oui, j'ai choisi le thème sombre, parce que je ne voulais pas me laisser aller.

Cela fait beaucoup de trame de fond, passons directement au contenu ;

Heure 1 :

Comme tout bon projet, nous avons commencé par les bases. J'ai lancé VS Code et, en utilisant le ! raccourci, j'ai rapidement généré mon passe-partout HTML de base :

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

J'ai une version modifiée personnalisée de ce passe-partout avec style.css et script.js déjà inclus, ce qui m'évite d'avoir à les ajouter manuellement.

J'ai commencé par définir le titre, qui est crucial pour le référencement et la façon dont le site apparaît dans les onglets du navigateur. Le titre que j'ai choisi, avec l'aide de ChatGPT, était : "Neuron IQ - Notes et réponses éducatives de haute qualité."

Ensuite, je me suis concentré sur l'expérience utilisateur, en commençant par l'en-tête. Une navigation claire et conviviale est la clé d’un bon site Web, ou du moins, c’est ce qu’on m’a appris.

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

Le pied de page comprend quelques liens importants qui me semblent essentiels pour le site.

Trois heures après le début du projet, nous avons terminé la structure HTML de base de la page. Les étapes suivantes consistent à styliser la page, à ajouter le fichier de script et à le remplir de contenu.

Heure 4 : Configuration des bases

J'ai commencé par définir le style fondamental de la page. Je commence toujours par le corps pour établir l'apparence générale.

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

Ici, j'ai défini la police sur « Poppins », supprimé les marges et le remplissage par défaut, ajusté la hauteur de ligne pour plus de lisibilité, défini la couleur du texte sur un gris clair et utilisé un arrière-plan sombre. J'ai choisi le thème sombre pour m'assurer que personne ne soit victime de crises et aussi parce qu'il a l'air plus cool, surtout sur un site dédié à l'apprentissage et aux STEM.

Ensuite, je suis passé au style de l'en-tête. Un bon en-tête peut faire ou défaire la première impression.

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

J'ai ajouté un arrière-plan gris foncé, un remplissage, une ombre subtile et j'ai défini sa position sur collante, pour garantir que la barre de navigation soit toujours visible en haut lorsque l'utilisateur fait défiler. Cela offre une expérience de navigation continue, comme si la barre de navigation vous suivait.

Maintenant, j'ai stylisé la barre de navigation elle-même :

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

Cela utilise flexbox pour aligner le logo à gauche et les liens de navigation à droite. J'ai également ajouté une largeur maximale pour la réactivité et le centrage, en veillant à ce qu'elle ne s'étire pas trop sur les grands écrans.

Pour le logo, j'ai utilisé une couleur de police unique pour la reconnaissance de la marque :

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

Et les liens de navigation :

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

Le style est standard et épuré, mais je vise toujours la simplicité plutôt que d'utiliser des designs trop complexes. J'ai supprimé le style de liste par défaut, utilisé flexbox pour afficher les liens horizontalement, ajouté un espacement entre chaque lien et un bel effet de survol.

Pour un espacement cohérent sur tout le site, j'ai stylisé la section :

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

Cela donne à toutes les sections la même largeur maximale, la même marge et le même alignement du texte.

Heure 5 : Styliser la section des héros

En passant à la section héros, je voulais un élément visuel saisissant pour capter l'attention :

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

J'ai utilisé un dégradé linéaire pour l'arrière-plan, qui apporte de la profondeur et une touche moderne, et j'ai ajouté un remplissage pour un meilleur espacement.

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

Cela stylise le contenu du texte du héros, en veillant à ce qu'il ne se propage pas trop, le centre horizontalement et donne un effet de transition fluide lorsque la section du héros est chargée.

Les styles de titre et de paragraphe sont simples et standards :

.hero {
    background: linear-gradient(135deg, #2c3e50, #1a237e);
    padding: 80px 20px;
    color: #e0e0e0;
}

Enfin, le bouton :

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

Cela rend le bouton visuellement attrayant et interactif, l'arrière-plan changeant au survol.

Heure 6 : Styliser l'introduction, les catégories et les témoignages

Maintenant, je devais styliser la section d'introduction.

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

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

Cela crée une grille réactive pour la section d'introduction en utilisant une grille pour les aligner côte à côte et fournit une animation de fondu subtile pour chaque carte d'introduction.

Pour la section catégories :

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

Cela crée une autre grille réactive, garantissant que les sujets sont affichés de manière organisée avec une animation de fondu subtile. J'ai utilisé Flexbox pour aligner les images et le texte, ajouté des effets de remplissage, d'espacement et de survol.

Et maintenant pour la section témoignages, un carrousel.

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

Il s'agit d'un CSS standard pour le carrousel de témoignages, avec des effets de transition et d'échelle pour l'attrait visuel.

Heure 7 : Styliser les dernières ressources et CTA

Je stylise maintenant la dernière section de ressources.

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

Ici, j'ai implémenté une autre grille réactive, stylisé les cartes, ajouté des effets de survol et inclus une animation de fondu pour donner vie à ces cartes.

Maintenant, pour la section d'appel à l'action, 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;
}

Il s'agit d'une section simple et distincte permettant aux utilisateurs de s'engager davantage avec le site.

Heure 8 : Touches finales

Pour compléter le style, je me suis concentré sur le pied de page :

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

Cela stylise le pied de page, inclut une liste de liens et définit les effets de survol.

Ensuite, j'ai ajouté un design réactif à l'aide de requêtes multimédias :

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

Cela garantit que le site s'affiche bien sur les appareils plus petits, en ajustant la navigation et la disposition des grilles.

Heure 9 : Style de la page Sujet et À propos

Enfin, j'ajoute le style des pages sujet et à propos, en les gardant aussi minimes que possible, puisque l'objectif de ce site Web est de promouvoir la connaissance de Noé. Ainsi, le design est aussi minimal que possible.

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

Ces styles suivent le même thème, créant une apparence cohérente sur toutes les pages, avec des modifications mineures pour refléter des éléments spécifiques de la page.

Et cela termine le style de Neuron IQ, prenant environ six heures pour obtenir tout là où je le voulais. Il est maintenant temps de se plonger dans la dernière pièce du puzzle : le JavaScript.

Avant de passer au JS, voyons à quoi ressemble notre site Web :

I Built the ULTIMATE Educational Website from Scratch — Day 1
Ou, si vous voulez voir l'aperçu en direct, c'est par ici : NeuronIQ

Cette partie, je dois être honnête, a un peu mis ma patience à l'épreuve. Je veux dire, je savais que ce ne serait pas du gâteau, mais quand même…

Heure 10 : Commencer par les animations et les effets de défilement

J'ai commencé avec l'objectif de rendre le site Web vivant, pas seulement une page statique. J'ai commencé par mettre en place l'animation de la section héros :

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

C'est simple : une fois le DOM complètement chargé, j'ajoute une classe qui déclenche l'animation de la section héros et elle s'anime en douceur, comme prévu.

Ensuite, j'avais pour objectif d'ajouter des animations lorsque les sections défilent dans la fenêtre. Pour cela, j'ai utilisé l'API IntersectionObserver. Cette partie était un peu plus difficile.

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

Ce code configure un observateur pour les éléments div .intro-grid. Lorsqu'ils apparaissent, il ajoute la classe de fondu entrant, déclenchant l'animation, puis supprime l'observateur car il n'est plus nécessaire.

J'ai fait la même chose pour la section catégories :

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

J'ai utilisé la même structure pour la section catégories et ajouté un délai, avec un délai très basique. Il fallait encore beaucoup de raffinement.

Heure 11 : Le curseur de témoignage

Je suis ensuite passé à la mise en place d'un carrousel de témoignages :

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

Il s'agit d'une configuration assez standard pour un curseur. J'ai ajouté des fonctions pour mettre à jour le curseur, contrôler le mouvement et configurer le glissement automatique avec un délai de 5 secondes entre les diapositives.

Enfin, j'ai implémenté l'effet de défilement pour la dernière section de ressources.

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

J'ai suivi une structure similaire à celle précédente, en observant et en ajoutant une classe de fondu entrant à ces cartes, et en ne l'observant pas.

Heures 12 et 13 : Frustration et débogage

C'est ici que les choses sont devenues compliquées. Après les tests, j'ai réalisé que les animations de défilement ne fonctionnaient pas de manière cohérente. Parfois, les animations se déclenchaient trop tôt, parfois, elles ne se déclenchaient pas du tout, et parfois, elles scintillaient simplement sur la page. C'était un désastre.

J'ai passé les deux heures suivantes à plonger dans le code, à essayer différentes valeurs pour le seuil et même à essayer différentes méthodes pour déclencher les animations. J'étais frustré car peu importe ce que je faisais, les sections continuaient à s'animer de manière aléatoire.

Au départ, je pensais que le seuil n'était pas défini correctement, car il était trop bas et que les éléments seraient vus par l'observateur même si l'utilisateur n'y avait pas fait défiler l'écran. Donc, j'ai pensé que le seuil de 0,2 semble approprié pour tous les éléments. Eh bien, apparemment non ; certains éléments nécessitaient un autre numéro.

J'ai essayé de consigner chaque étape, d'inspecter la console de développement du navigateur et j'ai même recherché sur Google tous les messages d'erreur possibles que j'ai rencontrés (et Stack Overflow est devenu mon meilleur ami pendant cette période). Il s'avère que je configurais chaque observateur sur plusieurs éléments avec un seul seuil, et pour certains éléments, cela ne fonctionnait pas. C'est pourquoi il scintillerait, s'animerait de manière aléatoire ou ne s'animerait pas du tout.

Mon approche était clairement fausse et j'ai dû l'ajuster. J'ai fini par passer environ 2 heures à déboguer ce gâchis. Finalement, j'ai réécrit mon observateur pour obtenir le seuil cible spécifique. Après les changements, enfin, les animations fonctionnaient comme prévu.

J'ai dû modifier chaque fonction handleIntersection pour recevoir le seuil approprié, et cela l'a corrigé.

Donc, après 3 heures de codage JavaScript et 2 heures de débogage, j'ai enfin terminé mon codage pour ce projet !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html Static if for while Error Logging break using class finally JS console number function default dom this display position overflow margin padding viewport background transition animation idea chatgpt ux ui everything SEO Other
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Construisez un clone de Perplexity avec LangGraph, CopilotKit, Tavily & Next.jsArticle suivant：Construisez un clone de Perplexity avec LangGraph, CopilotKit, Tavily & Next.js

Articles Liés

Voir plus