Hi everyone and welcome to this tutorial. Now, in this session I will explain to you how Webflow works.

Now, before we start, please make sure to create an account using your Yoobee student ID number or email address and then create your Webflow account.

I have currently open Web Flow on my right side panel, and I have the Yoobee online platform on my left side with the instructions of the activity.

Please make sure to download the assets, which is the Webflow dot zip file and unzip the folder.

Now, inside you will find a folder named "Rollei" R-O-L-L-E-I.

And that's the one that we're going to be using. Now, it says here that you need to make sure you create your first blank site template.

So what I'm going to do is, I'm going to click New Site, and it's going to ask us if we want a blank site or a template.

So I'm going to click blank site. (typing) Rollei website. And I'm going to hit Create.

Now the interface is divided into what will now be familiar areas.

So as you notice on our left side, this is our navigation toolbar.

And the right side will be more editing stuff, properties that we're going to be used.

And the interface looks familiar as this is how the interface of Adobe softwares are.

Number three, it says here we need to click the add element icon in the toolbar, add element toolbar all the way on top

in here. Scroll down to components and drag the navbar component onto the canvas.

So what I'm going to do is I'm just going to type nav.

So it's go straight here and I'm going to click and drag inside.

So now we have our navbar on top.

Now in our navbar we have where the logo would be sitting.

And then we have our Home, About and Contact.

So number four it says here, selecting the navigator panel from the toolbar and show you how the elements are ordered and nested on the page.

So we have the navigator.

In here the navigator will be more like what we call us layers inside our Photoshop or Illustrator, because this will be the navbar on top.

And if you open the navbar we have the container.

We have our menus in here. So all of the links will be in here so we can close that off. There we go.

So we can only see one folder more like a folder which has the navbar. Now number five.

Notice how if you select the menu button, nothing appears to be selected on the web page, so try switching the view to tablet or to mobile.

So let's try that. So we have different devices in here.

So we have the tablet we have on the phone.

And notice that the navigation is changing as well.

To a burger menu.

So that only means that this website, while we are creating this website, this is also compatible to these devices on top.

So let's add a section and drag that all the way here in the middle.

There you go. So we now have a section. So we have the Plus(+) icon in here.

And then we go to layouts. And I'm going to type in Footer.

So I'm going to choose a footer in here... I'm going to choose the first one.

So I'm going to click and I'm going to drag.

This is what you need to see. We have the navbar.

We have the section. We have the footer. Notice that there's no arrow beside the section because there's still nothing there.

But once we add some stuff inside the section, then we will have the drop down as well.

Okay. Now let's continue on. Now it says here in number 11 to 'Add an element, drag a container inside the section.'

So we need to add a container inside the section.

A container is another type of div or divider that will keep content centred on the page or within its parent element.

So let us add. So we go to Add Plus(+) and let's go to Elements.

And let's add Container. There we go.

So the container needs to be inside the section.

So for us to see if we're correct, make sure you hover inside the navigator and check what's inside.

So we have this section in here. And if we go inside we need to have the container.

So that's good. Now next one.

Drag a column element into the container.

So inside a container select the two even columns in the column settings.

So what I'm going to do, let's go to Add, let's go to Elements. I'm going to click in here - Column. So we have the columns.

I am going to click and drag and making sure it's inside the container.

So we have Section and then we have a Container.

So I'm going to drop columns inside the container. And it's also asking me how many columns do I need?

Now we only need two. I'm just going to click so it can also change that if you want.

But for now let's use two in here because that's what the instructions said.

Select two even columns. So we're going to go to Plus(+).

And we have, Heading. And I'm going to add it inside a column.

And then we have the H1 and we have one more, another heading, inside again the column.

And this one is H2. There you go.

So we have the text (typing) The World of 35mm Photography.

And we have the other one. There you go.

And it says, drag an image element into the right hand column, so let us type in.

Image. Click and drag.

And it says upload the image.

Okay. So we have the images in the folder.

So I'm just going to click Choose image. And then let's drag the images in here.

So I have everything in here. Okay.

So what I'm going to do - Choose image. Then this one here.

There you go. We're now at number 16: Drag a Button element to the left-hand column below the text.

So we're going to do is click Plus(+), Element, Button. 

So I'm going to use this button in here because we need to add text, the words Shop Now. Click. 

And then...trying to see... not here...(dragging element)

Look at that. There's like a line happening in there. So not on top, not in the middle...more at the bottom, inside of the column one.

So release. There we go. Exactly on where we want it to be.

Then type in Shop Now. Next one is... it is asking me to create another section.

Don't forget, inside in here, our navigator.

If we... check this out.

So don't forget, we have the navbar on top. This one's the navbar.

We have the section. This is the section. And we have the footer.

This footer. Right? Now, if it's asking us to create another section, then it means that it should be outside - it will be a new one, not inside the section that we've already created.

So you need to make sure you add one more section. So what I'm going to do is I'm going to click Plus(+) Elements.

Section. And click drag.

Not not inside our existing existing section, but it should be its separate own.

So I'm gonna see if I'll be able to do it properly here.

Now this one's changing too. I'm just gonna...

Actually, I'm going to put it here so I can see it here and I'm just going to drag it.

I'm going to drag it. There you go. So it's its own section.

Next one. Add a Container. Add three columns.

So every time. So. Don't forget the section is just it's folder.

Think about it. It's just a folder. Now there's nothing there.

It's empty. Now you need to make sure you add a container.

The container holds a lot of...remember, everything will be in the middle.

If you have a container, if it's just a section, and then you add stuff in there or everything goes to the left.

Like how you type in and everything is in a lot of different spaces.

So always put a container because the container holds everything in the middle.

So I'm going to add a container. I'm going to put it inside a section, so double checking if they're correct.

So we have the section. This is the new one that we added just now.

And there's a Container. Then we will add our column.

Click and then drag it in here. And then we need to have three.

So same thing. We will need to have... it says we need to have a text an H3 for the heading.

Notice that it's not inside the three columns?

It has its own on top.

So that's okay. We're going to go to heading.

So what I'm going to do is I'm going to click heading.

Now I'm going to make sure it's outside of the...

It's outside of the column. And then it is H3.

Our Users, and then let's add the image inside.

So we have Plus(+)(+), Image, going to click and drag it here inside the column.

And then I'm going to click Choose image.

Since there's nothing there. I'm going to go to our folder and look for the files.

Users. And don't forget that inside the Users there is a square folder in there.

This is what we need the square. This is not what we need.

The square one is what we need. The square one.

It has been cropped already. I'm going to drag that and put that here.

Now I'm going to try and do it for one.

So we have the image. Then choose image.

Going to click this. There you go.

It's now there. Just good. Then we need to have a blockquote.

Plus(+), element. Blockquote. Click and then drag.

And then we have the button which is View in Gallery.

So we know what the button looks like now.

Have the button click and drag.

There you go. View. (typing)

In. Gallery. (typing)

There you go. So imagine that everything here is the same as this one.

I'm not going to do it. It's okay as long as you know how to do it.

That's all good. Now, at the bottom, this is how the structure should look like.

So please make sure to double check the structure.

So if I uncollapsed everything or collapse everything, notice that the navbar is on top, the section, it's this one in here and we have this section which is highlighting this one inside.

If I open it, it should be the container and then the heading and then the column.

And then we have the column one which contains the image the blockquote.

Then we have the button. The button, I'm going to click and drag.

It should be... it should be in here.

There you go. So I'm just rearranging them. So the buttons should be inside here.

So I can also do this. Yeah.

Now, inside our navbar. If you've noticed, it's just an empty container with the link.

So we can't actually add an image in there because there is no...

There's nothing. It's just a container. So I am going to click Plus(+).

Element. And I'm going to add. Add image, click and drag it here inside.

And then I'm going to choose an image. And I'm going to choose the logo that we have.

But please take note that the logo that is in here, which is this first one dot SVG. If we open it...it actually has a white background at the back.

If you don't want that white background. So let's see.

What I'm trying to say in here. Choose image.

And I'm going to choose this one. Not as that.

Gonna change the height to 70.

There is a white background at the back, and if you don't want to do that, if you want a transparent background,

all you need to do is edit the logo and take out the white background in illustrator.

And that's what I did for mine. So I'm going to replace the image, click and drag in here.

And we have the dot SVG with a transparent background or more like no background at the back.

That's what I'm going to use. There you go. That's why there is no white colour at the back. So we don't use them both anymore.

What we use is the word component.

So use the component panel to create a symbol for the navbar.

So what it only means that we want to reuse our navbar.

And for us to reuse it we're going to create or make it as a component.

The component. So this one in here. So what we're going to do is I am going to select our navbar...by selecting it properly here. So we have the navbar.

And I'm going to add that component and add create a component.

So I'm going to put it as navbar. Create.

So this has been created as a component which I can reuse next time or more like for the next page.

Now this one would be footer and I'm going to add it as a component which is footer.

I'm going to hit Create. And now I have my footer as a component.

I'm going to go back to my navigator. There you go. So if you notice, you only see this.

It's because you are inside the footer. What I'm going to do is click this arrow, then you're outside.

Create a new page using the new page.

So we're going to go inside our pages.

And we currently have the Home page in here.

So all we have to do is go all the way up. Create a new page.

The page name would be Contact. And then hit Create.

Now our Contact page. And if we double check inside our page area or our page icon in here we have our Home page and we have our Contact page.

Now open the Contact page for editing and drag the header and the footer that we created a while ago as a component.

So as a symbol or as a component. Now we go to our component panel, the start component panel.

And now we have added the navbar in there, in our, in our page.

There you go. We have our navbar there. And we need to also add our footer.

So we have the navbar. We have our footer in here.

Now for our best practice, please don't forget to add a Section first because that's what we have been doing in our first page.

So let's go to our add element and I'm going to add my section. Click and drag.

It should be in between. Navbar. Section. Footer. 

Now inside our section we need to have our container. Click and drag.

That's a good section. The container is inside our section and I'm going to add our form now, Contact form.

What I'm going to do is I'm going to Add element, Element.

And I'm just going to put form because it's now renamed as form block and not contact form, called contact form anymore.

Form block click drag inside a container.

Now we have the form inside the container.

And the container is inside the section. And that's how it is supposed to be.

That's good. Now we need to edit the nav links inside our navbar so that, once we click it, it goes to the appropriate pages.

So what we're going to do is I'm going to click this first.

So selecting the navbar and then opening or clicking this icon in here beside it.

Now we are inside our instance, or inside our component.

Now it only means that anything I change inside the instance will be changed all throughout the different pages as well, which is a good.

So we don't need to change this for our Home page.

So what I'm going to do is I'm going to select our home, clicking this button here.

And then I'm going to make sure the page, this page here is linked to Home. That's good. Now I'm going to go to contact.

Click this button here. Making sure that the contact is... So by default it's going to be this because it's going to be a link by default.

So make sure you click the page because it's in a page.

And then you choose a page and then you hit Contact.

Now, if you have your phone number in here, you can click this.

Then you add your phone number. Now if you have your email address, click this email address in here and then add your email.

So one click it goes straight to your email. Okay so but for now it's going to be a page.

And then it's going to be the Contact page. You can see it's working because there's a blue colour in here so it only means that it is linked.

So next one. After linking our navs, you'll need to change the type to Page in the nav link setting panel, which is good.

We have changed that because the free version of the flow only allows two pages.

We'll need to add the rest of our content in either the pages we've already created.

Try creating a gallery and product section by adding the appropriate elements from the Add Elements panel.

So because we can only create two pages in here, I'm going to add our gallery inside the Contact page.

Why not. You can do it. You can do it inside the Home page if you want.

So what I'm going to do is I'm going to click Add.

And I'm going to type in, Gallery.

So we have three different gallery options to choose from.

I'm just going to click the first one and I'm going to drag it here. But before that, let me just, quickly.

Oh, is it working? Oh, there you go. That's good.

You have the gallery in here. Okay, now let's go for styling.

Styling in Webflow allows you to edit and apply properties to elements using CSS selectors.

Editing the element style will create a new selector.

Now select the first image in Our User section.

So I am going to go back inside our pages.

Go inside Home. Inside our Home we have our first image in here. Remember that? Actually, let me finish off this.

I'm going to add an image because we will be needing one more for this tutorial. Click and then drag inside a column and I'm going to choose an image.

I'm going to choose the sky. There you go.

For demo tutorial purposes, I need to add one more here. Okay, so it says here 'select the first image in Our User section'.

So I am selecting the first image in here which is just a girl.

Scroll down to the Border section in the Properties panel.

So we have the Properties panel on the right side. I'm going to scroll all the way down.

And then we have the borders in here. Now, I want you to notice that in the style selector, it's empty.

There's nothing there. And if I try to adjust the radius border, you will find a name in here.

So notice once I'm changing the border we have a name now in here, which is called image style selector image.

So anything I adjust in here, it will be, there will be a name. So this name is what we call as our class.

This class is more like the one that holds all the edits in here, all the styles in here.

I can use that word or that class and pass it on to this guy.

This guy doesn't have anything. This one has the word image, right?

Because we have edited it. Now it says in here that let's rename this to 'userimg'.

So I'm going to do that too because we're following the tutorial. User.

I.M.G. image. Press enter. It's all good.

Now if I go to this picture image I'm just going to type in userimg because we're doing exactly the same thing, the same style.

When you click that. And it changes automatically.

So it's more like consistency. You're transferring or copying the style of this photo to the other by using the word class.

Hopefully you understand that one. Style selector called class.

Now select the second image and apply the new selector by starting to type its name.

So we have done that. Repeat the third image. So you do that on your own website because I don't have any image in here. 

Now, the next one is select the gallery section and change its background colour.

Wherever your gallery section is, you look for it. My gallery section is inside contact, so I'm going to select the gallery section.

And on the right side I'm going to hover all the way at the bottom.

And I'm going to change the colour to anything you want.

So it does say in here that change it to a light colour.

Just going to change it to a light blue.

It's all up to you. So it's your gallery. 

Now, it also says in here, select. So that's done.

Change it to the light grey in a background section in the styles panel.

So it's just showing you that it's possible that you can change a background colour

and then select the 'section that contains the Our Users and apply ten px bottom margin.'

So it's going back to our user which is in the Home page.

This is our user section. So I'm going to select the entire section of the Our User outside. And then it says here to add a bottom margin because it's quite tight at the bottom.

Not just this one in here. Our button for the View in Gallery is all the way on that line for the footer.

So let's have some space at the bottom.

So what I'm going to do is I'm going to select the entire section. I'm going to go to padding.

And it mentions an amount. It says ten px.

So I'm going to put Ten.

There you go. If you want more, you can. Notice that it's working.

So if ten is not enough, you can always adjust if you want to. Try to make it look like this.

So what it's saying. Uh huh. What we're going to do is because we have an image here that won't work, right?

So what I'm going to do is I'm going to delete that image. And I'm going to select the entire container for the section.

And scroll all the way at the bottom. We have Background.

I'm going to click this Plus(+). Going to look for that image. Choose image. This one in here, Right?

Does it look the same? Doesn't look the same. So we're going to put the position.

And, oh, let's click cover.

Oh, there you go. Now we can see something. Cover.

And notice that it's quite tight. Don't forget, we can use the padding.

So what I'm going to do is go outside and look for the padding.

In here. You can do that. Depending on how much I think this one is okay.

And then you can always adjust the information in here.

Changing the colour of our text. Oh, and also you can also change the colour of our text inside of Typography.

We have the colour in here. Make that white. Heading.

Make that white. And that is it for our styling.

Now our partially completed version of the project is here.

You can have a look on how it will look like. But you know what?

It's all up to you and how you can rearrange your website.

We have your... we know how to change the background.

We know how to add the logo, changing the typeface, the font style, the weight, the colour and all of that.

Adding an image at the back, making it rounded for the images.

And also making sure that the link is working. And that is it for this tutorial.

Enjoy! You can always change your own version of this.

Definitely do that. Share that to our forums and enjoy Webflow.

Bye everyone! Enjoy Webflow.

And also, don't forget that once you are done with our Webflow, you can always check the codes on here on the right side corner.

Export code. And inside the export code, inside the export code, you will find the HTML codes.

And we have the CSS codes. And this code is the one that you will need for our assessment.

So in the assessment it will ask you to show the HTML and CSS codes of your website which is in the Webflow, and then explain a tag in there, two or more tags in there inside the HTML and in the CSS.

So good luck and enjoy Webflow.