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?
`<p> © 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.
: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
Top comments (0)