Install VS Code and Extensions | Complete HTML CSS JavaScript Course in Hindi - Tutorial #2

Introduction to Web Development and Code Editors

Overview of Web Development

• The video welcomes viewers and recaps previous content on web development, covering front-end, back-end, and full-stack development.

• Key technologies discussed include HTML, CSS, and JavaScript, emphasizing their roles in website creation.

Understanding Code Editors

• A code editor is essential for writing programs; it functions similarly to a notebook for coding.

• Code editors simplify the coding process by providing external functionalities that enhance productivity compared to basic text files.

• Examples of popular code editors mentioned are Sublime Text, Atom, and Visual Studio Code (VS Code).

Installing Visual Studio Code

Downloading VS Code

• The presenter chooses VS Code for this series due to its popularity and personal preference.

• To download VS Code, users should visit the official site at code.visualstudio.com where options for Windows, Linux, and Mac OS are available.

Installation Process

• The installation process involves selecting the appropriate version for your operating system (Windows in this case).

• After downloading, users must agree to the license terms during installation and can choose whether or not to create a desktop icon.

Getting Started with VS Code

Opening Projects in VS Code

• Once installed, users can open VS Code directly from the installation prompt or through their desktop shortcut.

• Users can create new folders for projects on their desktop and open them directly within VS Code using the "Open with code" option.

File Management in VS Code

• New files can be created within any opened folder by clicking on 'New File' in the file structure panel.

Enhancing Your Coding Experience with Extensions

Installing Extensions

• Extensions act as plugins that customize functionality within VS Code.

• The presenter highlights two important extensions: Live Server (for live previews of web pages), which enhances coding efficiency especially for beginners.

Using Live Server Extension

• Live Server allows real-time updates in Chrome as changes are made in the code. This feature is crucial for visualizing design changes instantly.

Customizing Visual Studio Code

Changing Themes

Visual Studio Code Customization and Shortcuts

Theme Selection in Visual Studio Code

• Users can choose from various themes in Visual Studio Code, including light and dark options. The speaker prefers the dark theme for better visibility.

• Different themes available include "dark modern," "dark players," and "high contrast." Users are encouraged to select a theme that suits their personal preference.

Keyboard Shortcuts Overview

• The speaker introduces keyboard shortcuts as a way to enhance productivity within Visual Studio Code, highlighting the importance of customization.

• A specific shortcut for copying a line down is demonstrated: pressing Shift + Alt + Down allows users to duplicate lines easily.

Customizing Shortcuts

• Users have the flexibility to customize their own shortcuts according to their workflow preferences, which enhances usability and efficiency.

• The speaker mentions additional shortcuts for live server functionality: Alt + L for live preview and Go Live options, emphasizing the ease of access through keyboard commands.

Conclusion and Next Steps