Welcome to Session 3! In our previous session, you learned how to navigate files inside Linux using text commands. Now, we are going to set up your professional coding workspace in the cloud.
Over the next 45 to 60 minutes, you will create a developer workspace using Google Antigravity and write the actual code for your personal website.
Prerequisites
- A laptop with an active internet connection.
- A free Google Account (Gmail address).
- Your favorite text or profile info prepared (e.g., your name, your business title, and a few sentences about what services you offer).
Core Concepts: What is an IDE & Google Antigravity?
- What is an IDE? IDE stands for Integrated Development Environment. Think of it as a supercharged text editor (like Microsoft Word, but designed specifically for writing code). It highlights errors, suggests code words, and lets you preview your webpage instantly.
- What is Google Antigravity? It is an experimental, next-generation cloud-based IDE hosted by Google at https://antigravity.google/. It runs entirely inside your web browser. This means you do not have to install any heavy, complicated programs on your local laptop!
- What is HTML? HyperText Markup Language. It is the skeleton of a website. It defines where the titles, paragraphs, buttons, and images go.
- What is CSS? Cascading Style Sheets. It is the clothing and makeup of a website. It controls colors, fonts, spacing, and layouts.
Step-by-Step Guide
Step 1: Launching Your Cloud Sandbox
Let's log in and spin up our virtual developer machine in the cloud.
- Open your web browser and go to: https://antigravity.google/
- Click the blue button that says "Get Started" (or "Log In").
- Sign in using your standard Google Account (Gmail) username and password.
- Once inside, you will see your Dashboard. Click on the button that says "New Workspace" (or the plus
+icon). - Under templates, click "Blank Workspace" (we want to build from scratch to understand every step).
- Give your workspace a name, for example:
my-booking-site - Click "Create".
- Wait for the machine: Google is spinning up a secure, dedicated developer container for you in their datacenter. This will take about 1 to 2 minutes. Once loaded, you will see a visual interface resembling a standard professional code editor with files on the left and a large editor screen in the middle.
Step 2: Creating Your First Web File (index.html)
All web servers on the internet look for a file named specifically index.html as the "Home Page" or starting page of a website.
- Look at the leftmost panel of your screen (The File Explorer).
- Hover your mouse inside the empty workspace folder, right-click, and select "New File" (or click the small paper icon with a
+symbol). - Type the name exactly:
index.html - Press Enter. You will see a blank editing page open in the main center panel.
Step 3: Writing the HTML Skeleton
Every website in the world shares the exact same base skeleton structure. Let's write it out.
- Click inside the blank
index.htmleditor page. - Copy and paste this exact code block:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waqar's Premium Corolla Hybrid Transport</title>
<style>
/* CSS Styling goes here - we will dress up our page below */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #121212;
color: #ffffff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
background-color: #1e1e1e;
border: 2px solid #fbbf24; /* Golden borders */
padding: 30px;
border-radius: 12px;
text-align: center;
max-width: 400px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
h1 {
color: #fbbf24; /* Golden Accent */
margin-bottom: 5px;
}
.title {
color: #a3a3a3;
font-style: italic;
margin-bottom: 20px;
}
p {
line-height: 1.6;
color: #d4d4d4;
}
.btn {
display: inline-block;
background-color: #fbbf24;
color: #000000;
padding: 12px 24px;
text-decoration: none;
font-weight: bold;
border-radius: 6px;
margin-top: 20px;
transition: 0.2s ease-in-out;
}
.btn:hover {
background-color: #f59e0b;
}
</style>
</head>
<body>
<div class="card">
<h1>Waqar Azeem</h1>
<div class="title">Premium Toyota Corolla Hybrid Rides</div>
<p>
Welcome to my premium LPG-powered hybrid transport service. Proudly serving system administrators, architects, and travelers across Poland. Clean, eco-friendly, open-air outdoor parking guaranteed.
</p>
<a href="mailto:waqar.azeem@outlook.com" class="btn">Book a Ride</a>
</div>
</body>
</html>Step 4: Customizing Your Website Content
Now, look at the code you just pasted and make it your own!
- Locate the line inside the
<title>tags (around line 6):- Change
Waqar's Premium Corolla Hybrid Transportto your own name/business title.
- Change
- Scroll down to the bottom of the file (inside the
<body>tags):- Change
Waqar Azeem(inside the<h1>heading tag) to your own name. - Change the business description paragraph inside the
<p>tags to match your own profile (e.g., describe your taxi service, consulting business, or blog!). - Change the email address in
href="mailto:waqar.azeem@outlook.com"to your actual email address.
- Change
Step 5: Previewing Your Website Live
One of the best features of Google Antigravity is its instant browser preview.
- Look at the right-hand sidebar panel in your workspace.
- You will see a small vertical tab called "Previews" (or a phone/browser icon). Click on it.
- Click on "Web Preview".
- Instant Visual Feedback: A small browser tab will open directly inside your workspace, rendering your code into a beautiful, dark-themed digital business card!
- Fun Test: Try changing the word
Goldenin your code text, or change the color hex#fbbf24(gold) to#3b82f6(blue) and see the changes reflect live instantly on the preview window!
Verification: Did it work?
To ensure you have built a working web code layout:
- You can see the
index.htmlfile listed in your workspace explorer tree. - The file compiles without red squiggly error lines.
- The interactive "Web Preview" panel displays your custom webpage with your actual name, business description, and email booking button.
What's Next?
Incredible work! You have successfully built your very first visual webpage inside a world-class cloud developer environment.
But right now, this code only exists inside this private workspace. If you close your laptop, nobody else can visit it. In Session 4, we will learn how to save this work securely on the cloud and share it using Git and GitHub!
