Welcome to a tour of my first website project! This was my initial dive into web development, where I explored HTML, CSS, and JavaScript to create a site about Kanye West. It features a biography, awards, collaborations, and more, all brought to life with interactive elements. Let me guide you through what I built, the hurdles I encountered, and how I overcame them.

The Structure: HTML

I began with the HTML structure in page1.html. The website is designed to showcase Kanye West’s life and career, with a header, navigation, and several content sections. Here’s what I included:

• Header and Navigation: The header has a logo and a navigation bar with links to other pages (though only Kanye West’s page is active here). I aimed for a clean, centered layout.
• Main Content: The main section features an interactive image and multiple articles—biography, awards, collaborations, activism, and conclusions—each with text and an image.
• Interactive Audio Image: A standout feature is an image of Kanye West’s "Graduation" album that plays "I Wonder" when clicked, my first taste of JavaScript interactivity.

Styling with CSS

In style.css, I styled the site to make it visually appealing with a modern, colorful design. Here are some key styling decisions:

• Color Scheme: The body has a purple background, the navigation bar is a soft blue, and each article has a unique pastel shade (e.g., light blue for biography, peach for awards) to differentiate them.
• Typography: I chose "Segoe UI" for a sleek, readable look. Headings have a dark background with white text for contrast.
• Images: Images are capped at a max-width of 550px with rounded corners and float left or right, letting text wrap naturally.
• Hover Effects: Navigation links change color and scale up slightly on hover, adding a playful touch without JavaScript.
• Flashing Text: A "Cliquez sur l'image!" prompt flashes above the album image using a CSS animation to draw attention.

Interactivity with JavaScript

The JavaScript in scriptpage2.js brought the site to life. The main interactive feature is the audio playback tied to the album image:

• Audio Playback: Clicking the "Graduation" image toggles the song "I Wonder." If it’s paused, it plays; if playing, it pauses and resets.
• Visual Feedback: When the audio plays, the image stays the same, but the flashing text disappears. When paused or ended, the image swaps to a different Kanye West photo.
• Code Logic: I used a simple function, mettre_musique(), to handle the play/pause logic and update the DOM accordingly.

Challenges and Solutions

Building this site came with its share of obstacles. Here’s how I tackled them:

• Image Overflow: Early on, images stretched beyond their containers, ruining the layout. I added max-width and height properties in CSS to keep them in check.
• Audio Control: I initially struggled to stop the audio cleanly. Using audio.paused and audio.currentTime = 0, I ensured it reset properly when paused.
• Flashing Text Overload: The flashing "Cliquez sur l'image!" text was too fast and annoying. I slowed the animation and adjusted opacity for a subtler effect.
• Navigation Usability: The hover effects on the nav links were too faint at first. Adding a transform: scale(1.1) made them pop without overcomplicating the code.

My Thought Process

As I built this site, I wanted it to be informative yet engaging. I chose Kanye West because I admire his creativity, and I saw this as a chance to blend content with interactivity. Sketching the layout beforehand helped me organize the articles and navigation, saving me from endless tweaking later.

CSS became my favorite part—I loved how I could create hover effects and animations without extra scripts. It made the site feel dynamic with minimal effort. JavaScript, though trickier, was a thrill once I got the audio and image swap working. It felt like the site had a pulse!

I learned to test small changes—like adjusting image sizes or animation timing—before moving on. This kept me from getting overwhelmed and let me see progress step-by-step.

Conclusion

This project was my gateway to web development. It taught me how HTML structures a page, CSS brings it style, and JavaScript adds life. I’m proud of the result—a functional, colorful tribute to Kanye West—and it’s fueled my excitement to keep learning and creating.