Click here to view folders and files server.js is the code I have 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();
//middlewares
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 is the content of my webpage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Clothing Store - Best Apparel Collection</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-->
...
</body>
</html>
I am experiencing an issue where the CSS does not load when I run localhost:3000. The HTML loads fine but the styling is missing. How can I fix this? I am following a tutorial but the author and others don't seem to have this problem. Here is the link to the tutorial here.