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.