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
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
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)
Sujets chauds
1667
14
1426
52
1328
25
1273
29
1255
24
Moteurs JavaScript: comparaison des implémentations
Apr 13, 2025 am 12:05 AM
Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.
Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisation
Apr 16, 2025 am 12:12 AM
Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.
De C / C à JavaScript: comment tout cela fonctionne
Apr 14, 2025 am 12:05 AM
Le passage de C / C à JavaScript nécessite de s'adapter à la frappe dynamique, à la collecte des ordures et à la programmation asynchrone. 1) C / C est un langage dactylographié statiquement qui nécessite une gestion manuelle de la mémoire, tandis que JavaScript est dynamiquement typé et que la collecte des déchets est automatiquement traitée. 2) C / C doit être compilé en code machine, tandis que JavaScript est une langue interprétée. 3) JavaScript introduit des concepts tels que les fermetures, les chaînes de prototypes et la promesse, ce qui améliore la flexibilité et les capacités de programmation asynchrones.
Javascript et le web: fonctionnalité de base et cas d'utilisation
Apr 18, 2025 am 12:19 AM
Les principales utilisations de JavaScript dans le développement Web incluent l'interaction client, la vérification du formulaire et la communication asynchrone. 1) Mise à jour du contenu dynamique et interaction utilisateur via les opérations DOM; 2) La vérification du client est effectuée avant que l'utilisateur ne soumette les données pour améliorer l'expérience utilisateur; 3) La communication de rafraîchissement avec le serveur est réalisée via la technologie AJAX.
JavaScript en action: Exemples et projets du monde réel
Apr 19, 2025 am 12:13 AM
L'application de JavaScript dans le monde réel comprend un développement frontal et back-end. 1) Afficher les applications frontales en créant une application de liste TODO, impliquant les opérations DOM et le traitement des événements. 2) Construisez RestulAPI via Node.js et Express pour démontrer les applications back-end.
Comprendre le moteur JavaScript: détails de l'implémentation
Apr 17, 2025 am 12:05 AM
Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.
Python vs JavaScript: communauté, bibliothèques et ressources
Apr 15, 2025 am 12:16 AM
Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.
Python vs JavaScript: environnements et outils de développement
Apr 26, 2025 am 12:09 AM
Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.
