1 00:00:00,490 --> 00:00:03,470 Let's take a quick look at how Visual Studio Code is laid out. 2 00:00:04,570 --> 00:00:06,780 We've talked about the file explorer. 3 00:00:06,780 --> 00:00:11,130 This is where you can view, create, and move around the files for your project. 4 00:00:11,130 --> 00:00:15,650 A little further left, we have what's known as the activity bar, which has some 5 00:00:15,650 --> 00:00:19,690 different features that are mostly beyond the scope of an introductory course, 6 00:00:19,690 --> 00:00:22,610 but I wanted to point it out because if you ever find that you've 7 00:00:22,610 --> 00:00:26,380 accidentally clicked on something strange, and you aren't sure where you are, 8 00:00:26,380 --> 00:00:30,400 you can click on this top icon to get back to your file explorer. 9 00:00:30,400 --> 00:00:32,660 You may have noticed that when you first open VS Code, 10 00:00:32,660 --> 00:00:35,480 there was a welcome screen with some handy links. 11 00:00:35,480 --> 00:00:39,100 If you don't see it, you can access it in your menu by choosing Help, and 12 00:00:39,100 --> 00:00:40,290 then Welcome. 13 00:00:40,290 --> 00:00:44,340 From the welcome screen, you can access recently opened projects and 14 00:00:44,340 --> 00:00:47,360 links to help you learn more about VS code. 15 00:00:47,360 --> 00:00:51,670 To open and work on a specific file, click on the file name in the file explorer, and 16 00:00:51,670 --> 00:00:53,000 it will open on the right. 17 00:00:54,100 --> 00:00:58,460 You can have as many files open as you'd like, and switch back and 18 00:00:58,460 --> 00:01:00,730 forth between them by clicking these tabs. 19 00:01:02,020 --> 00:01:06,010 Note that the tabs can be re-ordered and moved around just by clicking and 20 00:01:06,010 --> 00:01:07,280 dragging them. 21 00:01:07,280 --> 00:01:09,586 Here's a great little trick that VS Code will do for you. 22 00:01:09,586 --> 00:01:15,269 In the index.html file, type an exclamation point followed by Tab, 23 00:01:15,269 --> 00:01:22,070 and that will give you all of the basic HTML you need to start a basic website. 24 00:01:22,070 --> 00:01:23,820 Notice that when I made a change, 25 00:01:23,820 --> 00:01:27,370 a dot showed up next to the file name on the tab. 26 00:01:27,370 --> 00:01:30,050 This means that there are changes to this file that need to be saved. 27 00:01:31,510 --> 00:01:33,895 I can type Ctrl+S on Windows or 28 00:01:33,895 --> 00:01:40,370 Cmd+S on a Mac to save the active tab, and that dot goes away. 29 00:01:40,370 --> 00:01:45,390 Or on a Mac, Cmd+Opt+S to save all open tabs. 30 00:01:45,390 --> 00:01:48,102 These options are also available in the file menu. 31 00:01:51,190 --> 00:01:54,950 To view two tabs at once, click this icon in the right corner. 32 00:01:57,100 --> 00:02:00,230 This opens the active tab in its own pane. 33 00:02:00,230 --> 00:02:04,890 I can close it on the left just to avoid confusion, and this would allow me to edit 34 00:02:04,890 --> 00:02:10,750 my index.html file and my css file at the same time, which can come pretty handy. 35 00:02:10,750 --> 00:02:15,450 If I no longer want to view both at once, I can grab this tab and drag it back over. 36 00:02:16,610 --> 00:02:21,690 And that's how you can create, open, save, and arrange files in a text editor. 37 00:02:21,690 --> 00:02:26,260 What if I'm coding away on a project in my text editor, like a simple web page for 38 00:02:26,260 --> 00:02:30,840 example, and I wanna preview my work like I can in WorkSpaces? 39 00:02:30,840 --> 00:02:33,480 We'll talk about how we can do that in the next video.