https://github.com/mstarrk/homepage
Problem set 8 for CS50x: Build a simple homepage using HTML, CSS, and JavaScript.
https://github.com/mstarrk/homepage
bootstrap cs50x css html javascript website
Last synced: 2 months ago
JSON representation
Problem set 8 for CS50x: Build a simple homepage using HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/mstarrk/homepage
- Owner: mstarrk
- Created: 2022-12-07T13:23:01.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-20T14:42:35.000Z (over 1 year ago)
- Last Synced: 2025-04-02T12:37:53.756Z (over 1 year ago)
- Topics: bootstrap, cs50x, css, html, javascript, website
- Language: HTML
- Homepage:
- Size: 10.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Homepage
This is my solution for [CS50x Problem Set 8: Homepage](https://cs50.harvard.edu/x/2025/psets/8/homepage/#homepage).
I designed and built a website using **HTML**, **vanilla CSS**, **JavaScript**, and **Bootstrap**. The project includes many features, such as:
- A responsive design.
- A custom footer and navigation bar (navbar).
- Interactive elements for a rich user experience like a hamburger menu, or carousel.
- Dark mode support.
- Over 500 lines of plain CSS.
- Assets sourced from [https://undraw.co/](https://undraw.co/).
### Extra Challenge: A Component-Based Approach Without Frameworks
Since this project doesn't use Node.js, I couldn’t rely on React or similar libraries/frameworks. To address this, I developed a [custom component loader script](https://github.com/mstarrk/Homepage/blob/main/homepage/loader.js)—`loader.js`—which functions as a basic HTML injector. This script enables reusability and eliminates repetitive code by dynamically loading reusable HTML components, allowing me to implement a composite approach.
The script allows you to use reusable components like this:
```html
```
It dynamically loads the content of `./components/navbar.html` into the div.