React Beginner Project: Build a Color Picker Tool

Sichern Sie sich eines unserer besten Angebote mit Coursera Plus für 199 $ (normalerweise 399 $). Jetzt sparen.

kurs ist nicht verfügbar in Deutsch (Deutschland)

Wir übersetzen es in weitere Sprachen. Sehen Sie sich die Sprachen an, die wir anbieten.

React Beginner Project: Build a Color Picker Tool

Dozent: James Q Quick

Bei enthalten

Mehr erfahren

Fragen Sie Coursera

1 Modul

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Mittel

Empfohlene Erfahrung

2 Stunden zu vervollständigen

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

1 Modul

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Mittel

Empfohlene Erfahrung

2 Stunden zu vervollständigen

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

Was Sie lernen werden

Build a fully functional color lighten/darken tool using HTML, CSS, and vanilla JavaScript.
Create an interactive web component without relying on frameworks.

Kompetenzen, die Sie erwerben

Kategorie: HTML and CSS
Kategorie: Programming Principles
Kategorie: Web Development
Kategorie: Front-End Web Development
Kategorie: Program Development
Kategorie: Data Validation
Kategorie: Javascript
Kategorie: Computer Programming

Werkzeuge, die Sie lernen werden

Kategorie: Web Applications
Kategorie: Cascading Style Sheets (CSS)
Kategorie: Hypertext Markup Language (HTML)

Wichtige Details

Zertifikat zur Vorlage

Zu Ihrem LinkedIn-Profil hinzufügen

Bewertungen

1 Aufgabe

Unterrichtet in Englisch

Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

Weitere Informationen zu Coursera für Unternehmen

Logos von Petrobras, TATA, Danone, Capgemini, P&G und L'Oreal

In diesem Kurs gibt es 1 Modul

Enhance Your HTML, CSS, and JavaScript Skills by Building a Custom Color Lighten/Darken Tool

This course provides a hands-on opportunity to refine your proficiency in HTML, CSS, and vanilla JavaScript by guiding you through the development of a custom color lighten/darken tool from scratch. Over 19 comprehensive lessons, you'll tackle a series of interactive challenges designed to deepen your understanding of core coding concepts, while also learning practical tips to enhance your workflow. You will structure the project using HTML, style it with CSS, and implement interactive functionality with vanilla JavaScript—no frameworks required. Upon completion, you'll have developed a robust project that is ideal for showcasing in your portfolio or sharing on GitHub. Elevate your coding skills with an engaging, practical project that adds both technical depth and creativity to your toolkit.

Build a cool color lighten/darken tool from scratch and sharpen up your HTML, CSS and vanilla JavaScript skills along the way!

Das ist alles enthalten

1 Aufgabe20 Plug-ins

1 AufgabeInsgesamt 30 Minuten

JavaScript Color Tool Assignment30 Minuten

20 Plug-insInsgesamt 80 Minuten

Course Intro5 Minuten
Welcome to interactive lessons!1 Minute
Create the Base Layout5 Minuten
Create the Base Styling5 Minuten
Check for Valid Hex Color in JavaScript5 Minuten
Display Color From User Hex Input4 Minuten
Convert Hex Color to RGB7 Minuten
Convert RGB Color To Hex - Challenge Requirements2 Minuten
Convert RGB To Hex - Challenge Solution4 Minuten
Display Percentage from Slider3 Minuten
Alter Color By Percentage5 Minuten
Ensure Hex Values Stay Between 0 and 2554 Minuten
Alter Color Based On User Input6 Minuten
Create Custom Toggle Button Layout3 Minuten
Create Custom Toggle Button Styling5 Minuten
Create Custom Toggle Functionality in JavaScript5 Minuten
Alter Color Based on Lighten/Darken Toggle State4 Minuten
Input Reset Functionality - Challenge Requirements2 Minuten
Add Color Reset Functionality - Challenge Solution3 Minuten
Course Outro2 Minuten

Dozent

James Q Quick

Scrimba

3 Kurse787 Lernende

von

Scrimba

Mehr von Mobile and Web Development entdecken

Packt
Mastering CSS with Sass and Bootstrap - Ace Your Interviews
Kurs
Packt
React Beginner Projects 2026 – Build Developer Portfolio
Kurs
Packt
JavaScript DOM - Interactive and Dynamic Web Pages
Kurs
Coursera
Build "Guess The Color" game using JavaScript, HTML and CSS
angeleitetes Projekt

Warum entscheiden sich Menschen für Coursera für ihre Karriere?

Felipe M.

Lernender seit 2018

„Es ist eine großartige Erfahrung, in meinem eigenen Tempo zu lernen. Ich kann lernen, wenn ich Zeit und Nerven dazu habe.“

Jennifer J.

Lernender seit 2020

„Bei einem spannenden neuen Projekt konnte ich die neuen Kenntnisse und Kompetenzen aus den Kursen direkt bei der Arbeit anwenden.“

Larry W.

Lernender seit 2021

„Wenn mir Kurse zu Themen fehlen, die meine Universität nicht anbietet, ist Coursera mit die beste Alternative.“

Chaitanya A.

„Man lernt nicht nur, um bei der Arbeit besser zu werden. Es geht noch um viel mehr. Bei Coursera kann ich ohne Grenzen lernen.“

Häufig gestellte Fragen

To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

When you purchase a Certificate you get access to all course materials, including graded assignments. Upon completing the course, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

Weitere Fragen

Besuchen Sie die das Hilfe-Center für Kursteilnehmer.

Finanzielle Unterstützung verfügbar,