Skip to content

GETTING_STARTED.md

Latest commit

 

History

History
250 lines (194 loc) · 5.57 KB

GETTING_STARTED.md

File metadata and controls

250 lines (194 loc) · 5.57 KB

🚀 Getting Started with Coding

Welcome to your coding journey! This guide will help you take your first steps.

📚 Table of Contents

  1. What You Just Installed
  2. Your First Project
  3. Common Beginner Questions
  4. Learning Resources
  5. Troubleshooting

What You Just Installed

Think of your new setup like a fully equipped kitchen:

  • VS Code = Your cutting board (where you write code)
  • Node.js/Python = Your ingredients (programming languages)
  • npm/yarn = Your grocery store (download code others have made)
  • Git = Your recipe book (save your work)
  • Databases = Your refrigerator (store data)

Your First Project

Option 1: Simple HTML Website (Easiest)

  1. Open Terminal
  2. Type these commands one by one:
cd ~/Dev/projects
mkdir my-first-website
cd my-first-website
code .
  1. In VS Code, create a new file called index.html
  2. Copy this code:
<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #f0f0f0;
        }
        h1 {
            color: #333;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Welcome to My First Website!</h1>
    <p>This is my first web page. Pretty cool, right?</p>
    <button onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
  1. Save the file (Cmd+S)
  2. Right-click the file in VS Code and select "Open with Live Server" (If you don't see this option, install the "Live Server" extension)

Option 2: Interactive JavaScript Project

  1. Open Terminal
  2. Create a simple to-do app:
cd ~/Dev/projects
npx create-react-app my-todo-app
cd my-todo-app
npm start
  1. Your browser will open automatically!
  2. Edit src/App.js to see changes live

Common Beginner Questions

Q: "What's Terminal?"

A: It's like texting with your computer. Instead of clicking, you type commands.

Q: "What's the difference between Node.js and JavaScript?"

A: JavaScript is the language. Node.js lets JavaScript run on your computer (not just in browsers).

Q: "Do I need to memorize all these commands?"

A: No! Even experienced developers Google commands daily. Keep this guide handy.

Q: "What should I build first?"

A: Start simple:

  • Personal website
  • Calculator
  • To-do list
  • Weather app (using free APIs)

Q: "How long until I can build real apps?"

A: With consistent practice:

  • 1-2 months: Simple websites
  • 3-6 months: Interactive web apps
  • 6-12 months: Full applications

Learning Resources

🆓 Free Resources

  1. freeCodeCamp (https://freecodecamp.org)

    • Start here! Interactive lessons
    • Build projects for your portfolio
    • Get certificates

  2. The Odin Project (https://theodinproject.com)

    • Comprehensive curriculum
    • Real-world projects
    • Active community

  3. JavaScript.info (https://javascript.info)

    • Modern JavaScript tutorial
    • Clear explanations
    • Lots of examples

  4. MDN Web Docs (https://developer.mozilla.org)

    • The web's encyclopedia
    • Look up any HTML/CSS/JS topic

📺 YouTube Channels

  • Traversy Media
  • Web Dev Simplified
  • The Net Ninja
  • freeCodeCamp

📱 Practice Apps

  • Grasshopper (Google's coding app)
  • SoloLearn
  • Mimo

Troubleshooting

Common Issues and Fixes

"Command not found"

source ~/.zshrc

Then try the command again.

"Permission denied"

Add sudo before your command:

sudo [your command]

VS Code won't open from Terminal

  1. Open VS Code manually
  2. Press Cmd+Shift+P
  3. Type "Shell Command: Install 'code' command"
  4. Press Enter

npm/yarn errors

Try clearing the cache:

npm cache clean --force

"Port already in use"

Another app is using that port. Try:

lsof -ti:3000 | xargs kill

Still Stuck?

  1. Google the error message - Copy the exact error and search
  2. Stack Overflow - Where developers help each other
  3. Reddit - r/learnprogramming is very beginner-friendly
  4. Discord - Join coding communities

💪 Daily Practice Ideas

Week 1-2: HTML & CSS

  • Build a personal bio page
  • Create a recipe card
  • Make a photo gallery

Week 3-4: JavaScript Basics

  • Add a dark mode toggle
  • Create a tip calculator
  • Build a countdown timer

Month 2: Interactive Projects

  • To-do list with local storage
  • Weather app with API
  • Simple quiz game

🎯 Tips for Success

  1. Code daily - Even 30 minutes helps
  2. Build projects - Don't just watch tutorials
  3. Break problems down - Big problems = many small problems
  4. Join communities - Learning alone is harder
  5. Embrace errors - They're not failures, they're clues

🎉 You've Got This!

Remember:

  • Everyone started as a beginner
  • Feeling confused is normal
  • Small progress is still progress
  • The coding community is helpful

Welcome to the world of coding! Your journey starts now. 🚀

Quick Reference Card

Save these common commands:

# Navigate to your projects
cd ~/Dev/projects

# Create a new project folder
mkdir project-name
cd project-name

# Open in VS Code
code .

# Start a React app
npx create-react-app app-name

# Install packages
npm install package-name

# Run your project
npm start

# Save your work with Git
git add .
git commit -m "Description of changes"

Happy coding! 🎨✨