I'm going to do this.
I think it was, Hey and
welcome to the chewy podcast.
I'm Raph and, and today we'll be
talking about what happens when
you land on a web page, like the
things that you see on your screen.
Eva: So what does happen?
Raphaël: I don't know.
Let's do this a bit, like the last
episode, what do you think happens?
Eva: Good question.
So we talked about typing the URL
and what happens when you type it.
So now that I'm on the page I guess the
first step that I would do is one I would
scroll down to read and then a bit more
about the content and probably click
on like a call to action or a button.
So today we're going to talk about how
all those things get shown up on screen.
Like what are they like, what, when you
see those things that, that CTA, that
call to action, how does it show up there?
And for example, we're on
the gochewy.io website.
If you all want to check this out and on
this page, we can see things like helping
developers build better products faster.
And we've got a little, a
really cute little character.
And we've got some buttons.
And if you put your mouse on the button.
then a little arrow shows up at the
bottom, we've got a little chat bubble.
And if you click on the chat bubble, like
some stuff pops up and you can do things.
How do all of those things work?
Eva: I don't know.
I like that when I click on
it, it moves to another thing.
As I know on the magic that button
Raphaël: Do you remember?
I think we talked about HTML last time.
It has been a couple of months since
our last episode, but do you remember
So those are basically the languages
that make up the front end web.
So on the server side, you can use
all kinds of different languages.
I remember last time you asked me
about Ruby and I was like, ruby
is not exactly my cup of tea.
Lots of people love it.
And it's great, but it's
just not my favorite.
I don't know.
I don't know why.
But on the front end, the browser can
Eva: Oh, wow.
So any website in the world
can only be built on either of
these three on the front end.
Eva: That's a new information for me.
It all, and all it usually
just bursts together.
All of these languages.
And you think you can use them
for any web application or
usage, but clearly he can't.
And there are some loopholes in that
and in the sense that some people will
they've built tools in other languages.
So for example, you can write Python and
essentially they've built tools that will
But in the end, the only three
things basically that the browser
understands are those three.
So do you know what HTML stands for?
Eva: Hypertext, something like that.
Raphaël: Yeah, I can't re
Eva: I can't remember
what the M and the L is.
Raphaël: Markup Language.
Hypertext Markup Language.
And basically that's.
That's just the language to
make your text hyper to make
your, to say what is on screen.
So we've got basically three
layers HTML is the content itself.
So it's telling you what the text
is, what the images are and the
order that they're in and how
they're grouped and things like that.
What do you think that the next layer is?
So if we talk about CSS,
actually, I'll give you a hint.
So CSS is cascading style sheets.
So what do you
Eva: I think CSS is used for
the design aspect or like the
standardizing design elements,
actually that's a great point.
So standardizing, so CSS
allows you to create rules.
That apply, like you say, like
as a standard to everything
that, that matches that rule.
So you can say all of the H1 one elements,
like the top level headers should, I
don't know, there should be like 60
pixels tall and they should be bold.
And then all of the paragraphs should
be 18 pixels tall and not bold and
maybe a different font and whatever,
like all of that kind of stuff.
And then to some extent, yeah, you
can do some other like fun stuff.
Like you can make things fade in
and out and like that sort of thing.
But very limited on interactions.
Raphaël: where do you think
Eva: If I'm reading between the lines,
the interactive element of the page.
Eva: That's great.
So like when you click
our little chat bubble
Raphaël: and it like pops up this
thing where you can put in your name
and email and a question or comment
that makes that pop up and.
Raphaël: Controls what's
happening on the page.
Eva: So if I'm looking at like the
hero, for example, the hero section
of Chewy, they kind of frame and
they're like, The frame is HTML.
And then the fact that the H one
is bolded and that the button
is white on orange is CSS.
And then when I click on the button and
it highlights this little like interactive
And to some extent you can do those
little interactions with CSS, but Yeah.
Eva: It seems so simple.
Now all of these years of what
the hell are these things, and
now it just makes a lot of sense.
So those are the three
things that's there we go.
That's the web.
It's all done.
Nothing else to learn here.
Eva: I am
Raphaël: We're all
Eva: a developer.
Once you finish your homework on glitch.
Once I finished my homework on which now
that I understand what the web is, I'm
So what would be the,
Raphaël: than that, but
Eva: what would be the next step
in, in this kind of journey, which
I guess maybe it's the next episode.
I think the next episode should
probably be about the tools that
we use to facilitate how we build.
These webpages, because the thing
is it's gotten really complicated.
Like the web has grown so much in so
many different ways over the decades
and where used to be like perfectly
okay to just build a page with some HTML
Raphaël: you want to figure out how to
optimize for mobile browsers and how to
add an, a load up data asynchronously.
So That things are really smooth when
someone clicks to go from page to
page and there's all kinds of stuff
like that, that because people have
gotten more demanding and people
are doing more things on the web and
everyone's optimizing, you need a lot
of tools to manage all of those things.
Eva: sounds complicated.
Raphaël: Oh Yeah.
But fortunately at least for us, we don't
need to deal with all of the complications
of like how those tools work.
We just need to learn how they yeah.
The outer layer, like they give us a lot
of like nice, easy things to do, and they
take care of all of the complicated stuff.
Eva: Love it.
I love it.
I'm looking forward to hear all
of this stuff and hopefully that
brings me clarity just like today.
Raphaël: yeah, I think you'll
be building web apps in no time.
I think you'll be a, like a
Grandmaster of the web soon.
Eva: I'm definitely the Guinea pig.
So let's see how far I go.
If I become a grand master
of the web, then anybody can
Raphaël: Yeah, we'll get you from
Guinea pig to wizard or something.
Raphaël: Thanks Éva.
And we'll see you all next episode.
When we talk about these fun tools.
Hey, thanks for listening.
And if you would like to subscribe to
the podcast, head to podcast.gochewy.io.
If you want to find out what we're
building and, uh, get involved with
our community, you can go to gochewy.io
and you'll see all of the links to the
different places that we interact online
on Twitter, on our currently very quiet
discord, but hopefully growing soon.
And, you can check out our, community
page with some stuff that we post
here and there at we.gochewy.io.
Thanks for listening.
And we'll see you next time.
Listen to Codename Chewy by EC using one of many popular podcasting apps or directories.