Web Development Setup for Beginners (2025 Edition) | Chrome, VS Code, XAMPP, Git

Описание: 🌐 Welcome to GridSyntax!

In this first episode, we’ll set up your entire web development environment. The same professional setup used by developers around the world.
From installing Chrome and VS Code, to configuring PHP, MySQL, and Git with XAMPP and SourceTree, you’ll be ready to start building real, dynamic websites from scratch.

Whether you’re new to coding or want a clean development setup, this video walks you through everything step by step.

🧰 What You’ll Learn

How to install and customize Google Chrome for development
Enabling Dark Mode and adding the ColorZilla color picker extension
Using Chrome DevTools to inspect, test, and debug websites
Installing VS Code and configuring must-have settings and extensions
Setting up XAMPP for local PHP and MySQL development
Moving the htdocs folder for better organization
Configuring VS Code to run PHP files directly
Installing and setting up SourceTree for Git version control
Final wrap-up and next steps

🕒 Timestamps
0:00 Intro
0:35 Install Chrome
1:08 Chrome Dark Mode
1:35 ColorZilla Extension
3:25 Chrome DevTools
3:57 Chrome DevTools Docking
4:30 Toggle Device Toolbar
5:09 DevTools Dark Mode
5:39 VS Code Installation
6:15 VS Code Settings
8:14 Must-Have Extensions
14:00 XAMPP Installation
15:11 XAMPP Control Panel
16:17 Moving htdocs Folder
18:46 VS Code PHP Settings
20:15 SourceTree Installation
22:14 Wrap-up

⚙️ Tools & Resources

Google Chrome: https://www.google.com/chrome/
VS Code: https://code.visualstudio.com/
XAMPP: https://www.apachefriends.org/
SourceTree: https://www.sourcetreeapp.com/
ColorZilla Extension: https://www.colorzilla.com/chrome/

🔗 Connect with GridSyntax
Stay updated with tutorials, coding tips, and behind-the-scenes content:

🌐 Website: https://gridsyntax.dev
✉️ Contact: [email protected]
💻 GitHub: https://github.com/gridsyntax
📸 Instagram:   / gridsyntax  
🦋 Bluesky: https://bsky.app/profile/gridsyntax.b...
𝕏 (Twitter): https://x.com/gridsyntax
▶ YouTube:    / @gridsyntax  

GridSyntax helps you build what you imagine. Guiding you through every step of creating real-world websites using HTML, CSS, Bootstrap, JavaScript, PHP, and MySQL.
Each episode builds toward a complete, working project with version control and best practices.

Build what you imagine. I’ll show you how. Let’s make it real.