DEV Community


Posted on

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

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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>  
Enter fullscreen mode Exit fullscreen mode

Multiple classes? NO PROBLEM!



<div class="one-box two-box-a"></div>
Enter fullscreen mode Exit fullscreen mode

Did you forget how to make a copyright sign?

`<p> &copy; 2020</p>

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.

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

Enter fullscreen mode Exit fullscreen mode

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

    color: var(--dark);

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)