Search courses ranked by devsSee how

1 recommendation
1recommend

Build a Color Tool in Vanilla JavaScript

James Q Quick
James Q Quick
Scrimba
Scrimba
Recommended

Extra perks unlocked via skillcraft.ai link

Build a cool color lighten/darken tool from scratch and sharpen up your HTML, CSS and vanilla JavaScript skills along the way! This course hones your HTML, CSS and vanilla JavaScript skills by building a color lighten/darken tool. Throughout the 19 lessons, you'll solve several interactive challenges which will test your coding knowledge and let you in on a few handy hints along the way. You'll build out the skeleton HTML, style it with CSS and add a range of interactive features using vanilla JS - no frameworks required! By the end of the course, you'll have built a large project which will look great on your portfolio or pushed to your Github profile - so dive right in and get ready for a colour-switching fun rollercoaster!

Instructor

James Q Quick

James Q Quick

Web Developer, Speaker, and Teacher. JavaScript instructor at Scrimba.

Course details

Duration

1 hour 22 minutes

Format

video

Certificate

Included

Pricing

Free

What you'll learn

Build a complete color lighten/darken tool from scratch

Create HTML structure for interactive applications

Style applications with CSS

Validate hex color inputs in JavaScript

Prerequisites

Basic HTML knowledge

Basic CSS knowledge

Basic JavaScript understanding

Who this course is for

Intermediate JavaScript developers wanting to build practical projects

Developers looking to sharpen HTML, CSS, and vanilla JavaScript skills

Anyone wanting to build portfolio projects without frameworks

Web developers interested in working with color manipulation

Curriculum

Introduction and Setup

3 lessons

Color Input and Validation

2 lessons

Color Conversion

3 lessons

Color Manipulation

4 lessons

Toggle Button Feature

4 lessons

Reset Functionality and Completion

4 lessons

Notice something missing?

Help us improve this course information for the community

Suggest an edit
Loading reviews...