Coding Demo

Learn How To Code

Coding demo

This short demo walks students through the step-by-step process of editing an image using front-end Cascading Style Sheets (CSS) code.

Students work within CodePen, an online editor, to manipulate CSS.

Examples Of What You’ll Learn


Edit the the rotate function within the transform property to tilt or rotate the head. A value of 0deg results in no change. Meanwhile, a positive rotation turns the head clockwise and a negative rotation turns the head counter-clockwise.

transform: rotate(0deg);

Edit the the hue-rotate function within the filter property to change the hue color of the arm band. A value of 0deg results in no change. Meanwhile, a positive hue-rotation increases the hue value and a negative hue-rotation decreases the hue value.

filter: hue-rotate(20deg);
code demo image red background

Edit the the background-color property to change the color of the background. This can be done by typing the color name, using hexadecimal (Hex) values, or red, green, blue values (RGB).

background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);


[codepen_embed height=”265″ theme_id=”dark” slug_hash=”vPabxJ” default_tab=”html,result” user=”marktnoonan” preview=”true” data-preview=”true”]See the Pen Customizer – no help! by Mark Noonan (@marktnoonan) on CodePen.[/codepen_embed]