(main title),

etc to evaluate what the webpage is talking about. Semantic HTML helps because the more organized the structure is, Google approves it more. This algorithm is known as SEO (search engine optimization).

Search engines like Google analyze the HTML structure — including headings

,

, articles, and sections — to determine what a page is about and how information is organized.

图：代码

指向网站的一个横格子是title的位置 指向第一层砖块 同样for body paragraph 同样for 表格 砖快墙旁边是“你”看着观众 耍帅: “software engineering”

CSS After you have this house of bricks, we want to decorate and define the style.

人(CSS)问：how do we want our software to be seen?

We decide how does the elements (bricks) look like, the size, the color. CSS also handles responsiveness (how the layout adapts on different size screens). We can decide the very detailed alignments and spaces in between the elements to make it aesthetically pleasing.

JavaScript In the beautiful house that we now have, we need “electric wires” to make the house adapt to our changes. Otherwise you can’t even turn the lights on when you click on the light button.

图：打不开灯： 没开灯，身边有个鬼 想象打开灯鬼就会抛开 结果开不了灯 更害怕了

So JS makes the software interactive. it is responsible for making changes when the use clicks on a certain button, when the contents have to be updated, etc. Javascript can also fetch data from a server and update the page.

A software, either an app or a website, needs these three parts to function. In a browser, HTML first loads the structure, than CSS paints it (rendering), and Javascript runs to perform behaviors and updates. In the following posts, I’ll slowly explore how these parts come together to become the webpage we see.