1 00:00:01,733 --> 00:00:05,750 Now before we write more code and learn about more good 2 00:00:05,750 --> 00:00:07,820 features, you should be aware of. 3 00:00:07,820 --> 00:00:09,210 Let's have a look at the code. 4 00:00:09,210 --> 00:00:12,350 We already got both here in the code editor, 5 00:00:12,350 --> 00:00:15,510 as well as the result we got in the browser. 6 00:00:15,510 --> 00:00:18,786 And if we have a look at this result in the code editor, 7 00:00:18,786 --> 00:00:23,786 we see that it's becoming a bit harder to read our code 8 00:00:23,810 --> 00:00:25,020 because it's very long. 9 00:00:25,020 --> 00:00:27,883 We have a very long lines of code here. 10 00:00:27,883 --> 00:00:28,716 Now, 11 00:00:28,716 --> 00:00:31,720 therefore we might want to split our code across multiple 12 00:00:31,720 --> 00:00:34,950 lines, and you can do that. 13 00:00:34,950 --> 00:00:38,710 You should typically not add a line break in the middle of 14 00:00:38,710 --> 00:00:43,710 a HTML tag, because whilst if you saved, is it still works. 15 00:00:43,710 --> 00:00:47,870 This can quickly lead to errors where you start adding new 16 00:00:47,870 --> 00:00:49,550 HTML elements in between, 17 00:00:49,550 --> 00:00:53,070 because you don't realize that you added a line break inside 18 00:00:53,070 --> 00:00:54,080 of a tag. 19 00:00:54,080 --> 00:00:57,870 And hence you should not do that, but you can absolutely. 20 00:00:57,870 --> 00:00:58,703 For example, 21 00:00:58,703 --> 00:01:03,430 add a line break after the opening tag and then after the 22 00:01:03,430 --> 00:01:04,670 content. 23 00:01:04,670 --> 00:01:06,090 And if we do that, 24 00:01:06,090 --> 00:01:09,320 then this code already gets a bit more readable. 25 00:01:09,320 --> 00:01:13,720 You might also notice that the IDE visual studio code here 26 00:01:13,720 --> 00:01:16,560 automatically indents that content, 27 00:01:16,560 --> 00:01:18,620 which is now moved to a new line. 28 00:01:18,620 --> 00:01:22,220 So that's text content between the H one and paragraph 29 00:01:22,220 --> 00:01:23,210 text. 30 00:01:23,210 --> 00:01:27,910 And this indentation is added automatically by visuals to do 31 00:01:27,910 --> 00:01:31,680 code. Since it also helps with readability, 32 00:01:31,680 --> 00:01:35,744 it makes it easy to spot that this text is inside of that 33 00:01:35,744 --> 00:01:40,360 H one or paragraph and not on the same level so that it's 34 00:01:40,360 --> 00:01:41,500 not a sibling, 35 00:01:41,500 --> 00:01:45,530 but instead inside of that element regarding the output on 36 00:01:45,530 --> 00:01:47,810 the website, it will be ignored. 37 00:01:47,810 --> 00:01:51,110 So this indentation here is only here for us during 38 00:01:51,110 --> 00:01:55,720 development to have an easier time identifying the values, 39 00:01:55,720 --> 00:01:57,890 the content inside of an element. 40 00:01:57,890 --> 00:02:00,090 It's not output on the screen. 41 00:02:00,090 --> 00:02:05,080 The users of our websites will not see this indentation, 42 00:02:05,080 --> 00:02:07,490 but doing this manually can be annoying. 43 00:02:07,490 --> 00:02:08,949 And I'm reverting this year. 44 00:02:08,949 --> 00:02:12,638 So did I can show you an alternative because there is a very 45 00:02:12,638 --> 00:02:14,370 useful alternative, 46 00:02:14,370 --> 00:02:17,400 a very useful feature built into visual studio code, 47 00:02:17,400 --> 00:02:19,650 which helps you with code formatting. 48 00:02:19,650 --> 00:02:23,580 If you have a look at your keyboard shortcuts and you search 49 00:02:23,580 --> 00:02:25,680 for format document here, 50 00:02:25,680 --> 00:02:28,360 you will find a format document shortcut. 51 00:02:28,360 --> 00:02:31,284 If it's not bound yet, you can bind it. 52 00:02:31,284 --> 00:02:33,030 Now, if you do bind it, 53 00:02:33,030 --> 00:02:36,260 you can press the shortcut to format. 54 00:02:36,260 --> 00:02:40,540 This code automatically simply by pressing a shortcut. 55 00:02:40,540 --> 00:02:44,290 If this does not work correctly, or even if it does, 56 00:02:44,290 --> 00:02:47,210 you might want to have a look at a special extension, 57 00:02:47,210 --> 00:02:48,230 which you can install, 58 00:02:48,230 --> 00:02:51,100 which helps with formatting and which is one of the most 59 00:02:51,100 --> 00:02:55,170 popular formatting extensions under view extensions. 60 00:02:55,170 --> 00:02:58,270 You can go to the extensions menu and you can install a 61 00:02:58,270 --> 00:03:01,690 third party extension into visual studio code. 62 00:03:01,690 --> 00:03:04,300 The extensibility of visual studio code has, 63 00:03:04,300 --> 00:03:06,600 is one of its many advantages. 64 00:03:06,600 --> 00:03:10,060 And here you can search for prettier and you should find the 65 00:03:10,060 --> 00:03:12,220 prettier extension. 66 00:03:12,220 --> 00:03:16,620 I already have it installed here. You can install it now. 67 00:03:16,620 --> 00:03:19,470 And prettier is an extension that helps with code 68 00:03:19,470 --> 00:03:20,303 formatting. 69 00:03:21,770 --> 00:03:23,780 Once you did install it, 70 00:03:23,780 --> 00:03:28,440 you can go back to the Explorer with view Explorer or the 71 00:03:28,440 --> 00:03:31,800 shortcut, which you see next to that item. 72 00:03:31,800 --> 00:03:36,800 And then you can go to preferences settings in visuals to do 73 00:03:36,930 --> 00:03:41,026 code and here all the search for format and make sure that 74 00:03:41,026 --> 00:03:46,026 under default format or you do a select prettier vs code. 75 00:03:47,710 --> 00:03:50,560 And if that selected pressing that format, 76 00:03:50,560 --> 00:03:53,970 document shortcut should format your document with prettier. 77 00:03:53,970 --> 00:03:57,960 And it simply saves you the hassle of manually splitting 78 00:03:57,960 --> 00:04:00,990 your code and formatting your code and prettier will 79 00:04:00,990 --> 00:04:04,604 automatically format your code following common best 80 00:04:04,604 --> 00:04:09,327 practices so that it doesn't add a line break in the middle 81 00:04:09,327 --> 00:04:11,840 of a tag, for example. 82 00:04:11,840 --> 00:04:13,653 So that's something to be aware of.