Day 24 - #100DaysofCode - Practicing CSS Grid and Emmet Shortcuts on VSCode

#css #100daysofcode #womenintech #codenewbie

Today I coded along with this youtube video:

I wanted to practice creating a "Responsive Grid CSS Website Layout From Scratch." I enjoyed the lesson very much but was happy to learn little VSCode shortcuts that I had no idea about.

Did you know ! gives you an "emmet" abbreviation for creating your HTML?

It returns the this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

It's like magic hehe

In addition, did you know that you could get lorem ipsum by typing lorem + the number of words you want to display?

For example, when I wrote lorem15 vscode generated the following in my paragraph tag:

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente, nulla facilis doloremque accusantium expedita eaque.</p>

This one was mind blowing for me as I watch the video.

Did you know that you could write a tag + . + a class name to auto generate a tag with a class?

To clear up the confusion of that sentence, I wanted to create an a tag with a class name of button, I did that by typing a.btn and VSCode returned:

<a href="#" class="btn">  </a>

Multiple classes? NO PROBLEM!

INPUT

div.one-box.two-box-a

OUTPUT

<div class="one-box two-box-a"></div>

Did you forget how to make a copyright sign?

Pretty simple right?

Lastly, I learned how to generate a random picture when I need it using unsplash.

As for the CSS, I enjoyed learning about CSS variables. The video creator explained CSS variables as global variables that are available throughout your CSS file.

CSS variables are created with --name , with name being the name of your choice. Please see the example below.



:root{
--primary: #ddd;
--dark: #333;
--light: #fff;
--shadow: 0 1px 5px rgba(104, 104,104, 0.8)
}

Now in order to reference the global variable you would have to use var(--name) like this:



body{
    color: var(--dark);
}

This tutorial was fantastic for reviewing grids and I recommend it for beginners. But, I highly recommend it for the the shortcuts I learned during the video, those are worth gold in my opinion.

Song of the day