Build real-world applications step-by-step and deploy to GitHub
Each project includes:
Click any project card below to see the full interactive tutorial!
Perfect for weeks 1-4. Focus on HTML, CSS, and basic JavaScript.
Create a beautiful personal website showcasing who you are, your skills, and your journey into tech.
1 Go to github.com/new
2 Repository name: my-portfolio
3 Make it Public (so you can use GitHub Pages)
4 Check "Add a README file"
5 Click "Create repository"
Clone to your computer:
git clone https://github.com/YOUR-USERNAME/my-portfolio.git
cd my-portfolio
Create a file called index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Your Name</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Write a paragraph about yourself here!</p>
</section>
<section id="projects">
<h2>My Projects</h2>
<div class="project-grid">
<!-- Projects will go here -->
</div>
</section>
<section id="contact">
<h2>Contact Me</h2>
<p>Email: your.email@example.com</p>
</section>
<footer>
<p>© 2025 Your Name</p>
</footer>
</body>
</html>
index.html in your browser. You should see your basic page structure!
Create style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
}
header {
background: #0078D4;
color: white;
padding: 2rem;
text-align: center;
}
nav a {
color: white;
text-decoration: none;
margin: 0 1rem;
}
section {
padding: 3rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
Add media queries to your CSS:
@media (max-width: 768px) {
header {
padding: 1rem;
}
nav a {
display: block;
margin: 0.5rem 0;
}
section {
padding: 2rem 1rem;
}
}
git add .
git commit -m "Create personal portfolio website"
git push origin main
1. Go to your repository on GitHub
2. Click "Settings" → "Pages"
3. Under "Source", select "main" branch
4. Click "Save"
5. Your site will be live at: https://YOUR-USERNAME.github.io/my-portfolio
Build a functional calculator that performs basic arithmetic operations.
Create a new repo called calculator-app and clone it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="appendOperator('/')">/</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="appendOperator('*')">×</button>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="appendNumber('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendOperator('+')">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Create script.js
let display = document.getElementById('display');
let currentInput = '0';
let previousInput = '';
let operation = null;
function updateDisplay() {
display.textContent = currentInput;
}
function appendNumber(number) {
if (currentInput === '0') {
currentInput = number;
} else {
currentInput += number;
}
updateDisplay();
}
function appendOperator(op) {
previousInput = currentInput;
currentInput = '0';
operation = op;
}
function calculate() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
switch(operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operation = null;
previousInput = '';
updateDisplay();
}
function clearDisplay() {
currentInput = '0';
previousInput = '';
operation = null;
updateDisplay();
}
updateDisplay();
Style your calculator in style.css
.calculator {
max-width: 300px;
margin: 50px auto;
background: #1f1f1f;
padding: 20px;
border-radius: 10px;
}
.display {
background: #2a2a2a;
color: #00C853;
padding: 20px;
text-align: right;
font-size: 2rem;
margin-bottom: 10px;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 1.2rem;
border: none;
background: #333;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #0078D4;
}
git add .
git commit -m "Create calculator app"
git push origin main
Deploy to GitHub Pages (same steps as Portfolio project)
For weeks 5-10. Working with APIs and more complex JavaScript.
Build a weather app that shows current conditions and forecasts using the OpenWeather API.
Create repo: weather-dashboard
1. Go to openweathermap.org/api
2. Sign up for a free account
3. Get your API key from the dashboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Dashboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Weather Dashboard</h1>
<div class="search-box">
<input type="text" id="cityInput" placeholder="Enter city name">
<button onclick="getWeather()">Search</button>
</div>
<div id="weatherInfo"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Create script.js
const API_KEY = 'YOUR_API_KEY_HERE';
const API_URL = 'https://api.openweathermap.org/data/2.5/weather';
async function getWeather() {
const city = document.getElementById('cityInput').value;
if (!city) {
alert('Please enter a city name');
return;
}
try {
const response = await fetch(
`${API_URL}?q=${city}&appid=${API_KEY}&units=imperial`
);
const data = await response.json();
if (data.cod === '404') {
alert('City not found');
return;
}
displayWeather(data);
} catch (error) {
console.error('Error:', error);
alert('Failed to fetch weather data');
}
}
function displayWeather(data) {
const weatherInfo = document.getElementById('weatherInfo');
weatherInfo.innerHTML = `
<h2>${data.name}</h2>
<p>Temperature: ${data.main.temp}°F</p>
<p>Description: ${data.weather[0].description}</p>
<p>Humidity: ${data.main.humidity}%</p>
<p>Wind Speed: ${data.wind.speed} mph</p>
`;
}
Important: Create a .gitignore file to exclude your API key:
# .gitignore
script.js
# Add script.js to .gitignore if it contains your API key
# Then create script.example.js with placeholder
For production, use environment variables or Netlify's environment variable feature.
For weeks 11-12. Full React applications that showcase professional skills.
Rebuild your weather dashboard using React with modern component architecture.
1 Create GitHub repo: react-weather-app
2 Clone it locally
3 Create React app:
npx create-react-app .
npm start
Create src/Weather.js
import { useState } from 'react';
function Weather() {
const [city, setCity] = useState('');
const [weather, setWeather] = useState(null);
const [loading, setLoading] = useState(false);
const API_KEY = 'YOUR_API_KEY';
const fetchWeather = async () => {
setLoading(true);
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial`
);
const data = await response.json();
setWeather(data);
} catch (error) {
console.error('Error:', error);
} finally {
setLoading(false);
}
};
return (
<div className="weather-app">
<h1>Weather App</h1>
<div className="search-box">
<input
type="text"
value={city}
onChange={(e) => setCity(e.target.value)}
placeholder="Enter city"
/>
<button onClick={fetchWeather} disabled={loading}>
{loading ? 'Loading...' : 'Search'}
</button>
</div>
{weather && (
<div className="weather-info">
<h2>{weather.name}</h2>
<p>{weather.main.temp}°F</p>
<p>{weather.weather[0].description}</p>
</div>
)}
</div>
);
}
export default Weather;
import Weather from './Weather';
import './App.css';
function App() {
return (
<div className="App">
<Weather />
</div>
);
}
export default App;
1. Push your code to GitHub
2. Go to vercel.com
3. Import your GitHub repository
4. Add environment variable for API key in Vercel settings
5. Deploy! Your app will be live instantly.
Build a React app for managing files with upload, preview, filters, and pagination.
Create repo: file-manager-app
npx create-react-app .
npm start
Create src/FileUpload.js
import { useState } from 'react';
function FileUpload({ onFileAdd }) {
const handleFileChange = (e) => {
const files = Array.from(e.target.files);
files.forEach(file => {
const fileData = {
id: Date.now() + Math.random(),
name: file.name,
size: file.size,
type: file.type,
file: file
};
onFileAdd(fileData);
});
};
return (
<div className="file-upload">
<input
type="file"
multiple
onChange={handleFileChange}
/>
</div>
);
}
export default FileUpload;
Create src/FileList.js
import { useState, useMemo } from 'react';
function FileList({ files, onDelete }) {
const [filter, setFilter] = useState('all');
const [searchTerm, setSearchTerm] = useState('');
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
const filteredFiles = useMemo(() => {
let result = files;
// Filter by type
if (filter !== 'all') {
result = result.filter(file => file.type.startsWith(filter));
}
// Search by name
if (searchTerm) {
result = result.filter(file =>
file.name.toLowerCase().includes(searchTerm.toLowerCase())
);
}
return result;
}, [files, filter, searchTerm]);
const paginatedFiles = useMemo(() => {
const start = (currentPage - 1) * itemsPerPage;
return filteredFiles.slice(start, start + itemsPerPage);
}, [filteredFiles, currentPage]);
const totalPages = Math.ceil(filteredFiles.length / itemsPerPage);
return (
<div className="file-list">
<div className="filters">
<input
type="text"
placeholder="Search files..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<select value={filter} onChange={(e) => setFilter(e.target.value)}>
<option value="all">All Files</option>
<option value="image">Images</option>
<option value="application">Documents</option>
</select>
</div>
<div className="files">
{paginatedFiles.map(file => (
<div key={file.id} className="file-item">
<span>{file.name}</span>
<span>{(file.size / 1024).toFixed(2)} KB</span>
<button onClick={() => onDelete(file.id)}>Delete</button>
</div>
))}
</div>
<div className="pagination">
<button
disabled={currentPage === 1}
onClick={() => setCurrentPage(currentPage - 1)}
>Previous</button>
<span>Page {currentPage} of {totalPages}</span>
<button
disabled={currentPage === totalPages}
onClick={() => setCurrentPage(currentPage + 1)}
>Next</button>
</div>
</div>
);
}
export default FileList;
Update src/App.js
import { useState } from 'react';
import FileUpload from './FileUpload';
import FileList from './FileList';
import './App.css';
function App() {
const [files, setFiles] = useState([]);
const handleFileAdd = (fileData) => {
setFiles([...files, fileData]);
};
const handleFileDelete = (id) => {
setFiles(files.filter(file => file.id !== id));
};
return (
<div className="App">
<h1>File Manager</h1>
<FileUpload onFileAdd={handleFileAdd} />
<FileList files={files} onDelete={handleFileDelete} />
</div>
);
}
export default App;
git add .
git commit -m "Create file manager app with upload, filters, and pagination"
git push origin main
Deploy to Vercel for instant hosting!
Every project you build should be deployed live! Here's how:
Recommended first option - Perfect for HTML/CSS/JavaScript projects:
username.github.io/repo-name✓ Free • Easy • Integrated with GitHub
Great for all projects if you want more features:
Best for React projects:
Click any project above to see the full step-by-step tutorial!
Back to Modules Track Progress