In the last module we laid out the html outlines for each category’s result set and defined the data we want to show for each vehicle result. Now, let’s fill in the vehicle data!
Below is a screen shot of what the webpage will look like at the end of this module.
You can also see a working version of what we will have built so far by the end of this module at the following link:
Preparing for the Module
The html code that generates the screenshot above uses images for the thumbnail preview in each vehicle result. You can download all the html code and the images it depends on in the screenshot above from the following link so your webpage can access the needed images and resources. Also if you want you can cut and paste the code from the downloadable fredscars.html file so you don’t have to type in the whole example. Or you can look at the downloaded code and compare to your own file and fix any errors.
Download Fred’s Cars webpage example
Extract the code
The folder you download from the link above is a compressed folder so you will need to decompress or extract the html file and images in order for the images to show up in the browser and for the JavaScript to work.
Windows comes with a utility to decompress files and folders. You can right click on the downloaded folder entitled “Chapter01Mod9.zip”, and click, “Extract All”.
Once you run the extract utility on the downloaded zip folder, you will have another folder next to it with the same name but without the “.zip” extension portion in the folder name. This is the folder you can run the webpage from.
You can either
* copy over the contents of your “C:\development\fredscars” directory with the contents of the downloaded folder
or
* make the modifications to fredscars.html yourself in the “Modify the Code” section below.
You can also use the contents of the downloaded html file to check for errors if you decide to type in the code below yourself in your current fredscars.html file. Just make sure your fredscars folder has the image folders and images in the same structure as the downloaded folder.
Modify the code
Modify the contents of fredscars.html with the following code, save your file, and refresh your browser:
<!-- ... -->
.result-li-vin {
margin-bottom: 10px;
}
.result-image {
width: 65%;
padding: 15px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- ... -->
<div id="cars" style="display: block;">
<div class="row">
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2021</li>
<li><strong>Make:</strong> Dodge</li>
<li><strong>Model:</strong> Challenger</li>
<li><strong>Color:</strong> Frostbite</li>
<li class="bg-info"><strong> Price: $64,164</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 2C3CDZFJ8MH631199</li>
</ul>
<hr />
<img src="images/cars/car1.webp"
class="result-image" />
</div>
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> Used</li>
<li><strong>Year:</strong> 2020</li>
<li><strong>Make:</strong> Ford</li>
<li><strong>Model:</strong> Escape</li>
<li><strong>Color:</strong> Oxford White</li>
<li class="bg-info"><strong> Price: $22,999</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 1FMCU0F63LUC25826</li>
</ul>
<hr />
<img src="images/cars/car2.webp"
class="result-image" />
</div>
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2021</li>
<li><strong>Make:</strong> Dodge</li>
<li><strong>Model:</strong> Durango</li>
<li><strong>Color:</strong> Black</li>
<li class="bg-info"><strong> Price: $50,557</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 1C4RDJDG5MC837730</li>
</ul>
<hr />
<img src="images/cars/car3.webp"
class="result-image" />
</div>
</div>
<div class="row">
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2021</li>
<li><strong>Make:</strong> Nissan</li>
<li><strong>Model:</strong> Niro</li>
<li><strong>Color:</strong> Blue</li>
<li class="bg-info"><strong> Price: $24,690</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 2XYZT67JTF24AZG856</li>
</ul>
<hr />
<img src="images/cars/car4.png"
class="result-image" />
</div>
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2021</li>
<li><strong>Make:</strong> Kia</li>
<li><strong>Model:</strong> Stinger</li>
<li><strong>Color:</strong> Gray</li>
<li class="bg-info"><strong> Price: $36,090</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 6FG146B89624AZ7952</li>
</ul>
<hr />
<img src="images/cars/car5.png"
class="result-image" />
</div>
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2021</li>
<li><strong>Make:</strong> Kia</li>
<li><strong>Model:</strong> Stinger</li>
<li><strong>Color:</strong> Gray</li>
<li class="bg-info"><strong> Price: $36,090</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 6FG146B89624AZ7952</li>
</ul>
<hr />
<img src="images/cars/car6.png"
class="result-image" />
</div>
</div>
</div>
<div id="trucks" style="display: block;">
<div class="row">
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2022</li>
<li><strong>Make:</strong> Ram</li>
<li><strong>Model:</strong> Crew Cab</li>
<li><strong>Color:</strong> Black</li>
<li class="bg-info"><strong> Price: $68,400</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 3C6UR5DL8NG157035</li>
</ul>
<hr />
<img src="images/trucks/truck1.webp"
class="result-image" />
</div>
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> Used</li>
<li><strong>Year:</strong> 2017</li>
<li><strong>Make:</strong> Ram</li>
<li><strong>Model:</strong> Crew Cab</li>
<li><strong>Color:</strong> Red</li>
<li class="bg-info"><strong> Price: $33,000</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 1C6RR7PT0HS814596</li>
</ul>
<hr />
<img src="images/trucks/truck2.webp"
class="result-image" />
</div>
<div class="col result-column-empty">
<!-- empty col -->
</div>
</div>
</div>
<div id="jeeps" style="display: block;">
<div class="row">
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2022</li>
<li><strong>Make:</strong> Jeep</li>
<li><strong>Model:</strong> Compass</li>
<li><strong>Color:</strong> White</li>
<li class="bg-info"><strong> Price: $34,980</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 3C4NJDFB5NT114024</li>
</ul>
<hr />
<img src="images/jeeps/jeep1.webp"
class="result-image" />
</div>
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2022</li>
<li><strong>Make:</strong> Jeep</li>
<li><strong>Model:</strong> Compass</li>
<li><strong>Color:</strong> Red</li>
<li class="bg-info"><strong> Price: $39,275</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 3C4NJDCB1NT118172</li>
</ul>
<hr />
<img src="images/jeeps/jeep2.webp"
class="result-image" />
</div>
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2021</li>
<li><strong>Make:</strong> Jeep</li>
<li><strong>Model:</strong> Grand Cherokee</li>
<li><strong>Color:</strong> Pearlcoat</li>
<li class="bg-info"><strong> Price: $53,575</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 1C4RJKBG5M8201121</li>
</ul>
<hr />
<img src="images/jeeps/jeep3.webp"
class="result-image" />
</div>
</div>
<hr />
<div class="row">
<div class="col result-column">
<ul class="list-unstyled" style="text-align:left;">
<li><strong>Status:</strong> New</li>
<li><strong>Year:</strong> 2021</li>
<li><strong>Make:</strong> Jeep</li>
<li><strong>Model:</strong> Wrangler Sport S</li>
<li><strong>Color:</strong> Green</li>
<li class="bg-info"><strong> Price: $40,940</strong></li>
<li class="result-li-vin"><strong>VIN:</strong> 1C4GJXAN0MW856433</li>
</ul>
<hr />
<img src="images/jeeps/jeep4.webp"
class="result-image" />
</div>
<div class="col result-column-empty">
<!-- empty col -->
</div>
<div class="col result-column-empty">
<!-- empty col -->
</div>
</div>
</div>
<!-- ... -->Let’s examine the code modifications above.
The HTML Image Element
Each result for a vehicle now has an <img> element with a src attribute and a class attribute. The image element in html is as its name suggests, used to display images in the browser.
<img src="images/cars/car1.webp"
class="result-image" />In the code snippet above, the image tag has a src attribute giving the path to the image that should be shown. This src attribute is using a relative path. A relative path starts from the html code file and looks for the image from there. Here the path it will look for the image, starting from fredscars.html, is the images folder on the same folder level as fredscars.html, and from there goes to the cars folder, and inside the cars folder uses the image named car1.webp.
If we wanted to use an absolute pathway the src attribute value might look like this:
c:\development\fredscars\images\cars\car1.webp.
The problem with an absolute path compared to a relative path is if you move your development folder, fredscars, to another computer, server or to a different place in your folder or directory structure on your development machine, the link to the image could break. Relative paths start from the code file itself so as you move your development folder around, for instance in deployment, the links will not break.
The image elements in each result are also using a new css class called “result-image”:
.result-image {
width: 65%;
padding: 15px;
display: block;
margin-left: auto;
margin-right: auto;
}The width property above is setting the width of the image to 65% of the space the image element would normally take up in its parent element, in this case the div column holding all of the vehicle result data. The margin-left and margin-right properties are set to auto in order to center the image.
We have also added another new css class called “result-li-vin” and we are applying the new class to each vehicle’s vin list item:
.result-li-vin {
margin-bottom: 10px;
}This pushes the image down 10 pixels to give some white space from the <hr> element above it.
And finally, we added the bootstrap “bg-info” css class to each vehicle’s price list item to give that data point a bootstrap lighter blue background then bg-primary would give, for example on the category buttons.
Wrapping up the Fred’s Cars landing page.
At this point you should have a working webpage with the html structure laying out the positioning of your content, JavaScript functionality allowing your users to look at different categories of vehicle, and static data showing information about each vehicle along with thumbnail images to give the user an idea of what each vehicle looks like.
Static data here refers to the fact that we laid out each vehicle result by hand and coded the html. In later chapters we’ll see how to store this data in a database and dynamically build html pages rendering the data and images from the database.
What’s Next
In the next module we will briefly return to the topic of reusability and build a details page for one of the vehicles.