J'ai créé le site Web éducatif ULTIME à partir de zéro — Jour 1
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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" 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>
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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" 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>
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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" 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>
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 :
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="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173637563388852.jpg" 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>
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Comment utiliser efficacement le cadre de collections de Java?
Mar 13, 2025 pm 12:28 PM
Cet article explore une utilisation efficace du cadre de collections de Java. Il met l'accent sur le choix des collections appropriées (liste, set, map, file d'attente) en fonction de la structure des données, des besoins en performances et de la sécurité des threads. Optimisation de l'utilisation de la collection grâce à
Comment utiliser les cartes source pour déboguer le code JavaScript minifié?
Mar 18, 2025 pm 03:17 PM
L'article explique comment utiliser les cartes source pour déboguer JavaScript minifiée en le mappant au code d'origine. Il discute de l'activation des cartes source, de la définition de points d'arrêt et de l'utilisation d'outils comme Chrome Devtools et WebPack.
TypeScript pour les débutants, partie 2: Types de données de base
Mar 19, 2025 am 09:10 AM
Une fois que vous avez maîtrisé le didacticiel TypeScript de niveau d'entrée, vous devriez être en mesure d'écrire votre propre code dans un IDE qui prend en charge TypeScript et de le compiler en JavaScript. Ce tutoriel plongera dans divers types de données dans TypeScript. JavaScript a sept types de données: null, non défini, booléen, numéro, chaîne, symbole (introduit par ES6) et objet. TypeScript définit plus de types sur cette base, et ce tutoriel les couvrira tous en détail. Type de données nuls Comme javascript, null en typeScript
Début avec Chart.js: tarte, beignet et graphiques à bulles
Mar 15, 2025 am 09:19 AM
Ce tutoriel expliquera comment créer des graphiques à tarte, anneaux et bulles à l'aide de chart.js. Auparavant, nous avons appris quatre types de graphiques de graphique. Créer des graphiques à tarte et à anneaux Les graphiques à tarte et les graphiques d'anneaux sont idéaux pour montrer les proportions d'un tout divisé en différentes parties. Par exemple, un graphique à secteurs peut être utilisé pour montrer le pourcentage de lions mâles, de lions féminins et de jeunes lions dans un safari, ou le pourcentage de votes que différents candidats reçoivent lors des élections. Les graphiques à tarte ne conviennent que pour comparer des paramètres ou des ensembles de données uniques. Il convient de noter que le graphique à tarte ne peut pas dessiner des entités avec une valeur nulle car l'angle du ventilateur dans le graphique à tarte dépend de la taille numérique du point de données. Cela signifie toute entité avec une proportion nulle
