-
Fork this repository
-
Clone the forked repository to your local machine
git clone https://github.com/your-username/VisVTube.git
- Navigate to the cloned directory
cd VisVTube
- Install the dependencies
npm install
- Start the development server
npm run dev
- Open http://localhost:3000 in your browser
The codebase consists of three main parts:
- HTML: The HTML code defines the structure of the web page. It includes the header, navigation bar, sidebar, and main content area.
- CSS: The CSS code defines the styling of the web page. It includes the colors, fonts, and layout of the elements.
- JavaScript: The JavaScript code adds interactivity to the web page. It includes the search functionality, video list, and subscription list.
The following is a step-by-step explanation of the code:
- The HTML code defines the structure of the web page. It includes the header, navigation bar, sidebar, and main content area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./images/Youtube_logo.png">
<link rel="stylesheet" href="css/styles.css">
<script src="js/main.js" type="module"></script>
<title>VisVTube</title>
</head>
<body>
<nav class="flex-div">
<div class="nav-left flex-div">
<img src="images/menu.png" alt="menu" class="menu-icon">
<img src="images/logo.png" alt="logo" class="logo">
</div>
<div class="nav-middle flex-div">
<div class="search-box flex-div">
<input type="text" placeholder="Search">
<img src="images/search.png" alt="Search">
</div>
<div class