Skip to content

Commit a0b99d6

Browse files
jamesqquickjamesqquick
committed
Added cover image and read me files for each section, but only the first two have been completed
1 parent 137910b commit a0b99d6

8 files changed

+176
-1
lines changed

‎README.md

+52-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,53 @@
11
# Learn-VS-Code
2-
Learn everything you need to know about the most popular editor in Web Development
2+
3+
4+
5+
![Learn VS Code Cover Image](./images/cover.png)
6+
7+
***Head over to [Learn VS Code](https://www.learnvscode.com) to learn everything you need to know about the most popular editor in Web Development***
8+
9+
In just a few years, Visual Studio Code has become the most popular editor for Web Development. In short, it is open source, cross-platform, full of functionality, and has an amazing community behind it. Many of the biggest names in Web Development have already made the switch, and so should you! If you're looking to learn the ins and outs of VS Code while increasing your efficiency and proficiency as developer, this course is perfect for you. Whether you're brand new to Web Development or a seasoned veteran, there's something for everyone.
10+
11+
12+
13+
## 1. [Getting Started](./sections/GettingStarted.md)
14+
15+
In this section, we will discuss available resources, the what and why behind VS Code, and how to download and install.
16+
17+
[Learn more](./sections/LayoutsAndShortcuts.md)
18+
19+
## 2. [Layouts and Shortcuts](./sections/LayoutsAndShortcuts.md)
20+
21+
In this section, we will open VS Code for the first and explore the layout. We will explore various shortcuts for customizing your layout, working with files, manipulating text, and more.
22+
23+
[Learn more](./sections/LayoutsAndShortcuts.md)
24+
25+
## 3. [Customization](./sections/Customization.md)
26+
27+
In this section, we will explore how to customize your editor through keymaps/shortcuts, settings, extensions, and themes!
28+
29+
[Learn more](./sections/Customization.md)
30+
31+
## 4. [Writing and Formatting Code](./sections/WritingAndFormattingCode.md)
32+
33+
In this section, we learn how to create snippets, work with Markdown documents, organize code, format code, and lint code.
34+
35+
[Learn more](./sections/WritingAndFormattingCode.md)
36+
37+
## 6. [Integrated Terminal](./sections/IntegratedTerminal.md)
38+
39+
In this section, we will learn how to use and customize the integrated terminal.
40+
41+
[Learn more](./sections/IntegratedTerminal.md)
42+
43+
## 7. [WorkingWithGit](./sections/WorkingWithGit.md)
44+
45+
In this section, we will learn how to take advantage of the built in tooling for Git as well as useful extensions for working with Git as well.
46+
47+
[Learn more](./sections/WorkingWithGit.md)
48+
49+
## 8. [Debugging](./sections/Debugging.md)
50+
51+
In this section, we will learn how to debug front-end JavaScript and back-end JavaScript as well as Angular, React, and Vue applications.
52+
53+
[Learn more](./sections/Debugging.md)

‎images/cover.png

289 KB
Loading

‎sections/Customization.md

Whitespace-only changes.

‎sections/Debugging.md

Whitespace-only changes.

‎sections/GettingStarted.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Getting Started
2+
3+
1. Welcome and Resources
4+
1. What We'll Cover
5+
1. Thank you joining the courses!
6+
2. Introduction to the course
7+
3. Overview of available resources
8+
2. Resources
9+
1. [Learn VS Code Github](https://github.com/jamesqquick/Learn-VS-Code)
10+
2. [VS Code Docs](https://code.visualstudio.com/docs)
11+
3. [VS Code Playlist on Learn Build Teach](https://www.youtube.com/playlist?list=PLDlWc9AfQBfZneYg7_KNOwCjy-AcJmtHb)
12+
2. The What and Why
13+
1. What We'll Cover
14+
1. What VS Code is and why you care
15+
2. Language Support
16+
3. VS Code Features
17+
3. Downloading and Installing
18+
1. What We'll Cover
19+
1. Stable Build vs. Insider's Build
20+
2. Installing VS Code
21+
3. Proxy Documentation (if necessary)
22+
2. Resources
23+
1. [Stable Build](https://code.visualstudio.com/download)
24+
2. [Insider's Build](https://code.visualstudio.com/insiders/)
25+
3. [Proxy Documentation](https://code.visualstudio.com/docs/setup/network)

‎sections/LayoutsAndShortcuts.md

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# Layouts and Shortcuts
2+
3+
1. The Interface
4+
1. What We'll Cover
5+
1. Explore VS Code layout
6+
2. Discuss Activity Bar, Side Bar, Status Bar, Panels, and MiniMap
7+
2. Resources
8+
1. [VS Code User Interface Docs](https://code.visualstudio.com/docs/getstarted/userinterface)
9+
10+
2. Optimizing Your Development Layout
11+
1. What We'll Cover
12+
1. Shortcuts for opening/closing panels
13+
2. Zen Mode for optimal development
14+
2. Resources
15+
1. [VS Code User Interface Docs](https://code.visualstudio.com/docs/getstarted/userinterface)
16+
3. Pro Tips
17+
1. `ctrlCmd + Shift + B` - toggle side bar
18+
2. `ctrlCmd + Shift + D` - toggle debug
19+
3. `ctrlCmd + Shift + E` - toggle file explorer
20+
4. `ctrlCmd + Shift + X` - toggle extensions
21+
5. `ctrlCmd + Shift + G` - toggle git
22+
6. `ctrlCmd + Shift + F` - toggle search
23+
7. `ctrlCmd + Shift + P` - open Command Palette
24+
8. `ctrlCmd K Z` – toggle Zen Mode
25+
3. Split Editor and Grid Tab System
26+
1. What We'll Cover
27+
1. Opening multiple files side by side
28+
2. Displaying multiple files in Grid Tab system
29+
2. Resources
30+
1. [VS Code User Interface Docs](https://code.visualstudio.com/docs/getstarted/userinterface)
31+
3. Pro Tips
32+
1. Working on a monitor can provide extra editing space and improve efficiency.
33+
2. Drag files around to display side by side or in grid
34+
3. `ctrlCmd + number` - switch to Nth editor group
35+
4. `ctrlCmd + \` - move file to split editor
36+
4. Opening and Working with Files
37+
1. What we’ll cover
38+
1. Creating files in the Explorer and via Shortcuts
39+
2. Tabbing through open files
40+
3. Creating Multiple Workspaces
41+
4. Shortcut for quickly opening files
42+
2. Resources
43+
1. [VS Code User Interface Docs](https://code.visualstudio.com/docs/getstarted/userinterface)
44+
3. Pro Tips
45+
1. `Ctrl + Tab` – tab to next file
46+
2. `Ctrl + Shift + Tab` - tab to previous file
47+
3. `ctrlCmd + P` to quick open files
48+
4. `ctrlCmd + N` to create new file
49+
5. `ctrlCmd + W` to close file
50+
5. `ctrlCmd + S` to save file
51+
6. Creating a file and defining the directory path will create any missing directories automatically
52+
5. Navigating and Manipulating Text
53+
1. What we’ll cover
54+
1. Shortcuts for navigating text
55+
2. Shortcuts for copying, pasting, and moving text
56+
3. Multiline edits with multiple cursors
57+
2. Resources
58+
3. Pro Tips
59+
1. Speed up key repeat and key delay to fly through code
60+
2. `Option + Arrow Left/Right` – Navigate word by word
61+
3. `Cmd + Left/Right` | `Home/End` – Go to beginning/end of line
62+
4. `Cmd + Up/Down` | `Ctrl + Home/End`– Go to beginning/end of file
63+
5. `ctrlCmd + D` – select current word
64+
6. `ctrlCmd + Shift +Ctrl + Left/Right` - expand/shrink selection
65+
7. `Alt + Up/Down` - move line
66+
8. `Shift + Alt + Up/Down` – Duplicate line
67+
9. `ctrlCmd + Option + Shift + Arrow Up/Down` - Multiple Cursors]
68+
6. Search and Replace Like a Ninja
69+
1. What we’ll cover
70+
1. Search and replace within a file
71+
2. Search and replace within a workspace
72+
3. Replace one at a time or all at once
73+
2. Resources
74+
1. [VS Code Docs (Search and Replace)](https://code.visualstudio.com/docs/editor/codebasics)
75+
3. Pro Tips
76+
1. `ctrlCmd + F` – Search in current file
77+
2. `Alt + Cmd + F` | `Ctrl + H` – Search and replace in current file
78+
3. `ctrlCmd + Shift + F` – Search in workspace
79+
4. `ctrlCmd + Shift + H` – Search and replace in workspace
80+
5. `ctrlCmd + Alt + Enter` – replace all
81+
6. `ctrlCmd + Shift + L` – select all occurrences of current selection
82+
7. `ctrlCmd + F2` – select all occurrences of current selection
83+
8. Selecting a piece of text and then searching (and replacing) will auto populate the search field with the copied text
84+
7. Intellisense
85+
1. What we’ll cover
86+
1. What intellisense is and how it can increase efficiency and speed of development
87+
2. Explore built in intellisense functionality in VS Code
88+
2. Resources
89+
1. [VS Code Docs Intellisense](https://code.visualstudio.com/docs/editor/intellisense)
90+
8. Emmet
91+
1. What we’ll cover
92+
1. What Emmet is and how it can speed up HTML and CSS development
93+
2. Basic Emmet snippets
94+
2. Resources
95+
1. [Emmet website](https://emmet.io/)
96+
2. [Emmet Docs Cheatsheet](https://docs.emmet.io/cheat-sheet/)
97+
3. [Emmet HTML Cheatsheet](https://github.com/jamesqquick/emmet-html-snippets-cheatsheet)
98+
3. Pro Tips
99+
1. `!` – Emmet shortcut to generate HTML5 boilerplate

‎sections/WorkingWithGit.md

Whitespace-only changes.

‎sections/WritingAndFormattingCode.md

Whitespace-only changes.

0 commit comments

Comments
 (0)