ASMR Programming - Interactive Rating Component - HTML/CSS/JavaScript - No Talking

Published: 12 May 2024
on channel: Silent Scripts
31
1

🌟 Interactive Rating Component | HTML, CSS & JavaScript Tutorial

In this tutorial, I'll take you through the steps of creating a fully functional and visually appealing interactive rating component from scratch using HTML, CSS, and JavaScript. Whether you're a beginner eager to dive into the world of web development or an experienced coder looking to brush up on your skills, this video is tailored just for you!

👨‍💻 What you'll learn:

How to structure HTML elements & apply semantic HTML.
How to style HTML elements using CSS.
How to add interactivity to your website using JavaScript.

🔗 Key Moments:

0:00 - Intro
0:57 - Defining CSS variables
3:19 - Styling 1st card text
6:10 - Styling 1st card buttons
10:22 - Styling 1st card star icon
11:41 - Adding 1st hover states
12:37 - Styling 2nd card text
14:52 - Adding 2nd card image
15:40 - Adding interactivity
21:06 - Responsive mobile design

🛠️ Technologies & Tools Used:

HTML5
CSS3
JavaScript (ES6)
---
Visual Studio Code: https://code.visualstudio.com/
Figma: https://www.figma.com/
Keyboard: https://steelseries.com/gaming-keyboa...

💡 Why this project?

Building this interactive rating component not only enhances your front-end development skills but also gives you a practical component that can be integrated into larger projects like website feedback systems or customer service interfaces.

Project idea: https://www.frontendmentor.io/challen...

💻 What is Silent Scripts?

An educational channel creating ASMR Web Development tutorials using HTML, CSS, SCSS, Tailwind, JavaScript, TypeScript, React, and more. These tutorials are for Web Developers from all levels, who to learn and grow their skills in Web Development.

❤️ Support:

If you want to support my channel, you can do that by subscribing, commenting and sharing. If you want to take a step further, you can buy me a coffee here: https://buymeacoffee.com/silentscripts/

Thank you for watching!


On this page of the site you can watch the video online ASMR Programming - Interactive Rating Component - HTML/CSS/JavaScript - No Talking with a duration of hours minute second in good quality, which was uploaded by the user Silent Scripts 12 May 2024, share the link with friends and acquaintances, this video has already been watched 31 times on youtube and it was liked by 1 viewers. Enjoy your viewing!