Animated Website with HTML CSS & Vanilla JS

🎉 Course Title: Animated Website with HTML CSS & Vanilla JS

🎓 Course Headline: Dive into the world of web development and learn how to create a visually stunning, animated website from scratch using only HTML, CSS, and Vanilla JavaScript!

Course Description:

Embark on a journey through the building blocks of modern web design with our expert instructor, Annie Ring. In this comprehensive course, you'll learn how to transform your web development skills into a beautiful, animated website that captivates users and stands out in the digital landscape.

This Course is divided into 5 key sections:

1. Intro: 🚀

   • Get an overview of what you'll build by the end of this course.
   • Understand the vision and goal for your final animated website template.

2. Basic HTML and CSS Structure: 🏗️

   • Fire up your code editor and start structuring your webpage with fundamental HTML tags.
   • Style your page using CSS, making it visually appealing by adding headings, images, text, and social icons.
   • Integrate an external font from Google Fonts to enhance the typography of your design.

3. Responsiveness: 📱

   • Ensure that your website adapts flawlessly across different devices, including phones and tablets.
   • Learn how to implement media queries to tailor your CSS for various screen sizes.

4. Animation: ✨

   • Add dynamic elements to your website with vanilla JS on scroll animations for main images.
   • Create an auto-sliding gallery using nothing but CSS and its powerful Keyframes feature.

5. Additional Page: 🗝️

   • Learn how to expand your site by adding an additional HTML page and effectively linking it to your existing index page.

🛠️ What You’ll Learn:

• HTML: Master the art of structuring web pages, embedding images, creating links, and writing compelling paragraphs and headings.
• CSS: Gain proficiency in positions, margins, paddings, backgrounds, sizing, colors, and the use of Keyframes for animations.
• JS: Dive into functions, methods, properties, parameters, variables, and how they power interactive web experiences.
• Web Design: Understand the principles of creating user-friendly, responsive designs that work on all devices.
• Media Query - Responsiveness: Learn the techniques to ensure your site is accessible and engaging no matter what device it's viewed on.

📚 Files & Resources:

• All the necessary HTML, CSS, and JS code files are attached in a zip folder (2 html files including the code, plus images).

🚀 End of Course Review: After completing this course, we kindly ask you to take a moment to review what you've learned. Your feedback is crucial for us to continue improving the curriculum and ensuring an exceptional learning experience for all our students!

Thank you for considering this course as your stepping stone into the world of web development! We can't wait to see the incredible websites you create. Let's bring your creative vision to life with code! 🧡