RealACJoshua

Posted on Feb 28

The Ultimate Beginner's Guide to Setting Up Your Full Stack Development Environment

#devjournal #webdev #beginners #programming

Everything You Need to Start Coding Like a Pro 🚀

Introduction

Setting up your development environment is the first step in your coding journey. A well-configured setup saves time, reduces errors, and lets you focus on building amazing projects. In this guide, we’ll walk through installing tools, writing your first code, and optimizing your workflow—all tailored for Windows (but applicable to macOS/Linux too!).

1. Choosing Your Tools

Operating System (OS)

Windows, macOS, or Linux: All work! We’ll use Windows, but most tools are cross-platform.
Pro Tip: Windows users can enable WSL (Windows Subsystem for Linux) for a Unix-like terminal experience.

Code Editor: Visual Studio Code

Why VS Code? Free, lightweight, and packed with extensions.
Installation:
1. Download from code.visualstudio.com.
2. Install recommended extensions:
  - Live Server: Auto-refresh your HTML pages.
  - Prettier: Automatically format code.
  - ESLint: Catch JavaScript errors.
  - GitLens: Supercharge Git integration.

Command Line Interface (CLI)

Windows: Use PowerShell or Git Bash (installed with Git).
How to Open (PowerShell): Right Click the windows logo and Select PowerShell
Basic Commands Cheat Sheet:

Command Description

cd folder_name Navigate into a folder

cd .. Move up (back) one folder

mkdir project Create a new directory

ls or dir List files in the current folder

Command	Description
`cd folder_name`	Navigate into a folder
`cd ..`	Move up (back) one folder
`mkdir project`	Create a new directory
`ls` or `dir`	List files in the current folder

2. Essential Installations

Git: Version Control

Install: Download from git-scm.com.
First-Time Setup:

  git config --global user.name "Your Name" # Replace Your name with value "Your Name"
  git config --global user.email "your@email.com" # Replace Your email with value "your@email.com"

Basic Commands:

  git init          # Start a new repository
  git add .         # Stage all changes
  git commit -m "Initial commit"  # Save changes

Node.js & npm: JavaScript Runtime

Install: Download the LTS version from nodejs.org.
Verify Installation:

  node -v  # Should show v18.x or higher
  npm -v   # Should show 9.x or higher

Alternative: Install Yarn (npm install -g yarn) for faster package management.

3. Your First Project: “Hello, Web!”

Step 1: Create a Project

Open PowerShell/Git Bash and run:

   mkdir hello-web
   cd hello-web
   npm init -y  # Creates package.json

Step 2: Build the HTML

Create index.html in VS Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello, Web!</title>
  <!-- Add Tailwind CSS for styling -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-center pt-10">
  <h1 class="text-4xl font-bold text-blue-600">Hello, Web Development! 🌐</h1>
  <p class="mt-4 text-gray-700">This is your first web page.</p>
  <button onclick="alert('You clicked. Good, Make The ACJ Proud')" class="mt-6 px-4 py-2 bg-blue-500 text-white rounded">
    Click Me
  </button>
</body>
</html>

Step 3: View Your Page

Right-click the file and select Open with Live Server (VS Code extension).
You Can also locate the file in your file explorer and double-click to open in a browser
Success! Your browser will open at http://localhost:5500 with auto-reload.

4. Pro Tips for Efficiency

Keep Tools Updated:
- VS Code: Check for updates in the Help menu.
- Node.js: Use npm install -g npm to update npm.
Customize VS Code:
- Themes: Try One Dark Pro or Material Icon Theme.
- Keyboard Shortcuts: Learn Ctrl+S (Save) and Ctrl+ (backtick) to toggle the terminal.
Master Git:
- Host your code on GitHub/GitLab.
- Write descriptive commit messages like "Add login button" instead of "Update code".

5. Summary & Next Steps

Key Takeaways:

Tools: VS Code, Git, Node.js, and CLI are your essentials.
Workflow: Use Live Server for instant previews, Git for version control.
Mindset: Stay curious—explore extensions and practice daily!

What’s Next?

Learn HTML/CSS/JavaScript basics.
Dive into frontend frameworks (React, Vue) or backend (Node.js, Express).
Build a portfolio and share it on GitHub!

Let’s Connect!

Stuck? Comment below or reach out on Twitter/X and My Website. Happy coding! 👩💻👨💻

#DevJourney #WebDev #Beginners #Programming

DEV Community