Page Layout
Plan the Page Layout
We now have the basic building blocks: HTML for content, W3.CSS for styling and layout, and JavaScript for interaction.
Before combining them into a complete website, it is useful to plan the page structure.
A simple layout plan helps you decide where the main parts of the page should go.
You can sketch the layout on paper or use a digital tool.
For our first complete website, we will plan these sections:
- Navigation
- Slideshow
- Main content
- Photo section
- Contact information
Note
The layout below is a wireframe. It shows the structure of the page, not the finished design.
Navigation
Main Content
Heading
Text
Text
Photo
Photo
Photo
Contact
Email / Address / Phone
From Layout to Website
The layout gives us a plan for the page.
In the next chapter, we will turn this plan into a complete Band website using HTML, W3.CSS, and JavaScript.
As we build the site, each part of the wireframe becomes a real section:
- The navigation becomes a responsive navigation bar.
- The slideshow displays large images.
- The main content introduces the band.
- The photo section presents the band members.
- The contact section provides location and contact information.
