folder and files
server.js this is what i created so far
//importing packages
const express = require('express');
const admin = require('firebase-admin');
const bcrypt = require('bcrypt');
const path = require('path');
//declare static path
let staticPath = path.join(__dirname, "js");
//intializing express.js
const app = express();
//midlewares
app.use(express.static(staticPath));
//routes
//home route
app.get("/", (req, res) => {
res.sendFile(path.join(staticPath, "index.html"));
})
//signup route
app.get("/signup", (req, res) => {
res.sendFile(path.join(staticPath, "signup.html"));
})
// 404 route
app.get("/404", (req, res) => {
res.sendFile(path.join(staticPath, "404.html"));
})
app.use((req, res) => {
res.redirect('/404');
})
app.listen(3000, () => {
console.log('listening on port 3000.......');
})
index.html this is what i created so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edga">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clothing - Best Apparels Online Store</title>
<link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body>
<nav class="navbar"></nav>
<!-- hero section-->
<header class="hero-section">
<div class="content">
<img src="../img/light-logo.png" class="logo" alt="">
<p class="sub-heading">best fashion collection of all time</p>
</div>
</header>
<!-- card-container-->
<section class="product">
<h2 class="product-category">best selling</h2>
<button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
<div class="product-container">
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card1.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card2.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card3.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card4.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card5.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card6.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card7.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card8.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
</div>
</section>
<!-- collections -->
<section class="collection-container">
<a href="#" class="collection">
<img src="../img/women-collection.png" alt="">
<p class="collection-title">women <br> apparels </p>
</a>
<a href="#" class="collection">
<img src="../img/men-collection.png" alt="">
<p class="collection-title">women <br> apparels </p>
</a>
<a href="#" class="collection">
<img src="../img/accessories-collection.png" alt="">
<p class="collection-title">accessories</p>
</a>
</section>
<!-- card-container-->
<section class="product">
<h2 class="product-category">Shirts</h2>
<button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
<div class="product-container">
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/product image 1.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/product image 2.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/product image 3.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/product image 4.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card5.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card6.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card7.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card8.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
</div>
</section>
<!-- card-container-->
<section class="product">
<h2 class="product-category">Shoes</h2>
<button class="pre-btn"><img src="../img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="../img/arrow.png" alt=""></button>
<div class="product-container">
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card9.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card10.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card11.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card12.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card5.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card6.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card7.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="../img/card8.png" class="product-thumb" alt="">
<button class="card-btn">add to wishlist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth...</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
</div>
</section>
<footer>
</footer>
<script src="../js/nav.js"></script>
<script src="../js/home.js"></script>
<script src="../js/footer.js"></script>
</body>
</html>
when i run localhost:3000 html does load but css doesnt
what should i do?
i am doing trying to recreate tutorial, but the author doesnt have this problem, nor somebody in the comments, this is the link of the creator https://www.youtube.com/watch?v=yYSfOe0QBOk&list=PLqm86YkewF6S45smPYeNv01aFFKWZSgYD&index=2&ab_channel=ModernWeb
>Solution :
The directory that you declare as static with app.use(express.static(staticPath)); shouldn’t be the js directory. You’d better create a directory like public in which you move your css and js directories.
After that, your url for your css files will be /css/xxxx.css and for your js files /js/xxxx.js
Let us know ^^