You have been hired by a car adverts business, and have been tasked to develop a website that allows you to view a number of car adverts (develop a system to display at least 10 records each record should have multiple images, etc.). You will work on the layout of the website and allow for the user to navigate through various makes and models and find the car they’re interested in. You should design the same for a mobile device as well. The user should be able to lookup the advert based on make, model and year of manufacture for the car, and view the details of each ad, using the print CSS. The user should be able to contact the dealer using a contact form if they’re interested in the ad.
The first step was to plan the website on a blank sheet. We decided how many pages should be there. How the layout of the page should be. What sections should be there? How the banner will be placed, which sections will be given more importance etc. Then we moved on to deciding the grid of the car details. How many cars should be displayed in each row, what should be the width of each grid etc. The next step was to collect data for car adverts. We decided that we will have data of 20 Cars which will be stored in JSON (“JSON”) File. The brands which we selected are Mercedes Benz, BMW, Audi, and Bentley. We extracted the data for cars from official websites and found out some attractive images of each of these cars. We selected 5 cars of each of the 4 brands and 5 images of each car.
Following is the list of technologies used:
HTML5 CSS3 AngularJs JQuery Materialize CSS CSS flex AJAX JSON