Skip to content

Secret Tech Club EP01:
Not my Java

Custom title applied. Post title: Secret Tech Club EP01: Not my Java

By Yeu-Kang Hua

Secret Tech Club EP01: Not my Java

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

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

Yeu-Kang Hua
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
Oh no! Could not find any posts that were tagged with “secret-tech-club”!