In this chapter we lay out the static HTML, CSS, and JavaScript for a car dealership called “Fred’s Cars, Trucks and Jeeps”. The goal is to design the structure, look and feel, and branding of our landing page.
We’ll start by mocking up our home page and defining what the different sections of the page should contain. Then we’ll fill in the details with real content and data.
The great thing about HTML is that you don’t have to spend a ton of money on a text editor or some top of the line IDE (Integrated Development Environment) like Visual Studio. We’ll talk more about Visual Studio in later chapters. But for right now just use your favorite text editor. I like using Textpad. It’s very simple. It highlights lots of keywords from different languages and technologies. And it’s free!
[ We’ll start getting into the Microsoft ASP.Net Core Development Ecosystem in Part Two and get to see Visual Studio then. For now I want to keep it simple and get you going on your first HTML application. ]
In this Chapter
- Use an HTML template
- Grab the starter template from getbootstrap.com (or w3shcools.com)
- Define the structure of our landing page.
- Learn the basic HTML Elements used to define a web page.
- Define the common areas of our site: header, footer, body.
- Create some static data in the body for vehicles; cars, trucks & jeeps.
- Search static data with dynamic JavaScript.
- Adding some style.
- Dress up our page with some CSS.
- Bring in bootstrap.css
- Build a details page for a vehicle
- Look at a Bootstrap plugin: The Bootstrap Carousel.