🟦 Day 3: Frontend Code with GitHub Copilot
🎯 Goal:
Learn how to use Copilot to write frontend code like:
- HTML layouts
- CSS styling
- JavaScript interactivity
🔧 Step 1: Setup
Use VS Code with Copilot enabled.
Create a file called index.html and style.css or use a .html file with internal CSS/JS.
🧪 Try These HTML Prompts
Open a blank index.html file and start with:
<!-- Basic HTML boilerplate -->
➡ Copilot will suggest:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Other examples:
<!-- Create a responsive navbar using HTML and CSS -->
<!-- Create a contact form with name, email, and message -->
<!-- Create a two-column layout using CSS grid -->
🎨 Step 2: CSS Styling with Copilot
Create a file style.css or use a <style> tag.
Start with:
/* Style for a responsive navbar */
Or:
/* Button with hover effect */
➡ Copilot will suggest styles automatically.
Try:
/* Card style with shadow and padding */
⚡ Step 3: JavaScript Interactions
Create a script.js file or use a <script> tag in HTML.
Try this:
// Toggle dark mode on button click
Copilot may generate:
document.getElementById("toggle").addEventListener("click", () => {
document.body.classList.toggle("dark");
});
Other ideas:
// Show alert on form submit
// Change background color on button click
// Validate email input
🧠 Practice Mini Projects
Try building one of the following with Copilot’s help:
🔸 Project 1: Basic Landing Page
Prompt:
<!-- Simple landing page with header, hero section, and footer -->
🔸 Project 2: Contact Form
Prompt:
<!-- Contact form with input validation in JavaScript -->
🔸 Project 3: Responsive Navbar
Prompt:
<!-- Responsive navbar with dropdown using CSS -->
✅ Day 3 Summary
| What You Did | Tools Copilot Used |
|---|---|
| Generated HTML layouts | Comments like <!-- Contact form --> |
| Styled UI components in CSS | CSS comments |
| Added basic interactivity with JS | JS comments like // Toggle theme |
Tags:
GitHub Copilot