A comprehensive guide to building web projects using free public APIs to master HTML, CSS, and JavaScript.
API: Random User Generator (https://randomuser.me/api) Features:
- Display user cards with profile information
- Search functionality
- Filter by gender/nationality
- Detailed user view
- Pagination/Infinite scroll
API: PokéAPI (https://pokeapi.co/api/v2) Features:
- Display Pokémon cards
- Search by name
- Filter by type
- View detailed stats
- Evolution chains
API: REST Countries (https://restcountries.com/v3.1) Features:
- Display country information
- Search by name
- Filter by region
- Sort by population/area
- Detailed country view
project-folder/
│
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── script.js
└── images/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project Title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<!-- Navigation and search -->
</header>
<main>
<!-- Main content -->
</main>
<footer>
<!-- Footer content -->
</footer>
<script src="js/script.js"></script>
</body>
</html>// Base API fetch function
async function fetchData(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
// Handle error appropriately
}
}
// Example usage for Random User API
async function getUsers(count = 10) {
return await fetchData(`https://randomuser.me/api/?results=${count}`);
}function createCard(data) {
return `
<div class="card">
<!-- Card content based on your data -->
</div>
`;
}
function displayData(items) {
const container = document.querySelector('.container');
container.innerHTML = items.map(item => createCard(item)).join('');
}function searchItems(searchTerm, items) {
return items.filter(item =>
item.name.toLowerCase().includes(searchTerm.toLowerCase())
);
}
// Add event listener to search input
const searchInput = document.querySelector('#search');
searchInput.addEventListener('input', (e) => {
const filtered = searchItems(e.target.value, currentItems);
displayData(filtered);
});/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Card Grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}let currentPage = 1;
const itemsPerPage = 10;
async function loadPage(page) {
const start = (page - 1) * itemsPerPage;
const items = await fetchData(`${API_URL}?page=${page}`);
displayData(items);
}function showLoading() {
return `
<div class="loading">
<div class="spinner"></div>
</div>
`;
}
async function fetchWithLoading() {
const container = document.querySelector('.container');
container.innerHTML = showLoading();
const data = await fetchData(URL);
displayData(data);
}function showError(message) {
return `
<div class="error">
<p>${message}</p>
<button onclick="retry()">Retry</button>
</div>
`;
}/* Responsive Grid */
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 480px) {
.grid {
grid-template-columns: 1fr;
}
}-
API Integration:
- Successful data fetching
- Error handling
- Loading states
-
Functionality:
- Search works correctly
- Filters work as expected
- Pagination/infinite scroll
-
UI/UX:
- Responsive design
- Loading indicators
- Error messages
- Empty states
-
JavaScript Skills:
- Async/await
- Error handling
- Array methods
- DOM manipulation
-
CSS Skills:
- Grid/Flexbox
- Responsive design
- Animations
- CSS variables
-
HTML Skills:
- Semantic markup
- Accessibility
- Form handling
- Not handling loading states
- Missing error handling
- Not implementing responsive design
- Forgetting to handle empty states
- Not optimizing for performance
- MDN Web Docs: https://developer.mozilla.org
- CSS Tricks: https://css-tricks.com
- JavaScript.info: https://javascript.info
After completing the basic project:
- Add more features
- Implement caching
- Add animations
- Improve accessibility
- Optimize performance