HTML Tutorial Introduction

Getting Started

• Access the HTML tutorial playlist
• Bookmark the tutorial playlist for easy access

Recap of Last Video

• To build websites, we need HTML, CSS, and JavaScript
• Overview of HTML, CSS, and JavaScript
  • HTML: Structure of web pages
  • CSS: Styling of web pages
  • JavaScript: Interactivity of web pages
• Interaction with web servers
  • Browser requests to server and gets HTML, CSS, and JavaScript in response

Preparing to Write HTML

• Writing HTML in Notepad is possible but not recommended
• Use an Integrated Development Environment (IDE) for better workflow
  • VS Code: A free, open-source IDE from Microsoft

Installing VS Code

• Search for "Visual Studio Code" and install it
• Follow the installation steps
  • Accept the license agreement
  • Check options to add VS Code to Windows Explorer and path
  • Create a desktop icon (optional)
• Run the installer, then finish once installation is complete
• Creating a Project Folder
  • Create a new folder named "Complete Web Development Boot Camp"
  • Open the folder in Visual Studio Code

Using VS Code

• Opening Folders
  • Right-click and choose "Open with Code"
  • Alternatively, open VS Code and use "Open Folder" option
• Creating Files
  • Create HTML, CSS, and JavaScript files (e.g., harry.html, harry.css, harry.js)
• Advantages of Using VS Code
  • Syntax highlighting
  • Suggestions and autocompletion

Browser Recommendation

• Use Google Chrome for a stable browsing experience
• Alternative browsers: Firefox, etc.

VS Code Features

• Emmet Abbreviations
  • Type ! and press enter to get an HTML boilerplate
• Settings Gear Icon
  • Customize VS Code settings
• Explorer
  • Manages files and folders
• Extensions
  • Install "Live Server" extension for live-reloading

Live Server Extension

• Install "Live Server" extension
• Click "Go Live" to start the server
• Changes in HTML will reflect immediately without reloading

VS Code Settings

• User Settings vs Workspace Settings
  • User Settings: Apply to the entire VS Code installation
  • Workspace Settings: Apply only to the current workspace
• Custom Keyboard Shortcuts
  • Modify and override shortcuts to fit personal preferences
• Command Palette
  • Access various VS Code commands

Integrated Terminal

• Access built-in terminal in VS Code
• Set default terminal shell (e.g., Git Bash, Powershell)

Final Notes

• Linux and Mac users can follow along as well
• Ensure to interact and provide feedback in comments
• Bookmark the tutorial playlist

Thank you for watching!