Building the page
We will have two main sections on the main page: the product list and the cart.
To create the layout, we could use basic HTML tags, such as table and div, but this is quite laborious for our task. Instead, let's introduce a framework named Bootstrap (https://getbootstrap.com/).
This open source framework is widely used and very mature. It allows us to build a responsive website based on a grid, with a lot of components such as notifications, menus, badges, and tooltips. Bootstrap needs a CSS and some JavaScript libraries to work.
For now, we just need to add the Bootstrap CSS by adding the link in the HTML header, as follows:
<head>
<title>@title</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0
/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW
/dAiS6JXm" crossorigin="anonymous">
</head>
