- 📖 Project Overview
- ✨ Features
- 🛠️ Tech Stack
- 🌐 Live Demo
- 🎥 Demo Video
- 📷 Screenshots
- 🚧 Challenges and Solutions
- 🛠 Installation
- 📂 Project Structure
- 📝 File Descriptions
- 🔧 Recommended Tools
- 🎓 What I Learned
- 🚀 Future Improvements
- 🤝 Contributing
- 👥 Contributors
- 📜 License
⚠️ Disclaimer
Welcome to the Web Project Demo! This project showcases a multi-page static website built with HTML5, CSS3, and JavaScript. It features structured navigation, interactive content, and a clean, responsive design. Whether you're browsing chapters, taking a quiz, or exploring the layout, this project highlights modern web development practices.
- Structured Content: Multiple pages, including Cover Page, Table of Contents, and Chapters.
- Interactive Quiz: JavaScript-powered quiz functionality with real-time feedback.
- Responsive Design: Fully optimized for desktop and mobile devices.
- Clean Layout: Organized design using modular CSS.
- Easy Navigation: Table of Contents for intuitive exploration.
- Maintainable Code: Organized directories for scripts, styles, and images.
This project was built using the following technologies:
- HTML5: Semantic structure and accessibility.
- CSS3: Responsive design and modular styling.
- JavaScript: DOM manipulation and interactive functionalities.
- Node.js: Local server for development and testing.
- Tools: Visual Studio Code, Live Server, and npm.
Experience the live project here: Live Demo
Watch the project walkthrough: Demo Video
Here are a few key highlights of the project:
Elegant and clean cover page design.
JavaScript-powered quiz for user interaction.
Fully responsive layout for desktop and mobile.
More screenshots can be found in the img/ folder.
-
Challenge: Creating an interactive quiz with instant feedback for users.
- Solution: Utilized JavaScript event listeners to dynamically validate answers and update the UI.
-
Challenge: Ensuring responsiveness across multiple devices.
- Solution: Implemented CSS media queries and a flexible grid layout to adapt to different screen sizes.
-
Challenge: Maintaining clean and modular code for scalability.
- Solution: Separated concerns by organizing CSS, JavaScript, and HTML files into respective folders.
Click to expand
-
Clone the repository:
git clone https://github.com/XiaoHoSheng/Web_Project_Demo.git
-
Navigate to the project folder:
cd Web_Project_Demo -
Open in browser:
- Locate the
index.htmlfile and open it in a browser.
- Locate the
-
Optional: Use Live Server for better testing:
- Install the Live Server extension in Visual Studio Code.
- Right-click
index.html-> Open with Live Server.
Click to expand
-
Ensure Node.js and npm are installed:
node -v npm -v
-
Install project dependencies:
npm install
-
Start the local server:
npm start
-
Access the project: Visit
http://localhost:3000in your browser.
Here is the organized folder structure:
Web_Project_Demo/
├── JavaScript/
│ └── Quiz.js # JavaScript functionality for the quiz
├── Process Journal Jason Yang/
│ └── Process Journal.pdf # Project documentation
├── StyleSheet/
│ ├── About Page.css
│ ├── Chapter One.css
│ ├── Chapter Two.css
│ ├── Cover Page.css
│ ├── Quiz.css
│ └── Table Of Contents.css
├── img/ # Images and assets
│ ├── logo.jpg
│ ├── download.png
│ └── ...
├── About Page.html
├── Chapter One.html
├── Chapter Two.html
├── Cover Page.html
├── Quiz.html
├── Table Of Contents.html
└── README.md
| File/Folder | Description |
|---|---|
| JavaScript/Quiz.js | Contains JavaScript functionalities, such as quiz logic. |
| Process Journal Jason Yang.pdf | Documentation of the project's development process. |
| StyleSheet/*.css | CSS files corresponding to individual HTML pages. |
| .html Files | Define the content and structure of the web pages. |
| img/ | Directory for storing images used in the project. |
To work efficiently with this project, it is recommended to use Visual Studio Code (VSCode) as your code editor. VSCode offers features like syntax highlighting, extensions, and live server plugins that enhance the development experience.
- Download Visual Studio Code: https://code.visualstudio.com/
- Recommended Extension: Live Server for real-time preview of HTML changes.
Through this project, I gained experience in:
- Creating modular and maintainable front-end code.
- Implementing responsive design for multi-device support.
- Using JavaScript to add interactivity to web pages.
- Setting up local development servers using Node.js and Live Server.
- Optimizing project structure for scalability.
Planned enhancements for this project include:
- Adding a timer and score summary to the quiz.
- Improving accessibility with ARIA roles and keyboard navigation.
- Integrating a backend for quiz result storage.
- Deploying the project to a platform like Netlify or Vercel.
Contributions are welcome! Here's how you can contribute:
- Fork the repository.
- Create a new branch:
git checkout -b feature-branch
- Make your changes and commit:
git add . git commit -m "Add new feature"
- Push your changes:
git push origin feature-branch
- Open a pull request:
- Go to the repository on GitHub.
- Click on Pull Requests.
- Submit your changes for review.
Thank you to the following contributors for their support:
- XiaoHoSheng - Project creator and maintainer
Feel free to contribute and add your name here!
This project is licensed under the MIT License. Feel free to use, modify, and share.
This project is created for educational and demonstration purposes only. It is not intended for production use.
Thank you for checking out the Web Project Demo! If you have questions or feedback, feel free to open an issue or contribute. 🚀