Aviation Web Learning Lab
EN / ID
Theme

Day 1 of 5

Day 1: Setup and First HTML Page

Welcome to Day 1! Today you will set up your development tools and create your very first HTML page — an "About My Aircraft" profile card. You will learn what HTML is, how web browsers read it, and how to structure a basic page with headings, paragraphs, lists, links, images, tables, and even a touch of styling. Everything you build will use aviation examples, so it feels familiar and practical. At the end, there is an optional challenge to build something personal. Let's get started!

Step 1

Set up VS Code as your code editor

Concept

A code editor is a special program for writing code — like a flight manual reader designed specifically for pilots. VS Code (Visual Studio Code) is free, popular, and perfect for beginners. It highlights your code with colors so you can spot mistakes easily, just like how color-coded instruments help pilots read their panels at a glance.

Apply

Download and install VS Code from code.visualstudio.com. Open it and take a moment to explore the interface — the file explorer on the left, the main editor area in the center, and the terminal at the bottom. You do not need to memorize anything; you will learn by doing.

Prompt

I am a complete beginner learning web development. I want to use VS Code as my code editor. Please give me simple step-by-step instructions to download and install VS Code on my computer. Also tell me how to create a new folder called "aviation-project" on my Desktop and how to open that folder in VS Code. Keep the instructions very simple — I have never used a code editor before.

Expected Result

VS Code should be installed and running on your computer. You should have a folder called "aviation-project" on your Desktop, and it should be open in VS Code. The left sidebar should show the folder name with no files inside yet.

Troubleshooting

  • • If VS Code does not open after installing, try restarting your computer and opening it from your Applications folder (Mac) or Start menu (Windows).
Step 2

Create your project folder and index.html file

Concept

Every website starts with a file — usually called index.html. Think of it like the first page of an aircraft maintenance log. The ".html" extension tells the computer that this file contains HTML code. Organizing your work in a dedicated folder is like keeping all your aviation documents in one binder — everything is easy to find.

Apply

Inside the "aviation-project" folder, create a new file called "index.html". You will write all your code in this file throughout the day.

Prompt

I have VS Code open with a folder called "aviation-project". Please help me create a new file called index.html inside that folder. Then give me the simplest possible HTML boilerplate — just the basic structure with <!DOCTYPE html>, <html>, <head>, <title> with "My Aviation Project", and <body> tags. Add a comment inside the body that says "My aviation project starts here". Do not add any styling or extra content yet.

Expected Result

You should have a file called index.html with the basic HTML structure. When you open it in your browser (right-click the file and choose "Open with" your browser), you should see a blank white page with a tab title "My Aviation Project" — the structure is there but there is no visible content yet.

Troubleshooting

  • • If your file opens in VS Code instead of the browser, right-click the file in your file explorer (not VS Code) and choose "Open with" then select your browser (Chrome, Firefox, Edge, or Safari).
  • • Make sure the file is saved with the .html extension, not .html.txt. If you used Notepad on Windows, it might have added .txt automatically. In VS Code, the file tab should show "index.html" without any extra extension.
Step 3

Add your first visible content: a heading and paragraph

Concept

The <h1> tag creates a main heading — the biggest, most important text on the page. It's like the aircraft call sign painted on the side of a plane — it's the first thing everyone sees. The <p> tag creates a paragraph of regular text. Every HTML page should have exactly one <h1> heading that describes what the page is about.

Apply

Inside the <body> tags of your index.html file, replace the comment with an <h1> heading. Then add a short <p> paragraph below it introducing yourself and your interest in aviation.

Prompt

I have a basic HTML file with <!DOCTYPE html>, <html>, <head>, and <body>. Inside the body, please give me an <h1> heading that says "My Aviation Profile" and a <p> paragraph below it that says "Welcome to my aviation learning journey. I am learning how the web works, and I will use this page to track my progress." Keep it simple — no styling yet.

Expected Result

When you save the file and refresh the browser, you should see a large bold heading "My Aviation Profile" and a paragraph of text below it. The heading should be noticeably bigger and bolder than the paragraph text.

Troubleshooting

  • • If you don't see the heading after saving, make sure you saved the file (Ctrl+S or Cmd+S) and then refreshed the browser (F5 or Ctrl+R).
  • • If the heading appears but looks wrong, check that you closed the tag properly with </h1>. Every opening tag needs a matching closing tag.
Step 4

Add an aircraft information list

Concept

HTML lists use two tags working together: <ul> creates an unordered (bulleted) list, and <li> creates each list item inside it. Lists are perfect for displaying information like aircraft specifications, safety procedures, or pre-flight checklists — anything where you need to show several related items in a clear format.

Apply

Below your paragraph, add an unordered list (<ul>) with list items (<li>) describing a fictional aircraft. Include details like aircraft type, registration number, engine type, and range.

Prompt

Below the paragraph in my HTML file, add an unordered list with the heading "Aircraft Details" using an <h2> tag. The list should use <ul> and <li> tags with these items: "Aircraft Type: Boeing 737-800", "Registration: PK-GML", "Engine: CFM56-7B", "Range: 5,436 km", "First Flight: 2008". Keep it plain HTML — no CSS styling.

Expected Result

You should now see a medium-sized heading "Aircraft Details" followed by a bulleted list with 5 items. Each item should have a bullet point (a small dot) on the left side.

Troubleshooting

  • • If the list items appear on one line instead of separate lines, make sure each <li> has its own opening and closing tags: <li>item text</li>.
Step 5

Add a second section with a numbered list of training goals

Concept

The <ol> tag creates an ordered (numbered) list, while <ul> creates an unordered (bulleted) list. Ordered lists are perfect for steps that must happen in sequence — like pre-flight checks, emergency procedures, or training milestones. The browser automatically numbers each <li> item inside an <ol>.

Apply

Below your aircraft details list, add a new section with an <h2> heading "My Training Goals" followed by an ordered list (<ol>) of 4-5 training goals you want to achieve.

Prompt

Below the aircraft details section in my HTML file, add a new <h2> heading "My Training Goals" and then an ordered list (<ol>) with <li> items: "Learn basic HTML structure", "Understand how web browsers display pages", "Build an aircraft profile page", "Add styling with CSS (coming next!)", "Create an interactive checklist with JavaScript". Just the HTML — no styling.

Expected Result

You should see a new heading "My Training Goals" followed by a numbered list. Each item should have a number (1, 2, 3, 4, 5) instead of bullet points. The numbers are generated automatically by the browser.

Troubleshooting

  • • If your list shows bullet points instead of numbers, you probably used <ul> instead of <ol>. Change <ul> to <ol> and </ul> to </ol>.
Step 6

Add links and an image placeholder

Concept

Links connect pages together — like how flight routes connect airports. The <a> tag creates a hyperlink, and the "href" attribute tells the browser where to go when clicked. Images are added with the <img> tag — it does not need a closing tag. The "src" attribute points to the image file, and "alt" provides a text description for screen readers and when images fail to load.

Apply

Add a link to an aviation website and an image tag with a placeholder image. Place these after the training goals section.

Prompt

Below the training goals section in my HTML file, add a new <h2> heading "Aviation Resources". Then add: (1) A paragraph with text "Visit " followed by a link <a> to "https://www.skybrary.aero" with the link text "SKYbrary Aviation Safety" and text " for aviation safety information." after the link. (2) An <img> tag below that with src="https://via.placeholder.com/400x200?text=My+Aviation+Project" and alt="Aviation project placeholder image". Keep it simple HTML.

Expected Result

You should see a new heading "Aviation Resources", followed by a paragraph with clickable blue text "SKYbrary Aviation Safety" that would take you to the safety website. Below that, you should see a placeholder image (a gray box with text).

Troubleshooting

  • • If the link is not clickable or looks wrong, check that the href attribute has quotes around the URL: <a href="https://www.skybrary.aero">.
  • • If you see a broken image icon (small icon with alt text), the placeholder image service might be blocked. Try using a different image URL or just keep the alt text visible — that is fine for learning.
Step 7

Create a table for aircraft maintenance data

Concept

HTML tables organize data into rows and columns — like the entries in an aircraft maintenance log book. The <table> tag creates the table, <tr> creates a row, <th> creates a header cell (bold, centered), and <td> creates a regular data cell. Tables are great for showing structured information like schedules, specifications, or checklists.

Apply

Add a new section with an <h2> heading and a table with 3 columns (Check, Interval, Status) and 3-4 rows of aircraft maintenance data.

Prompt

Below the aviation resources section in my HTML file, add a new <h2> heading "Maintenance Schedule" and then an HTML table with these columns: Check, Interval, Last Done. Use <table>, <thead> with <tr> and <th> for the header row, and <tbody> with <tr> and <td> for data rows. Add these 4 rows: "Engine Inspection / Every 500 hours / January 2026", "Landing Gear Check / Every 1000 hours / March 2026", "Hydraulic System / Every 800 hours / February 2026", "Emergency Equipment / Every 200 hours / April 2026". Keep it plain HTML.

Expected Result

You should see a heading "Maintenance Schedule" followed by a table with a header row and 4 data rows. The header cells should be bold. The table will look plain without borders, which is normal — we will add styling later.

Troubleshooting

  • • If the table looks messy with text not aligned, that is normal for unstyled HTML tables. The browser shows the data but without borders or spacing. CSS styling will fix this later.
  • • If a row has too many or too few cells, count your <td> tags — each row must have the same number of cells as the header row has <th> tags.
Step 8

Preview your page in the browser and understand how it works

Concept

Browsers read your HTML file from top to bottom, turning tags into visible elements on the screen. This process is called "rendering." Every time you save your HTML file, you need to refresh the browser to see the changes — just like how you need to restart an aircraft system after making changes to its configuration.

Apply

Save your index.html file (Ctrl+S or Cmd+S). Open it in your browser if you haven't already. Try making a small change (like adding a word to the heading), saving, and refreshing the browser to see the update.

Prompt

I have an HTML file with headings, paragraphs, lists, a link, an image, and a table. Please explain to me how a web browser reads and displays my HTML file. Use simple language and an aviation analogy. Also tell me the keyboard shortcuts for saving a file in VS Code and refreshing the browser.

Expected Result

You should understand the save-refresh cycle: save in VS Code, then refresh in the browser to see changes. Your page should display all the content you have added so far — headings, paragraphs, lists, link, image, and table.

Troubleshooting

  • • If changes don't appear after refreshing, make sure you saved the file first. Some browsers cache pages — try a hard refresh with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac).
Step 9

Add basic inline styling to make your page more colorful

Concept

CSS (Cascading Style Sheets) is what makes web pages look good — like painting an aircraft's livery or designing an airport terminal layout. The simplest way to add CSS is with inline styles, which go directly inside an HTML tag's "style" attribute. While this is not the best practice for large projects, it is a great way to start understanding how styling works.

Apply

Add style attributes to your main heading and the notice paragraph. Change the heading color and add a background color to the paragraph.

Prompt

In my HTML file, please help me add inline styles. Add style="color: #1e3a5f; text-align: center;" to the <h1> heading. Add style="background-color: #f0f7ff; padding: 15px; border-radius: 8px;" to the <p> paragraph. Also add style="border-collapse: collapse; width: 100%;" to the <table> tag, and style="border: 1px solid #ddd; padding: 8px;" to every <th> and <td> tag. These are just small visual improvements — we will learn proper CSS tomorrow!

Expected Result

Your heading should now be dark blue and centered. Your paragraph should have a light blue background with rounded corners and some padding inside. Your table should now have visible borders around each cell.

Troubleshooting

  • • If the styles don't appear, check that the style attribute uses straight quotes (") not curly quotes (""). Also make sure each CSS property ends with a semicolon (;).
Step 10

Add comments to explain your HTML code

Concept

HTML comments are notes you write inside your code that the browser does not display. They are like maintenance notes written in an aircraft log — they help the next person reading the code understand what each section does. Comments use the special syntax <!-- your note here -->.

Apply

Add HTML comments above each section of your page to explain what each part does.

Prompt

In my HTML file, please add HTML comments above each section. Add <!-- Main heading and introduction --> before the h1, <!-- Aircraft specifications list --> before the Aircraft Details h2, <!-- Training goals --> before the Training Goals h2, <!-- Aviation resources with link and image --> before the Aviation Resources h2, <!-- Maintenance schedule table --> before the Maintenance Schedule h2. These comments are invisible on the page but help anyone reading the code.

Expected Result

The page should look exactly the same as before — comments are invisible in the browser. But if you look at the code in VS Code, you should see gray text (comments) above each section making the code easier to understand.

Troubleshooting

  • • If you see the comment text visible on the page, you probably used the wrong syntax. HTML comments need <!-- at the start and --> at the end. Do not use // or # for HTML comments — those are for other languages.
Step 11

Review your code with a Gemini code review prompt

Concept

Even experienced pilots do pre-flight walk-around inspections before every flight. Similarly, reviewing your code helps catch small mistakes before they become bigger problems. You can ask Gemini to review your HTML and suggest improvements — it is like having a senior mechanic look over your work.

Apply

Copy your entire HTML code and ask Gemini to review it for common beginner mistakes and suggest improvements.

Prompt

Here is my complete HTML file for an aviation profile page. Please review it as if you are a helpful teacher checking a beginner's first project. Tell me: (1) Are there any mistakes or things I should fix? (2) What am I doing well? (3) What is one small improvement I could make? Please paste your review below my code: [paste your entire index.html code here]

Expected Result

Gemini should provide feedback on your HTML code, pointing out any errors and suggesting improvements. Common issues it might find: missing alt attributes, tags that are not properly closed, or suggestions for better structure.

Troubleshooting

  • • If the review suggests changes you don't understand, that is okay! Just note them down. You will learn more about these concepts in the coming days.
Step 12

(Optional Challenge) Build a "My Dream Aviation Job" card

Concept

This is your chance to combine everything you learned today into something personal and creative. Think of it as designing your own custom name badge for your dream aviation career. Use all the HTML elements you have learned — headings, paragraphs, lists, links, images, tables, and inline styles — to create a decorative card about the aviation job you want someday.

Apply

This step is optional! If you want an extra challenge, add a new section to your page (or create a separate file) about your dream aviation job. Use all the HTML elements and inline styling you learned today.

Prompt

This is an optional challenge! I want to create a decorative card about my dream aviation job using everything I learned today. Please help me create an HTML section (I will add it at the bottom of my existing page) with: an <h2> heading "My Dream Aviation Job", a paragraph describing the job (use your imagination — pilot, engineer, air traffic controller, flight attendant, etc.), an unordered list of reasons why I want this job, a small table showing skills needed vs skills I am learning, some inline styles to make it look nice (background color, borders, rounded corners). Make it creative but keep the HTML simple enough that I understand every tag.

Expected Result

You should have a new, visually appealing section at the bottom of your page about your dream aviation job. This section should use headings, paragraphs, lists, a table, and inline styles. Feel free to customize it however you like — this is your creation!

Troubleshooting

  • • Don't worry if your card doesn't look perfect — the goal is to practice using HTML elements, not to make it look professional. You will learn proper CSS styling tomorrow!

Self-Check

Quiz