refactor: Refactor CSS or Component Styling (#8)

.gitignore

@@ -1,3 +1,6 @@
 node_modules/
 client/node_modules/
 server/node_modules/
+__pycache__/
+*.pyc
+*.pyo

client/src/components/Navbar.jsx

@@ -1,31 +1,18 @@
-import React from 'react';
 import { Link } from 'react-router-dom';
+import styles from './Navbar.module.css';
 
 export default function Navbar() {
   return (
-    <nav
-      style={{
-        padding: '1rem',
-        backgroundColor: '#f8f9fa',
-        display: 'flex',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        gap: '20px',       // space between links
-        boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
-        fontWeight: 'bold',
-      }}
-    >
-      <Link to="/" style={{ textDecoration: 'none', color: '#333' }}>
+    <nav className={styles.navbar}>
+      <Link to="/" className={styles.link}>
         Home
       </Link>
-      <Link to="/courses" style={{ textDecoration: 'none', color: '#333' }}>
+      <Link to="/courses" className={styles.link}>
         Courses
       </Link>
-      <Link to="/quiz" style={{ textDecoration: 'none', color: '#333' }}>
+      <Link to="/quiz" className={styles.link}>
         Quiz
       </Link>
     </nav>
   );
 }
-
-

client/src/components/Navbar.module.css

@@ -0,0 +1,15 @@
+.navbar {
+  padding: 1rem;
+  background-color: #f8f9fa;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  font-weight: bold;
+}
+
+.link {
+  text-decoration: none;
+  color: #333;
+}

client/src/index.css

@@ -1,13 +1,6 @@
- /* client/src/index.css */
-
-/* src/index.css */
-.red-bordered-heading {
-  border: 2px solid red;
-}
+/* Global styles only — component styles live in *.module.css files */
 
 body {
   margin: 0;
   font-family: Arial, sans-serif;
-
 }
-

client/src/pages/Home.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import styles from './Home.module.css';
 
 function Home() {
   return (
-  <div>
-    <h1 className="red-bordered-heading">Welcome to DevStations E-Learning Platform</h1>
-  </div>
+    <div>
+      <h1 className={styles.redBorderedHeading}>Welcome to DevStations E-Learning Platform</h1>
+    </div>
   );
 }
 

client/src/pages/Home.module.css

@@ -0,0 +1,3 @@
+.redBorderedHeading {
+  border: 2px solid red;
+}