Dec. 20, 2023, 6:51 p.m. | michaelb

DEV Community dev.to

In previous "2000 line challenge" tutorials, I showed how to use Modulo.js to create a gradient picker. This tutorial is a continuation of this, a task very relevant to front-end developers: Let's build a little development tool to allow us to better visualize CSS, and iterate over better CSS and HTML styles!


Try it out now, in less than 30 seconds: 🚀🚀🚀 Want to skip ahead? Scroll to the bottom and simply copy the ~31 lines of HTML code …

box build challenge code designer developers extra file front-end gradient html javascript line making node programming shadow template tutorial tutorials web webdev

Data Architect

@ University of Texas at Austin | Austin, TX

Data ETL Engineer

@ University of Texas at Austin | Austin, TX

Lead GNSS Data Scientist

@ Lurra Systems | Melbourne

Senior Machine Learning Engineer (MLOps)

@ Promaton | Remote, Europe

Associate Data Engineer

@ Nominet | Oxford/ Hybrid, GB

Data Science Senior Associate

@ JPMorgan Chase & Co. | Bengaluru, Karnataka, India