Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laansdole/bookstore-hackathon
Web Programming Course Project: Bookstore
https://github.com/laansdole/bookstore-hackathon
bookstore html-css website
Last synced: 3 days ago
JSON representation
Web Programming Course Project: Bookstore
- Host: GitHub
- URL: https://github.com/laansdole/bookstore-hackathon
- Owner: LaansDole
- License: mit
- Created: 2023-04-08T08:26:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-27T15:38:47.000Z (about 1 year ago)
- Last Synced: 2023-11-15T06:30:36.197Z (almost 1 year ago)
- Topics: bookstore, html-css, website
- Language: HTML
- Homepage: https://laansdole.github.io/bookstore-hackathon_s3963207/
- Size: 7.67 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# View my bookstore website here: [Aans Bookstore](https://laansdole.github.io/bookstore-hackathon_s3963207/)
## Contributor: Do Le Long An - s3963207
### My Website Link: https://laansdole.github.io/bookstore-hackathon_s3963207/
### My Project GitHub repository Link: https://github.com/LaansDole/bookstore-hackathon_s3963207
#### Project started date: 03/04/2023
#### Project finished date: 24/04/2023
#### Disclaimer: If the images appear to be broken in a page, please reload that page again, the cache might overload.
## Project Structure
```
.
├── assets/
├── src/
├── section/
└── utilities/
├── index.html
├── index.css
├── terms-and-conditions.html
├── book-category.html
├── bestseller-category.html
├── trending-category.html
├── book-detail.html
├── contact-us.html
├── LICENSE
└── README.md
```
1. `assets/`: This folder contains all images and gif that I use in my website.
2. `src/`: This folder contains two sub-folders: section and utilities
- `section/`: This folder contatins all the .css files that style a section, such as navigation bar and footer.
- `utilities/`: This folder contains all the .css files that style an utility, such as buttons and divider.
3. `index.html`: Homepage
4. `index.css`: This file contains all the global styles on the website, such as root, html and body.
5. `terms-and-conditions.html`: Terms and Conditions.
6. `book-category.html`: All books will be displayed here.
7. `bestseller.html`: Display the sub-categories in the bestselling category.
8. `trending.html`: Display the sub-categories in the on-trend category.
9. `contact-us.html`: Contact Form
10. `LICENSE`: MIT
11. `README.md`: A text file containing useful reference information about this project.
## About:
This is an assignment project for COSC2430 Web Programming offered at RMIT University Vietnam during Semester 2023A.
- Campus: Saigon South (SGS), Vietnam
- Lecturer: Mr. Tom Huynh
You are going to develop an online bookstore. As the first step, you need to create a static website version to get feedback from your senior developers. You need to build four pages in this phase.
1. Home page
2. Category page
3. Book detail page
4. Contact page
### Technologies used:
- Frontend: CSS, HTML
- Hosting: GitHub Page
### Supporting tools used
- UI Prototype: Canva, Codepen, Dribble
- Other resources: MDN Web Docs, RMIT Canvas, Sketchfab, Shapedivider
- All acknowledged in the source code
## More requirements for HTML
- Appropriate/semantic elements must be used when appropriate.
- Images must have an "alt" attribute.
- Headings must be used when appropriate.
- Form inputs must have labels.
- Rich media: at least one video is required
- Use "id" and "class" attributes. Use them consistently and correctly.
## More requirments for CSS
- Your website must be responsive: support at least 2 types of devices: mobile (width <= 960px) and desktop (width > 960px).
- Header nav bar: vertical on mobile devices and horizontal on desktop devices.
- Book detail page: for mobile devices, re-arrange the book images, price, and "Add to cart" button as the image below. For desktop devices, use the original image above.
- Contact form: for mobile devices, each input and its respective label are positioned on different lines (except the labels for individual checkboxes and radios). For desktop devices, each input and its respective label are positioned on the same line.
- Add custom font(s) to the website.
- Use CSS Flexbox to create more responsive and dynamic layouts.
- Use CSS transitions or animations to add interactivity to the website (e.g. For example, you could animate the hover state of links, or add a transition effect when an image is hovered over).
- Use CSS to style the website and make it visually appealing and usable (regarding layouts, colors, fonts, etc).
- Experiment with different color schemes and typography to create a unique and visually appealing design.