Don't want to write all of your CSS from scratch or don't know how to do it yet? Bootstrap got you covered! Bootstrap is a frontend toolkit that makes it easy to implement several useful features and website components. It provides a range of prebuilt functionality, such as buttons, forms, and navigation bars. It is also responsive ! I used to use Bootstrap a lot when I was just learning a lot of webdev. I still use it when I am building websites that might be maintained by someone else, for the sake of readibility and ease of use, or when I am unsure of the responsiveness of a design.
All you need to do is include the starter CSS and JS files, and you are good to use any of their other components. Check out the Bootstrap website !

> Absolute Positioning

Absolute positioning is a way to position elements relative to the viewport. This is useful when you want to position an element in a specific place, regardless of the size of the viewport, or when you have scrolled.
To use absolute positioning, you need to set the position of the element to absolute . Then, you can use the top , bottom , left , and right properties to position the element.

> Background Gradient

Using a gradient as a background is a great way to offer some change from the common solid color background. I use CSS Gradient to generate my gradients.
After you select your colors for your gradient , you can copy the CSS code and paste it in your file. Very easy!
Looking at the code, can you tell how to write your own gradient ?

> Background Image

As I already said, backgrounds are important! What if you want your title to be displayed over a cool image? The background-image property is what you are probably looking for!
Find your favorite image and copy the URL from right clicking the image (if you are using a local image, you can use the path to the image). Then, use the background-image property to set the image as the background by putting the link in url("link-here") .
background-image: url("https://www.example.com/image.jpg");

> Hover

A CSS classic that you can find on almost every website- the text for links change color when you hover over them!
Write your CSS selector for the element you want to change as usual (class/tag/id), and then add the ":hover" pseudo-class . Then, write the CSS properties you want to change when the user hovers over the element, which is usually color.
For example, if I want to change the color of all links to red when the user hovers over them, I would write:
a:hover {
color: red;
}
Exactly like this link that does nothing.

Challenge: Can you make a link that does nothing? What do you think changed when you clicked on the link? Hint: Look at the URL before and after

Note: This feature does not work on mobile devices!

> Text Decoration

Text decoration is a way to add some flair to your text. You can use it to add underline , overline , or line-through, and other styles to your text. This is actually a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness. You can use a combination of the following options:
underline, overline, line-through (Type of line)
solid, double, dotted, wavy, dashed (Style of line)
You can also add the color and thickness you want the line to be.
For example, if I want a thick dashed underline to my text in red, I would write:
text-decoration: underline dashed red 5px;
Like this line!

> Border Radius

Border radius is a way to make the rounded corners for your element. As a person who loves soft features on my websites, I use this a lot.
You can use the border-radius property to set the radius of the corners. You can set the radius of each corner individually, or you can set the radius for all corners at once.
For example, if I wanted to make the corners of my element rounded, I would write:
border-radius: 10px;

Like this element!

Challenge: Obviously in the above example, I also changed the color, background-color, and padding of the element. Can you figure out how to do that?

Challenge: Can you change the border radius of an element to make it into a circle? Hint: You need to fix/know the height and width of the element.

> Video tag

This is by far my favorite basic HTML tag that you can pretty much manipulate without the help of CSS. The video tag lets you add a video to your page. You can add a video from a URL, or you can add a video from your computer. My absolute favorite way to use it is to create the "moving background" effect in conjunction with the Z-index.
Use the video tag and add your URL/ relative file path to the src attribute. You can also add the autoplay attribute to make the video play automatically. To make it play infinitely add loop attribute. (Some browsers don't work well with videos that have audio; add the muted attribute to avoid this problem!)

Example:
<video src="https://www.example.com/video.mp4" autoplay loop muted></video>

Note: Try writing out the line above as plain text in your HTML instead of as code (just like I did!). What problems do you see? How can we include text that look like HTML tags as plain text?

> Button

Buttons are everywhere! They are used to submit forms, to link to other pages, or maybe activate some feature. The button tag is used to create a button. For example, <button>Click me!</button>
You can also add the type attribute to specify the type of button it is (button, reset, submit). This is an easy way to add some interactivness to your website without knowing JavaScript.
Try out the following in CodeHS:
<button type="button" onclick="alert('Hi!')">Click me!</button>

Note: The onclick attribute is a JavaScript attribute. In reality, with JavaScript, you can make just about any element a button, even without using the button tag!

> Code tag

The code tag is used to display text in a monospace font, and is used to indicate that the text is code. Very straightforward! I have used the code tag in the previous examples of this section.
It is often used in combination with the pre tag.

To be added soon...