VISUALSTUDIO-home
ITIAN Visual Studio Code Academy
Technology Simplified — Solutions That Work
Master Visual Studio Code
Learn Visual Studio Code from beginner to confident website builder. Create HTML pages, edit CSS, use Live Server, organise project folders, debug problems, use AI coding help, and prepare professional pages for WordPress.
Why Learn Visual Studio Code?
Visual Studio Code is the practical tool used throughout the ITIAN Website Academy. It lets students write, test, preview, fix and organise code before publishing to WordPress.
🌐 Build Website Pages
Create HTML pages, CSS styles, navigation buttons, resource pages, academy homes and student dashboards.
⚡ Use Live Server
Preview your page instantly in a browser and see changes as you edit your code.
🤖 Work with AI
Use ChatGPT and AI coding assistants to explain, improve, debug and generate code safely.
Course Modules
A complete pathway from installation to publishing professional ITIAN-style pages.
1. Introduction to VS Code
What VS Code is, why developers use it, and how it supports website building.
Open Lesson2. Installing VS Code
Install Visual Studio Code and prepare your computer for HTML and CSS development.
Open Lesson3. Interface Tour
Explore the editor, Explorer panel, tabs, status bar, terminal and extensions area.
Open Lesson4. Essential Settings
Configure autosave, word wrap, formatting, themes, font size and editor preferences.
Open Lesson5. Project Folders
Create website folders, organise files and understand project structure.
Open Lesson7. HTML Basics
Create headings, paragraphs, buttons, images, links, lists, sections and page structure.
Open Lesson8. CSS Basics
Style colours, fonts, spacing, cards, buttons, sections and responsive layouts.
Open Lesson9. JavaScript Basics
Understand simple scripts, interactivity and where JavaScript fits in website development.
Open Lesson10. Working with Images
Use image folders, image paths, alt text, sizing and WordPress image URLs.
Open Lesson11. Extensions
Install Prettier, Live Server, Auto Rename Tag, Path Intellisense and other useful tools.
Open Lesson12. Formatting Code
Use Format Document, Prettier and Format on Save to keep HTML neat and readable.
Open Lesson13. Debugging Problems
Find broken links, missing brackets, CSS issues, image path errors and layout problems.
Open Lesson15. GitHub Basics
Learn version control, backups, repositories and saving project changes.
Open Lesson17. WordPress Workflow
Build HTML in VS Code, test locally and paste into WordPress Custom HTML blocks.
Open LessonVisual Studio Code Workflow
The simple development flow used across ITIAN website projects.
Plan → Code → Preview → Fix → Publish
Practical Projects
Hands-on projects that turn software skills into real website-building ability.
Project 1: First HTML Page
Create a simple page with headings, paragraphs, links, images and buttons.
Project 2: Styled Webpage
Add CSS colours, spacing, typography, cards and responsive layout.
Project 3: ITIAN Lesson Page
Build a professional lesson page using ITIAN colours, header, hero and cards.
Project 4: Student Dashboard Section
Create dashboard cards, quick-start buttons and resource links.
Project 5: Academy Home Page
Build a complete academy landing page with modules and navigation.
Project 6: Publish to WordPress
Test your page locally, then paste it into a WordPress Custom HTML block.
Essential Keyboard Shortcuts
These shortcuts help you work faster and keep your code clean.
| Shortcut | Function |
|---|---|
| Ctrl + S | Save file |
| Shift + Alt + F | Format document / realign code |
| Ctrl + Shift + P | Open Command Palette |
| Ctrl + / | Comment or uncomment a line |
| Ctrl + Space | Open IntelliSense suggestions |
| Ctrl + P | Quick open file |
| Ctrl + Shift + E | Open Explorer panel |
| Ctrl + Shift + X | Open Extensions panel |
| Ctrl + ` | Open integrated terminal |
| F5 | Start debugging |
Downloads and Resources
Support materials for students working through the Visual Studio Code Academy.
Resource Library
Helpful references for HTML, CSS, JavaScript, GitHub, Live Server and WordPress.
Open ResourcesRecommended Learning Path
The best route for students building real websites with ITIAN.
Complete the Academy
Complete the lessons, finish the practical projects, pass the final quiz, and receive your ITIAN Visual Studio Code Academy certificate.