Dev.to is a great community for developers that can help make any project easier.
Before diving into the code, it’s important to plan the structure of your fast food website. For mine, I focused on these essential components:
Menu Section: Display food items, categories
Contact Information: Give customers easy ways to contact the restaurant.
I decided to use HTML, CSS, and Javascript for the designing of the webpage.
Once all the features were in place, I deployed the website through GitHub for it to be live.`
Below is the HTML code
Fresh Fast-foods Website
Fresh-Fast Foods App
Welcome To Our Page
We Prepare and Deliver our Fresh Meals
Have you ever wondered on how you could get fresh,hot,yummy and delicious food at the place of your own comfort?Well,you don't have to worry about that anymore!We prepare all kinds of foods depending on the orders made by our customers and deliver them to their workplaces,homeplaces or wherever they are currently located.
About Us
We are a group of local chefs that are trying to compete with the restaurant indusry as we believe we have the potential to do better.
Our Menu
Select a food category:
Beef
Chicken
Vegetarian
Seafood
Pasta
Contact Us
Place your order here by dialing the number below
0732353764 / 0774506579
Thanks For Visiting Our Page!
@2025 | FRESH FAST-FOODS | ALL RIGHTS RESERVED
Below is the CSS code`body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: whitesmoke;
}
header {
background-color: chocolate;
padding: 20px;
color: white;
text-align: center;
}
header nav ul {
list-style-type: none;
padding: 0;
}
header nav ul li {
display: inline;
margin-right: 15px;
}
header nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
home {
text-align: center;
}
about {
text-align: center;
}
menu {
padding: 20px;
text-align: center;
}
food-items {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.food-item {
background-color: white;
border: 1px solid #ddd;
margin: 10px;
padding: 15px;
width: 200px;
text-align: center;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.food-item img {
width: 100%;
border-radius: 8px;
}
footer {
background-color: grey;
color: white;
text-align: center;
}
Below is the Index.js codeconst API_URL = 'http://localhost:3000/foods';
function fetchFoodItems() {
const category = document.getElementById('category').value;
console.log(Fetching food items for category: ${category});
fetch(`${API_URL}?category=${category}`)
.then(response => response.json())
.then(data => {
console.log('Fetched food data:', data);
const foodItemsContainer = document.getElementById('food-items');
foodItemsContainer.innerHTML = '';
if (data.length === 0) {
foodItemsContainer.innerHTML = `No items found for this category.
`;
} else {
data.forEach(food => {
const foodItemDiv = document.createElement('div');
foodItemDiv.classList.add('food-item');
foodItemDiv.innerHTML = `
${food.name}
`;
foodItemsContainer.appendChild(foodItemDiv);
});
}
})
.catch(error => {
console.error('Error fetching food items:', error);
});
}
document.getElementById('category').addEventListen er('change', fetchFoodItems);
`
Below is the db.json code`{
"foods": [
{
"id": 1,
"name": "Beef Burger",
"category": "Beef",
"image": "https://encrypted-tbn0.gstatic.com/i...haE138Xow6oA&s",
"description": "A delicious beef burger."
},
{
"id": 2,
"name": "Chicken Sandwich",
"category": "Chicken",
"image": "https://encrypted-tbn0.gstatic.com/i...SbKS4PdSYe-w&s",
"description": "A tasty chicken sandwich."
},
{
"id": 3,
"name": "Vegetarian Pizza",
"category": "Vegetarian",
"image": "https://encrypted-tbn0.gstatic.com/i...tV6thEpGHCdw&s",
"description": "A fresh vegetarian pizza."
},
{
"id": 4,
"name": "Shrimp Pasta",
"category": "Seafood",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTSWNdWIH2seFK8YJhwggcsCHkNGpYO MKuVw&s",
"description": "A creamy shrimp pasta."
},
{
"id": 5,
"name": "Grilled Salmon",
"category": "Seafood",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1EMVBqSZJkKeVkyNP6vEXwYDTp_bhG sjRzA&s",
"description": "Grilled salmon with fresh herbs."
},
{
"id": 6,
"name": "Penne Arrabbiata",
"category": "Pasta",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT25Trkh6444t3HiaaoDfJrxEh2kMncL Xq5sA&s",
"description": "Penne pasta in a spicy tomato sauce."
},
{
"id": 7,
"name": "Lasagna",
"category": "Pasta",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJblMsAcqpr1tf8JYIwiRVoJwx1L_Gw nZqVw&s",
"description": "Classic Italian lasagna."
}
]
}
`
More...
Before diving into the code, it’s important to plan the structure of your fast food website. For mine, I focused on these essential components:
Menu Section: Display food items, categories
Contact Information: Give customers easy ways to contact the restaurant.
I decided to use HTML, CSS, and Javascript for the designing of the webpage.
Once all the features were in place, I deployed the website through GitHub for it to be live.`
Below is the HTML code
Fresh Fast-foods Website
Fresh-Fast Foods App
Welcome To Our Page
- Home
- About
- Menu
- Contact
We Prepare and Deliver our Fresh Meals
Have you ever wondered on how you could get fresh,hot,yummy and delicious food at the place of your own comfort?Well,you don't have to worry about that anymore!We prepare all kinds of foods depending on the orders made by our customers and deliver them to their workplaces,homeplaces or wherever they are currently located.
About Us
We are a group of local chefs that are trying to compete with the restaurant indusry as we believe we have the potential to do better.
Our Menu
Select a food category:
Beef
Chicken
Vegetarian
Seafood
Pasta
Contact Us
Place your order here by dialing the number below
0732353764 / 0774506579
Thanks For Visiting Our Page!
@2025 | FRESH FAST-FOODS | ALL RIGHTS RESERVED
Below is the CSS code`body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: whitesmoke;
}
header {
background-color: chocolate;
padding: 20px;
color: white;
text-align: center;
}
header nav ul {
list-style-type: none;
padding: 0;
}
header nav ul li {
display: inline;
margin-right: 15px;
}
header nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
home {
text-align: center;
}
about {
text-align: center;
}
menu {
padding: 20px;
text-align: center;
}
food-items {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.food-item {
background-color: white;
border: 1px solid #ddd;
margin: 10px;
padding: 15px;
width: 200px;
text-align: center;
border-radius: 8px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.food-item img {
width: 100%;
border-radius: 8px;
}
footer {
background-color: grey;
color: white;
text-align: center;
}
Below is the Index.js codeconst API_URL = 'http://localhost:3000/foods';
function fetchFoodItems() {
const category = document.getElementById('category').value;
console.log(Fetching food items for category: ${category});
fetch(`${API_URL}?category=${category}`)
.then(response => response.json())
.then(data => {
console.log('Fetched food data:', data);
const foodItemsContainer = document.getElementById('food-items');
foodItemsContainer.innerHTML = '';
if (data.length === 0) {
foodItemsContainer.innerHTML = `No items found for this category.
`;
} else {
data.forEach(food => {
const foodItemDiv = document.createElement('div');
foodItemDiv.classList.add('food-item');
foodItemDiv.innerHTML = `
${food.name}
`;
foodItemsContainer.appendChild(foodItemDiv);
});
}
})
.catch(error => {
console.error('Error fetching food items:', error);
});
}
document.getElementById('category').addEventListen er('change', fetchFoodItems);
`
Below is the db.json code`{
"foods": [
{
"id": 1,
"name": "Beef Burger",
"category": "Beef",
"image": "https://encrypted-tbn0.gstatic.com/i...haE138Xow6oA&s",
"description": "A delicious beef burger."
},
{
"id": 2,
"name": "Chicken Sandwich",
"category": "Chicken",
"image": "https://encrypted-tbn0.gstatic.com/i...SbKS4PdSYe-w&s",
"description": "A tasty chicken sandwich."
},
{
"id": 3,
"name": "Vegetarian Pizza",
"category": "Vegetarian",
"image": "https://encrypted-tbn0.gstatic.com/i...tV6thEpGHCdw&s",
"description": "A fresh vegetarian pizza."
},
{
"id": 4,
"name": "Shrimp Pasta",
"category": "Seafood",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTSWNdWIH2seFK8YJhwggcsCHkNGpYO MKuVw&s",
"description": "A creamy shrimp pasta."
},
{
"id": 5,
"name": "Grilled Salmon",
"category": "Seafood",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1EMVBqSZJkKeVkyNP6vEXwYDTp_bhG sjRzA&s",
"description": "Grilled salmon with fresh herbs."
},
{
"id": 6,
"name": "Penne Arrabbiata",
"category": "Pasta",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT25Trkh6444t3HiaaoDfJrxEh2kMncL Xq5sA&s",
"description": "Penne pasta in a spicy tomato sauce."
},
{
"id": 7,
"name": "Lasagna",
"category": "Pasta",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJblMsAcqpr1tf8JYIwiRVoJwx1L_Gw nZqVw&s",
"description": "Classic Italian lasagna."
}
]
}
`
More...