Lesson 5: The Team Environment and a Taste of Embedded

Day 5: From Embedded Programming to Building a Youth Job Bank

Today’s class covered two very different areas of software development: a brief introduction to embedded programming, followed by the beginning of our first larger team web project.

The goal of the embedded demonstration was not to begin a new hardware unit. It was simply to show students that programming is not limited to websites and desktop computers. The same core ideas we have been learning — variables, conditions, functions, inputs, outputs, and communication — can also control physical devices.

A Quick Look at Embedded Programming

For the demonstration, I used two Wemos D1 Mini Wi-Fi boards. These are small programmable computers that can communicate wirelessly and interact with physical components such as buttons, lights, displays, sensors, and motors.

The two boards were configured to communicate directly with each other. One board acted as the controller, while the other responded to the command.

The demonstration allowed one device to control the light on the other device, while the current state was displayed on a small LCD screen.

Conceptually, the flow looked something like this:

User presses a button (changing the input)
        ↓
First Wemos reads the input
        ↓
A message is sent wirelessly to the Second Wemos
        ↓
Second Wemos receives the message
        ↓
The LED state changes
        ↓
The LCD displays the current state

This gave students a physical example of ideas that are also used in web development.

Instead of:

Browser → Server → Response

we had something closer to:

Device → Device → Response

The environment is different, but the underlying idea is similar: one system sends information, another system processes it, and something changes as a result.

Programming Exists Beyond the Browser

Embedded systems are found almost everywhere:

• Vehicles
• Home automation systems
• Appliances
• Medical devices
• Industrial equipment
• Robotics
• Sensors
• Internet of Things devices

We only spent a short amount of time on the demonstration, but it helped show that the programming concepts students are learning can eventually be applied to many different kinds of systems.

Beginning the Battlefords Youth Job Bank

After the embedded demonstration, the class shifted back to web development and began working toward our larger course project: a Battlefords Youth Job Bank.

Rather than having every student build the same page, the class was divided into two development teams. Each team was assigned a different part of the application.

Team 1: Employee Signup

The first team began building a signup page for young people who may eventually use the system to look for work.

Their page needed to begin thinking about information such as:

• Name
• Contact information
• Age
• Skills
• Availability
• Types of work they may be interested in
• (Other details following team conversation)

At this stage, the form does not need to actually save anything to a database. The goal is to build the HTML structure first.

A very small example might look like:

<form>
  <label for="name">Name</label>
  <input type="text" id="name">

  <label for="email">Email</label>
  <input type="email" id="email">

  <button type="submit">Sign Up</button>
</form>

Team 2: Job Description Pages

The second team began working on the pages that would eventually display individual job opportunities.

A job page might eventually contain:

• Job title
• Employer
• Description
• Location
• Required skills
• Hours
• Pay information
• A way to apply
• (Other details following team conversation)

Again, the immediate goal was not to make the application functional. Students were building the HTML components that can later be connected to Python and a database.

Introducing Bootstrap

Students were also introduced to Bootstrap.

Bootstrap is a frontend library. A library provides code that other developers have already written so we do not need to solve every problem from scratch.

For example, instead of writing all of the CSS required to create a clean button, Bootstrap lets us apply existing classes:

<button class="btn btn-primary">Apply Now</button>

The HTML element is still a normal button:

<button>Apply Now</button>

Bootstrap simply provides CSS associated with class names such as:

btn
btn-primary

This also reinforced something students have already been learning: classes connect HTML elements to styles.

Bootstrap and HTML Nesting

One unexpected benefit of introducing Bootstrap was that its examples made HTML nesting easier to see.

A Bootstrap card might look like this:

<div class="card">

  <div class="card-body">

    <h2 class="card-title">Lawn Care Helper</h2>

    <p class="card-text">
      Help a local resident with basic yard work.
    </p>

    <button class="btn btn-primary">
      View Job
    </button>

  </div>

</div>

Students can visually follow the structure:

card
└── card-body
    ├── title
    ├── paragraph
    └── button

This is an important part of understanding HTML. Elements are frequently placed inside other elements, and indentation helps us see those relationships.

Why Use a Frontend Library?

Writing CSS from scratch is still important to understand, but libraries can save a large amount of time.

A frontend library can provide common components such as:

• Navigation bars
• Buttons
• Forms
• Cards
• Grid layouts
• Tables
• Spacing utilities

The important lesson is not that Bootstrap replaces HTML or CSS.

Bootstrap is built on top of HTML and CSS. Understanding the underlying technologies makes it much easier to understand what the library is doing.

Using AI as a Learning Tool

Students were also introduced to using ChatGPT as a tool for explanations and learning.

I was explicit that the goal was not to ask AI to build the assignment and then copy and paste the result.

Instead, useful questions might include:

• What does this HTML element do?
• Why is my form not displaying correctly?
• Explain this Bootstrap class.
• What does this error mean?
• Explain this code one line at a time.
• Give me an example of an HTML input for an email address.

The difference is important.

AI should help students understand and solve the problem, rather than replacing the process of learning how the code works.

ChatGPT, Copilot, and Generated Code

There was also a useful misunderstanding during class.

A few students understood the instruction as meaning they should not copy code specifically from ChatGPT, but then used an AI coding assistant such as Copilot to generate code directly inside the editor.

The restriction was intended to apply to AI-generated code in general, not one particular tool.

Tools such as ChatGPT and Copilot can be useful in professional development, but during the learning process students need to be able to explain the code they are adding.

A simple rule for the course is:

If AI gives you code, do not use it until you understand what the important parts are doing.

As students gain more experience, AI tools can become very effective productivity tools. At the beginning, however, automatically generating large pieces of code can hide exactly the concepts we are trying to learn.

From Individual Exercises to Team Development

This class also marked another transition in the course.

Until now, most exercises have been individual and relatively small. The Youth Job Bank requires several different pieces that eventually need to work together.

That means students are beginning to experience another part of real software development: dividing a larger problem into smaller components.

This connects directly back to one of the first concepts introduced in the course: refinement.

The large problem is:

Build a youth job bank.

We refine that into smaller problems:

Build a youth job bank
        ↓
Create employee registration
        ↓
Create job listings
        ↓
Create individual job pages
        ↓
Store the information
        ↓
Connect the pages
        ↓
Allow applications

Each of those can then be refined even further.

Where We Are Heading

Right now, the teams are concentrating on building reusable HTML pieces.

Later, those pieces can be connected to the Python concepts students have already learned. Instead of manually creating one HTML page for every job, Python and Django will eventually allow the application to use stored data to generate those pages.

The long-term flow will look more like:

Job data
    ↓
Python / Django
    ↓
HTML template
    ↓
Generated job page
    ↓
Browser

Students do not need to understand that entire architecture yet. For now, the important step is learning how the individual frontend pieces are structured.

Main Takeaways

During Day 5, students:

• Saw a brief embedded programming demonstration using two Wemos D1 Mini boards.
• Saw two small computers communicate wirelessly with each other.
• Connected software instructions to a physical LED and LCD display.
• Began development of the Battlefords Youth Job Bank.
• Split into teams responsible for different parts of the application.
• Started an employee signup interface.
• Started building job description pages.
• Were introduced to Bootstrap.
• Used Bootstrap examples to better understand nested HTML.
• Discussed why frontend libraries can speed up development.
• Were introduced to using AI as an explanation and learning tool.
• Discussed the difference between learning with AI and allowing AI to write the project for us.

The course is now moving from isolated examples toward a real project with multiple components. The HTML may still be simple, but students are beginning to see how individual pieces can eventually be combined into a larger application.