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

Veröffentlicht am: 12 Mai 2024
auf dem Kanal: 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!


Auf dieser Seite können Sie das Online-Video ASMR Programming - Interactive Rating Component - HTML/CSS/JavaScript - No Talking mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Silent Scripts 12 Mai 2024 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 31 Mal angesehen und es wurde von 1 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!