Coding for Career Changers

Module 1: Getting Started with Web Development

Lesson 1: Setting Up Your Coding Environment

Welcome to your first coding lesson! Today, we're going to set up Visual Studio Code (VSCode), the tool professional developers use to write code, and create your very first webpage.

Don't worry about understanding everything at once. The goal of this lesson is to get you comfortable with the coding environment and see results quickly.

Step 1: Download and Install VSCode

VSCode is like Microsoft Word, but for writing code instead of documents. It helps you organize your code and provides helpful hints as you type.

  1. Go to code.visualstudio.com
  2. Click the download button for your operating system (Windows, Mac, or Linux)
  3. Run the installer and follow the default prompts
  4. When installation is complete, launch VSCode

Success Check: You should see the VSCode welcome screen with options to create a new file, open a folder, etc.

Step 2: Create Your First HTML File

Now that VSCode is running, let's create your first HTML file:

  1. Close the welcome screen by clicking the "X" on the tab
  2. Click "File" then "New File" (or press Ctrl+N on Windows/Cmd+N on Mac)
  3. Click "File" then "Save" (or press Ctrl+S/Cmd+S)
  4. Name the file "index.html" and save it somewhere easy to find (like your Desktop)

Pro Tip: Get used to pressing Ctrl+S (or Cmd+S) frequently to save your work. This is a habit that all programmers develop!

Step 3: Write Your First HTML Code

Copy and paste the following code into your new file:

My First Webpage

Hello, World!

I'm learning to code!

My name is [YOUR NAME HERE]

Don't worry about understanding all of this code right now. In the next lesson, we'll break down what each part means.

Step 4: Make It Your Own

Let's personalize your webpage with a few simple changes:

  1. Find the line that says [YOUR NAME HERE] and replace it with your actual name
  2. Save the file (Ctrl+S/Cmd+S)

Important: Make sure to save your file after making changes!

Step 5: View Your Webpage

Now let's see what your webpage looks like:

  1. Find your saved file in your computer's file explorer/finder
  2. Double-click the file to open it in your web browser

You should see your webpage with the heading "Hello, World!" and your name displayed.

Success Check: If your webpage doesn't display correctly, double-check that you saved the file with the .html extension and that you copied all the code exactly as shown above.

Step 6: Make More Changes

Now that you've seen your webpage, let's make a few more changes:

  1. Go back to VSCode
  2. Change the title between the <title> tags to something like "My Awesome Website"
  3. Change "Hello, World!" to a greeting of your choice
  4. Add a new line under your name: <p>This is my first website!</p>
  5. Save the file (Ctrl+S/Cmd+S)
  6. Go back to your browser and refresh the page (F5 or Ctrl+R/Cmd+R)

You should see your webpage update with all your changes!

What You've Learned

Congratulations! In this lesson, you've:

  • Set up VSCode, a professional coding tool
  • Created your first HTML file
  • Written and edited basic HTML code
  • Viewed your webpage in a browser
  • Made changes and seen them appear in real-time

You might not understand everything about the code yet, but you've already taken the first important steps in learning to code!