Lesson 1: Thinking Like a Builder
Day 1: Thinking Like a Builder
On Day 1, students were introduced to two important ideas in software development: abstraction and refinement. These concepts are not just programming terms. They are ways of thinking that help people turn a large, unclear idea into something that can actually be built.
Abstraction: Hiding Complexity
Abstraction means taking something complicated and representing it with a simpler idea.
For example, when we say “website,” we are using an abstraction. A website may include HTML files, CSS files, images, buttons, forms, servers, databases, and network requests. But most of the time, we do not think about all of those pieces at once. We simply say “website.”
This is useful because humans cannot work effectively if they try to think about every tiny detail at the same time. Abstraction lets us work with the big idea first.
Refinement: Breaking the Idea Down
Refinement means taking a broad idea and making it more specific step by step.
For example, we might start with this:
Build a website.
Then we refine it:
- Build a website for a local organization.
- Add a homepage, an about page, and a contact page.
- Add a header, paragraphs, lists, and sections.
- Style the page with CSS.
This is how software projects become manageable. We start with a general idea, then refine it into smaller pieces that can be designed, written, tested, and improved.
Abstraction and Refinement Together
A simple way to remember the difference is:
- Abstraction helps us zoom out.
- Refinement helps us zoom in.
Good programmers use both. They need to understand the big picture, but they also need to break that picture into clear, specific instructions.
First Introduction to HTML
After discussing abstraction and refinement, students were introduced to the basic structure of an HTML page.
HTML stands for HyperText Markup Language. It is the language used to describe the structure of a webpage. It tells the browser what content exists on the page, such as headings, paragraphs, lists, and sections.
A very simple HTML page can look like this:
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<h1>My First Webpage</h1>
</header>
<div>
<p>This is a paragraph on my webpage.</p>
<p>This is another paragraph.</p>
<ul>
<li>HTML creates structure</li>
<li>CSS adds style</li>
<li>JavaScript can add interaction</li>
</ul>
</div>
</body>
</html>In this example, students saw several common HTML elements:
- <html> wraps the whole document.
- <head> contains information about the page, including links to files like CSS.
- <body> contains the visible content of the page.
- <header> is used for introductory or top-of-page content.
- <p> creates a paragraph.
- <ul> creates an unordered list.
- <li> creates an item inside a list.
- <div> creates a general section or container.
Connecting CSS
Students also saw how a separate CSS file can be connected to an HTML file using the <link> tag inside the <head> section.
<link rel="stylesheet" href="index.css">CSS stands for Cascading Style Sheets. HTML describes the structure of the page, while CSS controls how the page looks.
For example, we can give an HTML element a class:
<div class="content">
<p>This section can be styled with CSS.</p>
</div>Then we can target that class in CSS:
.content {
border: 1px solid black;
padding: 16px;
}The period before content tells CSS that we are selecting a class. This allows us to apply the same style to any HTML element that uses class="content".
The Main Takeaway
The main goal of Day 1 was not to memorize every HTML tag or CSS rule. The goal was to understand how web development starts:
- Begin with a broad idea.
- Use refinement to break it into smaller pieces.
- Use HTML to create structure.
- Use CSS to begin controlling appearance.
This foundation will support everything that comes next. As students continue, they will learn how webpages become more styled, more interactive, and eventually connected to servers, databases, and real applications.