Blog 2 // How HTML, CSS, and JavaScript work together

I chose the analogy website because I always love having little ways to remember things, especially things that are new to me like web design. In this article Kevin Kononenko talks about how HTML, CSS, and JavaScript work together like a city block. He uses this analogy to discuss how to save files in web design, and uses building’s characteristics to explain what HTML, CSS, and JavaScript are exactly.

I learned quite a bit from reading this article. First, he compared the three languages to a house. I already knew that HTML is the structure of the web page, and he described it as the structure of a building. So if a house had one bedroom and one bath, that would be the ‘HTML’ of the house. Now lets say that the house is blue with a gray roof and a red door with hardwood light floors and tan walls on the inside, that would act as our CSS. CSS is the decorative stuff of the house, just like CSS is the decorative design elements on a web page. Lastly, he explained JavaScript as the function of the house. So, if you can eat and sleep in the house, that would be the JavaScript. The JavaScript is how the web page interacts with the user and other elements on the page.

He then introduced a city block as an analogy of a web site with multiple pages. So if a city block had a bank, church, and restaurant, then that would be like a web site having an about, portfolio, and home page. He also said that the HTML web pages would be saved in the ‘neighborhood’ folder, and subfolders would be saved in the neighborhood folder that related to the CSS and JavaScript for those webpages. It was also cool to see how you would reference a CSS style in your html page. He said you would type style/bankCSS as an example. It was really interesting to see these three languages laid out like this in a simpler way related to a city.

Article Here

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s