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>