HTML Tutorial: Installing VS Code & Live Server | Web Development #2
HTML Tutorial
Welcome to my HTML tutorial!. I will bookmark it and I encourage you to do the same by clicking the "save" button on the page. Before we get started, please like this blog to show your support.
To install VS Code, simply search for "Visual Studio Code" and install the software. VS Code provides suggestions and makes your work easier with multiple tabs. Once you have installed VS Code, create a new folder called "Complete Web Development Boot" and open it in VS Code.
If you cannot find the "Open with Code" option, try restarting your computer and opening VS Code again. If that doesn't work, try reinstalling VS Code and restarting your computer again. Don't worry if you are new to VS Code, just follow my lead and you'll be fine.
To create a new HTML file, simply create a new file with the extension ".html". For example, "Jake.html" is a simple HTML file. If you want to create a website, just start writing HTML code in this file.
This is an HTML file that will be used to create a CSS file (Jake.css) and a JavaScript site (Jake.js). These are different types of files, but I won't go into detail about CSS and JS right now. Let's start with HTML.
We created three types of files with the help of VS Code. If you had to create these files using Notepad in a folder, you would have faced a lot of problems. You would have to make files one by one and then edit them from Notepad. Additionally, you wouldn't have syntax highlighting. For example, if I write "console" in JavaScript, it suggests "log" to me, showing me how to pass arguments inside it. I won't show you this much, but I want to show that it suggests things to me. Hence, we don't use Notepad. We can use it, but we don't prefer to. We use any IDE or any source code editor.
For a web browser, I recommend Google Chrome. It's a good, stable browser. I will be using this browser throughout the course. If you want to use something else, you can use Firefox, etc. But I will use Chrome just for your information.
We will now see a little more about VS Code and want to quickly...
To make this course more beginner-friendly, I'd like to share some tips about using VS Code:
- When you install VS Code, you'll immediately see the Emmet Abbreviation feature which provides a boilerplate for HTML. You can edit this to create your own website.
- As you type, VS Code will give you suggestions and autocomplete when you press enter.
- The gear icon provides access to the VS Code settings. Don't be intimidated by it - try to use it!
- The Explorer button is the most important one for now. You can open and close it to see all the files you have opened. You can also create folders and new files from here.
Remember, VS Code will be very helpful for you if you plan to program in Python or any other language in the future.
New Folder
This button is for Refresh
- If you create any file here and it's not showing, you can refresh it and it will be shown here
There's also a search function and Git integration, although it may not be familiar to beginners. No worries, leave it for now.
Similarly, leave the debugger for now.
There are also extensions like the Microsoft Store.
Hello, world. I wrote "Hello world" and you can see it here without reloading. This is the work of Live Server, so you don't need to reload. Simply change "hello world" to "hello Jake" and save it. So you can see "hello world" became "hello Jake." As I work, things will get updated here. Live Server helps us with this.
Let me tell you more about VS Code. Here are the settings and the command palette, where all commands are available.
When using Visual Studio Code, there are two types of settings to consider: user settings and workspace settings. User settings apply to the user currently using the computer, while workspace settings apply to the folder that is currently opened.
- User settings are personal preferences that you set, such as zooming in on the font of the editor using the mouse wheel and holding ctrl. To set this, you would check the box next to "Zoom the font of the editor using the mouse wheel and holding ctrl." By pressing ctrl and scrolling the mouse wheel, you can adjust the font size to your liking.
- Workspace settings are settings that you want to apply only to the current folder, such as using Live Server for a specific project but not for a Python project.
To change the settings, click on the Settings icon, and there you can choose to open either the User Settings or the Workspace Settings. As you make changes to the settings, they get saved in a file named settings.json. If you want to change the Workspace Settings, click on "Workspace Settings" and you can see all the settings that you have overridden.
In summary, User Settings are personal preferences while Workspace Settings are specific to the current folder that is opened. Both types of settings are saved in the settings.json file.
Every time I start a new project in VS code, I always make sure to set editor.mouseWheelZoom it to true. And since I want this setting to be applied to all my projects on this computer, I keep it this way.
If you want to learn more about VS code, it's a very integrated and detailed editor. I even made a video about it that you can find in my Python course. Even if you're not learning Python, I highly recommend watching the video to learn VS code in detail. Check out my video tutorial on VS code + Python setup where I mainly talk about VS code and less about Python. I explain everything in detail there.
For now, this is all you need to know regarding HTML, CSS, and JavaScript. If I missed anything, I'll let you know later. If I use any other tools, I'll also inform you along the way.
Let's talk about keyboard shortcuts in VS Code. By default, there are several keyboard shortcuts in VS Code, but you might want to override some of them. For example, I use Ctrl + D shortcut for replicating lines, so I added it to my keyboard JSON file. If you add any other keyboard shortcut, it will come up in your JSON file and you won't need to edit it. Find the shortcuts from other IDEs that you're used to and override them.
- Override default keyboard shortcuts
- Find shortcuts from other IDEs
- Add them to your keyboard JSON file
- They will automatically appear in your JSON file
There will be many shortcuts of IDEs that you have a habit of using. If you have even a little bit of interest in programming, you'll want to bring some of those shortcuts to VS Code.
You can also use the command palette to access all the commands in VS Code. Simply type the command you want to use and it will appear in the palette.
Live Server:
I hope you have a clear understanding of the foundation I have laid. I want to mention one thing for Linux and Mac users. Don't assume that I am only addressing Windows users. I know that I don't need to teach you how to install software. You already have that knowledge. Don't be intimidated by the fact that I am using Windows. It is just an operating system, and it doesn't mean that you can't follow this tutorial. All the other instructions, including VS code concerns and keyboard shortcuts, will be the same. They will run parallel for Mac.
0 Comments