What is Web?

Web (World Wide Web; WWW) is a vast online information system you can write, read, watch, or consume resources such as documents, media, etc accessed by web browser on the Internet. You can think like the web is a software consisting of plenty of websites that runs on the hardware Internet.

If so, what does the web have to do with HTML/CSS/JS? All the websites you visit are made of HTML/CSS/JS and they form their ecosystem; the web.
That means, the web and HTML/CSS/JS are inseparable from each other.

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating and displaying webpages via web browsers such as Chrome or Safari on the Internet. A collection of webpages is called a website, and all websites are built on HTML document with CSS (Cascading Style Sheets) and javascript (JS).

Say, you write a document in word programs like MS-word or Google docs. You create a document, set headings, write paragraphs, put some images, and so forth. Like so, HTML is a document with its certain syntax.

• Element is a component in HTML.
• Tag defines where an element starts and ends by enclosing an element with a start & end tag.
  • Inside a tag, attributes (e.g. style, class, id, etc) set specific properties.

element, tag, and attribute

In a nutshell, HTML is all about elements (tags); a series of components.
e.g., <html></html>, <head></head>, <title></title>, <body></body>, <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <p></p> , <div></div>, <span></span>, <a></a>, and a lot more.

What is CSS?

CSS (Cascading Style Sheets) is a style sheet used for styling HTML document, and the following is an example output that applies a css styling for an HTML element in three different ways; inline css, internal css, and external css.

• inline CSS styles an HTML element as an inline attribute within the start tag of an element (and can only be used for a single HTML element).

  index.html

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <h1 style="color: red">H1 heading with a color in red</h1>
        </body>
    </html>
  

• internal CSS is used to style a single HTML document.
  In the <head> of an HTML document, you can create a <style> element and put CSS codes in it.

  index.html

    <!DOCTYPE html>
    <html>
        <head>
            <style>
                h1 {color: red}
            </style>
        </head>
        <body>
            <h1>H1 heading with a color in red</h1>
        </body>
    </html>
  

• external CSS can be used to style a single or multiple HTML document(s) by referencing an external css file in the <head> of an HTML document.

  index.html

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="./css/styles.css">
        </head>
        <body>
            <h1>H1 heading with a color in red</h1>
        </body>
    </html>
  

  styles.css

    h1 {color: red;}
  

What is javascript(JS) ?

javascript (hereinafter JS) is a client-side script language that enables you to design, implement, or program webpages dynamically.
Say, you open a webpage in a web browser. HTML forms the page structure, CSS sets styling for that page (presentation, layout, formatting, etc), and JS dynamically controls an overall behavior of the page interacting with HTML/CSS.
Again, JS is a script language and is different from programming languages like C, C + +, or Java. It’s rather close to a subset of programming languages that enables you to lightly and dynamically script such concept and syntax of programming languages in browser.

Uses of JS are farily broad in the sense that it is consumed to efficiently boost development process or implement specific features such as layout/design, UI templates, SEO, ads, website analytics services, etc for websites and web applications via many different APIs (Application Programming Interface) services.
Although you don’t have know everything in JS, there’re loads of benefits from learning JS as long as you are into HTML, CSS, JS, programming, web dev, frontend, data processing/visualization, e-commerce, SEO, branding, marketing, ads, etc.

• [JS variables] what is var, let, and const?