Website Structure Design
As we explained in the first chapter of this course, one of the important steps in website design is making a sitemap or user flow design. As the focus of this course is HTML and CSS coding, we didn't cover the sitemap or user flow design in detail but we'll explain it briefly with the HTML & CSS Introduction practice demo website example.
There are many types of website structures. In this chapter, we use one of the basic structures as an example.
Home (Landing) Page
The home page is sometimes used for representing an entire website but it is usually defined as the first page of the entire website hierarchy. The index.html file is usually used for the home page. As the home page is the page users first land when reaching the website, it is also called a landing page but 'landing page' can be used in a wider context such as the first page of a web campaign page. On a home page or landing page, a large cover image is often used to attract website users. There are particular CSS techniques to style this type of page.
Main (List) Page
When a website has many pages, there is a page with a list of contents linking to each content (detail) page. The main page can be the same as the home page. For HTML and CSS practice purposes, we'll create different pages to explain different CSS techniques.
Content (Detail) Page
On a typical website, after users click on one of the links on the main (list) page, they can reach the content page with the details of the content (e.g., news articles, SNS posts, etc.). Usually, there is a standard template for content pages for each website.
In this chapter, we'll explain how to create a template for a content page using the components we learned in the previous chapter.
As a general website development tool, we also introduce one useful VS Code extension Live Server that is very helpful to quickly check how your code is rendered in a browser.
As we explained in the first chapter of this course, one of the important steps in website design is making a sitemap or user flow design. As the focus of this course is HTML and CSS coding, we didn't cover the sitemap or user flow design in detail but we'll explain it briefly with the HTML & CSS Introduction practice demo website example.
There are many types of website structures. In this chapter, we use one of the basic structures as an example.
Home (Landing) Page
The home page is sometimes used for representing an entire website but it is usually defined as the first page of the entire website hierarchy. The index.html file is usually used for the home page. As the home page is the page users first land when reaching the website, it is also called a landing page but 'landing page' can be used in a wider context such as the first page of a web campaign page. On a home page or landing page, a large cover image is often used to attract website users. There are particular CSS techniques to style this type of page.
Main (List) Page
When a website has many pages, there is a page with a list of contents linking to each content (detail) page. The main page can be the same as the home page. For HTML and CSS practice purposes, we'll create different pages to explain different CSS techniques.
Content (Detail) Page
On a typical website, after users click on one of the links on the main (list) page, they can reach the content page with the details of the content (e.g., news articles, SNS posts, etc.). Usually, there is a standard template for content pages for each website.
In this chapter, we'll explain how to create a template for a content page using the components we learned in the previous chapter.
As a general website development tool, we also introduce one useful VS Code extension Live Server that is very helpful to quickly check how your code is rendered in a browser.
