This repository contains all the coursework for CS 132: Web Development, Fall 2024. The projects in this repository focus on building skills in HTML, CSS, and JavaScript, leading up to full-stack development. Each directory in this repository is dedicated to a specific Creative Project (CP) or the Final Project Proposal (FPP), and includes all related files such as HTML, CSS, JavaScript, and any necessary assets.
cp1/- Contains all files for Creative Project 1 (CP1), including HTML, CSS, and wireframes.cp2/- Contains all files for Creative Project 2 (CP2), which expands on CP1 with JavaScript functionality.cp3/- Contains all files for Creative Project 3 (CP3), featuring an interactive Unscramble Word Game with APIs.final-project-proposal/- Contains all files related to the Final Project Proposal (FPP), including HTML, CSS, JavaScript, images, and design documentation.
For CP1, the project focuses on creating a multi-page website titled "Exploring Edinburgh", which highlights key attractions, cafes, restaurants, nightlife spots, and general tips for navigating the city of Edinburgh. The website is built using HTML and CSS, emphasizing good web design principles like responsiveness, accessibility, and semantic structure.
The directory cp1/ also contains a PDF file named wireframe.pdf that outlines the visual structure and layout of each page before implementation. This document was instrumental in visualizing the website structure and implementing it in HTML and CSS.
Building on CP1, Creative Project 2 (CP2) introduces JavaScript to enhance interactivity on the "Exploring Edinburgh" website. New features include:
- Card Flip Interactions: Added to attractions, cafes, and nightlife pages, allowing users to click and view more details.
- Filtering Options: Users can filter cafes and nightlife venues based on specific criteria such as type or cuisine.
- Image Carousel: An automatic image slider displays featured images on the homepage for a dynamic experience.
- Dynamic Feedback: Real-time feedback shows the number of visible items after applying filters, improving usability.
A reflection document (cp\x-reflection.pdf) is included to document the development process, including design decisions, key challenges, and user feedback for every CP.
For CP3, the project is an interactive Unscramble Word Game using HTML, CSS, and JavaScript. The game integrates the Random Word API and Merriam-Webster Dictionary API to fetch random words and their definitions. Players unscramble words based on the provided hints.
- API Integration: Fetches random words and definitions dynamically.
- Interactive Gameplay: Players can submit guesses, skip words, or stop the game.
- Responsive Design: Styled with CSS for consistent UI and usability across devices.
- Dynamic Feedback: Real-time responses for correct and incorrect guesses.
The cp3-written.pdf includes insights on fetch operations, API handling, and ethical considerations in using third-party APIs.
A reflection document (cp\x-reflection.pdf) is included to document the development process, including design decisions, key challenges, and user feedback for mostly every CP.
The Final Project Proposal focuses on building an interactive e-commerce website called "Mystic Brews", a whimsical platform selling magical potions. Inspired by Edinburgh’s spooky and enchanting atmosphere, the website blends fantasy elements with practical e-commerce functionality.
- Interactive Cart: Dynamically update stock and cart content via API integration.
- Custom Potion Maker: Allow users to brew their own potions with selectable ingredients.
- Festive Elements: Falling snowflakes and a countdown timer on the promotions page.
- Dynamic Product Pages: Fetch and display potion details (ingredients, color, price) via API.
Future projects will be added to this repository as the course progresses. Each directory will follow a similar structure, ensuring that all files necessary for each project are clearly organized. The Final Project implementation will build on the proposal files to include complete front-end and back-end functionality.
All work is submitted through GitHub, and grading is done through CodePost. This repository will be used throughout the course for submission and testing.