Chapter 18. Completing Website Development
In this chapter, we focus on completing your website by developing essential pages: the home (landing) page, main (list) page, and content (detail) pages. Additionally, we introduce Live Server for real-time previews during development, making the process more efficient.
What We Cover in This Chapter
The following topics are covered in this chapter:
Website Structure Design
In this section, we'll give overviews of website structure design. Website structure involves organizing your content into sections that are user-friendly and easy to navigate. One of the typical website structures consists of a home (landing) page, main (list) page, and content (detail) page. The home page often features a cover image, while the main page lists various topics linking to detailed content. This structure is key for building a user-friendly site that scales across devices using responsive design techniques.
Live Server
Live Server is a VS Code extension that lets you preview your HTML and CSS in real-time. It helps test designs quickly and view changes instantly. You can also view the site on multiple devices by connecting through your local Wi-Fi. In this section, we'll explore how to set up and use this useful tool to streamline the development process.
Home (Landing) Page Development
The home page is often the first point of interaction with your site. It's typically set up using index.html and features a cover image and welcoming design. In this section, we'll demonstrate a responsive layout with Flexbox, allowing it to adjust from a two-column to a single-column layout on mobile. Using simple CSS techniques like background images and flex properties, we ensure a visually appealing design that adapts to different screen sizes.
Main (List) Page Development
The main (list) page organizes the content of the website into a list format. It typically links to the detailed content pages. Using Flexbox, we'll structure this page to feature a top bar, a card component for each section, and a footer. The cards are replicated for different chapters, linking to each chapter’s detailed page. The page design includes a background image and a translucent layer for visual contrast, ensuring it looks clean and functional.
Content (Detail) Page Development
The content (detail) page displays more information when users click on a link from the main page. In this section, we will create a template for each content page, which includes components like a top bar, back button, and footer. We'll also demonstrate how to add navigation buttons to move between previous and next chapters, completing the site's interactive flow and improving user navigation.
Learn offline for better focus!
A book for this course is available on Amazon.
HTML & CSS Visual Guide
Step By Step Manual for Complete Beginners with Zero Coding Experience to Build Stunning Websites from Scratch
Get the Book NowMore Topics to Explore
Masking and Boolean Operations in Figma
border-style
nth-child
