1
00:00:02,140 --> 00:00:03,960
Actually before we dive

2
00:00:03,960 --> 00:00:06,070
deeper into new features,

3
00:00:06,070 --> 00:00:08,830
let's quickly talk about a couple of shortcuts

4
00:00:08,830 --> 00:00:11,940
and things you can do here in Visual Studio Code

5
00:00:11,940 --> 00:00:15,630
to speed up your development and to be more efficient

6
00:00:15,630 --> 00:00:17,180
as a developer.

7
00:00:17,180 --> 00:00:21,010
Of course, all of that is optional, but nice to know.

8
00:00:21,010 --> 00:00:24,130
And let's start with all that white space

9
00:00:24,130 --> 00:00:26,420
that was added automatically.

10
00:00:26,420 --> 00:00:31,130
For example, when you press this format document shortcut.

11
00:00:31,130 --> 00:00:33,740
As I just said, it's added automatically,

12
00:00:33,740 --> 00:00:38,740
but sometimes you also need to add some indentation manually

13
00:00:38,950 --> 00:00:41,200
because you messed something up there,

14
00:00:41,200 --> 00:00:43,490
and you can always quickly do that

15
00:00:43,490 --> 00:00:46,820
by hitting the tab button on your keyboard.

16
00:00:46,820 --> 00:00:49,700
This adds multiple blanks at once.

17
00:00:49,700 --> 00:00:52,880
So, instead of hitting the space bar multiple times,

18
00:00:52,880 --> 00:00:55,470
you can just hit tab fewer times

19
00:00:55,470 --> 00:00:57,990
and you'll have the same effect.

20
00:00:57,990 --> 00:01:00,600
Of course, you can also always press

21
00:01:00,600 --> 00:01:02,930
that format document shortcut,

22
00:01:02,930 --> 00:01:06,050
but there also sometimes are scenarios

23
00:01:06,050 --> 00:01:10,740
where format document actually formats the code

24
00:01:10,740 --> 00:01:13,600
a bit differently than you might want it,

25
00:01:13,600 --> 00:01:16,310
and in such cases, it's nice to know

26
00:01:16,310 --> 00:01:19,000
that you can quickly add the appropriate amount

27
00:01:19,000 --> 00:01:23,083
of indentation with the tab button on your keyboard.

28
00:01:24,306 --> 00:01:27,310
The tab button also can be used

29
00:01:27,310 --> 00:01:30,370
for more useful things though.

30
00:01:30,370 --> 00:01:33,760
Let's say you wanna add the title year.

31
00:01:33,760 --> 00:01:35,190
Of course we did already add it,

32
00:01:35,190 --> 00:01:37,910
but let's delete it and re-add it.

33
00:01:37,910 --> 00:01:40,700
Now, as soon as I start typing anything here,

34
00:01:40,700 --> 00:01:43,150
we get this auto-completion.

35
00:01:43,150 --> 00:01:46,750
These suggestions here in Visual Studio Code.

36
00:01:46,750 --> 00:01:50,733
And the more we type, the more those are narrowed down.

37
00:01:51,700 --> 00:01:55,670
Now, if you found the suggestion you wanna use,

38
00:01:55,670 --> 00:02:00,500
you can always select it in this suggestion overlay here

39
00:02:00,500 --> 00:02:04,080
and then hit enter or the tab key

40
00:02:04,080 --> 00:02:06,980
to auto-complete this suggestion.

41
00:02:06,980 --> 00:02:10,289
So that you don't have to type the full word.

42
00:02:10,289 --> 00:02:13,230
And I use that a lot, I auto-complete

43
00:02:13,230 --> 00:02:15,240
basically everything which I write.

44
00:02:15,240 --> 00:02:18,870
And that, again, saves a lot of time.

45
00:02:18,870 --> 00:02:21,150
And besides saving a lot of time,

46
00:02:21,150 --> 00:02:24,540
it also avoids errors and typos

47
00:02:24,540 --> 00:02:27,109
because if you auto-complete a suggestion,

48
00:02:27,109 --> 00:02:29,700
there can't be a typo in it.

49
00:02:29,700 --> 00:02:33,660
So that's another benefit of using the auto-completion

50
00:02:33,660 --> 00:02:35,893
and these suggestions a lot.

51
00:02:36,820 --> 00:02:39,800
And then of course, we got additional benefits

52
00:02:39,800 --> 00:02:43,010
like the automatic addition of this closing tag here

53
00:02:43,010 --> 00:02:44,700
by Visual Studio Code,

54
00:02:44,700 --> 00:02:46,740
but that happens automatically

55
00:02:46,740 --> 00:02:49,380
without pressing any shortcut.

56
00:02:49,380 --> 00:02:52,660
Now I will use control + Z to reverse this

57
00:02:52,660 --> 00:02:56,370
and go back to my old title here.

58
00:02:56,370 --> 00:03:00,530
Now you'll also get these suggestions here in CSS.

59
00:03:00,530 --> 00:03:04,660
If you start typing something here, like background color,

60
00:03:04,660 --> 00:03:07,330
I get these overlays here as well.

61
00:03:07,330 --> 00:03:10,640
I can select the property I wanna use.

62
00:03:10,640 --> 00:03:13,930
And these suggestions also are smart

63
00:03:13,930 --> 00:03:17,190
and Visual Studio Code tries to sort them

64
00:03:17,190 --> 00:03:21,999
such that the most probable thing which I wanna pick

65
00:03:21,999 --> 00:03:25,213
is auto-selected and is at the top here.

66
00:03:26,080 --> 00:03:28,710
But if that's not the property I wanna add,

67
00:03:28,710 --> 00:03:32,300
we can use the arrow keys to select a different one.

68
00:03:32,300 --> 00:03:36,450
And then here, once you got the suggestion you need,

69
00:03:36,450 --> 00:03:40,460
you can, again, select it, hit tab and auto-complete this,

70
00:03:40,460 --> 00:03:43,280
and now I also get appropriate suggestions

71
00:03:43,280 --> 00:03:46,460
for the value this property needs.

72
00:03:46,460 --> 00:03:50,073
So since this is a color, I get some color suggestions here.

73
00:03:50,930 --> 00:03:53,680
And these are all some convenience features

74
00:03:53,680 --> 00:03:56,530
which you really should play around with,

75
00:03:56,530 --> 00:03:58,050
which you should explore,

76
00:03:58,050 --> 00:04:00,793
as they can really save you a lot of time.

77
00:04:02,070 --> 00:04:05,040
Now, when it comes to writing HTML elements,

78
00:04:05,040 --> 00:04:10,040
you got another quick way or another utility feature

79
00:04:10,110 --> 00:04:13,323
here in Visual Studio Code that can save you time.

80
00:04:14,170 --> 00:04:17,490
Let's say we wanna add another paragraph here.

81
00:04:17,490 --> 00:04:21,610
You can, of course, add this opening angle bracket,

82
00:04:21,610 --> 00:04:25,160
type P and type the closing angle bracket.

83
00:04:25,160 --> 00:04:27,040
And that's not too bad.

84
00:04:27,040 --> 00:04:31,130
But you can also just type P without any angle brackets,

85
00:04:31,130 --> 00:04:36,130
and then you should also get this suggestion pop up here.

86
00:04:36,170 --> 00:04:39,740
And you see that it says "Emmet Abbreviation" here.

87
00:04:39,740 --> 00:04:44,740
And Emmett is a built-in plug-in in Visual Studio Code

88
00:04:45,320 --> 00:04:47,640
that helps with auto-completing

89
00:04:47,640 --> 00:04:51,680
and auto-creating HTML elements.

90
00:04:51,680 --> 00:04:56,090
If you typed a name of an element without the angle brackets

91
00:04:56,090 --> 00:04:58,537
you should get this overlay here,

92
00:04:58,537 --> 00:05:01,340
these Emmet abbreviations.

93
00:05:01,340 --> 00:05:05,610
And if that's open and you then hit the tab key,

94
00:05:05,610 --> 00:05:07,780
you see this automatically creates

95
00:05:07,780 --> 00:05:10,600
such an HTML element for you.

96
00:05:10,600 --> 00:05:12,750
And that works for the paragraph.

97
00:05:12,750 --> 00:05:17,360
It, of course, also works for the title.

98
00:05:17,360 --> 00:05:20,520
And you don't even need to type the full word,

99
00:05:20,520 --> 00:05:21,930
just starting with it

100
00:05:21,930 --> 00:05:25,210
and then having the correct suggestion selected

101
00:05:25,210 --> 00:05:29,163
allows you to hit the tab key to auto-complete it.

102
00:05:30,020 --> 00:05:32,430
Now, of course, we don't need the title here in the body.

103
00:05:32,430 --> 00:05:35,030
This was just an example.

104
00:05:35,030 --> 00:05:39,620
So these are a couple of useful shortcuts and tricks

105
00:05:39,620 --> 00:05:42,090
you should be aware of.

106
00:05:42,090 --> 00:05:46,860
Another very useful feature is that you can quickly move

107
00:05:46,860 --> 00:05:51,860
items like HTML elements or CSS properties around

108
00:05:51,900 --> 00:05:54,262
if you need to change the order.

109
00:05:54,262 --> 00:05:57,040
For example, if I wanna move that paragraph

110
00:05:57,040 --> 00:05:58,940
in front of that paragraph,

111
00:05:58,940 --> 00:06:03,360
we can of course cut it and then go there,

112
00:06:03,360 --> 00:06:05,393
add a new line and paste it.

113
00:06:06,650 --> 00:06:08,590
And let me revert this.

114
00:06:08,590 --> 00:06:11,660
Or we can drag and drop it actually.

115
00:06:11,660 --> 00:06:15,342
So if it's selected, you can drag it and drop it here,

116
00:06:15,342 --> 00:06:19,276
and then press that auto-format shortcut.

117
00:06:19,276 --> 00:06:24,276
Or you can also select it and then press the Alt key

118
00:06:26,150 --> 00:06:28,760
and an up or down arrow

119
00:06:28,760 --> 00:06:31,360
to move this item up or down.

120
00:06:31,360 --> 00:06:35,390
And this is also a quick way of switching orders

121
00:06:35,390 --> 00:06:40,140
and moving HTML elements or CSS properties around.

122
00:06:40,140 --> 00:06:42,420
And you don't even need to select everything,

123
00:06:42,420 --> 00:06:45,290
just having your active cursor in that line

124
00:06:45,290 --> 00:06:47,933
which you wanna move up or down is enough.

125
00:06:49,450 --> 00:06:51,550
Now there are way more shortcuts,

126
00:06:51,550 --> 00:06:54,020
and I don't wanna overwhelm you right now,

127
00:06:54,020 --> 00:06:56,280
and diving into them and exploring them

128
00:06:56,280 --> 00:06:57,820
is definitely a good idea

129
00:06:57,820 --> 00:07:00,896
which you might wanna explore or which you might wanna do

130
00:07:00,896 --> 00:07:05,270
off-screen once you feel like it.

131
00:07:05,270 --> 00:07:07,890
But I do definitely recommend that at some point

132
00:07:07,890 --> 00:07:10,238
you do dive into your keyboard shortcuts

133
00:07:10,238 --> 00:07:12,380
in Visual Studio Code,

134
00:07:12,380 --> 00:07:15,130
and see which shortcuts you have here.

135
00:07:15,130 --> 00:07:16,760
Now obviously you have a lot,

136
00:07:16,760 --> 00:07:20,010
but just looking through them and playing around with them

137
00:07:20,010 --> 00:07:22,340
certainly isn't a bad idea.

138
00:07:22,340 --> 00:07:25,820
Attached you also find a link to more useful

139
00:07:25,820 --> 00:07:27,900
Visual Studio Code resources

140
00:07:27,900 --> 00:07:31,590
with some tips and tricks about the most important features

141
00:07:31,590 --> 00:07:34,910
and shortcuts that might be useful to you.

142
00:07:34,910 --> 00:07:37,155
And with that, that's it for the moment,

143
00:07:37,155 --> 00:07:40,370
just a little bit of extra productivity

144
00:07:40,370 --> 00:07:42,120
which you might be able to unlock.

145
00:07:42,120 --> 00:07:45,330
And therefore let's now get back to learning more

146
00:07:45,330 --> 00:07:47,683
about HTML and CSS.