Coding 101

Why learn coding fundamentals at all?

With AI coding tools rapidly advancing, some may wonder if learning to code is still necessary. The answer is a resounding yes—and more important than ever.

AI can assist with writing code, but understanding the fundamentals of coding is what allows you to harness its full potential. Without a solid foundation, you’re at the mercy of AI suggestions, unable to verify correctness, troubleshoot issues, or adapt solutions to specific needs.

Here’s why coding fundamentals still matter:

• Critical Thinking & Problem-Solving – Knowing how to code trains you to break down complex problems, think logically, and design efficient solutions.
• Understanding AI’s Limitations – AI-generated code isn’t always correct or optimized. Developers with strong fundamentals can identify inefficiencies, prevent security risks, and improve performance.
• Customization & Innovation – AI can generate boilerplate code, but true innovation comes from developers who understand how to craft unique solutions.
• Job & Career Growth – While AI assists developers, it doesn’t replace them. The most valuable professionals will be those who can collaborate with AI, fine-tune outputs, and build high-quality software.

AI is an amplifier, not a replacement. Those who understand coding fundamentals will outperform those who rely solely on AI. Mastering the basics ensures that instead of AI coding for you, it codes with you—making you a more capable, efficient, and adaptable developer.

What Coding should you know (in the Age of AI)?

Imagine coding as writing a recipe for a very literal chef—a computer. Just like a recipe breaks down cooking into clear, step-by-step instructions, coding tells a computer exactly what to do, one precise command at a time. Each line of code is like an ingredient or a step in a process, and when combined, they create something complex like a website, an app, or even an AI-powered tool. Before AI, we would have to write code line-by-line using our software development knowledge.

Now however, in the age of AI, the skillset of learning to code with AI is different than learning to code without AI. What you need to know (if you don’t yet know code) might look like knowing how to:

1. Brainstorm and design the code architecture (with the help of AI).
2. Write code (with the help of AI).
3. Read and understand code.
4. Debug it (figure out what is going wrong when stuff inevitably goes wrong).
5. Deploy it so that other people can see what you build.

In this course, we will cover some fundamentals that will give you just enough of a foundation to be able to understand how to use AI to code.

Next, you can think of the coding environment as the place where you develop the recipe (i.e. write the code). Let’s become more familiar with the process of writing and testing code in a coding environment.

The Coding Environment

Terminal (or Command Line)

The terminal (or command line) allows you to interact with your computer using text-based commands. It’s essential for tasks such as navigating directories, running scripts, and managing version control.

For instance, if we want navigate into a folder, we can use ls (to list directories) and cd to (change into a certain directory). In Windows, the same commands look like dir and cd.

Furthermore, if you run certain commands like npm run dev, you can actually run the code you have written locally!

Practice Problems

Get Familiar with Your Terminal!

Perform the following tasks in your terminal. We expect you to use ChatGPT or Google Search to figure out the commands to perform the tasks here.

1. Create a new folder in your home directory.

Click to see answer

2. Make a new txt file that says "YOUR SECRET KEY: 12lka09werk;as93kfls!" inside of it.

Click to see answer

3. See all the

Click to see answer

4. Navigate to the Desktop of your computer.

5. Look for the file location of the secret key file (Hint: use a command like grep).

6. Move the secret key file to your desktop.

Even after completing these exercises, we recommend you play around with these commands and get familiar with how the Command Prompt/Terminal works.

IDE (Integrated Development Environment)

What are Integrated Development Environments? Think of an IDE as your all-in-one coding studio. It’s packed with features like a code editor, debugger, and even suggestions to make coding easier.

Some cool tricks:

• Command + click (or control + click on Windows) certain lines of code and it’ll show you where..
• Command + p (or control + p on Windows) allows you to search for any file in your project
• Command + shift + p (or control + shift + p on Windows) allows you to search for any command in your IDE

Different Components of an IDE:

• File Access: Choose which files to access and edit in your project
• Text Editor: Write and edit code
• Terminal (or Command prompt): Run commands
• AI Assistant Generate code

Cursor is an AI tool that functions as an IDE. The image above actually shows the Cursor IDE. You will be using it to write, debug, test, and deploy your code. You will want to download it and make sure you’re comfortable with using it!

Version Control (like Github)

Version control systems, such as Git, help you track changes to your code and collaborate with others. Github is a popular platform that hosts Git repositories, making it easier to manage and share your projects. A deeper dive into how to use Github is covered in the next section on Github Basics section.

Coding Terminology (to be familiar with)

Frameworks

Frameworks provide a structured foundation for building applications, enforcing architectural patterns and best practices. Unlike standalone libraries, they offer a guided approach, streamlining development and organization. When you install a framework, you’re installing a folder of files and folders that contain the code for the framework.

For our MVP, we will leverage Next.js to ensure efficiency and scalability. In the image above, you can see the file structure of a Next.js project. It is a directory of folders and files that contain the code for the project. It has a particular file structure that is used to organize the code. Different functionalities will live in different folders in your project that leverages this framework. Examples: Next.js, Astro

Libraries

Libraries are sets of functions and routines that help perform specific tasks. When you import a library into your project, you can use the functions and routines it provides to help you accomplish your goals. They don’t usually dictate the overall structure of your application; instead, they provide tools that you can use wherever needed.

To make this more concrete, let’s say you have data that sits in your database, and you want to display a chart of the data. Instead of writing the data visualization code yourself, you can download and import a library like Rechart to help you accomplish this. For instance, adding the following code to your project will allow you to display a chart of the data (without having to define and plot the chart yourself).

import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
{ month: 'Jan', sales: 4000 },
{ month: 'Feb', sales: 3000 },
{ month: 'Mar', sales: 5000 },
];

const MyBarChart = () => (
<ResponsiveContainer width="100%" height={300}>
  <BarChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Bar dataKey="sales" fill="#8884d8" />
  </BarChart>
</ResponsiveContainer>
);

export default MyBarChart;

As you build your project, you will be able to import libraries like this and others to add the functionality you need for your application. Typically, the AI agent will help you identify which libraries you need to install and write the code to use them. Examples: React, Rechart, Axios, etc.

Packages

Packages are collections of prewritten code that add functionality to your projects. You can think of them as a means of obtaining code (either library, scripts, or full applications). They allow you to reuse code without reinventing the wheel.

You will typically install packages using a package manager like npm or yarn. Typical commands to download packages look like:

npm install package-name

or

yarn add package-name

Packages that you will be using in this course include but are not limited to: Next.js, Tailwind CSS, Supabase, OpenAI, etc.

Frameworks, Libraries, and Packages in our Workflow

We will be using Next.js as our framework for this course. We will begin our project by installing the Next.js framwework by downloading the package using npm or yarn (package installers). Then, as needed, we will install packages containing libraries and functions to help build our project (like Supabase, Tailwind CSS, OpenAI API, etc).

APIs (Application Programming Interfaces)

Think of an API (Application Programming Interface) like a customer service counter at a restaurant. You (the customer) place an order (input), and after a short wait, the counter hands you your food (output). You don’t need to know what’s happening in the kitchen—how the chefs prepare the food, what ingredients they use, or the exact process. You just make a request and get a result.

In the same way, an API is a way for apps to talk to each other. You send a request (input), and the API gives you data (output), without revealing how everything works behind the scenes.

Real-World Example: Imagine you’re using a weather app on your phone. That app doesn’t store all the weather data itself—it asks a weather API for the latest forecast. The API then sends back the current temperature, humidity, and conditions.

• You request: “What’s the weather in Mountain View?”
• API responds: “Sunny, 72°F”

Just like ordering at a counter, you don’t need to know how the API fetches that data—you just get the info you need! Examples:

• Google Maps API:
  • Request:
• OpenAI API: Allows you to use OpenAI’s powerful AI models in your application.
• Supabase API: Allows you to use Supabase’s powerful database and authentication services in your application.
• Stripe API: Allows you to use Stripe’s powerful payment processing services in your application.

.ENV File

A .env file is like your secret vault. It stores environment variables, which include configuration settings like API keys and database credentials. This file helps keep sensitive information secure and makes it easier to manage settings across different environments (development, testing, production).

An example .env file might look like:

OPENAI_API_KEY=sk-proj-1234567890
SUPABASE_URL=https://example.com
SUPABASE_KEY=1234567890

Note, those are just example keys and you should not use them in your projects.

You will want to make sure to NOT share this file with others, since it contains sensitive information. If someone has access to your OpenAI API key, for instance, they can use it to make API calls to OpenAI and you will get billed for it. If you are using Github, you will want to add the .env file to the .gitignore file (so it is not tracked by Github).

Typical Coding Workflows

Installing Packages

Installing packages is usually done through a package manager. For JavaScript, you might use npm or yarn:

npm install package-name

Building a Project Locally

(If you are using the Next.js framework), this typically looks like:

npm run dev

When you run this command, you will be able to view your project in the browser at a certain URL (usually http://localhost:3000).

Debugging

Debugging is the process of finding and fixing errors in your code. It is a crucial part of the development process.

1. Using console.log(), and viewing the console.
2. Using breakpoints and the debugger statement.

Practice Weather Project: Putting it all together!

Get familiar with using an IDE, installing packages, using an API, and running your project!

Get familiar with the things you will be doing a lot of during this course! Don’t forget to leverage ChatGPT or other LLMs to answer questions you might have while you do these steps!

1. Create a new folder (directory) in your Terminal/Command Prompt.
2. Open up this folder in Cursor.
3. Ask Cursor to write a file that calls the Open Weather API (doc on how to use it here: https://openweathermap.org/api/one-call-3).
4. Download the matplotlib package in your directory.
5. Ask Cursor to use this package to extract out 8 day forecast for your city, and plot the temperature.
6. Run your script with the command:

python filename.py

After you have done these steps, you will have worked with installing packages, working in an IDE environment, practiced using Cursor to write code for you, and run your script locally!

TODO: Provide an answer video showing how to do these steps.

References:

• APIs Explained