Comprehensive Full-Stack Developer Course Overview & Learning Strategy

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