AutoWorld is a car dealership website. It was built as a project to show a full car buying experience online, from browsing cars, comparing them, reading about financing options, and contacting the dealership.
The goal of this project was to design and build a complete website for a car dealership, similar to what a real car company would use. I wanted to practice building a multi page website using only HTML, CSS and JavaScript, and to learn how different pages of a website connect and work together, like the home page, dealer pages, car detail pages, financing pages and a contact page.
The website has the following sections.
Home page Shows an image slider, a short introduction to the company, the services offered, and a list of featured cars with images and short descriptions.
About page Tells the story of AutoWorld, how it started, and introduces the car brands the company partners with, which are Toyota, Honda, KIA and Suzuki.
Dealers page Lists the car brands available. Each brand has its own page, and each car model has its own detail page with specifications.
Compare page Lets a user compare different car models against each other.
Financial partners (Banks) page Shows the banks that AutoWorld works with for car financing. This includes Meezan Bank, Muslim Commercial Bank (MCB), United Bank Limited (UBL) and Bank AL Habib.
Contact and FAQ page Has the contact details of the company and answers to frequently asked questions.
- HTML for the structure of all the pages
- CSS for styling and layout
- JavaScript for things like the image slider and interactive parts of the site
- Vercel for hosting the website online
This project does not use any framework like React or Vue. It is built with plain HTML, CSS and JavaScript, page by page.
AutoWorld
├── Banks Pages for each financing bank partner
├── Contact us and FAQ Contact page and FAQ page
├── comparepage Car comparison page
├── dealers Car brand pages and car specification pages
├── home.about Home page and about page files
├── img Images used across the website
└── README.md
- Download or clone this repository.
- Open the folder on your computer.
- Open the
home.aboutfolder and double click on the home page file to open it in your browser. - You can then click through the navigation menu to visit the other pages.
Since this is a static website, you do not need to install anything or run any server to view it. Opening the HTML files directly in a browser is enough.
Made by Muhammad Ahmad.
LinkedIn: https://www.linkedin.com/in/muhammad-ahmad-021228348/