HTML and Emmet in VS Code Lecture Notes

Introduction

• Open VS Code and create a new file for HTML.
• HTML is straightforward, no need to spend too much time on basic concepts.
• Emmet is a plugin for text editors offering high-speed coding and editing in HTML. It is built into VS Code.

Boilerplate and Document Setup

• Use ! (exclamation mark) followed by pressing Enter to generate HTML boilerplate using Emmet.
• Set the title of the document.
• Save the document using Ctrl + S.
• Use the Live Server extension to preview changes live.

Basic HTML Elements

Headers

• h1 to h6: Tags used for headings, size decreases from h1 to h6.
• Only use one h1 per page for better SEO. Do not use headers for bold text.

Paragraphs

• p tag: Used for paragraphs.
• Use Emmet to generate multiple paragraphs quickly (e.g., p*4).
• Lorem command: Generates dummy text (Lorem4 for 4 words, Lorem40 for 40 words, etc.).*

Line Breaks and Horizontal Rule

• br tag: Self-closing tag used for line breaks.
• hr tag: Self-closing tag used for horizontal lines/rules.

Text Formatting

• strong tag: Makes text bold.
• em tag: Italicizes text. Use CSS for detailed styling.
• b and i tags: Exists but not recommended for modern websites; use strong and em instead.

Using Emmet for Efficiency

• Auto-closing tags and suggestions for tags in VS Code.
• Generate multiple elements quickly (p*4, Lorem40, etc.).
• Use Ctrl + Enter to jump to a new line without breaking current paragraph.
• Toggle word wrap using Alt + Z or Command Palette in VS Code.*

Best Practices

• Do not overuse br for line breaks; it's not good practice. Use proper HTML structure and CSS for styling.
• Emphasize the use of semantic HTML for better accessibility and SEO.

Conclusion

• Practice using Emmet and HTML regularly to build familiarity with tags and improve coding speed.
• Access and save the provided playlist for course updates.

Reminder: Keep practicing with the examples and techniques shown in the video, and take notes frequently to reinforce learning.