00:00:14,480 --> 00:00:15,960
Office coffee, huh?
I know a place with the best java in town
Maybe we could, you know
00:00:22,960 --> 00:00:24,000
Java?
Isn’t that what you’re doing all day?
00:00:26,040 --> 00:00:27,720
No, what? Wait!
You think java, like in…?
00:00:29,280 --> 00:00:32,000
Yeah, the one that you’re using for websites
00:00:32,000 --> 00:00:34,400
Oh, no… No no Jav…
What we do is called “JavaScript”
“Java” is something completely different
00:00:41,920 --> 00:00:44,560
Java was created by Sun Microsystems
00:00:44,560 --> 00:00:48,120
in 1995, as a class-based, object-oriented
00:00:48,120 --> 00:00:49,280
Boring!
00:00:49,280 --> 00:00:50,160
Nobody cares
00:00:50,160 --> 00:00:51,280
Here’s what you need to know
00:00:51,280 --> 00:00:53,240
Java — Corporate people
00:00:53,240 --> 00:00:54,640
JavaScript — Cool people
00:00:54,640 --> 00:00:56,160
Java — Android apps
00:00:56,160 --> 00:00:57,480
JavaScript — Websites
00:00:57,480 --> 00:00:59,480
Java — Lives in its own little world
00:00:59,480 --> 00:01:01,160
JavaScript — In your browser
00:01:01,160 --> 00:01:03,800
Java — Also coffee. It gives you energy
00:01:03,800 --> 00:01:06,600
JavaScript — It’s like fragile code that sucks your ener…
00:01:06,600 --> 00:01:07,400
No, wait
00:01:07,400 --> 00:01:08,760
It sucks! No!
00:01:08,760 --> 00:01:11,920
But we can take it, because we survived the hardships
00:01:12,000 --> 00:01:16,560
And by surviving hardships, you
build grit and we build patience, and
00:01:17,720 --> 00:01:19,560
The more you know
00:01:19,560 --> 00:01:22,560
So how about the coffee?
00:01:26,480 --> 00:01:27,480
Actually pretty good
00:01:33,720 --> 00:01:35,720
Welcome to the Secret Tech Club
00:01:35,720 --> 00:01:38,200
A video series where we make tech fun
00:01:38,200 --> 00:01:41,600
and bearable, with skits, podcasts,
and presentations
00:01:42,200 --> 00:01:46,560
My name is Kang, and I’m a
creative developer-y person at Zooma
00:01:46,720 --> 00:01:51,240
You know, future software and websites
might not even be built by us—but by AI
00:01:51,280 --> 00:01:54,120
So why are we still here
talking about tech?
00:01:54,120 --> 00:01:56,880
Here’s our take
00:01:56,880 --> 00:01:59,280
We’re headed for a wonderful
and exciting future,
00:01:59,280 --> 00:02:02,680
and it’s a perfect opportunity
to catch up with the basics
00:02:02,680 --> 00:02:06,840
Our goal with the Secret Tech Club
is to make technology less intimidating
00:02:06,840 --> 00:02:11,800
by turning fundamental concepts
into something fun and approachable
00:02:11,840 --> 00:02:15,560
Oh, and technology is pretty wide
term, so let’s scope it
00:02:15,600 --> 00:02:18,240
to the thing we know best,
which is web technology, okay?
00:02:18,240 --> 00:02:20,560
And today we’re going
to talk about the languages
00:02:20,560 --> 00:02:23,280
we use when developing websites
and web apps
00:02:23,280 --> 00:02:27,520
Whether you are a project leader, CTO
or an AI coder,
00:02:27,640 --> 00:02:30,480
I believe it’s great to at least know
some of the basics
00:02:30,480 --> 00:02:34,800
I personally always find more comfort
in knowing more and to know less
00:02:34,800 --> 00:02:36,720
Even if it doesn’t always make me happy
00:02:36,720 --> 00:02:39,720
Anyway,
I’m going to meet up with my colleague Niyat
00:02:39,720 --> 00:02:42,160
and hopefully she won’t ditch
me this time
00:02:42,160 --> 00:02:42,720
Come along!
00:02:45,920 --> 00:02:49,160
Hi, welcome to the deep dive
00:02:49,160 --> 00:02:52,520
First off, thank you Niyat for coming here
00:02:52,520 --> 00:02:56,960
and also for joining me,
and playing along in my skit
00:02:57,280 --> 00:03:00,040
That was very fun,
although I think it was kind of,
00:03:00,880 --> 00:03:02,880
kind of shitty of you
to just leave me hanging there
00:03:02,880 --> 00:03:05,640
Don’t you think?
00:03:06,840 --> 00:03:08,200
It was the right decision
00:03:08,200 --> 00:03:11,200
Because it’s never okay
to hit on a colleague
00:03:11,200 --> 00:03:14,240
Not in my book,
especially not if you're married, right?
00:03:14,720 --> 00:03:16,320
Show your ring!
00:03:16,920 --> 00:03:21,520
No. Yeah, but for the sake of it,
let's ask the viewers:
00:03:21,520 --> 00:03:25,600
Are you Team Kang, or are you
Team Niyat? Vote in the comments!
00:03:25,760 --> 00:03:30,160
And if there are no comments, you can just
send an email to info@zooma.agency
00:03:30,160 --> 00:03:32,360
Now that we got that out of the way
00:03:32,520 --> 00:03:37,320
Let’s jump to the main topic,
which is: Web languages
00:03:37,840 --> 00:03:40,000
Do you know what my goal here is today?
00:03:40,000 --> 00:03:42,360
To make tech easy to understand?
00:03:42,360 --> 00:03:44,120
Yes. It’s not to impress you
00:03:44,120 --> 00:03:45,760
I don’t know how to do that
00:03:46,320 --> 00:03:48,880
Web languages are fundamentally three things:
00:03:48,880 --> 00:03:51,640
It’s HTML, CSS and JavaScript
00:03:52,840 --> 00:03:53,680
HTML
00:03:53,680 --> 00:03:55,920
You can think of it like a house
00:03:55,920 --> 00:03:57,480
It’s a structure
00:03:57,480 --> 00:03:58,600
And then comes the CSS
00:03:58,600 --> 00:04:02,600
Then you put the decoration
and the furniture and so on
00:04:02,880 --> 00:04:06,600
Third component is JavaScript,
which is functionality
00:04:06,600 --> 00:04:08,920
It’s electricity, it’s the lightning
00:04:08,920 --> 00:04:11,920
HTML, CSS, JavaScript
it's the DNA of the web
00:04:12,640 --> 00:04:15,640
Without HTML, there’s nothing to decorate
00:04:15,640 --> 00:04:19,480
Without CSS, it’s just plain, boring structure
00:04:19,480 --> 00:04:22,000
And without JavaScript, it’s lifeless
00:04:22,840 --> 00:04:26,280
So this is the basic HTML document
00:04:26,280 --> 00:04:27,560
First, look at the HTML
00:04:27,560 --> 00:04:31,040
That’s that the wrapping
tag around all the content
00:04:31,200 --> 00:04:37,800
Then there’s this <head>. Inside here
we have styles and some SEO tags
00:04:38,160 --> 00:04:41,400
And inside the <b>
we have all the content stuff</b>
00:04:41,840 --> 00:04:44,720
Here is what HTML tags look like
00:04:44,720 --> 00:04:49,400
The first one, you probably recognize.
It’s H1, means Heading 1
00:04:49,400 --> 00:04:50,840
It’s the page title
00:04:50,840 --> 00:04:55,640
And then there is a <p>,
which stands for paragraph
00:04:55,880 --> 00:05:00,520
And inside this paragraph we
can also put links, which is an <a> tag
00:05:02,680 --> 00:05:04,800
And then there’s something called attributes
00:05:04,800 --> 00:05:08,200
So all the tags
you can have attributes like this
00:05:08,760 --> 00:05:11,480
For example, the <b>,
we can set a primary class</b>
00:05:11,480 --> 00:05:15,200
To indicate that this is a primary
button, style it differently
00:05:15,880 --> 00:05:18,640
And the <a> tag, we saw already
00:05:18,640 --> 00:05:23,120
And a link needs a destination
which we set with the `href` attribute.
00:05:24,200 --> 00:05:27,200
And the third example is a checkbox
00:05:28,360 --> 00:05:31,560
It’s hard to speak about HTML
without talking about “divs” and “spans”
00:05:31,560 --> 00:05:33,040
Divs, what is that?
00:05:33,040 --> 00:05:36,120
It’s short for division
00:05:36,120 --> 00:05:39,920
It creates a big block,
a big chunk that gets its own space.
00:05:40,160 --> 00:05:42,040
So it’s a big container
00:05:42,040 --> 00:05:45,480
Inside divs you can put headings,
paragraphs and everything
00:05:45,480 --> 00:05:49,280
Then we have inline elements
00:05:49,280 --> 00:05:51,640
And inline
means that it flows with the text
00:05:51,640 --> 00:05:54,640
So, here for example
we have a paragraph
00:05:54,720 --> 00:05:57,720
And inside the paragraph
we have a <s></s>
00:05:57,720 --> 00:06:00,440
that wraps the the text “inline container”
00:06:01,560 --> 00:06:04,560
And on the span we set `color: blue;`
00:06:04,720 --> 00:06:09,160
So we tell the browser that “inline
containers” is going to be blue
00:06:09,440 --> 00:06:13,160
And that is what happens, if you
select the text in a rich text editor
00:06:13,160 --> 00:06:14,320
and set color blue
00:06:14,320 --> 00:06:17,320
That is what’s going to happen underneath
00:06:17,520 --> 00:06:19,680
So yeah
00:06:19,680 --> 00:06:22,960
Another thing that you will hear about
00:06:23,480 --> 00:06:28,400
when you talk about HTML and SEO
is Semantic versus Non-semantic.
00:06:28,400 --> 00:06:29,480
Have you heard about that?
00:06:29,480 --> 00:06:31,000
Yeah
00:06:31,000 --> 00:06:33,200
Do you know what semantic means?
00:06:33,200 --> 00:06:34,200
No? Yeah, okay!
00:06:34,200 --> 00:06:37,520
So “semantic element”
simply means that it has meaning
00:06:37,880 --> 00:06:41,000
This H1 says “A real heading” right?
00:06:41,040 --> 00:06:44,960
Even if it didn’t say “A real heading”
we would know that this is Heading 1
00:06:44,960 --> 00:06:45,960
Because it’s <h1>
00:06:45,960 --> 00:06:47,680
It means something, right?
00:06:47,680 --> 00:06:50,160
The opposite is a <div>
00:06:50,160 --> 00:06:52,400
<div> has no meaning, it's
just a container
00:06:52,400 --> 00:06:55,680
So here we set this div. We set the style
00:06:55,800 --> 00:06:58,920
We set the font size to 32 pixels
and make it bold
00:06:58,920 --> 00:07:03,480
It’s going to look like
a heading, but it's not a heading
00:07:04,240 --> 00:07:07,240
And if we compare with the house analogy
00:07:08,760 --> 00:07:11,080
So, you know, a house, you have standards, right?
00:07:11,080 --> 00:07:11,640
We have standards
00:07:11,640 --> 00:07:14,040
You need to have
00:07:14,040 --> 00:07:17,560
windows and they need to be at a certain
height and size
00:07:17,560 --> 00:07:21,280
And so on, and door,
how wide it must be, and so on
00:07:21,880 --> 00:07:26,520
So it has standards, and those can
be compared to headings and paragraphs
00:07:26,520 --> 00:07:29,760
And we could put the
door handle on the window
00:07:29,760 --> 00:07:30,880
So it becomes a window-door
00:07:30,880 --> 00:07:35,560
It looks like a door, but no one wants
to go climb up and go inside that door
00:07:36,040 --> 00:07:39,200
And that's that’s the meaning.
We need to use semantic tags
00:07:39,200 --> 00:07:42,200
so that Google understands,
this is the heading,
00:07:42,280 --> 00:07:46,840
and this is what we gonna put in
the search results, and also screen readers
00:07:46,840 --> 00:07:47,560
So if you,
00:07:48,960 --> 00:07:51,080
you can’t see, you have to read it
00:07:51,080 --> 00:07:56,000
Then it will say the heading, page title
is this, and it will look for the H1
00:07:56,000 --> 00:07:59,000
So it’s important to use semantic tags
00:07:59,440 --> 00:08:02,680
Let’s talk about CSS
00:08:03,000 --> 00:08:06,360
I think that that name actually
has some meaning to it
00:08:06,360 --> 00:08:09,320
It means “Cascading Style Sheets”
00:08:09,320 --> 00:08:13,080
The interesting part is the cascading.
You know what that means, right?
00:08:13,400 --> 00:08:14,840
No? Okay!
00:08:14,840 --> 00:08:16,360
I think I have a good picture
00:08:16,360 --> 00:08:18,320
I have a nice picture here
00:08:18,320 --> 00:08:21,040
So you see here, the example here is that,
00:08:21,040 --> 00:08:24,880
That is an <a> tag. It has the color: blue
00:08:24,880 --> 00:08:26,640
And then
00:08:26,640 --> 00:08:30,920
like second level,
then the color sets to purple
00:08:30,920 --> 00:08:35,080
And then the third level,
color becomes orange
00:08:35,080 --> 00:08:37,440
So by the end it's going to be orange
00:08:37,440 --> 00:08:40,160
because we it goes in layers
00:08:40,160 --> 00:08:44,240
So maybe the browser has a default,
sets the links to blue
00:08:44,240 --> 00:08:50,400
Then your website sets it to orange.
Then it gets orange instead of blue
00:08:50,400 --> 00:08:54,400
Let’s look at what a CSS rule
look like
00:08:54,400 --> 00:08:58,440
Here for example
we have H1, the Heading 1
00:08:58,440 --> 00:09:00,160
and we set the color blue
00:09:00,160 --> 00:09:02,920
I think it's kind of
simple to understand
00:09:02,920 --> 00:09:08,480
And if we break it down,
we can explain this rule like this
00:09:08,480 --> 00:09:10,960
The H1 is a selector
00:09:10,960 --> 00:09:13,000
And then we have a property, the color
00:09:13,000 --> 00:09:15,560
And we set the color
to a value which is blue
00:09:16,560 --> 00:09:19,520
And it becomes a CSS rule
00:09:19,520 --> 00:09:22,840
And there are multiple ways
of adding styles to HTML
00:09:23,520 --> 00:09:26,840
For example, I already mentioned that,
the browser has defaults
00:09:26,840 --> 00:09:28,560
So even if you didn't have any styles,
00:09:28,560 --> 00:09:32,120
you gonna get this “Times
New Roman”, and blue links
00:09:32,120 --> 00:09:36,560
Purple if you have clicked on the links, you
recognize? White background, you know
00:09:37,200 --> 00:09:40,600
So this is a most common and
recommended way
00:09:40,600 --> 00:09:43,400
You use a link tag to load a stylesheet.
00:09:43,400 --> 00:09:46,320
So you see this “style.css”?
That’s a file
00:09:46,320 --> 00:09:50,560
We tell the browser to load this file
where all our styles are
00:09:51,400 --> 00:09:55,760
But you can also insert styles
directly on a web page like this
00:09:55,760 --> 00:09:59,400
You put it in a <s> tag,
and you put the rule inside there,</s>
00:09:59,400 --> 00:10:01,640
and the heading is going to be blue
00:10:02,800 --> 00:10:03,840
And lastly,
00:10:03,840 --> 00:10:06,840
we can also put the style directly
on the tag like this.
00:10:06,840 --> 00:10:09,960
You set style=”color: blue”
00:10:10,800 --> 00:10:15,560
This is the least recommended ways, because
if you hover, we want another color
00:10:15,680 --> 00:10:18,440
Then this overrides
everything. It’s a cascade
00:10:18,440 --> 00:10:21,440
It starts actually from here
00:10:21,800 --> 00:10:23,440
This is read first
00:10:23,440 --> 00:10:26,440
If this exists,
then this is going to be applied
00:10:26,720 --> 00:10:29,240
And then if we set it on the heading
00:10:29,240 --> 00:10:32,240
then this color
is going to be the final color
00:10:33,280 --> 00:10:36,280
I think you would agree that it’s very easy
to read. If you understand the tags,
00:10:36,640 --> 00:10:40,080
then you see here it, it selects the box
00:10:41,000 --> 00:10:47,560
It sets the background to hot pink,
color: white, font size: 32px, padding: 100px
00:10:47,560 --> 00:10:49,320
Border radius: 20px
00:10:49,320 --> 00:10:53,080
It reads like a normal language,
so you can guess that the box
00:10:53,080 --> 00:10:57,360
will be quite big, at least 200px
00:10:57,360 --> 00:10:59,800
And rounded corners and hot pink
00:11:01,120 --> 00:11:04,400
And of course all links must states
00:11:04,400 --> 00:11:07,400
So you hover on it. You click on it
00:11:07,640 --> 00:11:10,200
You have “visited”.
You can set different colors
00:11:10,200 --> 00:11:13,160
For this we use so-called “pseudo-classes”
00:11:13,160 --> 00:11:18,640
So it’s like the <a> tag [colon]
and then visited, hover, and so on
00:11:18,640 --> 00:11:20,960
Also very easy to read
00:11:20,960 --> 00:11:24,600
And we cannot talk about CSS
without talking about
00:11:25,120 --> 00:11:28,040
media queries, which is “responsive design”
00:11:29,040 --> 00:11:30,960
That, you heard about, right?
00:11:31,680 --> 00:11:33,080
Of course!
00:11:33,080 --> 00:11:34,720
I thought about it last night, like
00:11:34,720 --> 00:11:37,360
“What is media queries?”
00:11:37,360 --> 00:11:42,040
I didn't even understand it myself,
but I had to understand it
00:11:42,040 --> 00:11:45,960
When responsive design came. Suddenly
we were told that you have to make it
00:11:45,960 --> 00:11:48,040
look good on the phone.
And how do I do that?
00:11:48,040 --> 00:11:50,320
You use something called
“media queries”
00:11:50,320 --> 00:11:54,760
So I think media queries are very associated
with responsive design.
00:11:54,760 --> 00:11:59,120
For example here we have H1.
It’s 32px by default
00:11:59,560 --> 00:12:00,880
And then we have this media query.
00:12:00,880 --> 00:12:06,640
We have this @media on the screen
of a minimum width of 600px
00:12:06,640 --> 00:12:09,640
Then it’s going to be 64px instead
00:12:09,720 --> 00:12:10,560
Okay
00:12:10,560 --> 00:12:14,960
I don’t want to bore you too much,
but I need to point out
00:12:14,960 --> 00:12:17,960
that media queries
today can be used for much more.
00:12:17,960 --> 00:12:24,800
For for example, you can use it to help
people with, accessibility issues
00:12:24,800 --> 00:12:29,240
The first example here
is, they prefer a dark color scheme
00:12:29,240 --> 00:12:33,320
Or if you don't like too much motion,
you get motion sickness,
00:12:33,320 --> 00:12:38,120
we have a large animation
on this box, we can, set in a media query,
00:12:38,120 --> 00:12:42,920
that people who prefers
reduced motion, get no animation
00:12:42,920 --> 00:12:48,760
Let’s jump to JavaScript and and
I read up on the history yesterday night
00:12:48,760 --> 00:12:55,640
And it seems like… okay, so I’m
back at that Java-JavaScript-confusion!
00:12:55,640 --> 00:12:58,640
Java was created by Netscape
00:12:58,680 --> 00:13:00,360
Have you heard about Netscape?
00:13:00,360 --> 00:13:01,440
That's history
00:13:01,440 --> 00:13:04,680
No, just when Anders mentioned…
00:13:04,760 --> 00:13:08,280
Yeah, it used to be Netscape — Internet Explorer
00:13:08,280 --> 00:13:10,280
Those two created the first browsers
00:13:10,280 --> 00:13:15,120
Now, you probably born after
Netscape… died
00:13:16,080 --> 00:13:20,680
I remember, but Netscape was a company
that invented JavaScript
00:13:20,680 --> 00:13:23,680
And they wanted to use
Java in the beginning
00:13:23,920 --> 00:13:27,200
So they wanted to use Java for the web,
but they decided
00:13:27,200 --> 00:13:29,080
“Nah, that’s not a good idea”
00:13:29,080 --> 00:13:33,840
“We still gonna keep the Java name,
‘JavaScript’, just for marketing”
00:13:34,840 --> 00:13:38,120
No wonder that people are confused
00:13:38,200 --> 00:13:39,200
But
00:13:40,240 --> 00:13:43,200
Here’s something I need to point out
00:13:43,640 --> 00:13:48,440
JavaScript is a full-fledged
programming language
00:13:48,600 --> 00:13:49,920
And and I know from
00:13:49,920 --> 00:13:53,600
someone who’s not interested in
code at all, HTML is code
00:13:53,720 --> 00:13:54,800
CSS is code
00:13:55,360 --> 00:13:57,040
JavaScript is code
00:13:57,040 --> 00:13:59,840
They are code, but they’re different
00:13:59,840 --> 00:14:05,080
So HTML and CSS,
they are more descriptive languages
00:14:05,640 --> 00:14:08,600
And there’s something very important
00:14:08,600 --> 00:14:09,400
distinction here
00:14:09,400 --> 00:14:12,800
And that is that HTML and CSS
00:14:12,800 --> 00:14:15,800
are designed to not fail
00:14:15,920 --> 00:14:20,400
You can write bad HTML. Bad CSS
00:14:20,680 --> 00:14:23,520
But your page will always show
00:14:23,520 --> 00:14:24,840
Almost, unless you hide things
00:14:24,840 --> 00:14:27,840
But it will always show.
It will never break
00:14:27,880 --> 00:14:30,400
It can look ugly. But it will not break
00:14:30,400 --> 00:14:32,240
JavaScript is not the same
00:14:32,240 --> 00:14:36,800
If you make bad JavaScript code,
it breaks. Because it has errors
00:14:37,280 --> 00:14:42,000
And errors is something that is good
in programming, because you need to know
00:14:42,120 --> 00:14:45,520
where things fail. I'm not going
to do a programing lesson here.
00:14:45,520 --> 00:14:48,880
I just want to show you what
you can do with JavaScript on the page.
00:14:48,880 --> 00:14:51,880
Here, for example,
and it still reads pretty well,
00:14:52,400 --> 00:14:55,280
is a button, and you put
an onClick (event on it)
00:14:55,280 --> 00:14:58,200
So when you click
it, it’s going to alert “Hello”
00:14:58,200 --> 00:15:03,080
So we're going to show a message
that says “Hello”.
00:15:03,080 --> 00:15:05,720
Click that, you get the “Hello”
00:15:05,720 --> 00:15:08,720
Second example is when you click
00:15:09,000 --> 00:15:13,360
it says the “document.body.style”,
which is the page body,
00:15:13,360 --> 00:15:15,440
It sets the background to “lightblue”
00:15:15,440 --> 00:15:19,200
Third example is a little bit more, advanced
00:15:19,760 --> 00:15:23,240
It shows a prompt with an input box
where you type in your name
00:15:23,960 --> 00:15:25,680
and then it says “Hello [name]”
00:15:25,680 --> 00:15:29,480
So if you type in “Niyat”,
then it’s going to say “Hello Niyat”
00:15:29,480 --> 00:15:34,520
That are three example you can do
to add interactivity to a website
00:15:34,920 --> 00:15:38,600
Normally, this is how we load our JavaScript
00:15:38,600 --> 00:15:42,320
So, in the HTML
you see the <s> tag and it loads</s>
00:15:42,320 --> 00:15:45,760
a .js file, which is a JavaScript file
00:15:46,040 --> 00:15:47,920
Okay, let’s do one final comparison
00:15:47,920 --> 00:15:50,080
HTML, it’s declarative
00:15:50,080 --> 00:15:53,520
You declare on the document:
00:15:53,800 --> 00:15:57,040
“These elements exist”
But there’s no style, there’s no logic
00:15:58,080 --> 00:16:01,080
CSS is a so-called implicit language
00:16:01,560 --> 00:16:03,240
You can describe the styles:
00:16:03,240 --> 00:16:07,920
“I want it to be hot pink, and I want it
to have this spacing, and so on”
00:16:08,160 --> 00:16:12,400
And browsers, they apply them,
but not necessarily the same
00:16:13,520 --> 00:16:16,960
And then we have the JavaScript,
which is the last part
00:16:16,960 --> 00:16:19,520
It’s a so-called explicit language
00:16:19,520 --> 00:16:22,640
You define the behavior with
very clear instructions
00:16:22,640 --> 00:16:24,920
And it does it exactly like you describe it
00:16:24,920 --> 00:16:28,280
Those are the three core languages
00:16:28,280 --> 00:16:31,280
that I believe are interesting for
today’s talk
00:16:31,280 --> 00:16:34,640
That’s what the browser cares about
00:16:35,320 --> 00:16:39,320
But I just want to mention in one slide,
that usually
00:16:39,320 --> 00:16:42,720
we don’t code directly in HTML or CSS
00:16:43,600 --> 00:16:46,000
We are actually using other languages
00:16:46,000 --> 00:16:50,160
So for example, in HubSpot,
we create our templates
00:16:50,160 --> 00:16:53,320
in HubL, which is kind of like,
00:16:54,320 --> 00:16:55,040
like HTML
00:16:55,040 --> 00:16:59,520
But we can say that “this field goes here”
00:17:00,280 --> 00:17:03,280
and “let the editor select an image
and put it here”
00:17:03,640 --> 00:17:07,360
But in the end
what goes into the browser, is HTML
00:17:08,200 --> 00:17:11,040
And then there are backend languages:
00:17:11,040 --> 00:17:11,800
C#
00:17:11,800 --> 00:17:14,000
And then there’s something called PHP
00:17:14,000 --> 00:17:18,440
So I think you just need to understand that these
exist. In the end it’s going to be HTML
00:17:18,440 --> 00:17:21,360
Otherwise the browser won’t show anything
00:17:21,360 --> 00:17:22,600
Same with CSS
00:17:22,600 --> 00:17:26,160
We historically used a lot of Sass/SCSS
and LESS, which are
00:17:26,400 --> 00:17:29,160
more convenient version of CSS
00:17:29,160 --> 00:17:31,920
And for JavaScript we use something
00:17:31,920 --> 00:17:35,360
called TypeScript,
and sometimes web use frameworks
00:17:36,080 --> 00:17:37,640
Also good to mention to the viewers
00:17:37,640 --> 00:17:40,760
These frameworks
that you hear about, React, Vue, etc
00:17:41,160 --> 00:17:46,440
They allow you to create web apps
very conveniently,
00:17:46,440 --> 00:17:51,200
but in the end, in the browser,
it’s just going to be JavaScript
00:17:54,080 --> 00:17:55,200
That’s a wrap
00:17:55,200 --> 00:17:57,320
I hope you learned something
00:17:57,320 --> 00:17:58,960
Or what do you think, Niyat?
00:17:58,960 --> 00:18:02,120
Yes, I actually learnt a lot! Thank you, Kang
00:18:02,120 --> 00:18:04,200
Did you have fun? Was it bearable?
00:18:04,320 --> 00:18:05,440
Good for you
00:18:05,440 --> 00:18:07,120
Okay, okay
00:18:07,120 --> 00:18:09,280
Bye bye! See you next time!
00:18:09,280 --> 00:18:12,280
Thank you, bye bye
- Learn
- The Tech Hub
- Secret Tech Club EP01: Not my Java
Secret Tech Club EP01:
Not my Java
Custom title applied. Post title: Secret Tech Club EP01: Not my JavaBy Yeu-Kang Hua

Jun 27, 2025.
|
49 min
Secret Tech Club EP01: Not my Java
1:09
In this very first episode of our video series "Secret Tech Club," we explore the three core languages that power the web. (Spoiler: Java isn’t one of them.)
With the rise of generative AI, technology is now more accessible than ever. Our new video series, "Secret Tech Club," is aims to spark curiosity and make the digital world feel a little less intimidating—and a lot more fun.
In "Not my Java", I'm joined by Niyat: for a lighthearted and beginner-friendly deep dive into HTML, CSS, and JavaScript. We kick things off with a sketch about office coffee, then break down the building blocks behind every website.
Stick around after the credits for some hilarious outtakes!
Episode Breakdown
- 00:00 Opening sketch
- 01:33 Introduction
- 02:45 Deep dive
- 03:45 Web languages
- 04:22 HTML
- 07:59 CSS
- 12:43 JavaScript
- 15:46 Final comparison
- 16:38 Beyond the core trio
- 17:52 Wrap-up
- 18:23 Bloopers
Additional Resources

Generalist-specialist in digital experiences, or a hybrid designer-developer if you must pigeonhole. Curiosity is Kang’s trademark and a curse.
Keep me updated!
Subscribe
Keep updated on thoughts, facts and knowledge!
Oh no! Could not find any posts that were tagged with “secret-tech-club”!