Modern Developer Tools

Overview of professional development tools: Git, GitHub, VS Code, Node.js, and the modern web development workflow.

Introduction

The Developer Experience Revolution

Just a few years ago, web development meant wrestling 🤼 with complicated setup processes, inconsistent tools, and workflows that felt more like obstacles than aids. Today's modern development tools have revolutionized how we build for the web, making development faster, more reliable, and dare we say it - actually enjoyable.

What You'll Learn Today

  • The essential tools that professional developers use daily
  • How these tools work together to create a seamless development workflow
  • Why learning proper tooling is as important as learning to code
  • How modern tools can accelerate your learning process

Core Concept Overview

The Holy Trinity of Web Development

As programming instructor Todd McLeod puts it: HTML, CSS, and JavaScript are the Holy Trinity of Web Development. But modern web development is as much about the tools that help you work with these technologies as it is about the languages themselves.

Essential Developer Tools

1. Git & GitHub - Version Control & Collaboration

  • Git: Track every change to your code, work on features safely, and never lose work again
  • GitHub: Host your code online, collaborate with others, and showcase your projects
  • Why it matters: Every professional development team uses version control. It's not optional.

2. Terminal/Command Line - Direct Communication with Your Computer

  • What it is: A text-based way to give commands to your computer
  • Built-in AI help: Warp includes AI that can explain commands and help when you're stuck
  • Why it matters: Many programming tasks are much faster with text commands than clicking through menus. Getting good with the terminal can actually open up additional career opportunities, but that level is beyond this course.

3. Visual Studio Code - Your Code Editor

  • Why not Notepad or Word: VS Code is designed specifically for writing code, especially JavaScript, HTML, and CSS
  • Syntax highlighting: Makes code easier to read and understand
  • Intelligent features: Highlights your code with colors, suggests completions, catches typos, and provides AI 🤖 coding assistant
  • Extensions: Add features as you need them (we'll set up the essential ones)
  • Why it matters: A good code editor prevents many common mistakes and speeds up your work. You save your limited mental energy for solving problems, not fighting your tools.

4. Node.js - JavaScript Tool

  • What you need to know now: We'll install this so you can run JavaScript programs later in the course
  • When you'll learn more: Once we start writing JavaScript code

5. Code Quality Tools

  • ESLint: Catches potential bugs and enforces coding standards
  • Prettier: Automatically formats your code consistently
  • Why it matters: Consistent, clean code is easier to debug and maintain (and grade!)

Key Terms You Need to Know

  • Repository (Repo): A project folder that Git is tracking
  • Commit: A saved snapshot of your project at a specific point in time
  • Package: A collection of code written by someone else that you can use in your project
  • Terminal/CLI: Text-based interface for running commands on your computer
  • Localhost: Your own computer acting as a web server for development

Tool Integration Example

Let's see how these tools work together with a simple example:

Scenario: You're building a personal portfolio website

  1. VS Code: You write HTML, CSS, and JavaScript with syntax highlighting and error detection
  2. Development tools: You can test your changes instantly without uploading files anywhere
  3. Code quality: Your code is automatically formatted and checked for common mistakes
  4. Git: You save your progress: git commit -m "Add navigation menu"
  5. GitHub: You back up your code online where others can see it

Why These Tools Matter for Learning

Faster Feedback Loop

  • Without tools: Write code → Save file → Upload to server → Refresh browser → Repeat
  • With tools: Write code → See changes instantly → Debug in real-time → Commit when ready

Professional Habits from Day One

  • File organization: Proper project structure from the start
  • Version control: Never lose work, experiment safely
  • Code quality: Write clean, consistent code automatically
  • Collaboration ready: Your projects can easily be shared and worked on with others

Using AI to Learn as You Go

Warp's Built-in AI Assistant

One of the best features of Warp is its built-in AI that can help you learn terminal commands:

  • Ask questions: Type # followed by what you want to do: "#how do I list files in a folder?"
  • Explain commands: If you see a command you don't understand, ask Warp to explain it
  • Get suggestions: Warp can suggest commands based on what you're trying to accomplish
  • Learn by doing: Don't memorize commands - just ask the AI when you need help

VS Code AI Features

VS Code also has AI-powered features that help you learn:

  • IntelliSense: Suggests code as you type based on what you're working on
  • Error explanations: Hover over red underlines to see what's wrong and how to fix it
  • GitHub Copilot: AI pair programmer that can explain code and suggest solutions. Wit a student email, you can get free access to GitHub Copilot through the GitHub Student Developer Pack.

Key principle: Use these AI features to learn and understand, not to avoid thinking. Always try to understand what the AI is suggesting before using it. AI is not perfect and can make mistakes. It can lead you astray and critical thinking is necessary to evaluate its suggestions.

Setting Expectations

Important Notes About Installation:

  • Do not install any tools yet - we'll do this systematically in the next lessons
  • Mac and Windows have different processes - follow the guide for your specific operating system
  • Order matters - installing tools in the wrong sequence can cause conflicts

Industry Best Practices

Development Environment Management

  1. Keep it clean: Don't install random tools without understanding their purposes. Preferably, consult a trusted source (e.g. boss or instructor) to verify their effectiveness. They are plenty of tools marketed as "must-haves" that add unnecessary complexity.
  2. Document your setup: Know what you've installed and why. Fortunately, that's already done for you in this course!
  3. Use consistent naming: Follow established conventions for files and folders
  4. Regular maintenance: Keep tools updated, clean up unused packages
  5. Backup your work: Use Git and GitHub to ensure your code is safe

Wrap-Up & Assessment

Key Takeaways

  1. Modern tools are essential - They're not "nice to have," they're professional requirements
  2. Tools work together - The real power comes from integration, not individual tools
  3. Setup matters - Proper installation and configuration prevents hours of frustration later
  4. Professional habits - Learning good workflows now will serve you throughout your career
  5. Continuous learning - New tools emerge regularly, but fundamentals remain consistent

Create a GitHub Account and Qualify for GitHub Student Developer Pack

  1. Create a GitHub Account:

    • Go to GitHub and sign up for a new account if you don't have one.
    • Use your school email address - this unlocks GitHub education benefits.

    Note: You can add multiple emails to your GitHub account later and/or change to another email after you graduate 👩🏾‍🎓.

  2. Verify Your Student Status:

  3. Access the GitHub Student Developer Pack:

    • Once verified, you will gain access to the GitHub Student Developer Pack, which includes free access to GitHub Copilot and other developer tools
    • Explore the tools available in the pack and consider how they can enhance your learning and development workflow.

Self-Check

You should write out your answers in a designated notebook for this course.

  1. Why are modern developer tools essential for web development?
  2. How do Git and GitHub work together to help developers manage their code?
  3. What are the benefits of using a code editor like VS Code over a basic text editor?
  4. Explain how the terminal/command line can improve your development workflow.5. Describe how AI features in Warp and VS Code can assist you in learning and coding.

Up next

Mac Setup Guide

Complete setup instructions for Mac users: Homebrew, VS Code, Node.js, and Git.