Learn CSS Colors by Building a Set of Colored Markers, Free CSS Beginners Course freeCodeCamp 2023

Channel:

We Will Code

Subscribers:

6,770

Published on October 16, 2022 6:22:53 PM ● Video Link: https://www.youtube.com/watch?v=Tl_vQKOvzWo

Game:

Counter-Strike: Source (2004)

Duration: 34:27

63 views

2

Learn CSS Colors by Building a Set of Colored Markers, Free CSS Beginners Course freeCodeCamp 2023. In this lesson, we go over the freeCodeCamp course "Learn CSS Colors by Building a Set of Colored Markers. This lesson continues us on our way to learning web development from scratch. This is from the course "Responsive Web Design"

The steps we go through are:

Step 1: Add a DOCTYPE html declaration at the top of the document, and an html element after that. Give the html element a lang attribute with en as its value.

Step 2: Nest a head element within the html element. Just after the head element, add a body element.

Step 3: Within the head element, nest a title element with the text Colored Markers.

Step 4: Inside the head element, nest a meta element with the attribute charset set to utf-8. Remember that meta elements are self-closing, and do not need a closing tag.

Step 5: Add another self-closing meta element within the head. Give it a name attribute set to viewport and a content attribute set to width=device-width, initial-scale=1.0 so your page looks the same on all devices.

Step 6: Within the body, nest an h1 element with the text CSS Color Markers.

Step 7: Nest a link element within the head. Give it a rel attribute set to stylesheet and an href attribute set to styles.css.

Step 8: Create a new CSS rule that targets the h1 element, and set its text-align property to center.

Step 9: Within the body, add a div element and set its class attribute to container. Make sure the div element is below the h1 element.

Step 10: Next, within the div, add another div element and give it a class of marker.

Step 11: Create a new CSS rule that targets the class marker, and set its background-color property to red.

Step 12: In your .marker CSS rule, set the width property to 200px and the height property to 25px.

Step 13: The margin shorthand property makes it easy to set multiple margin areas at the same time. To center your marker on the page, set its margin property to auto. This sets margin-top, margin-right, margin-bottom, and margin-left all to auto.

Step 14: In the container div, add two more div elements and give them each a class of marker.

Step 15: When the shorthand margin property has two values, it sets margin-top and margin-bottom to the first value, and margin-left and margin-right to the second value. In your .marker CSS rule, set the margin property to 10px auto.

Step 16: To begin, add the class one to the first marker div element.

Step 17: Next, remove the background-color property and its value from the .marker CSS rule.

Step 18: Then, create a new CSS rule that targets the class one and set its background-color property to red.

Step 19: Add the class two to the second marker div, and the class three to the third marker div.

Step 20: Also, create a separate CSS rule that targets the class three and set its background-color to blue.

Step 21: RGB Colors begin as black, and change as different levels of red, green, and blue are introduced. An easy way to see this is with the CSS rgb function. Create a new CSS rule that targets the class container and set its background-color to black with rgb(0, 0, 0).

Step 22: In the .one CSS rule, replace the color keyword red with the rgb function. For the rgb function, set the value for red to 255, the value for green to 0, and the value for blue to 0.

Step 23: In the .two CSS rule, use the rgb function to set the background-color to the max value for green, and 0 for the other values. And in the .three CSS rule, use the rgb function to set the background-color to the max value for blue, and 0 for the other values.

Step 24: In the .two CSS rule, set the green value in the rgb function to 127 to lower its intensity.

Step 25: In the .container CSS rule, use the shorthand padding property to add 10px of top and bottom padding, and set the left and right padding to 0. This works similarly to the shorthand margin property you used earlier.

Step 26: Before you combine colors, set your green marker back to pure green. For the rgb function in the .two CSS rule, set green back to the max value of 255.

Step 27: For the rgb function in the .container rule, set the red, green, and blue values to the max of 255.

Step 28: To create the first secondary color, yellow, update the rgb function in the .one CSS rule to combine pure red and pure green.

Step 29: To create the next secondary color, cyan, update the rgb function in the .two CSS rule to combine pure green and pure blue.

Step 30: To create the final secondary color, magenta, update the rgb function in the .three CSS rule to combine pure blue and pure red.

Step 31: To create the tertiary color orange, update the rgb function in the .one CSS rule so that red is at the max value, and set green to 127.

Step 32: Update the rgb function in the .two CSS rule so that green is at the max value, & set blue to 127.

And More with RGBA, HSLA & others. Learn with free 2023 freeCodeCamp course

Other Statistics