1. WEBSITE MOCK-UP

Here's my first website! 😁 I built it using HTML, CSS, and Bootstrap. It was a fun project where I got to play around with simple tools and learn about website design.

2. CONTENT

I've crafted a dynamic website comprising three HTML pages styled using CSS, with the added benefit of Bootstrap for ensuring a seamless layout of elements. The site encompasses a visually appealing landing page, an informative 'About Me' page, and a user-friendly contact page featuring a well-designed form. Additionally, I've implemented a collapsible "hamburger" menu using CSS, providing users with an efficient navigation experience.

3. JS FUNCTIONALITY

1. Slide Show Functionality

I've integrated a slide show functionality using JavaScript, enabling smooth transitions between slides and interactive navigation for users. The script includes next/previous controls and dynamically updates dot indicators, enhancing the visual appeal and user engagement of the website.

2. Save For Later Functionality

One of the standout features involves allowing users to save their favorite images. Through JavaScript, users can mark images, and the script stores these selections, providing a count of saved images. This enhances user interactivity and personalization on the site.

3. Leave Comment Functionality

For user engagement and interaction, I've implemented a comment feature. Users can leave comments on specific sections of the site by entering text and submitting. The comments are then dynamically displayed on the page, enhancing the community feel of the website.

4. Like Slide Functionality

To further enhance user interaction, the JavaScript functionality includes a 'Like' feature. Users can express their appreciation for specific slides by clicking a 'Like' button. The state of these likes is saved locally, ensuring a personalized and memorable user experience.

4. HOW TO USE

To experience these features, simply navigate through the website and engage with the provided elements:

• Slide Show: Explore the various sections of the site to witness the engaging slide show.

• Save For Later: Click on the designated button to save your favorite images and receive a count of saved items.

• Leave Comment: Share your thoughts by leaving comments on different sections of the site.

• Like Slide: Express your appreciation for specific slides by clicking the 'Like' button.

5. CONCLUSION

Embarking on the creation of my first website has been an enlightening journey into the realms of HTML, CSS, and Bootstrap. This project allowed me to explore the fundamentals of website design, resulting in a dynamic online presence.

The site features a visually engaging landing page, an insightful 'About Me' section, and an intuitive contact page with a well-designed form. The addition of a collapsible "hamburger" menu further enhances user navigation.

It was also immensely enjoyable to play with typography, a creative endeavor that added an extra layer of flair to the overall design.

The incorporation of JavaScript functionalities elevates the overall user experience. Users can seamlessly navigate through slides, personalize their experience by saving favorite images, and engage with the community through comments. Additionally, expressing appreciation for specific slides is made possible with the 'Like Slide' feature.

Feel free to explore these features by navigating through the website. I hope you enjoy the interactive elements and thank you for visiting my first website! 💻 🚀