Skip to content

First assignment for the 'Web Development' course: Create a local business website with a landing page, About Us, and Products page. Features: product list with add/remove, two fonts, three colors, Bootstrap responsiveness, and embedded Google Maps.

Notifications You must be signed in to change notification settings

Sah2Sah2/Lab1-WebDev_SimpleWebpage

Repository files navigation

Your Catsitter in Majorna - Webpage with Animal Crossing Theme

Overview

This repository contains a webpage developed for the first assignment of my Web Development course in the .NET Cloud Developer program at IT Högskola. It represents a local catsitting service inspired by the Animal Crossing (Nintendo) theme. This project was created as part of my coursework to showcase my skills in web development and frontend design.

Assignment Instructions

Task Description

Disclaimer: The description of the assignment has been taken from the PDF provided by the school.

Project Structure

Create a website for a local business featuring:

  • A landing page, About Us page, and Products/Services page;
  • A JavaScript function to display available services and allow users to add/remove them from a virtual basket;
  • Use two custom fonts and three theme colors;
  • Ensure responsiveness using Bootstrap;
  • Embed a Google Maps section to display the business location.

Technologies Used

  • HTML, CSS, JavaScript;
  • Bootstrap for responsive design;
  • Google Maps API for embedding maps.

Image

Theme Inspiration

This website takes inspiration from Animal Crossing, creating a cozy, welcoming, and fun experience while showcasing a fictional local cat care service.

Reflection

This assignment challenged me to integrate multiple web technologies while maintaining a cohesive theme. One challenge I faced was ensuring the website's responsiveness across different screen dimensions while maintaining the same functionality and structure. Ensuring smooth interaction for adding and removing items from the basket, as well as implementing a donation feature similar to a wishlist payment system, required careful JavaScript implementation. Additionally, balancing design aesthetics with functionality helped me refine my front-end development skills. Following a well-known theme guided me in making thoughtful design choices.

How to Run

  1. Clone the repository;
  2. Open index.html in your browser;
  3. Explore services, add or remove them from the basket, simulate a donation through a similar Swish system, and check out location details.

About

First assignment for the 'Web Development' course: Create a local business website with a landing page, About Us, and Products page. Features: product list with add/remove, two fonts, three colors, Bootstrap responsiveness, and embedded Google Maps.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published