Actually before we dive
deeper into new features,
let's quickly talk about a couple of shortcuts
and things you can do here in Visual Studio Code
to speed up your development and to be more efficient
as a developer.
Of course, all of that is optional, but nice to know.
And let's start with all that white space
that was added automatically.
For example, when you press this format document shortcut.
As I just said, it's added automatically,
but sometimes you also need to add some indentation manually
because you messed something up there,
and you can always quickly do that
by hitting the tab button on your keyboard.
This adds multiple blanks at once.
So, instead of hitting the space bar multiple times,
you can just hit tab fewer times
and you'll have the same effect.
Of course, you can also always press
that format document shortcut,
but there also sometimes are scenarios
where format document actually formats the code
a bit differently than you might want it,
and in such cases, it's nice to know
that you can quickly add the appropriate amount
of indentation with the tab button on your keyboard.
The tab button also can be used
for more useful things though.
Let's say you wanna add the title year.
Of course we did already add it,
but let's delete it and re-add it.
Now, as soon as I start typing anything here,
we get this auto-completion.
These suggestions here in Visual Studio Code.
And the more we type, the more those are narrowed down.
Now, if you found the suggestion you wanna use,
you can always select it in this suggestion overlay here
and then hit enter or the tab key
to auto-complete this suggestion.
So that you don't have to type the full word.
And I use that a lot, I auto-complete
basically everything which I write.
And that, again, saves a lot of time.
And besides saving a lot of time,
it also avoids errors and typos
because if you auto-complete a suggestion,
there can't be a typo in it.
So that's another benefit of using the auto-completion
and these suggestions a lot.
And then of course, we got additional benefits
like the automatic addition of this closing tag here
by Visual Studio Code,
but that happens automatically
without pressing any shortcut.
Now I will use control + Z to reverse this
and go back to my old title here.
Now you'll also get these suggestions here in CSS.
If you start typing something here, like background color,
I get these overlays here as well.
I can select the property I wanna use.
And these suggestions also are smart
and Visual Studio Code tries to sort them
such that the most probable thing which I wanna pick
is auto-selected and is at the top here.
But if that's not the property I wanna add,
we can use the arrow keys to select a different one.
And then here, once you got the suggestion you need,
you can, again, select it, hit tab and auto-complete this,
and now I also get appropriate suggestions
for the value this property needs.
So since this is a color, I get some color suggestions here.
And these are all some convenience features
which you really should play around with,
which you should explore,
as they can really save you a lot of time.
Now, when it comes to writing HTML elements,
you got another quick way or another utility feature
here in Visual Studio Code that can save you time.
Let's say we wanna add another paragraph here.
You can, of course, add this opening angle bracket,
type P and type the closing angle bracket.
And that's not too bad.
But you can also just type P without any angle brackets,
and then you should also get this suggestion pop up here.
And you see that it says "Emmet Abbreviation" here.
And Emmett is a built-in plug-in in Visual Studio Code
that helps with auto-completing
and auto-creating HTML elements.
If you typed a name of an element without the angle brackets
you should get this overlay here,
these Emmet abbreviations.
And if that's open and you then hit the tab key,
you see this automatically creates
such an HTML element for you.
And that works for the paragraph.
It, of course, also works for the title.
And you don't even need to type the full word,
just starting with it
and then having the correct suggestion selected
allows you to hit the tab key to auto-complete it.
Now, of course, we don't need the title here in the body.
This was just an example.
So these are a couple of useful shortcuts and tricks
you should be aware of.
Another very useful feature is that you can quickly move
items like HTML elements or CSS properties around
if you need to change the order.
For example, if I wanna move that paragraph
in front of that paragraph,
we can of course cut it and then go there,
add a new line and paste it.
And let me revert this.
Or we can drag and drop it actually.
So if it's selected, you can drag it and drop it here,
and then press that auto-format shortcut.
Or you can also select it and then press the Alt key
and an up or down arrow
to move this item up or down.
And this is also a quick way of switching orders
and moving HTML elements or CSS properties around.
And you don't even need to select everything,
just having your active cursor in that line
which you wanna move up or down is enough.
Now there are way more shortcuts,
and I don't wanna overwhelm you right now,
and diving into them and exploring them
is definitely a good idea
which you might wanna explore or which you might wanna do
off-screen once you feel like it.
But I do definitely recommend that at some point
you do dive into your keyboard shortcuts
in Visual Studio Code,
and see which shortcuts you have here.
Now obviously you have a lot,
but just looking through them and playing around with them
certainly isn't a bad idea.
Attached you also find a link to more useful
Visual Studio Code resources
with some tips and tricks about the most important features
and shortcuts that might be useful to you.
And with that, that's it for the moment,
just a little bit of extra productivity
which you might be able to unlock.
And therefore let's now get back to learning more
about HTML and CSS.