Secret Tech Club EP01:
Not my Java

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