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;}
  

learn more @whatthehekkist

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?

• what is [array] in JS?
  

[e-book] What The Hekk is HTML/CSS/JS

What The Hekk is HTML/CSS/JS is a frontend web development tutorial that you can make a web application in five minutes from scratch.

You will learn the basics of HTML/CSS/JS,

@whatthehekkist

and how to do frontend web development by creating, building, and publishing a face shape-recognition web application interacting with AI; a ready-to-use prototype (template) where you can unfold your idea/bias on UI/UX, production, tech stack, system structure, code style, and so forth as you get more into HTML/CSS/JS with What The Hekk is HTML/CSS/JS.

@whatthehekkist

Previous Next

At the end of the tutorial, you will also get a grasp on source code management, self-testing/debugging, deployment, domain settings, and more to maintain and publish your web application on the Internet.
(All the source codes provided.)

[book overview]

HTML: element and tag, attribute
CSS: Style elements with tag/class/id, external CSS, relative path
javascript (JS): internal/external JS, event, function, variables, conditional statement, logical operators, array, jQuery, APIs

Creating a web app

• coming up with an idea, flesh out the idea
• Train and get an image recognition AI model using open source APIs
• Building web app prototype
  • HTML/CSS
    • UI implementation
    • browser rendering process and browser inspection
  • JS
    • control a program flow between a view (HTML) and a domain logic (AI-related tasks via APIs)
    • enable AI to analyze the face shape of an input image
      • send a request to AI via APIs and polish up a response returned by the AI to ship the final result to browser (users)
        • global variables, API method calls, switch statement
        • visualize numbers in a chart
• How to use Git (source code management)
• How to make your web app go live on the Internet
  • self-testing/debugging, deployment
  • custom domain setting, DNS/nameservers, IP address, HTTPs