Final Project Selection

After discussing potential ideas with my instructor, I selected the Pill Dispenser as my final project. I chose this project because it addresses a real-world problem — helping users take medication on time in an organized and reliable manner.

The project combines mechanical design, electronics, embedded programming, and user interaction, making it a comprehensive and technically challenging system aligned with the goals of Fab Academy.

I have updated the selected project in my Final Project page and will continue refining the concept as I progress through the weekly assignments.

Proposed Features – Pill Dispenser

• Automated dispensing mechanism for scheduled medication release
• Real-time clock (RTC) module to maintain accurate timing
• OLED/LCD display to show time, dosage, and alerts
• Buzzer or audio alert system for medication reminders
• Button interface for setting time and dosage schedule
• Secure compartment design to prevent accidental access
• Compact and user-friendly enclosure design
• Optional battery backup for power interruption safety

Rough Draft Development Plan

1. Research existing pill dispenser designs and identify improvements
2. Create initial concept sketches and mechanical layout
3. Design 3D model of casing and internal compartments
4. Select and test electronic components (microcontroller, RTC, display, buzzer)
5. Develop basic firmware for time tracking and alert system
6. Integrate motor/servo mechanism for pill dispensing
7. Fabricate enclosure using digital fabrication tools
8. Assemble and test full system functionality
9. Refine design based on testing and feedback

Git

Git is a version control system used to track changes in files and manage projects, especially in software development.

In simple terms, Git helps you:

• Keep a history of your work
• Save different versions of files
• Collaborate with others without overwriting each other’s work
• Go back to earlier versions if something breaks

Here is your link to download Git.

if you want to know more about Git, click here to read the detailed tutorial I created.

Visual Studio Code (VS Code)

Visual Studio Code (VS Code) is a lightweight yet powerful source code editor developed by Microsoft. It provides a user-friendly interface for writing, editing, and managing code efficiently. VS Code supports multiple programming languages and offers features such as syntax highlighting, IntelliSense (auto-completion), debugging tools, and integrated terminal access.

I used VS Code to develop and manage my Fab Academy website. It allows me to edit HTML, CSS, and other files in an organized way. The built-in file explorer helps manage project folders easily, and the live preview extensions make it simple to check how the website looks while editing.

One of the major advantages of VS Code is its built-in Git support. It detects changes automatically, shows modified files, and allows staging, committing, and pushing changes directly from the editor. This makes version control more efficient without switching between multiple applications.

You can download Visual Studio Code from this link.

Key Features I Used

• Integrated Terminal to run Git commands
• Source Control panel to stage and commit changes
• Extensions for improved HTML and CSS development
• File explorer for structured project organization

Essential Git Commands

git status

git status -s

git status -b

git status --porcelain

git clone repository-url

git clone --depth 1 repository-url

git clone -b branch-name repository-url

git add file-name

git add .

git add -A

git add *.html

git commit -m "message"

git commit

git commit -am "message"

git commit --amend

git push origin main

git push

git push -u origin main

git push --force

git pull origin main

git pull origin main

git pull

git pull --rebase

git fetch

Important Git Commands (Quick Reference)

                git clone repository-url |
                git status |
                git add file-name |
                git add . |
                git commit -m "message" |
                git pull origin main |
                git push origin main |
                git config --global user.name "Your Name" |
                git config --global user.email "your@email.com"
            

VS Code Extensions Used

To improve my workflow during Fab Academy documentation and embedded programming tasks, I used several Visual Studio Code extensions that enhanced productivity and development efficiency.

• Live Server – Provides real-time browser preview of my website whenever changes are saved.
• Live Preview – Allows previewing HTML files directly inside VS Code without switching to an external browser.
• PlatformIO IDE – Used for embedded systems development and microcontroller programming. It simplifies firmware development, library management, and board configuration.
• Save Typing / Auto Save – Automatically saves files while typing, reducing the risk of losing progress and improving workflow speed.
• Prettier – Code Formatter – Automatically formats HTML and CSS code to maintain clean and consistent structure.
• HTML CSS Support – Provides auto-completion and suggestions for HTML classes and CSS styles.
• GitLens – Enhances Git capabilities inside VS Code by showing detailed commit history and file changes.

These extensions helped streamline both my website development and embedded programming tasks, making my workflow more efficient.

What Is a Website?

At its core, a website is just a bunch of files. That’s not an oversimplification—that’s literally what it is. Text files, mostly. Some contain words. Others define how those words should look. Some tell the browser where to find images or how to respond to clicks. But in the end, it all boils down to files.

Your browser (whether it’s Chrome, Firefox, Safari, or something else) takes those files and shows them to you in a way that makes sense. That’s all a website is: files, shown by a browser.

Think of it like this:

• HTML = the structure (what’s on the page)
• CSS = the style (how it looks)
• JavaScript = the behavior (how it responds)

This book is about HTML. We’re going to focus on that first because nothing else makes sense without it. You’ll add styling and behavior later, but first, you need to understand the bones.

What does “HTML” actually mean?

HTML stands for HyperText Markup Language. Each of those words points to something meaningful. So let’s break it down, one word at a time—slowly.

HyperText

This just means clickable text.

Let’s see what wiki has to say about it:

                “Hypertext is text displayed on a computer display or other electronic devices
                with references (hyperlinks) to other text that the reader can immediately access.
                Hypertext documents are interconnected by hyperlinks, which are typically activated
                by a mouse click, keypress set, or screen touch. Apart from text, the term "hypertext"
                is also sometimes used to describe tables, images, and other presentational materials
                with integrated hyperlinks." (Wikipedia contributors, n.d.)
            

Hypertext is text that you can click on to jump to other information or pages.

Have you ever clicked on a word or sentence that took you to another page? Like this:

The Earth is getting warmer because of something called greenhouse gases.

The words "greenhouse gases" are underlined and blue. If you click them, you go to another page that explains what they are.

If “greenhouse gases” is blue and underlined, and you can click it to learn more—that’s hypertext.

It connects one piece of text to another. Simple as that.

It doesn't nccessarily have to be blue and underlined. it can be of any style. The main thing is that it is a link that takes you to another page.

That’s it. Hypertext lets you jump from one idea to another without having to search for it yourself. It’s like reading a book where certain words take you instantly to other chapters or even other books.

Markup Language

Markup is just a way to add meaning to text.

A markup language is a way to tell a computer how to show text and organize it.

Think of it like giving instructions while writing. Imagine you're writing a school paper and you want:

• The title to be big and bold
• Some words to be italic
• A list of items to be shown with bullets

In real life, you might underline, circle, or write notes in the margins. That’s what editors used to do with red or blue pens on paper.

A markup language does the same thing—but in computer text.

It's a way of writing text with special tags that tell the computer how to show it.

Basic HTML and CSS Concepts

A website is built using HTML to structure the content and CSS to style and design the appearance. While developing my website, I learned and applied the following fundamental concepts.

Understanding HTML (Structure of a Webpage)

HTML (HyperText Markup Language) is used to create the structure of a webpage. It defines headings, paragraphs, links, images, and sections.

• <!DOCTYPE html>
  This declaration tells the browser that the document is written in HTML5.
• <html>
  The root element that contains the entire webpage.
• <head>
  Contains metadata, the page title, and links to external CSS files.
• <body>
  Contains all visible content displayed in the browser.
• <h1> to <h6>
  Used for headings. <h1> is the main title, and the numbers decrease in size and importance.
• <p>
  Used to define a paragraph of text.
• <br>
  Inserts a line break within text.
• <a> (Anchor Tag)
  Used to create hyperlinks. It connects one page to another using the href attribute.
• <img>
  Used to display images. It requires a source (src) and alternative text (alt).
• <ul>, <ol>, <li>
  Used to create lists. <ul> creates bullet lists, <ol> creates numbered lists, and <li> defines each item.
• <div>
  A container element used to group content for styling or layout.
• <section>
  A semantic tag used to define logical sections of a webpage.

Understanding CSS (Styling a Webpage)

CSS (Cascading Style Sheets) is used to control the appearance of a webpage, including colors, spacing, layout, and typography.

• Selectors
  Used to target HTML elements.
  Example: p { color: blue; }
• Class Selector
  Targets elements using a class name.
  Example: .container { margin: 20px; }
• ID Selector
  Targets a unique element using an ID.
  Example: #header { background-color: black; }
• Common Properties
  color – Changes text color
  background-color – Changes background color
  font-size – Adjusts text size
  margin – Adds outer spacing
  padding – Adds inner spacing
  border – Adds borders around elements
• Flexbox
  Used for layout alignment.
  Example: display: flex;
justify-content: center;
align-items: center;