In the following modules we’re going to get into laying out the actual content of our html page. And we are going to get into some user interaction. This will further define the feel of our webpage and application going forward in following chapters.
All our content at this point will be static. But we will start to learn JavaScript in the following modules to change what the user sees when they click a button or select an option from a dropdown.
Our content will be static, meaning everything the user sees, even if the screen changes from a user interaction or click, is laid out before hand. But, we will be using dynamic JavaScript, meaning to the user, the appearance of and the content on the screen seems to change when they click or interact with it.
In later chapters we will learn how to also make the content itself dynamic. But this chapter is about the basics. And the idea is to learn a bit about how things work under the hood before you let a platform, framework, or programming language do that for you.
From here on out our html webpage will start to take on the life of an actual application. The first thing we want to do is plan what our application will look like. In the image below you can see a mockup of what the layout will look like:
On the left hand side will be a list of categories the user can narrow down a search of vehicles to. The options will be, “Cars”, “Trucks”, or “Jeeps”. There will also be an “All” button where the user can see all the vehicles.
The right hand side of the screen is where the results of the search will show up.
Preview to Defining Objects
In the mockup above, the state of the screen shows the user has selected the “Cars” button. The results area on the right hand side shows a list of cars and their descriptions laid out in rows and columns. Eventually, we need to start defining what attributes a vehicle has, what attributes the subtypes (car, truck, and jeep) have, and the common attributes of them all like make, model, year, color, and description so that we can lay out each result consistently.
What’s Next
In the next few modules we will lay out some place holder content in our main content area and add some user interaction with JavaScript. Then we will return to defining the properties and attributes of our vehicle objects.