Setup

Demo Environment

  • Language: English
  • OS: Windows 11
  • Code Editor: VS Code
  • Browser: Google Chrome

Editor Installation

Visual Studio Code

  • Download Link
  • Extensions:
    • Live Server: Launch a local development server with live reload feature for static & dynamic pages.
    • W3C Web Validator: Validity is one of the quality criteria for a Web page.
    • GitHub Copilot: AI assistant (Optional, and not recommended for programming beginners). Login to GitHub account is needed.
  • Login to your Microsoft account in preferred. You can use your FH account.

WebStorm (Alternative)

Other Online Tools

  • JS Bin: An online code editor for HTML, CSS & JavaScript.
  • codepen.io: CodePen is a social development environment for front-end designers and developers.

How to use VS Code

  • Visual Studio Code documentation
  • Setup
    • Shift + 1 and press enter to get a default html template
    • Change Font-size & Theme (File -> Preferences -> Settings)
    • Working on individual lines of code
    • Enable Editor: Word Wrap (File -> Preferences -> Settings and search Editor: Word Wrap)
    • HTML Format: Wrap Line length 50 -> 80
    • Indentation – to make code easier to read (Tab)
    • Apply automatic formatting to your code (Shift + Alt + F)
    • Toggle Comments (Ctrl + /)
    • Adding Extensions
  • Shortcut
    • Ctrl + S: save the file, or File -> Auto Save in VS Code
    • Ctrl + A: select all texts
    • Ctrl + /: enable/disable comments
    • Alt + Shift + F (Windows)/ Option + Shift + F (Mac OS): automatic formatting
    • VS Code shortcut
    • Alt+L and then Alt+O: enable Live Server
    • Ctrl + Shift + V or Ctrl + K V: Open Preview of Markdown All in One (Extension)
  • Notes
    • Setup the default browser for Live Server: Windows Search -> Setting -> Apps -> Default Apps -> Google Chrome
    • Do not use Debugger in the VS Code for html pages

Your First HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

References

Terminology

  • Content syndication: means republishing the same piece of content – an article, a video, an infographic, etc. – on one or more different websites.