Become a Fullstack Developer from Scratch – Full Beginner’s Tutorial

This massive course will prepare you to

be a full stack developer. It's taught

by many different instructors and put

together by Scribba. Here's Pere

Borggan, the CEO of Scribba, introducing

the course. Hi there and welcome to this

massive full stack developer path. These

modules that you are about to watch have

helped countless students over on

scribble.com break into the tech

industry as developers and not in the

boring theoretical way. No, in a fun way

where you build games, clone Google and

Instagram, build AI investing apps, even

Chrome extensions. And when I say you, I

really mean you. Because the only way to

learn this is to type the code out

yourself. Throughout this course, the

teachers will throw challenges your way,

actually over 500 times. And the starter

code for these challenges can be found

on GitHub or over on scrimba.com in the

interactive expanded version of this

course. We're going to start out with

the basics of HTML, CSS, JavaScript, and

so forth, and then move on to the

frameworks and technologies that are

used in the industry like React, Node,

Next, SQL, TypeScript, testing, and even

AI engineering. So, this really is your

one-stop shop towards becoming a

professional fullstack developer. Now, I

would love to follow you on this

journey. So, be sure to send me a

LinkedIn connection request so that I

can share for you from the sidelines.

With that, let's dive in.

>> The French philosopher Renee Deart once

said three clever words,

ergo, sum, which translates in English

to I code, therefore I am. So let us

prove to ourselves that we actually do

exist by coding this out in HTML. And

the way we do that is actually not too

different from how you would write this

out in a regular text editor. as there

you would simply write out the sentence.

And then if you wanted it a bit more

prominent, you'd probably highlight it

and then click on normal text here and

choose another content type for your

text. You can see heading one, heading

two, heading three. Let's hover over

heading one and then click on it. And

there you can see that the text became a

lot more prominent. It became a heading

one. Now if we want to do this in HTML,

we'd simply create an HTML file which

you can see here. It's called

index.html. HTML as that is a common

name to give your HTML files. And here I

would write I code therefore I am. Now

if we open up a browser and point this

browser to our HTML file and then run it

then we can see that the text indeed

appears in the browser. However, it's

pretty small. So if we wanted to turn it

into a heading one instead what we do is

wrap the text in HTML tags. So before

the text, I'll do this two angle

brackets with the text H1 inside of

them. That's short for heading one. And

then at the very end of the text, I

would do the same H1. But since this is

a closing tag and not an opening tag, I

would also have to give it a slash

before the text. And now if I rerun the

code, there you go. We have made our

text a lot more prominent. Now I think

our website should give proper credit

here. So let's write reneart underneath

the H1 like that. If we now rerun the

code, you can see that the text is just

normal. It's not an H1. And that is

because it is only the text which is

within the opening H1 and closing H1

that gets formatted as a proper heading

in the browser. In my view, this line

right here should be a bit bigger. I

want it to instead look something like

this where the name is pretty thick and

big but not as big as the heading one.

And that brings me to your first

challenge. I'm going to paste it in

here. So, what you are going to do is

try to make our web page look like the

design in the provided slide. And if you

are struggling to think of what kind of

HTML tag you'll have to wrap this name

in, well, I've got a little hint for

you. What comes after one? So, pause

this scrim, jump into the code, and try

to solve this challenge right now. And

then when you return back to me, I will

of course show you the solution as well.

Good luck.

Okay, hopefully that went well. The way

you solve this is by instead of using

the H1, using its smaller sibling, the

H2. Like that. It has the exact same

so-called syntax as the H1. So instead

of a one you use a two. If we now run

this, there you go. We have achieved the

design we wanted. So great job. Let's

move on.

Before we move on to the next challenge,

there's one thing I want to make sure

that you are aware of. And that is that

if you have an HTML file locally on your

computer and you have a browser, what

you can do is simply drag and drop that

file into the browser and then it'll be

rendered. So that is actually more or

less the same thing that's happening

here on Scribba. Though here we have a

mini browser and the text editor inside

of well your browser because Scribba

itself is browser based. So a little bit

meta but it's essentially the same

thing. Okay. Now, it's time for you to

get some more muscle memory on how to

write HTML tags and also get to know two

new tags because I want you to create a

news article and more specifically this

news article right here which has a

title that says humans have reached

Mars. It has a subheading right here and

also some regular text. And the HTML

tags are H1 for the title, H3 for this

one. You haven't used an H3 for, but I

think you know how to do it. And then

there's finally a P tag for the text at

the bottom. P is short for paragraph and

I have provided a little syntax example

for you here. However, if you've

understood the logic of how to write

these tags by now, it shouldn't come as

a surprise how you do that. Okay, here

is also the text so that you don't have

to write all of that out. You can just

copy paste it instead. So now starting

here on line 13, write the HTML we need

in order to create this news article.

Okay, hopefully that went well. Let's

start with the H1. I'm going to create

the open and closing tag and then paste

in the text like that. Running the code.

Yes, it works. Moving on to the H3.

Copying the text.

Then rerunning the browser. And there we

go. Finally, there is the paragraph

like this.

rerunning the code and there we go. We

have achieved this exact layout. Great

job. Let's move on.

Now you are going to learn about images

because I really think our Mars article

needs an image. The way to do that is by

using the img tag. So we start with our

angle brackets and then write simply img

inside of those. And what's unique about

this tag is that you don't need a

closing tag. So there is no closing img

as there is a closing a run or closing

paragraph. This is simply not needed. So

it's often called a self-closing tag and

some people use the slash at the end of

the opening tag like this just to

signify that it is closing itself.

However, it's not really needed. So we

can skip it. And I think in general that

less code is better code. So I am just

going to skip it. However, if you prefer

to have it like this, that's totally

fine as well. Okay, enough syntax. How

do we get this image to work? Because

right now, if we rerender this page,

nothing has happened. And that is

because we haven't told the image tag

which image we want to render. And the

way to do that is by writing src, which

is short for source. And then we write

equals, and then two quotes, because

inside of these two quotes, we're going

to specify the image we want to render.

And here on the left hand side you can

see I have mars.jpeg.

It is in the same directory as our

index.html file. Meaning I can simply do

mars.jpg.

Then run the code. And there we go. We

have our image. That is super cool.

However, you can see that this image

behaves a little bit differently from

our paragraph for example because where

is the paragraph take up the entire

width? the image just take up whatever

width it needs, leaving us with white

space on the right hand side if the

browser is too wide or cutting off the

image if the browser is too narrow. And

I actually want this image to behave

like our other paragraphs. So I'm going

to show you a little hack to do that

because normally you'd use CSS for doing

this. But there is a little trick we can

use by simply utilizing the width

attribute. So that is an attribute just

like source is an attribute and it uses

the same syntax. We'll do with equals

and then two quotes and then inside of

the quotes we can write for example

100%.

If we now rerun this you can see yes our

image is now scaling with the size of

our browser looking super neat. Now as I

said this is a hack. So, if you show

this around to people, you might get

this annoying guy saying, "Well,

actually, that's not valid HTML

according to the specification." But you

know what? Let's not care about that. At

this point, you should not give a darn

about specifications, validity, and aka

correct HTML. You should instead look at

yourself like a hacker who grabs

whatever tool you need in order to get

the job done. So now we're going to use

this even though we know it's a hack

because later down the line you're going

to learn the proper way of doing this

using CSS, the language we use for

styling websites. So with that out of

the way, I want to show you one more

thing before I give you a challenge.

Because one thing that's super cool is

that you can actually borrow images from

wherever you want online. So if you find

an image you like, you can borrow it and

use it in your project. Let me show you

how. So if we Google Mars for example

and click on the images tab and then

click on whatever image we think is

cool. For example, this one right here.

And then in this image view on the right

hand side here, you can rightclick and

choose copy image address. Once you've

copied that, you can simply paste it

into the source attribute. So I'm going

to remove Mars.jpeg and paste in the

image address which I just copied. If we

now run the code, you can see there we

go. We have borrowed this super cool

image from another website online.

So, it's time for a challenge. What I

want you to do now is add a second image

to our article. I want you to find one

via Google and then place it under the

H1 element but above the H3 element. So,

that is right here. And finally,

remember to use the width attribute to

make the image as wide as the other

elements. I'm going to leave you here

with the marks image again and wish you

good luck. go ahead and solve this

challenge right now.

Okay, hopefully that went well. What you

needed to do was write the angle

brackets img. Then set the source to

whatever image you found online. I'm

going to reuse the one I found earlier

like that. If we're rendering this, this

is a really wide image by default.

That's not what we want. We want it to

scale with our browser. So, we need the

width attribute. width equals a 100%

like that. And now we have two super

cool images in our article, both scaling

up and down with the size of the

browser. Great job. Let's move on.

Okay, now you're going to learn about

something called nesting, which is the

act of nesting HTML elements inside of

other HTML elements. So, let me show it

to you in practice. Let's say that we

want to group all of these elements here

together. What we then do is above all

of the HTML tags, write another HTML

tag. And in this case, we use the

so-called div, which is short for

divider. However, I don't think that is

a very good name. I would rather call

this, for example, a container, though

div is what it's called. So, we're just

going to have to stick with that. Now,

in order to nest elements inside of this

div, we'd write the closing tag below

all of the HTML tags in our article. And

then for readability purposes, we'd

indent all of the tags in our article.

So now our H1, image, H3, P, and image

here are all children of this div tag

right here. This doesn't change our

layout at all. So this div tag here is

invisible. However, it has now given us

the ability to target the entire article

just by targeting this div right here.

And that is useful if we, for example,

want to add some styling to our entire

article using CSS or somehow manipulated

using JavaScript, which is the

programming language that you use in

browsers. And very often, you'll

actually see a ton of divs on a page. So

for example, you'd see another div

around this image element here, which

then would have been indented yet

another time in order to signal that

this is indeed a child of this div,

which again is a child element of this

div. Now if we were to visualize an HTML

document, it would look something like

this. You'd have, for example, a div up

here and it would have two children

which could be their own divs like this.

And then this lefth hand div here would

for example have an image tag as its

first child and also an H3 as its second

child. The other div on the right hand

side could have an H1 tag as its child,

P tag as its child, maybe even another

div as its child. And then if we go yet

another level deep, this paragraph tag

might have its own child, which could be

for example an A tag, which you haven't

learned about yet, but which you'll

learn about soon, as that is the

so-called anchor tag that allows you to

create links on websites. And looking at

this visualization, you might think,

well, this kind of looks like a family

tree. And yes, it does. And that is

exactly why we call this structure the

HTML document tree because we are inside

of an HTML document. and how they are

nested inside of each other becomes kind

of like a tree where you have a trunk

and then branches going out from that

and then yet again new branches going

out from those branches and so on and so

on. So now that you know that let's move

on to the next scrimm.

Okay, now we're going to use your newly

acquired internet superpowers in order

to perform a little practical joke

because you might have a friend who is

far too obsessed with a sports team. For

example, I myself am a Manchester United

fan and one of the worst things I can

imagine is if some rich billionaire buys

the club and changes its name. That

would make me truly outrageous. So, what

we're going to do now is change the news

on BBC Sports so that you then can show

this page to a Man United fan and thus

make them really upset while you get a

good laugh. So, let's go ahead and do

this here on the BBC Sports page on this

top article here. I'm going to write

click on the text and then you can see

it gives me the option to choose

inspect. Now, note that this is on a

Chrome browser as that is what I'm

using. If you're in a different browser,

there might be slightly different steps

here or a different wording, but overall

in general, the steps are the same. So,

I'm going to click on inspect. And then

you can see that it opens up this panel

on the bottom of the browser. This is

called the developer tools. And here you

can see we are in the elements tab. And

that shows us the HTML elements that are

on the page. And here the one we have

chosen now which happens to light up

this area on the BBC site contains the

title of our article and it is an A tag

which I've just briefly mentioned and

that you're going to learn more about

later. Now we can't see any text here.

So I'm going to click on this age tag

and there you can see it contains an

age3 tag nested inside of it. If we

click on that one as well you can see

that there we see the text that is

rendered in the browser. So here we can

double click on that text and change it

for example to something as awful as

Jeff Bezos to buy Man United and rename

the club after himself. Oh my god that

is about the worst piece of news any

United fan can read. So if we now hit

enter there you can see boom we have

changed the text on BBC. Now let's click

on this paragraph here as well open it

up because there we can also change the

text that is written underneath the

title. Let's paste in the US billionaire

says he doesn't follow the Premier

League but wants to own the club to grow

his personal brand. This just gets worse

and worse. So now if we hit enter that

is also rendered in the browser. Now I'm

going to scroll a little bit up in the

dev tools here and hover over this div

tag here because as you can see that

highlights our image. So it seems to be

that our image is nested inside of a div

tag. Let's open it up by clicking on

this triangle. And there we can see

another div tag. Well, okay. Still

highlighting the image. Let's open up

that one as well. Oh, wow. There we have

yet another div tag. A div inside of a

div inside of a div. This is web

development in a nutshell. Let's open it

up again. And there, yes, we can see our

image tag. I'll scroll a bit down. And

you can see there are tons of different

attributes here. We're going to ignore

almost all of these and then instead

direct our attention towards the src

attribute. That one we know because that

is the one we need to change in order to

change this image. So now let's open up

a new window. Search for Jeff Bezos.

Click on an image we like. For example,

this one right here. Right click on it

and choose copy image address. Then can

do now is double click on this source

and then remove the existing source

inside of the quotes like that and then

paste in our image of Jeff Bezos.

However, if we now hit enter, you can

see nothing changed. And that is because

BBC is a little bit fancy here. They use

another attribute called src set, which

helps the browser render different sized

images on different types of screens

depending on what kind of image is

appropriate for the given screen the

website is rendered on. So, what we're

going to do here is just double click on

the src set so that everything's

highlighted and just delete all of it

and then hit enter. And boom, there you

go. We have Jeff Bezos looking pretty

ready to acquire this football club and

rename it Bezos United. Finally, I'm

going to close this panel by clicking on

the X in the right corner here. And

there you go. We have our article. So

now the final step is just to take this

site, show it to someone who is a

Manchester United fan, and get a good

laugh. Now, a final notice. If you

refresh this page, you will lose your

changes because you only made your

changes locally. And when you refresh

it, the entire page gets the fresh data

from the database of BBC and not from

whatever local changes you did. And

since it is local, that also, of course,

implies that your changes only happen on

your computer. You don't change BBC in

production, of course. So, go ahead and

play around with some sites online. See

if you can come up with a fun little

practical joke for a friend. Have fun

and I'll see you in the next Scrim.

Now, we're going to get you on boarded

to the Scriber community because this

career path is so much more than just a

course. It's also a social experience

where you are able to get help, meet

like-minded people, network, and find

inspiration. Our Discord server is at

the heart of our community and thousands

of coding students just like you are

online at any given time. We pride

ourselves on keeping our Discord an

ultra supportive and friendly space and

we welcome coders of all abilities from

complete beginner to professional and we

have a ton of channels for all kinds of

coding and workrelated subjects. So in a

moment click on this link, this

screenshot or any of the screenshots you

see in this scrim. That's right.

Remember, a scrim is not a video. So,

the link that you can see right here,

that is a live link. You can click it.

This is going to take you through to

Discord, and you can just follow the

steps to get registered and onboarded

into our Discord server. And that will

no doubt involve proving that you're

human by identifying elks or something.

Once you're done, why not make your

first stop on our Discord server, the

introduce yourself channel. Let us know

who you are, where you're from, what

your aims are, what you like to do when

you're not coding. This is your first

opportunity to interact with the

community. And then why not browse the

channels? And I'm just going to point

out a few highlights. We have the

announcements channel for news and

updates. There's a stay accountable

section with today I will and today I

did. These channels can help you set

goals and brag about your success.

Career chat, as the name suggests, is

where you can get and give help on

career related matters. The I built this

channel is a great place to show off the

amazing projects you've been building.

And if we just scroll down a little bit

more, we can see that we've got the

general help channels here for

JavaScript, design, HTML, React. And

then here we've got specific channels

for each module of this career path. So

you can always go there if you get stuck

and you need a bit of help or if you

want to pay it forward and help out some

other students. Now, if we go right back

up to the top, we have event. And this

will show you up and cominging events

for the Scriber community. Every Tuesday

we host the Scriber town hall on

Discord. And if you click into events,

you'll see that the next town hall is

already scheduled and it will show you

the time in your local time zone. So for

me here in the UK, it's at 5:00 p.m. on

Tuesdays. The town hall is a live event

especially for the Scriber community

with 45 minutes to an hour of chat on

all things Scrimber, learning to code,

and getting jobs in tech. Each week is a

bit different. Sometimes we interview

students who recently got hired to hear

about the process for example or we

review some code or give feedback on a

CV. But we always have time to answer

your questions. So do come along and

join us. It's an interactive experience.

You can chat with us and it would be

great to see you there. It's a great

chance for you to interact with the

Scriber team and have your say. You'll

find the town hall channel right here in

the sidebar. Also check out the

Scrimbert podcast. There is a new

episode every week and it's packed with

motivational advice and job hunting

strategies from developers who've been

exactly where you are now. You can click

this slide or find it wherever you

usually get your podcasts. I'm going to

leave you with these two links. We've

got the Scriber podcast and our Discord

server. Once you've checked them out,

come back here and you're ready to get

started coding your very first web app.

Now you're going to learn about your

very first interactive HTML element and

that is the button tag because buttons

are all over the web. So to create a

button, simply start with your angle

bracket and a button opening tag and

then a button closing tag like that. And

in between the two tags, you write

whatever text you want inside of your

button. Now, as you can see, it's styled

with a background color that also has a

border around it. And you can even click

it. Now, this button doesn't do

anything. In order to hook this up with

some kind of feature, for example,

trigger a purchase. Then you'd have to

learn JavaScript, and that is outside

the scope of this course, but something

you'll learn later in the front-end

developer career path. So, for now, our

button will just be there and pretend to

do something while actually being pretty

useless. Now that you've seen this once,

I want to put you on the spot and give

you a challenge. I want you to create a

layout according to the design in this

slide. So imagine that you are building

a website where people are to sign up.

Then it would be very natural to have

something like this where you have an H1

at the top welcoming them, a paragraph

with a little message and then a sign up

button. So I want you to create this

layout. You don't have to write the text

because I've provided it here. Just make

sure that you set up the HTML tags

correctly so that it renders properly on

the page. Good luck.

Okay, hopefully that went well. Let's

now do it together. I'll start with the

welcome H1 tag like that. Paste that in.

And boom, there we go. Next up, there's

the paragraph, opening tag, closing tag,

and then pasting the text in between.

Running this code. It still looks

correct. Finally, the button like that

with sign up written inside of it. And

boom, there we go. We have our

completely useless signup form that

doesn't do anything. But in the next

scrim, we're going to add on to this. So

stay tuned and then I'll see you there.

The signup section we have here is

actually pretty useless because there's

no way for our users to add, for

example, their username or a password.

So in this scrim, we're going to fix

that. Which leads us to the input tag.

The input tag is just like images, a

self-closing tag. So we only write the

opening tag and not the closing tag like

we do with buttons for example. However,

we have to specify what kind of type our

input should be. So it has this type

attribute just as the image has a source

attribute and the value of the type can

be a range of different options, but

we're going to start off with the most

common one and that is text. If we run

this, you can see we get this nice

little text box in the browser. Another

handy attribute is the placeholder.

That's where we can give the user a hint

about what kind of data we're asking

for. So, for example, enter username

like that. If we run this, you can see

it says enter username. Okay, let's do a

mini challenge. We of course want them

to enter their password as well. So, I

want you to create a new input field on

line four, which is identical to the one

on line three, though it should say

enter password in the placeholder as

opposed to enter username. And don't

just copy this line and change this

word. I want you to get some muscle

memory here. So, go ahead and do that

right now.

Okay, hopefully you did like this. Input

type equals text placeholder enter

password like that. And there we go. Now

you can enter a username and a password.

However, in the real world, passwords

are never exposed like that. The

characters are always masked. And the

way we achieve that is simply by

changing the type from text to password

like that. If we run the code now, you

can see the username is shown but the

password is masked. Really nice. And

speaking of this type attribute here, it

can take a range of different values

which turn into really interesting

interactive elements on the page. For

example, you can do type equals date.

Let's say you want the user to add their

birth date during sign up. And then you

get this nice little date picker. Or you

can do type equals time. For example, if

you want the user to be able to

configure when they should get some kind

of notification, that gives the user a

nice time picker. Or let's say you want

to give the user a way to configure the

theme of their profile with colors. Then

you can do type equals color. And then

you get this powerful color picker where

the user can add basically any color

there is through moving around on these

dots. So, the input tag is a really

versatile tool in your toolbox. Okay,

let's move on to the main challenge

because I want our users to have profile

pictures, which means that you need to

add an HTML input field that lets them

upload image files. And I'm not going to

tell you what kind of type that input

field has. I'm just going to show you

how it looks, which is like this. You've

probably seen it online before. It's

basically a button. And when you click

it, it lets you choose an image from

your local file system. And the reason I

want you to figure out what the type

attributes should be here is because

being good at Googling is actually huge

part of being a good programmer. And the

two are actually not that easy to

separate from each other. So this gives

you a way to practice those Googling

skills. And I'm going to give you a hint

that the keywords you should use are

found in this last sentence right here.

So go ahead and solve this challenge

right now and then I will of course show

you the solution when you return back to

me.

Okay, hopefully that went well. Let's do

this. The keywords I think are important

here are HTML input because we know

we're looking for an HTML input tag. And

then what is our intent? Well, it is to

upload image files. And I think Google

can handle this just by combining HTML

input upload image files. If we just

paste that into Google, let's see what

we get. And as you can see, when we

search for that, we get a first hit from

developer.mmazilla.org.

Let's click into that. And here you can

see the title is input type equals file.

And we get this little code snippet

here. And it also says input elements

with type file let the user choose one

or more files from their device storage.

Sounds pretty good so far. Let's zoom in

on the code here. And there you can see

that they are actually using the profile

picture example themselves. Choose a

profile picture with this button which

looks suspiciously similar to what I

just showed you a couple of minutes ago.

So I think we've found it. What we're

looking for is type equals file. Let's

add this up above the signup button.

put a equals file like that. If we run

this code, yes, there we go. We get this

button which looks like exactly what

we're looking for.

Okay, now we're going to move on from

using Google to building Google. I mean,

how cool is that? You've learned HTML

for just about 30 minutes and now you're

going to build the most visited website

in the world. That is just amazing. As

you can see here on the similar web

overview, Google is at the very top

amongst the most visited websites in the

world, beating sites like YouTube,

Facebook, Instagram, Wikipedia, and all

the way at 10th, a pornography site, of

course. And by the way, it's a little

bit sad to see that this adult site has

almost three times the average visit

ruration of Wikipedia. So, a pretty deep

insight about humankind right there.

Anyway, we are going to build google.com

and it'll look like this. However, now

you're probably wondering, how can we

make a page look like this? This doesn't

look like regular HTML. And that is

because I've cheated a little bit and

added this line up here, which is a link

tag to styles.css. And if you look at

the file menu in the left hand side, you

can see that actually we have a file

called styles.css, CSS which contains

exactly that cascading stylesheets which

is the language for styling websites and

which you're going to learn all about a

little bit later in this course.

However, for now, I want you to

completely ignore this. What you should

do instead is just create the four HTML

tags we need in order to create a

google.com clone. And then this CSS will

be pulled in and take care of styling

the elements as they should be. So that

it will look like this. And to give you

a hint, this is an image file pointing

to google.png, the file I've added here.

And PNG is just a file format just like

JPEG. You can use it in the exact same

way as we used JPEGs earlier on. So you

should know how to do that. And this is

an input field. You have to figure out

what kind of type it is. I think you

might have a clue. This is a button on

the left hand side. And this is also a

button. So basically it is these four

tags you need to create in order to

build a clone of the world's biggest

website. So go ahead and do that. Start

down here and ignore the line up here.

And then when you return back to me, I

will of course show you the solution as

well. Good luck.

Okay, hopefully that went well. If not,

no worries. Let's do it together. So,

starting with the image tag for the

Google logo, I'm going to do img like

that. And it's a self-closing one. So, I

don't need a closing tag, but I need a

source attribute. And it should point to

the Google.png file. So, I'll just do

Google.png

like that. And let's run this. And ooh,

there we go. We got the logo. Okay,

moving on. Let's do the input field.

Also, a self-closing tag.

running the code and there we go. We

have a input field looking pretty good.

Okay, next up there's the two buttons.

One saying Google search and one saying

I'm feeling lucky. So I'm going to add

both of these button Google search and

then since I'm lazy I'm going to copy it

and do I'm feeling lucky like that.

Let's run this. And there we go. We have

a Google clone with just four HTML

elements. So, if you did this, give

yourself a pat on the back. It is

fantastically well done. You should

really be proud of yourself. And if you

didn't manage to do it, just try it

again and I think you'll make it. At

this point, it might be a good idea to

take a little break and digest

everything you've learned. And then when

you are ready to continue, I will see

you in the next scrim.

Okay. Now that you've built google.com,

you probably want to showcase your

project on some kind of portfolio page.

So, let's pretend we're creating exactly

that. Here we have the index.html page,

the main page of our portfolio. And as

you can see, it says Pier Harold

Borggan, developer, teacher,

procrastinator. So, a really good

description of myself. Though, what it

lacks is some kind of page or section

which describes my projects. though I

have actually created the underlying

page for exactly that over here on

work.html.

As you can see, this is a few tags that

describes my google.com project.

However, there's no way for the users to

know this. The only way they can get to

this page now is by actually typing

work.html up in the browser here and

then it is rendered. We don't want that.

Instead, we want some kind of link from

the index page that is this one that

points towards the work.html. HTML. And

in order for us to achieve that, you

have to learn about anchor tags, aka

links. An anchor tag is simply an HTML

tag with an A. So, let's open and close

an anchor tag and write, for example,

check out my projects

here. Like that. If we run this,

it seemingly looks just like our

paragraph. And we can't click it either.

And that is because for anchor tags, you

also have to provide it with an href

attribute. That's short for hypertext

reference. Really fancy, scary looking

word right there. Don't worry about it.

All this attribute does is decide where

the link should point to. So if we do

equal and then two quotes, we can inside

the quotes simply write work.html.

If we now run this, you can see that it

renders as a link. And when we click it,

boom, we're taken to the work.html HTML

page. Really nice. Now, another thing I

want to show you with with anchor tags

is that you can nest them inside of

other tags and actually inline in a text

block. So, let's say that we want to

link to google.com from this site. Then,

we'll create a paragraph, which can say

something like check out the live demo

here. And we only want the here word to

be a clickable link. Well, then we'll

simply wrap the anchor tag around here

as well and we'll close it before we

close the paragraph. And then we'll do

the href paste in the URL to google.com.

Now, this is a link that points to an

external website, not to any of our

pages. So, if we run this, you can see

that the link is now only over the

hairword. However, if I click this link

now, the Scribba mini browser will try

to head over to google.com and we only

allow the mini browser to render Scribba

projects at the moment. So, that won't

work. Instead, what I'm going to do is

make this link open in a new tab. The

way we do that is through a new

attribute. So, first I'm just going to

break this into a new line just to

improve the readability a little bit.

And then here I'm going to write target

equals

blank. Now, that is a cryptic way of

saying that you want the link to open up

in a new tab. I know. But if we now run

this, if you click on this link, what

you'll see is that in your main browser,

a new tab will be opened at the

Google.com homepage. So, I'm not going

to go deeper into why it's called target

equals blank, but this is the way to do

it. I of course wish that HTML had a

better solution for this. for example,

new tab equals yes, that would have made

a lot more sense to me. But this is how

it is. You just have to accept it. Okay,

that was a lot of talking for me. Now,

it's time for a challenge. I want you to

create an anchor tag that links back to

the index.html page because if a user

ends up on this page, they also need a

way to get back to the main page. So,

create that link here however you want

and then I will show you the solution

when you return back to me.

Okay, hopefully that went well. Let's

create this anchor tag. I'll wrap it

inside of a paragraph and write turn to

homepage and then I'll simply wrap the

homepage word in an anchor tag like that

and point that anchor tag to index.html.

If we run this, you can see return to

homepage. And if we click that, we are

back at the homepage. Great job. Let's

move on.

Okay, we're back at our Google example

here. And now I want you to add a anchor

tag to the page because sometimes you'll

see that Google adds a little text

underneath the buttons. For example,

something about privacy like we protect

your privacy then with a learn how link

that you can click on to read more about

that. So that is exactly what I want you

to do. I want you to add an anchor tag

that points to blog.html.

As you can see, I've added a blog.html

file up here. And I want you to wrap the

link inside of a paragraph tag. So, just

as it is here, you can see it's an

entire paragraph here, but the anchor

tag is only wrapping the second

sentence. So, go ahead and do that right

now.

Okay. Hopefully that went well. Let's do

it. We'll start with the paragraph

opening and closing tag. and then do we

protect your privacy like that. And here

we're going to add the anchor tag in

line. So I'll do a open and close and do

an href as well. Point it to blog.html

and the text should be learn how. Let's

run this. And boom, there we go. We have

added a nice little link here. If we

want to learn more about Google privacy,

then we can click this link. But not

much to see here. Turns out that privacy

probably isn't as important for a

company who makes money by showing ads

to users. Anyway, we can click on this

link, return back to Google, and there

we are. Great job solving this

challenge. Let's move on.

Okay, now we're going to talk about how

to structure HTML documents because the

structure we have here isn't actually

correct. It's a very simplified

structure compared to how it should be.

Though it does work. So, I didn't want

to give you all of these theoretical

boring structure things up front. I

wanted you to build stuff from the get-

go without the added complexity of the

proper HTML structure as my philosophy

is first make it work and then make it

better. However, now we're at the point

where we should make it better. So,

let's have a look at how to structure

HTML documents properly. And HTML is

actually quite like us humans. It has a

head and a body. And what do you place

inside of these elements? Well, in the

body, that's where you place the tags

you see on the page. And that is these

tags here. So, our image, our input,

button, paragraph, and our anchor tag

because these are visible on the page.

Now, of course, the CSS styling up here

also results in a different layout, but

the link tag in itself is not something

that is rendered on the page. So, it

should not be in the body tag. So, let's

just add the body right here. We'll add

the starting tag and then the closing

tag down here on line nine. And then

we'll indent everything inside of the

body like that. So, moving on to the

head. That's where we add metadata. And

what do I mean about that? Well, it can

be many things. For example, styles. So,

this link right here should be inside of

the head. We'll do head and then close

it off here like that. Other things

we'll have in the head is the title tag.

So let's have a look at what that is. If

we navigate over to the BBC football

page and zoom in on the top, you can see

up in the tab, it has a icon. It says

football-b

icon at the beginning here and this

sentence is controlled by elements we

place inside of the heads tag. So if we

want to add a title text in a tab,

simply write title and then for example

google.com would be natural to write

here. Though we haven't implemented tabs

in the mini browser here on screen so

you won't see that. But had we done that

it would have looked like this though of

course would have said google.com

instead. So we don't need that. So let's

just remove it. Another thing that is

controlled by tags inside of the head

tag is how articles are shown on social

media. So if we zoom out a little bit

here and click in on this article at the

top here and if we now were to take this

URL and share it for example on Twitter,

what we then would get is a different

heading on the Twitter card than what

the article natively has and also a

different image than the main image on

the article. So this is metadata that

has told Twitter that if this article is

shared on Twitter, we want you to use

this heading instead of the heading that

is inside of the article. and also this

image instead of this image right here.

So that was a lot about the head tag.

We're not going to use the head that

much, but I wanted to give you an

understanding about why it is important.

Now there's one more HTML tag we need

and that is the HTML tag in itself which

should wrap all other HTML tags. So we

need to up here at the very top write

HTML and at the very bottom close it off

and also then indent everything inside

of it like that. And then there's one

more thing which is to me a little bit

annoying that we need that is the dock

type declaration because you have to

tell the browser that we're actually

using HTML 5 and not HTML 4. That's just

a version of the HTML specification and

that is done by this line up here. You

can see it's blue and it starts with an

exclamation mark. So, it's actually not

an HTML tag. It's just metadata for the

browser. Because if you don't do this,

the browser will assume that you're not

using HTML 5, but an earlier version of

HTML, and that might result in some

quirks on the page. Though, in 99% of

cases, there will be no difference

between adding this and not having it.

So, at times, you'll probably see

tutorials on Scribba where I've

forgotten to add this because for the

purposes of our example, it won't make

any difference. But if you have

something that you want to deploy to the

world and have in production, then you

just have to accept that you need this

sign up at the top. And sometimes you'll

see people write it in capital letters

as well. Doesn't really matter. I prefer

having lowercase letters. Okay, that was

a lot of theory. It's time to get your

hands on the keyboard. And luckily

though, we have a blog.html file which

doesn't have the proper HTML structure.

So your challenge is simply to add the

proper HTML document structure to this

page. And I don't want you to copy paste

my tags, but write them out on your own

instead so that you build up that ever

so important muscle memory. Go ahead and

give this one a shot right now and then

I will of course do it myself when you

return back to me.

Okay, let's do this. I'll start with the

body as that should wrap our visible

elements on the page like that. Then

I'll do the head. Though we haven't

linked to the styles on this page. So

the head will actually just be empty

like this. So I'll keep it on one line.

Moving on. It is the HTML document. And

that should wrap everything. So I'll do

like that. And at the very end, I'll add

the dock type HTML to tell the browser

that we are working with HTML 5, not

HTML 4. So if we now navigate over to

the blog.html site, you can see that

nothing has seemingly changed. And as

goes for the main page itself. This

structure we've added doesn't result in

any visible change. We just have a more

correct underlying code file to work

with. Great job. Let's move on.

Now you're going to learn about lists

because let's say that you for example

want to create some kind of tribute

site. It could be for whatever. For

example, uh I don't know the Beijing

Winter Olympics. If that's one of your

interests, you might want to create a

tribute site where you list out the top

nations who competed or something like

that. And if so, you would have to use

an HTML list. So, let's first just

figure out which nation actually won the

most medals in the Beijing Olympics. So,

I'm going to click on the medals tab

here on the Olympics site. And here we

got it. And zoom in a little bit. And

oh, wow. It turns out that actually

Norway, my country, completely

obliterated

the other countries with 16 gold medals

over other nations like Germany, China,

and the US.

That is really astonishing, especially

consider the fact that the size of the

Norwegian population is this compared to

the other nations here. I mean, way to

go Norway. We got to create this list in

HTML. Okay. So, how do we do that? Well,

we have to use two different tags. One

tag for wrapping the entire list and

another tag for each list item. The

wrapper tag is one called O. That's

short for ordered list. And then inside

of the ordered list, we place the list

items, the li.

So when we do this and write Norway here

render this you can see that the browser

gives this a number as it is the first

item in the list and also indents it a

little bit from the left hand side. So

adding another one here it then gets the

number two and is stacked below the

first one. So let's add the final ones

like that. Looking pretty good. We have

a list just like on the Olympic site.

Now, if we wanted to be a little bit

more diplomatic here and not brag too

much about this insane victory by

Norway, we could change this O to a UL.

That is an unordered list. And as you

can see, then the numbers are replaced

with dots. And now you might ask

yourself, well, why do we need these

unordered list? They look like kind of

boring elements you just use in Word

documents or something like that. Well,

once you learn about CSS, you'll be able

to style your list however you want and

thus make it much more usable. If we,

for example, head over to BBC Sports

here and rightclick on the navbar here

and click inspect, then we'll see that

actually this entire navbar is an

unordered list item with each of the

categories being its own list items. So,

lists are all over the web and important

to learn. Okay, now I'm going to remove

all of this and give you a quick little

challenge because I want you to create

an ordered list inside of the body tag

and then fill it with your top three

favorite foods.

So, go ahead and give this a shot right

now.

Okay, hopefully that went well. Let's do

it. So, we start out with an O tag that

we're opening up and closing. And as for

the list items, even though Norway is a

great Winter Olympics country, it is a

truly mediocre country when it comes to

food. So, my favorite food is definitely

from other places than where I'm from. I

love Italian pasta. I love Japanese

ramen soup.

And lately, I've been really into pai.

So, there we have it. Rendered out on

the page. Really good job learning about

HTML lists. Let's keep up the pace and

move on.

Okay, now you have arrived to the main

project of this section. You are going

to build a website about yourself and

we're going to personalize it as well

plus deploy it to the world so that

anyone around the world can visit this

website. It is going to be so much fun.

And here is the website itself. As you

can see, it's pretty simple with hardly

any styling by default. Just a little

bit on the button and the input field

here. as with the border around this

image. And building this lightly styled

design is the first part, part one of

the challenge. And then in part two of

the challenge, we are going to go crazy

on the styling with just a few

parameters that you are to tweak and

it's going to look so cool. But let's

not get ahead of ourselves here. Let's

first just run through what kind of tags

you need in order to build this website.

So, first off, there is an image tag and

the image you should use should be added

to the file system on the left hand side

here. As you can see, there is a

pair.jpeg image here. And the way to add

an image to this file system is simply

by drag and dropping it over this

section. Next up, there's an H1 here as

well with a title. Of course, you should

write your own name, not my name. And

then there's an H2 heading as we need

some fun facts about you. The fun facts

itself are built using an unordered list

plus list items inside of the ul

element. And then there is a paragraph

with a link nested inside of it that

should go to your LinkedIn profile. So

the point here obviously is to replace

all of this information with fun facts

about you with your name with your image

your LinkedIn profile so that when you

share this with the Scribba community

other people will be able to get to know

you better. And then finally, we have an

input field here and a button that won't

really do anything cuz we're not hooking

this up with a real newsletter. We are

just pretending that you have a

newsletter that people can sign up to.

So once you've done this, you've

completed part one of the challenge and

you've also filled up this body element

here with HTML tags. Next, you'll move

on to part two of the challenge. What

you'll do there is take your existing

design and modify it. So, if we head

over to the index.javaScript file, you

can see that there are a bunch of

so-called JavaScript functions, which

probably look really scary at this

point, but don't worry. The only thing

you're going to do here is take the word

that you see inside of the quotes right

here, and replace them with one of the

words that are commented out in the line

above. because this will give you the

opportunity to change the styling on the

page according to what word you change

this argument to. So what you are to do

here is look at the name of this

function. It says favorite movie genre

and what is that? Do you like space

movies, scary movies, military movies,

romantic movies, cowboy movies and so

on. And then just take your preference

and change it like this. So if you

choose cowboy for example, what then

will happen is that the font on the

website suddenly became like a western

movie. That's pretty cool. And moving on

here you are to answer what is your

favorite fruit? Is it watermelon,

tomato, banana? If it for example is

banana, then you should replace regular

with banana. And what will then happen?

If you run the code, then suddenly your

page is banana colored. Really nice. So

now you are a cowboy banana. That's

pretty cool. Finally, there's two more

parameters you can tweak. First, tell me

is your favorite mode on your computer.

Light mode or dark mode. If you choose

dark and run the code again, then you

can see the colors have flipped and now

it is primarily dark with the brown

background and the light yellow color as

opposed to how it was previously with

the yellow background and brown text

color. And then at the very end, you are

to choose what kind of style you like

your edges to be. Sharp, soft, or round.

Let's say you like round. Well, then

you'll simply replace sharp with round.

And there we go. We have a nice round

layout where the image and the input and

button now have a much more round

feeling to it. So, what happens here is

that these are JavaScript functions that

execute code, which you can see further

down in the index.js js file and change

the layout accordingly. Though, you

should ignore everything below this

line. Don't even try to understand it.

It's far outside the scope of this

course and you're going to learn

JavaScript later in the front-end

developer path anyway. So, it's nothing

for you to worry about right now. Now,

I'm going to reset all of these. Set

these two to regular and these two to

light and sharp as that is the default

styling that we should have. And then

I'll leave you with this image right

here as it now is your turn to build

this layout, personalize it with the

JavaScript functions so that you have

your very own completely unique website.

So go ahead and do this right now and

then I will see you when you return back

to me.

Okay, hopefully that went well. Let's

now do this together. First, we need the

image tag. So I'm going to do img. The

source is the pier.jpeg

which I'd already added. Yes, there we

can see it is rendering properly. Next

up, there is an H1.

I my name is Pear like that. Very good.

Moving on, we have the H2

fun facts about me like that. And then

there's the unordered list and the list

items. So, I'll do ul close that ul

because the list items need to be inside

of the ul and the first one is 36 years

old. I'm going to copy this one

like that. And I live in Norway and I

sing in a choir.

And there we go. Looking pretty good.

Next up, there is the paragraph with the

inline anchor tag. Here's the paragraph.

connect with me on LinkedIn like that.

Oops, it should say me on LinkedIn here.

And then we are to wrap LinkedIn here

into an href like that. And then I'm

going to paste in the URL to my LinkedIn

right here. And if you actually want to

connect with me on LinkedIn, feel free

to click on this link as soon as I've

added the target equals

blank so that it opens up in a new tab.

Okay. Finally, we we need to add the

input and the button.

Input type text like that and button

with join newsletter as the text.

Yes, that worked. And we finally just

need the placeholder in the input.

And here we're going to write enter

email. Enter email. Like that. And that

actually

looks pretty good to me. That is what we

were looking for. Yes. Okay. Next step.

We are going to personalize it. This

will be easy for me. I really love

movies about space. So I'm going to

choose space here as my favorite movie

genre. It gives me this really neat

sci-fiish font. And I am a huge avocado

fan. So, got to do that. Woo! Looking

pretty good. I tend to prefer both light

mode and dark mode, but let's try dark.

Yeah, not bad. And as for favorite edge

style, I'm not going to do completely

round, not completely sharp, but

something in between, as I think the

answer often is something in between.

And yes, there we go. Pretty cool

website. Now, the final thing I want you

to do is head back to your note where

you created your website and then click

on the bottom right icon, the cog wheel,

and choose download as zip because

that'll download your project to your

local machine. And we need that in order

to deploy this project over the next few

scrims. So, what I'd recommend you to do

is on your computer, create a dev folder

and move that zip file you just

downloaded to this dev folder. Double

click on it to open it. That'll give it

this long obscure ID. So if I were you,

I would change that to something

understandable, for example, personal

site and just save it so that you have

your project neatly placed with a good

name on your local computer so that we

are ready to share it with the world

over the next few scrims. It is going to

be epic. So I look forward to see you in

the next scrim after you've done all of

this. I'll see you there.

In order to get your personal site live

on the worldwide web, we are going to

use a service called Netlifi as it is

both free, easy to use, and powerful as

it's used by tons of professional

developers. So, if you're following this

course on scrimma.com, just click on

this slide right here and you'll be

taken to Netlify. Or if you're following

this course on YouTube, just head over

to netify.com and you'll get to the

exact same page. Once you're there, I

want you to click at the sign up button

as that'll take you to an authentication

screen where you can choose a bunch of

different options. I am going to go with

the email option. So, I'll click on that

and fill in my email and also choose a

password. Then I'll click sign up, which

again will trigger Netify to send a

verification email to my inbox. So, I'll

head over to my inbox and click on

verify email. That'll take me to the

Netlefy onboarding page where I have to

tell them a little bit about myself. So

here I'm going to say that I'm using

Netlefi for personal reasons. And

opening up this select box here, I'm

going to classify myself as a hobby

developer. And my first project will be

a personal/portfolio

site. Then I'll scroll a bit down and

give my team a name. I am just going to

call my team pair as it's common to use

your first name, but you can choose

whatever name you want on your team.

Once you're done with all of that, click

on the setup and continue. Then you are

taken to the page where you are to

deploy your first project. You can

either import an existing project, start

from a template, or deploy manually. And

that's exactly what we are going to do.

So, what I want you to do here is return

back to the folder you created in the

previous scrim called personal site. And

then mark all of the files and drag and

drop them into this rectangle. Once

you've done that, your browser might ask

you if you actually want to upload the

files to the site. Just confirm that by

clicking on upload and then Netlify

starts its magic. At this point, they

are working under the hood deploying

your site to the web. So here you might

have to wait for a couple of minutes

until you see this icon right here turn

into a screenshot of your personal site.

Now if that doesn't happen within a

couple of minutes, just try to refresh

the site itself as that'll probably do

the trick. Then you can simply click on

this URL right here and boom, you have

deployed your site so that anyone in the

world can access it. That is a

phenomenally great job and you should

truly be proud of yourself. The final

step I think you should do now is to

share your creation with the world. I

would recommend you to use either

LinkedIn or Twitter as both of those

have huge communities of developers. So

what you should do is basically what

Jolene and Jess are doing here. Share a

link to your personal site. Write a

couple of sentences about it. And also

feel free to mention anyone else who've

been involved in this project and add a

relevant hashtag like Jess is doing

here. For example, 100 days of code.

That that is a great hashtag to follow

and to use as it puts you in touch with

a bunch of other people online who are

going through the same learning journey

as you are. So I am looking forward to

see your personal site either on

LinkedIn or Twitter. And I'm also

looking forward to see you in the next

scrim.

Guess who is my favorite person in the

world right now? You are because you

have just completed the HTML section of

this course and that is a huge

milestone. So now let's have a look at

all of the awesome things you've

learned. Starting out you learned about

the core HTML tags that is the heading

H1 H2 and so on and also the paragraph

tag. And then you learned about nesting,

which is how some tags are inside of

other tags, which again are inside of

yet other tags, eventually creating a

tree structure of HTML tags. Then you

learned about buttons and input fields,

which are the elements that make your

website interactive. And then we talked

about anchor tags, a super important

concept as it allows you to create links

between different websites or web pages

on the web. And then of course we had to

learn about proper HTML document

structure as that is important with the

doc type declaration the HTML tag head

tag and also the body tag. From there,

we moved on to lists. Both unordered

lists like this one right here and

ordered lists, which is super cool and

almost as cool as what you followed up

with, which was to deploy your personal

web page to the web so that anyone

around the world can navigate to it and

check out your creation. This was a lot

of learning. I completely understand if

you're a little bit overwhelmed right

now. And it's totally okay to now take a

break, relax a little bit as in the next

section you are going to learn about CSS

aka cascading stylesheets. That is how

we design our web pages so that they go

from the dull default HTML styling into

being beautifully designed, polished

products that people enjoy looking at.

So super exciting times ahead of us. So

when you are ready, I will see you in

the CSS section.

Welcome to the second section of this

course where you are going to graduate

from HTML into the world of CSS or

cascading stylesheets as it stands for.

This is super exciting because now

you'll be able to make your sites look

beautiful as well. So the main project

of this section is actually the

google.com homepage because this time

around you are going to write the CSS as

well. And this probably looks a little

bit frightening right now, but don't

worry. I'm going to take you through it

step by step. And actually, before we

get going with Google, we're going to

get you familiar with the syntax here

and have some fun destroying

vikipedia.org.

So, it's going to be a lot of fun and we

have no time to lose. Let's just get

started.

Okay, so let's get you writing your

first lines of CSS straight out of the

gate. As you can see here, we have an

HTML file which has a body that simply

has please accept our cookies as text

directly in the body tag and that is

rendered here in the mini browser.

However, as you'll notice, the style

doesn't exactly look like default

browser styling. And that is because

we've added this line here which says

link meaning it's linking to something.

And what kind of relation does this link

has to our HTML? Well, it's real

stylesheet. It is a sheet that contains

styles. And where does this sheet live?

Well, that is dictated by the href

attribute, which you probably recognize

from anchor tags. And it's pointing to

styles.css.

And lo and behold, in our file system,

we have a styles.css file. And there we

can see a few lines of scary looking

code you've never seen before, perhaps.

However, don't worry. We're going to go

through this. So what happens here is

that this CSS code is being pulled into

the HTML file by this line three here

and then it is applied to the website

when it is rendered. So if we were to

comment out this line three here and

rerun the example, it'll look very

boring like this. So let's undo that.

Doesn't exactly look great now either,

but it's at least some styling. Although

this cookie widget is a little bit

weirdly designed in my opinion, which

leads me to your challenge. You are

going to redesign this cookie widget by

changing the values inside of this body

selector. And now you might ask, well,

what is a selector? Okay, let's go

through that because that is the basic

CSS syntax you need to know in order to

solve this challenge. So CSS works by

selecting certain elements on the page

that is HTML elements and then styling

them however you want. And the element

you select is what you start with when

writing a CSS rule. Here we are

selecting the body. That is the exact

same thing we're doing here. And what's

our body? Well, it is this tag right

here. Then in order to apply some

specific styling to the body tag, we

write an opening curly bracket and a

close curly bracket. And then inside of

those brackets, we have something called

a property, which in this case is color,

and a value, which in this case is red.

So here we're saying that the color,

which is actually text color, that's

what color means here. The text color in

the body should be red. So if I now

change the color property from blue to

red, you can see in the main browser we

have changed the text inside of our body

to red because if we head over to the

HTML, this text is indeed inside of our

body.

Now as you might have noticed as well,

the property is followed by colon and

the value is followed by semicolon. And

you have to have that notation,

otherwise you'll break the example.

So, what I want you to do now is

redesign this cookie widget. Make sure

you change all of the listed CSS

properties. That's background color,

font size, font weight, text align, and

margin top. And what you'll change it to

is up to you, but I've given you the

hints of what kind of values the

properties expect. Here in the comments

on the right hand side you can see

comments in CSS is done with this star

and slash character. So the gradeout

text as in with the HTML is not

interpreted by the browser. It's just

help text for you in order to solve this

challenge. And I'm intentionally not

giving you any more information about

what each of these properties mean

because I think they're pretty

self-explanatory. So, I want you to

experiment with changing them and draw

your own conclusions as to what, for

example, the font size does to the

styling on our page. And then once

you've done this, once you've redesigned

the cookie widget, move on to the next

scrim. And then I will show you how I

would do it as well. Good luck.

So, really good job writing your first

lines of CSS. That is no small

accomplishment. Now, I'm going to show

you how I would design my cookie widget.

So, I want my widget to have cookie

colors. So, for my background property,

which is what sets the background color

of the body, which fills up the entire

browser at this point, I'm going to

choose a color called saddle brown. Like

that. And you might wonder, well, how

did I know that saddle brown is a color

that CSS supports? Well, you might have

noticed as you wrote CSS values that VS

Code, our editor, starts suggesting

values for you as you start typing. So

that is how I found Saddle Brown. This

suggestion box here isn't recorded by

Scribba itself. So you won't see it in

recording, but you will see it as you

interact with the code yourself. So we

have the background. Now let's move on

to the next property, which is color.

And that dictates the color of the text.

It is set to red. Though let's choose

white here. That looks pretty good. The

next one, font size dictates well the

size of the font. And here you can see

we are using px values which is short

for pixels. And you can choose whatever

value you want. Let's see what happens

if we increase it up to 200. Oh wow,

that is far too big. So instead, let's

try something like 25. Yeah, that's

pretty good. Next, there's the font

weight. You can choose between lighter,

normal, or bold. And if we change this

to bold, you'll see there that our text

suddenly got a bit thicker, which is

exactly what this property does. It

changes the thickness of the font. Okay,

text align. It is set to right, but we

can also set it to left or center. Let's

see what happens if we do left. And that

bumps the text over to the left hand

side. I think we should have our cookie

widget with centered text like that.

Finally, margin top. What does that do?

Well, if we try to change this to, for

example, 50, you can see that. Oh, wow.

That created more space here at the top.

So it adds margin aka spacing at the

top. And here I think maybe 50 was a bit

too much. Let's do 30. Yeah, that is

just right. Now you probably ended at a

completely different styling than this.

That is okay. The point here was to

experiment. Before you leave, I'll give

you a sneak peek at another tool you can

experiment with, and that is a different

way of describing colors in CSS called

hex codes. So here I'll paste in this

weird looking code starting with a

hashtag. And as you can see it created

the exact same color. So this here is

actually a recipe for the saddle brown

color. And it's actually a description

of three different things. How much red,

green, and blue this saddle brown color

consists of. So if I change this eight

here to one instead, you can see that

completely changes the color. Now if

that is confusing, don't worry. You'll

learn more about that later. I just

wanted to give you a sneak peek on it.

As with all of these other properties,

you are going to get more comfortable

with all of this. So, it's not a problem

at all if you completely forget about

all of these properties and values over

time as you do it again and again. It'll

become a part of your muscle memory. So,

with that, let's carry on.

Now that you know enough CSS to be

dangerous, let's use your newly acquired

superpower in order to destroy

Wikipedia. And for that, we need a

Wikipedia page. And about the coolest

one there is is this list of helicopter

prison escapes. I mean, oh my god, how

insane is that? So, click this image and

you'll be taken to this article and then

I'll show you step by step how we can

destroy it with CSS. So the first thing

you need to do is to right click as

that'll open this menu where you can

choose inspect and once you click that

the dev tools will open. Then choose the

icon in the far left as that allows you

to use your cursor to select elements on

the page. So that when you hover over an

element like this one, you'll see that

the dev tools selects it for you. So if

you move your cursor over to the logo,

you'll see that one selected. And if you

move your cursor over to the main part

of the screen here, you can see it

selects the entire article. Once you're

on that selection, I want you to click

because that'll select the specific HTML

element here in the elements tab. And

don't worry about all of this. You do

not need to recognize the tags and

attributes and everything you see here.

What I instead want you to do is head

over to the right hand side where you

see element.style. Click there and

you'll be able to actually apply CSS

directly to this page. So you can, for

example, write background red and boom,

there we have really ruined this

article. Then if you select another

element on the page from this body

content element here, you can do the

exact same thing. Click on the element

style and now for example write font

size and 30 pixels. And there you go.

Now you can click on the X icon in the

far right corner here and then you can

read about these helicopter prison

escapes with a really bad background and

huge text if that's what you prefer. So

feel free to spend an hour in this

article and then I will see you in the

next scrim.

Okay, so now it's time for you to yet

again build the google.com homepage, but

this time around you're also going to

write the CSS so that you'll understand

everything that goes into building this

elegantly designed search engine. As you

can see, I've set up the basic skeleton

here in the HTML file for you. In the

body tag, we have an image which is

pointing to the Google.png PNG image

which lies in the same directory as our

index html folder up here. And we have

an input type text which is our search

field. And we're only going to start

with these two elements and then later

move on to the buttons. Now, as you can

see in the mini browser here, this looks

horrible. It has no styling. So the logo

is far too large. The input field

doesn't look very good. So in short,

there's a lot of work to do here. But

before we can start writing CSS, you

need to link to the CSS file. You can

see I have a style CSS here which just

sets the background of the body to red

as a way of testing whether it is

actually a link to the HTML. Currently,

it's not. You are going to have to link

to the CSS file on your own. And if you

remember a couple of scrims back, I

showed you how to do that. Though,

please don't look back at that scrim in

order to solve this challenge. Instead,

Google it because I do that almost every

single time I have to link from an HTML

file to a CSS file. So, you should not

be ashamed for googling such a quote

unquote simple thing. Instead, just do

that right now because it's important

practice and then when you come back, I

will show you how I would do it as well.

Okay, hopefully that went well. Now,

let's have a look at how we can solve

this. So, I would simply type how to

link to CSS into Google and click at the

top result. This happens to be a W3

schools article. Here you can see that

there's a few different ways you can

import CSS into the HTML file, but we're

only going to worry about the first one

here called external CSS. As you can

see, if we scroll a bit down, what we do

is we type link re equals stylesheet and

href with a pointer to the CSS file

itself. So we'll do link file equals

stylesheet

href equals styles.css

and then closing it. And if we now

refresh the browser, boom, there we go.

It is red looking horrible. So we can

remove that so that it looks white

again. But now we know that we have

linked the CSS and the HTML together. So

we are ready to move on and start

styling our page.

The first thing we want to fix in our

example here are the widths of the

elements. Because if we compare it to

the finished design, you can see that

the input field is meant to be wider

than the logo. However, in our example,

that's not the case. Quite the opposite

actually. The logo is much wider than

the input field. So, we need to shrink

the logo and then make the input field

wider. So, I'm going to start and do one

of these and then you will do the other.

I happen to know that the width we want

to have on this input field is 400

pixels. What I'm then going to do is

target the input field using the element

name and create a CSS selector just

writing input then open and close curly

bracket. Then simply write with and 400

px and boom there you can see suddenly

the input field widened quite a lot. And

as you might have noticed, we're using

this pixels value here again, which

we've used a couple times already,

actually. And if you're a little bit

confused as to what a pixel is, you can

think of it as the smallest unit of

space that our screens can render. So a

pixel is just a tiny square. So tiny

that we actually need 400 of them

stacked up besides each other in order

to get a width of this size. So with

that, I want you to fix the width of the

Google logo. Select the image tag and

set the width of the logo to 300 pixels.

Go ahead and do that right now and then

I will show you how to do it as well

when you return back to this scrim.

Okay, let's do this. I'm going to break

this down into a few lines so I get some

space above the input field and then

target the img element, the image

element. open up the curly brackets and

do with 300 pixels. Like that. Oo, we're

not quite yet at the finished design,

but the ratio between the logo and the

input field is now a lot better. Great

job. Let's move on.

Okay, I've discovered a problem with our

Google site, which is that if we make

the browser really wide, you can see

that suddenly the items stack up besides

each other on the same line. And that's

obviously not the kind of behavior we

want. We want them to always be stacked

on top of each other. And in order to

fix this, you have to learn about inline

elements versus block elements. And

that's best understood through the lens

of an example. So let's say that you,

for example, have a collection of things

you want to showcase. You could be like

George Francen, for example, and collect

dinosaur poo. He actually has the

world's largest collection of fossilized

feces, and naturally, he wants to

exhibit them in a museum. And if he were

to use display inline on his images,

they would stack up besides each other

like this. So kind of like in a line

horizontally. However, had he used

display block on his images, then they

would stack up on top of each other. So

rule of thumb is display block stacks on

top. Another way to look at this is that

the block level element blocks out the

rest of the available horizontal space

so that nothing else can be placed

there. And that is regardless of how

wide this image is, the content itself,

display block requires control over all

the horizontal space in its given

container. So when this block image is

placed here and you add a new image, it

would have to be placed underneath the

previous one. And if it is display block

as well, it'll block out the rest of the

available horizontal space and the next

image have to be placed below that one

again and so on. So the solution is

obviously to turn these elements into

blocks and I'm just going to give you

the syntax here. This is how you write

it. Display colon block. Go ahead and do

that for both of these and observe what

happens to the example when you make the

browser wide. Good luck.

Okay, let's do this. So I'll do display

block up here and the same

here. If we look at the browser,

seemingly nothing has happened. However,

if we now make it wide, you can see yes,

no matter how wide the browser is, these

will always stack up on top of each

other. So, great job. Let's move on.

The next thing we need to fix is the

lack of white space above our Google

logo. Because if we take a look at the

design here, we want quite a lot of

space in between the top of the browser

and the logo. And I'm not going to tell

you how to add that, but if you can

think back to the very first scrim in

this section, we added some space above

the text in our cookie widget. And that

specific space is called margin or

margin top to be specific. So your job

is to add some margin on top of our

image right here. You can start on line

seven so that our example here gets some

breathing room, some white space above

the logo and the input field. go ahead

and give this one a shot and then I will

of course show you the solution when you

return back to me.

Okay, hopefully that went well. If not,

no worries. I really pushed you out on

thin ice here. So, it's completely okay

if you didn't remember that the property

is called margin top. And what you add

there is a pixel value. So, for example,

100 px. And there we go. We've now added

a margin on the top of our image. And

while we're still quite far off from our

provided design here, we are getting

closer. Great job. Let's move on.

Now, while it totally works to add the

margin top directly on the image here,

you'd most likely not see professional

developers do this because what they do

instead is wrap these two elements in

some kind of container and then control

the positioning of these elements

indirectly via that container. And in

order to do this, you have to learn

about the div. I'm going to create an

opening div and then indent these two

and then a closing div below here. Now,

if we run this code, seemingly nothing

has happened because the div actually

does very little in itself. Though it is

indispensable for web developers. Just

to show you how important it is, let's

take a look at Facebook and my timeline.

Here I've opened up dev tools and

inspected one of the timeline items. And

you can see it is actually a div inside

of a div inside of another div inside of

yet another div inside of a div inside

of a div.

Divs really do rule the world. So it's

important that you learn about them. And

the way we'll use this div now is by

removing the margin top styling from the

image and then add it to the div itself.

And the reason this is important is

let's say that for example Google

decides to create a video here instead

or a interactive doodle or some kind of

game. They often play around with the

Google logo. Well, if so, it's a really

bad idea that it is the image itself

that controls the margin from the top of

the browser and down to the content

because that image might be removed. So,

it is a solution that will get you into

trouble in the future. So what we'll do

here is we'll simply instead target the

div and then remove the margin top from

the image and boom it has popped up. Now

we lost all of our white space but if we

add it back to our div we are back at

the design we started out with seemingly

nothing has changed but as you know we

have a better HTML structure. So we have

definitely made good progress here. So

with that, let's move on to the next

scrim.

The reason you need to learn about

classes now is because our current setup

where we simply have the elements like

this and then selecting the element

using the element selector in CSS will

give us bugs down the line because when

we add the two buttons beneath the input

field, we'll actually wrap these two in

a div as well. And let's see what

happens at this point. What I'll do now

is simply add the HTML for these buttons

down here beneath the input field. So it

is a div with two buttons inside of it.

And then you can see we are closing that

div, the inner div, and then we are

closing the outer div. Let's run this

code. And oh wow, what you can see is

that the spacing between the input field

and the buttons is totally off. And that

is because our CSS element selector here

selects any div it can find in the HTML

document and applies the margin top to

it. So it doesn't just select the first

one, but it can select thousands of

divs. So this is a very generic solution

and likely not something we want to use

as we want to have multiple divs with

different types of styling in our HTML

element. So let's now instead fix this

by doing the following. I'll write class

equals then for example main this here

is an attribute called class so it's

built into HTML and this here is the

name I'm giving my class I want to call

this div my main element and now the way

I select that in the CSS is by instead

of just writing the element name simply

doing dot main like that now if I rerun

this code you can see now the margin top

is only applied to the outer div, our

main class, and not to the div which

wraps the two buttons. So that is

exactly what we needed. Now I'm going to

remove these two buttons here because we

don't want to deal with them just yet.

And then I'm going to give you a

challenge.

First, you're going to add a class to

each of these two elements. That is the

image and the input. You have to decide

what you will call the two classes, but

make sure to give them different names.

And then you're going to in the CSS

replace the element selectors with class

selectors. So that is the img selector

here and the input selector here. And

obviously the CSS class selectors you're

going to replace them with is the ones

you have added to the elements right

here. So go ahead and do this right now.

Okay. Hopefully that went well. Let's

now do it together. So for the image

tag, I'm simply going to do class

equals. Then I'll call this logo dash

img. So here I'm using a convention

where I'm first giving my class a

descriptive name and then using a dash

and then specifying the element as well.

This is an img element, but it could

have been for example an SVG or

something else. Now I don't expect you

to have followed the same convention.

There are plenty of CSS conventions and

it doesn't matter at all what you used

in your example. You can call your

classes whatever you want. Okay, for the

input we'll do class equals search dash

input like that. Okay, let's move

through the CSS. Then I'll replace this

with dot. Now you can see it broke the

layout because this styling now is not

applied to any element. So we need to do

logo-ash img like that. And here do dot

search dash input. And there we have the

exact same example. Didn't change at

all, but we now have a more flexible

solution that scales better. So great

job solving this challenge. Let's move

on.

Okay, now it's time to take a closer

look at margins. And you've already

dipped your toes into this as you have

used margin top. So, you might have some

intuition about what margins do.

However, now you're going to learn it

properly through creating flags with CSS

because flags are just awesome. I mean,

take a look at this flag here, for

example, from the Republic of Venice, a

state which existed for over a thousand

years in Europe. And it contains, of

course, a flying lion holding a book. I

mean, what's more natural than that? Or

this one right here for the aisle of

man. I mean, have you ever seen a more

creepy creature than this three-legged

thing right here? Imagine having that

thing running after you?

That would not be fun. And this flag

would be really hard to create in CSS,

actually. So, we're not going to create

this one. We're going to start off at a

much easier level with just some very

simple shapes. So, let's have a look at

those. Actually, here is what we're

going to work with. As you can see,

there are simply three divs inside of

the body tag. And each div has a class

red, blue or green. If we check out the

styles.css, you can see that these three

classes apply a background color to each

of the elements and sets the height to

100 pixels. And here we have the result.

Three rectangular boxes that are stacked

on top of each other. And that tells us

that these are display block because

display block stacks on top. There's one

thing that bothers me here, and that is

that we have a little bit of white space

around the three items. Why is that?

Well, actually, it's because our browser

is trying to help us here. It's assuming

that we want a little bit of space

around the body tag so that these three

don't touch the edges of the browser. So

what's actually going on here in code is

that the browser

targets the body and sets a margin of 8

pixels. If you notice when I added this,

nothing changed. So if I remove this,

it's still the same. Meaning that this

style here is applied automatically. So

that means that margin is actually the

space around an element because now if

we change this to zero, boom, there you

can see suddenly our divs touch the

edges of the browser. Now here at the

bottom, they stop after 300 pixels since

we've told them to. So this margin zero

here seemingly didn't change anything at

the bottom because the bottom contains

white space anyway if we make our

browser tall enough. But anyway, that's

a digression. Let's get it back so that

the browser is completely filled up with

these three items. And now let's play a

little bit around with margins. So what

do you think will happen if I add a

margin top of 10 pixels on the red hair?

Take a guess.

Okay. Margin top 10 pixels. Boom. It

added 10 pixels on the top. What do you

think will happen if I add margin left

10 pixels as well? Let's try it.

Okay, so it added 10 pixels on the left

hand side, but it's only on the red

rectangle, not the blue or green

rectangle. Likewise, if I do margin

width 10 pixels, it adds 10 pixels to

the right hand side as well. If I do

100, it eats up almost a third of our

red rectangle. Okay, so now it's your

turn.

I want you to add 100 pixels of margin

on the bottom of the red box. So, go

ahead and give that a shot right now.

Okay, if you did margin bottom 100 px

like that, I want to congratulate you

because you just created the flag of

Monaco. Really good job creating your

first CSS flag. And now, let's do that

yet again. Here is your challenge. You

are going to create the flag of the

Gambia. And here we have that flag.

However, there's a catch. You can only

do this by applying styles to the blue

box. So, by adding margin to this CSS

rule right here. So, go ahead and give

that a shot right now.

Okay. Hopefully that went well. The way

to do it is by doing margin top. Let's

try 10 pixels and see. Actually, I think

we want our white space to be a little

bit more than 10 pixels. So, let's do 20

like that. And then margin bottom as

well. 20 pixels. And there. I think we

have a pretty good flag for the Gambia.

Now, before we move on to our Google

project, there's one little weird thing

I want to tell you about margin top and

bottom. Because what do you think

happens if I add for example margin

bottom of 15 to this red element here?

Well, according to my logic, the margin

right here would be 35 pixels because we

added 20 pixels on top of the blue. And

if we add 15 at the bottom of the red

one, that should be 35 pixels in total.

However, now that I added this, nothing

happened. And that is because margin top

and margin bottom will in many

situations collapse into each other. So

that as long as this margin is smaller

than this, this will take precedence.

And it's only when this one becomes

larger, for example, 25, that it will

kick in. So let's take it back to 15.

And to make things even worse, there's

actually scenarios where this doesn't

happen. However, digging into that is

outside of the scope of this lecture. I

just want you to be aware of it because

if you're suddenly in a situation where

your margins don't seem to add up, it is

probably because of so-called collapsing

margins. Okay, with that, let's move on.

Okay, we're back at our Google project.

I want to give you a quick challenge. I

want you to add some space between the

logo and the search field because as you

can see here, there's some spacing in

between the elements in our design.

However, in our project now, they are

crammed together. There are two ways you

can do this using margins and I want you

to think about which two ways that is

and choose one of them. Go ahead and do

this right now.

Okay, hopefully that went well. Let's do

it. So, you can either add a margin

bottom to the logo or you can add a

margin top to the search field. I'm

going to go with adding margin bottom to

the logo as I think either way is as

good as the other at this stage. Margin

bottom. And how much do we want to add?

Well, let's try 20 px. And yeah, as you

can see, we've got some spacing. The

bottom of the G is not touching the top

of the input field. And if we compare

that to the example, I think it looks

more or less the same. So, great job.

Let's move on.

Okay. Now you are going to learn about

centering elements in CSS and that is a

scary topic for a lot of developers. So

scary that this stack overflow question

about how to horizontally center an

element has been viewed 4.5 million

times. So if you think this is a little

bit confusing, you are in very good

company. So don't worry about it. So

with that in mind, let's move over to

our example. You are going to center

this dinosaur poo. As you can see in the

CSS, it has just one property set at

this point which is a width of 200

pixels. That is because the image is so

wide originally that if I don't set that

width, it'll just take up more space

than we have available. And setting the

width of it is actually an important

thing in order to center it because

there are three things that need to be

in place when we are to center elements

with the technique you are about to

learn aka centering with margins. And

these three components are first the

element needs to be display blocked

because how is an element supposed to

center itself if it doesn't command full

control over all the horizontal space.

If it's display inline and allows other

elements to stack themselves besides the

element, well then it won't be able to

center itself because that space now is

busy with other things. So in order to

center this poo, it needs to control all

the horizontal space.

So it needs this

block like that. Now that didn't change

anything, but under the hood, the poo

now controls the full horizontal space.

Okay, the second part is that it must

have a width

and that is what we've done here already

because how is this item supposed to be

centered inside the browser if it is

wider than the browser itself? That's

often what happens with either large

elements or with some HTML elements who

just naturally actually expand to take

up all the available space in the block.

So we have to make sure that our element

has a width. And finally we set the

margin on the left hand side and the

right hand side to the value auto. Let's

just do that. Margin left auto. Oh wow.

Now it pushed the pool all the way to

the right hand side because auto here

means take up all the available space.

And since this is a block element, the

available space is all the space that's

left after the pooh has taken up its 200

pixels. So it just ate up all of the

space and turned it into margin.

However, at this point, margin right

enters the party. Margin right and says

I want the available space as well. And

at that point, the margin left and

margin right goes into discussion and

decides, well, actually, since there are

two of us here pushing on each of the

side of the element, trying to get all

of the available white space, let's just

divide it evenly amongst both of us. And

the result, well, it is that the item is

centered. So, that was a long

explanation of centering with margins.

If you feel confused, don't worry about

it right now. All you need to do is

remember these three conditions and just

be aware of the 4.5 million other

developers who are in or have been in

the same boat as you. Let's move on to

the next scrim.

Okay, we are back at our Google project.

Now your challenge is to center the logo

and the search field using the technique

you just learned. So go ahead and give

that a shot right now and then I will of

course show you the solution afterwards

as well.

Okay, as you hopefully remembered, the

way to center an element which is

display block and has a width is by

adding margin left auto and margin right

auto. So let's do that. Margin

left auto. And as you can see, that

pushes the logo all the way to the right

hand side because the margin left is set

to auto and it takes up as much space as

it can. We do the same thing with the

right hand side. Do margin right auto.

Then the right hand side starts pushing

back again. And when they're both taking

up equally as much space, the margin

left and margin right kind of decides,

yeah, let's not argue anymore. Now we

have a nice balance. And woo, lo and

behold, our element is centered. So now

what we can do is be super lazy and copy

that code and paste it in down here. And

boom, our input field is centered as

well. And our project is starting to

look a little bit like our finished

design. So this is super cool. Let's

just keep up the pace and move on.

we need to take a little step back and

learn a new CSS concept which is the

close relative of margins called

padding. And we're of course going to

learn that through the lens of an

example. So here I have just a simple

div which contains a little bit of text

or specifically the two first sentences

in the white paper behind Bitcoin. And

let's say we want to turn this into a

nice looking card that people can read.

If so, we'd probably create a class call

it card. Then of course in the style

CSS, we'd select that card and apply the

styling. As for now, it just has one

property set, which is the color that

we've set to a shade of black that isn't

pure black, but a little bit softer, so

to speak. That is because by default,

the browser uses pure black as the text

color and pure white as the background

color. And as a rule of thumb, you never

want to have pure black on pure white.

That's not a pleasant experience for the

eyes. So instead, we went for this. But

that was a digression. Let's move on

with turning this into a nicel looking

card. So a card needs a background

color. So let's just do background light

gray for example, like that. And we also

don't want our card to be full width

because as you remember divs are block

by default and take up the full width if

you don't specify any width on it. So

we're going to do width for example 300

pixels like that. And then we also want

some space above the card. That is of

course margin top. Let's push it 50

pixels down from the top. And finally it

should be centered. So, let's do margin

left, auto, and margin right like that.

Okay. So, now we have something that

looks at least a little bit like a card.

But there's one problem here. You can

see the text is crammed all the way into

the edges of the div, which doesn't look

particularly good. And that is where

padding comes into play. So now I'm just

going to apply the padding by doing

padding and for example 20 pixels like

that. And as you can see, that created a

little bit of space. Basically, some

breathing room in between the text and

the edge of our div container here. And

if I do 50, you can see it's even more

breathing room. So, where's margin adds

space on the outside of our div, the

card which we've selected here, padding

will add space on the inside in between

the content and the edges of the

container or the div. So margin kind of

lives up here and down here if we are to

visualize this in our HTML whereas

padding lives on the inside of our

element that is here and here.

And now you might wonder well why did I

just write padding whereas for margin

we're specifying each of the sides. And

well you can do exactly that on padding

as well. this padding 20 pixels right

here is the exact same thing as writing

the following padding top 20, bottom 20,

left 20, and right 20. So with these

four lines, we can actually delete this

one up here. And then we have the same

convention as we're using with margins.

It's just that you can use padding 20

pixels like that if all of the values

are the same. It's basically a shortand.

And now that we have all of them written

out, we can play around a little bit

with it. perhaps add a 100 pixels on the

left hand side looks really weird and

100 pixels on the top as well. And

suddenly our card does not look very

good. But let's get it back. And now I

want to give you a challenge. I want you

to add padding to make our card look

like the provided design. And the

provided design is right here. You can

see it's a completely broken card as

we've been ruthless about our padding.

And I've actually removed all of the

padding rules from the CSS as I want you

to build some muscle memory writing

padding. So go ahead and make this card

look like it does in the slide. And then

return back to me once you've done it.

Okay, hopefully that went well. If not,

no worries. Let's do it together. As you

can see here, it's completely crammed

into the bottom left corner, which means

that it doesn't have any padding on the

left hand side or any padding on the

bottom, but a ton of padding on the top

and a ton of padding on the right. So,

I'm just going to do padding top 100

pixels, something like that. Yeah, seems

pretty much what we have in the design

as well. And then do the same padding

right 100 pixels like that. And to me

that looks actually pretty much like our

design. I don't need to write padding

bottom or padding left now. Though I

could do it. I could do padding bottom

zero pixels or just zero and padding

left zero as well. Though that didn't

change anything. So it's actually not

needed because by default the padding of

a div is zero. So however you solved

this, great job. Let's move on.

So now you've learned about controlling

the space on the outside of the element

with the margin and on the inside of the

element with the padding. But wouldn't

it be nice if we could also control the

border in between the margin and the

padding? And it turns out we can through

you guessed it the border property cuz

if I write border here and then specify

for example two pixels thickness solid

in shape and then color red you can see

then we get a border which is on the

outside of the padding but on the inside

of the margin. And if we change any of

these three values here it'll update

accordingly. So let's try 8 pixels width

instead. You can see it's much thicker

now. Instead of solid, we can do a like

that. Pretty weird. And instead of red,

we can do, for example, fff white in

hexodimal or just write white like that

or just blue so it's a little bit

clearer. Now, there are many types of

borders, but in 99.9% of the cases, you

want to use solid like that. And also,

very often, you'd want to soften up

these corners.

And you can do that with the border

radius property. And here you specify a

pixel value, for example, 30 pixels. And

boom, there you can see we have this

much softer corners. If we crank this up

to 100 or a,000, it stops at some point

because then the edges have simply

turned into half circles. So at some

point, there's no use going any higher.

Now, this looks pretty bad. So, what I

want you to do now is fix it up so that

it looks like this. And I'm not going to

give you any of the values I've used

here. Just a little hint. I took an

already existing color in our box and

used it for the border. That's a common

web design trick to reuse colors and not

have too many different colors. So, if

you think this is pure black, mm- you

are wrong. So, go ahead and change the

values of the border and border radius

so that our example here matches the

design. I've provided in the slide. Good

luck.

Okay. Hopefully that went well. So,

let's start with the border. 8 pixels

here. Looks a bit too thick for me. So,