Webflow For Beginners : Creating Your First Website In Webflow | Faisal Khokhar | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Webflow For Beginners : Creating Your First Website In Webflow

teacher avatar Faisal Khokhar

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

22 Lessons (42m)
    • 1. Introduction

      1:04
    • 2. Overview Of Designer Interface

      3:23
    • 3. Hero Section : Adding Elements

      2:52
    • 4. Hero Section : Uploading assets

      1:30
    • 5. Hero Section Aligning Elements and Spacing

      1:31
    • 6. Hero Section : Changing Font style and elements size

      1:27
    • 7. Hero Section : Editing content

      0:49
    • 8. Hero Section : Editing Button and learning Classes

      2:17
    • 9. Hero Section : Changing Background color and size

      1:31
    • 10. Adding a navbar

      1:02
    • 11. Navbar : Brand logo

      1:47
    • 12. Navbar : Edit Navlinks size

      1:45
    • 13. Grid Layout

      2:53
    • 14. Cards Section

      2:05
    • 15. Cards Section : Upload Images and Feature Section

      2:25
    • 16. Contact Form and Footer

      1:41
    • 17. Create Page and Symbols

      2:37
    • 18. Adding navlink

      0:57
    • 19. Hover Effect for Images and button

      3:11
    • 20. Breakpoints

      3:01
    • 21. Breakpoints Editing

      1:21
    • 22. Project Announcement and Final Words

      0:43
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

21

Students

--

Projects

About This Class

Webflow is an innovative and brilliant tool for web designers. It allows you to build custom websites visually.  

In this class we will go through all the features of Webflow I will take you through all the different elements you'll be using. Then we cover how to correctly structure websites using div blocks, containers, sections, grids and Flexbox.

By using all the elements and layouts we will learn how we can create amazing and responsive websites .

And in the class project you will create a landing page of a website using all the features of webflow that you learned from this class

So if you're ready, we'll get you started learning most of what Webflow has to offer in order to create beautiful responsive websites!

Meet Your Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello and welcome to my course in which I'm going to teach you step-by-step how you can create and design a website on Webflow. Webflow is an amazing tool that helps you to design responsive website from scratch, like any program designer world. But without writing any code on Webflow, you design everything visually by drag and drop. And Webflow writes the code for you in the background. With Webflow, you can build rich animations and interactions, something that no other platform has. We will go through a process in which you will learn how you can create a website from scratch. And we will learn all the features available on Webflow. After watching this course, you will be able to create a beautiful website without any coding and with very little effort. So stay tune in next video, we're going to get started with this amazing tool to start creating our website. 2. Overview Of Designer Interface: Hi, and welcome to the first lecture of our Webflow class. In this lecture, we're going to start creating our website on Webflow. The first thing that we're going to do is create a Webflow account. I have already created an account. So I'm going to click on continue with a male and I'll choose my e-mail address. You can also choose any of your e-mail address type password, and you'll Webflow account will be created after login into your web flow account. The next thing is open the dashboard of your web flow. From here, you can start creating a new project by clicking on New project. As you can see here, so many templates are available. You can use these templates to create your website. Some of them are free and some are paid. So as you know that we are going to learn that flow from basics. So that's why we're going to start with a blank side. Now we're going to give a name to our project. And then we will click Create site. Now this is how our designer interface of that flow looks like. So I'm going to give you a brief overview of our designer interface. From here, you can go back to your dashboard or open project settings or editor mode. From here, you can see how your website looks like. And these are the breakpoints. By clicking on these, you can check how your website is looking like on the front sizes like tablets or mobile or desktop. From here, you can add any element or layout to your website. For example, we click here and I'm going to add a button inside my body. And here on the right side, we can edit any element that is inside our body. So the burden is selected. For example, I want to change the color of my burden so I can change the color. From here. We can do all the editing in our website from this side that we are going to discuss later. This is the navigator from here, we can see the structure of our website. From here, we can create new pages or we can see the pages that are already created. Cms section is used for e-commerce website that we're not going to discuss in this course. From here, we can add assets like pictures and videos inside our website. And this is the settings of our Webflow interface. Now in next lecture, we will start creating our workflow website inside this designer interface. 3. Hero Section : Adding Elements: We will start creating our website. The first thing that we will do is click on Add Element and click on section and drop it inside our body. After adding this section, we will again click on Add Element and select our container. And then we will drop the container inside our section. After adding a container, we will again click on Add Element and select a column and drop it inside our container. From here we can change the size of our column. But at the moment we will go with the default size. Now we will add a heading inside our column 1 by again clicking on Add Element and we will select hurting and drop it inside our column one. Then after adding the heading, we will again click on Add Element and select a paragraph and drop it under our herding in column 1. And now from navigation, we can see in the structure of our website. The first thing in our website is our body. Inside the body you can see we added a section, and inside this section there is a container. And inside the container, we added a column. In column one, we added a heading and a paragraph. And the column do is empty at the moment. But there is one thing to understand why we don't directly add heading or column or paragraph inside our body. Instead, we use sections and containers. The reason for that is that Webflow works in a box model. It's like a box. Inside a box. Inside her body, there is a section which is a box. And inside this section there's a container and there is a column. The solar light boxes, boxes inside boxes. This is the way to work in Webflow. This box model helps us to give the structure of our website simple and easy. Now we will add a burden inside our body, entire column under that paragraph. From Navigator, we can see if we move the burden above the paragraph. It's showing above the paragraph. If we move the burden above the heading, it is now showing up after hurting, but we will keep it under the paragraph. 4. Hero Section : Uploading assets: Now we will add our image inside our website. To add the images or videos, we have to applaud them inside our assets folder. So we'll click on assets and before uploading, we will create a folder with name my images. In this folder we're going to upload all the images that we're going to use in this website. So in this folder we're going to upload. These are some of the images that I will use. This website. We can upload more images if we want to use them later. As you can see, the images are uploaded in our assets folder. Now in column 2, we will add image element. Now, we can, we will click on Choose image. And then we will click on the image that we want to use in our hero section. This is the image that I will select. Now you can see that we have two columns. In the first column we have heading, paragraph and a burden. And in second column we have the image. 5. Hero Section Aligning Elements and Spacing : Now the next thing that we want to do is we want to align the elements that is heading and paragraph and picture inside our columns in center. So to do that, we will select columns in our body. And then we will go to layout. We will go to flex layout. And then we will align it to centre. So you can see the heading and paragraph is align center. So now we will learn how we can use spacing function inside our website. So for example, we have to increase the space between these elements inside our column and the top. To do that, we will select our container. And we'll go to Spacing and increase the margin between our container and the top. The margin between the top and our container is increased. In the same way if we want to increase the space between this paragraph and the heading, we will simply select the paragraph and increase the margin from top and bottom. And this way you can increase or decrease the margin between any element in our website. 6. Hero Section : Changing Font style and elements size: Now the next thing that we want to do is to change the font style of our heading, paragraph and burden. We can do it separately by selecting a paragraph here and going to typography and settings if we want to change the whole body formed. So did any texts we add in our website uses the same font. To do red. We will select our body and then go to typography and change the font style from there. So you can see the font style of entire body is changed. Now any paragraph 4 heading or any texts we will add will use the same font as this one. Now if we want to change the size or color of our heading or paragraph or any element. To do red, we will select the element that is heading and we want to increase the size of its topography. We will simply increase it from here. In the same way we can increase the size of our paragraph from here. Now the space I've given between the heading and paragraph I will decrease a little bit because it doesn't look so nice. To do that, I will select the paragraph and those margin I've given from the top, I will decrease it. So now it looks better. I think. 7. Hero Section : Editing content : Now we want to change the content of our heading paragraph and burden. To do that, I will first change the content of my heading by simply double-clicking and removing it. And I'll paste the text I've already copied. You can write it with your keyboard. In the same Vi text off your paragraph, double-click on paragraph and copy paste paragraph that I want I want it to be written. We will do seem that the burden to change the button text, we will double-click on the button and write the text that we want, which is get started. 8. Hero Section : Editing Button and learning Classes : Now we will update our burden and we will also learn the concept of losses. So to edit the button, we will click on burden and from right side we will go to settings. The first thing that we want to do is to change the color of our button. So from here, we will just change it, make it a little darker. After that, we will increase the radius of our burden a little bit. Now the next thing I want to do is to increase the size of the opportunity to do that, I will go to Size and I will increase the width of the burden. And also the height. Height is increased. Now the next thing I want is to align center their texts that is in our button. To do that I will go to Layout and flex layout, align center, and justify center. Now our text is in the center. Now we also want to increase the size of our text. To do that, we will scroll down to typography. And from here we will increase the size of our text. Now, it looks better. Now after doing any changing in the setting of burden, you can see a class is already created with name button too. We can also rename that class and write btn. So a class is created with the name btn, which is aligned to this burden. Now the use of this class is whenever we add any button inside our website. And we want to make the same changes for debt burden. Then instead of doing it manually, we will select a new button. We will align the class of name VT, and we'll, we've already created and see all the settings we did with beauty and class burden is applied to a new boredom. And we didn't have to change anything manually. In the same way, any burden we add in our website and we align BTN class to debt burden. The same settings will apply to that burden. In the same way we can use these clauses in any of our element. 9. Hero Section : Changing Background color and size : Now the next thing that we're going to do is we're going to Azure our hero section. We will increase the size and change the color, background color of our hero section. To do that, we will select our section. So the first thing that we will do is to increase the size of it. So from here, we will increase its height. We will increase it to 80 VH would mean, which means it will cover 80 percent off the screen. Now our hero section is covering 80% of the screen. Now the next thing is we will change the background color of our hero section. From here we can change it to any solid color. But to make it look better, we will add a gradient. From here you can see we can add any background image for a hero section or a gradient. I'm not adding any image at the moment. I will simply add a gradient from here and select a nice color for it. I guess it will look good in blue, blue shirt. As you can see, the background color of our hero section is changed. Blue gradient. And it's looking nice now I guess. 10. Adding a navbar: Now the next thing that we're going to do is to add a nav bar above our section. To do that, we will click on Add Element. And from elements, we will look for navbar. After selecting a navbar and we will drag and drop it above our section. After dropping it from Navigator, we will see that if our navbar is above our section, it should be inside our body. We're above our section. Now you can see in the nav bar is above this section. Here you are seeing the gap between our section and our nav bar. To change that gap, we will select container. We have given a margin to the container that we will finish it. Now you can see the gap between our container and our nav bar is not there anymore. 11. Navbar : Brand logo: Now we want to change the color of our nav bar, same as the color of our hero section. For that, we will select the nav bar and go to the settings. But before that, we have to check that which color is all of our section gradient. From here we will copy the color of our section gradient. Now we will copy that color and select our nav bar. And from settings background, we will be is the color of our section gradient in our nav bar. Now the color of navbar and our section is same. Next thing we'd want to change is brand logo of our nav bar. To do that, we will go to our assets. We will pick this logo and drop it inside our brand, brand element. And then we can decrease its size according to our website. Now if we see the structure of our nav bar is also using the same box model. If we go to navigator NC insider nav bar, there is a container, and inside the container we have a brand and a nav menu. So the navbar data is already available in Webflow, also using the same box model. Now, I think I will decrease the size of my brand logo a little bit more. 12. Navbar : Edit Navlinks size : The next thing that I will changes the size of these nav links. To do that I will select the nav link and I will go to typography. And from typo graphy, I will increase the size of S nav link. And after increasing the size of our class is already created the name nav link. I will align their class to the rest of nav links. Soldered same changes applied to the other nav links. As you can see, the size of other nav links is also changed. Now there is not much editing. We need. One thing that I can do is if we see the structure of these Nav Menu, the nav links are inside this nav menu. And if we see the brand logo and nav menu is not equally aligned for. So for that I will increase the margin from gulp of this Nav Menu. And one more thing I will increase is the margin of container from the top. So the container of this nav bar, the margin is increased. Now it looks better. I will decrease the margin of nav menu to align it according to our brand logo. Now, it looks better, it looks fine. 13. Grid Layout: Now the next thing that we're going to do is add a grid layout inside your website. To add that. The first thing is we will add a new section under this section. And then add our container in a new section. And then inside a container we will drop a grid layout. Now this is our grid layout. We can increase or decrease the columns from here. We want just one row, so we will delete one row. And we want three columns for this grid. So we will add another column in this grid. Now our grid layout looks like this. Now the next thing is we will add a heading in this grid layout. So we will drag and drop a heading inside our grid layout. I will give the same class that I've given to my heading 1, our first heading, to make the size same. So I will simply align heading class to this heading. The size of this heading is same as our previous one. The next thing is we want to align it to centre, so we'll go to flex layout and justify center. Now I want to add images in our grid layout sort for deck, I will go to assets. These are the brands that are company work with. So I will simply drag and drop those images inside our grids. So now our new section look like this. As you can see, the gap between our heading and our images are, is these are overlapping each other. So for that I will select heading and increase the margin from boredom. Now it looks better. I think I've, I will increase it a little bit more. Now I will add dark text of my heading, which is our client. These are the outlines with which our company work with. So now our website looks like this. First there is a hero section above their days, a nav bar, and then there is a grid. 14. Cards Section: So as you've learned in the now dead by very simple and easy procedures, you can start creating your website in Webflow by simply adding any elements from the left side and from the right side you can edit the content of your website. There's so many functions that you can use In your website to edit from this right side. Another very good function of the flow is that instead of elements, you can add layout for your website. For example, you can add any of layouts from here in your website. We created a hero section by ourself, but you can use hero section already created by a workflow by simply dragging and dropping. There are so many other like main content features, section, guards section, so many layers that are already available that you just have to drag and drop it inside your website. I'm using card section now. And I will select guards section and drop it under our grid layout section. Now as you can see that already ready made called guard section is available. I can delete any unnecessary paragraph or I can edit the content of these guards section. And by same procedures, I will increase the height of the paragraph. I can change the font style or anything. So you can see by using these layouts weekend, it makes us so easy to create these sections. We will edit the text of our heading of cards section. These are the services that our agency provide. I will add some new images in our asserts. So for that I have to applaud them. These are the new images there. I will upload. These images I will use in card section. Images are uploaded. 15. Cards Section : Upload Images and Feature Section: And now from here, we can simply click on Choose image and add the images that we've uploaded in our guards section. One level, we are adding the images. Now it looks good. And after that we will alert the headings so far guards section. The first one is digital marketing. The first services, service that we provide. After that, the next one we will write one by one in all of these guards headings. We have development and this one is and this one is app development. In the same way we can measure the paragraphs of these images. Now we will just define all the headings in the center by clicking on them. And from Flex LEO, we will select justify center. All we can do it by aligning that the class is created. Now you can see our guards section is ready under our grid layout. So that's how you can create and edit guards section. After guards section from layout we can add other sections. For example, we will add a feature section under the guard section. In the same way we can use these layouts to add the images. Now in feature section I am uploading and another image. Now it looks good. From here we can measure the textual feature section and all the settings like we did for our other elements. 16. Contact Form and Footer: Now we will add a contact form in our website. To do that, we will go in Layout and select our contact form and drop it under our guards section. I'm sorry, features section. We will dropping dropping it under our feature section. And after there, there is the contact form. We can change the burden by giving the same class that I've used for other burdens. So you can see after aligning the same plus button is changed. Now you can see we can edit all the elements of this contact form one by one. After contact form. I'm going to add a footer in my website, which is the last thing on the beach. A footer is added. Footer brand image. We will use the same debt we've used in our nav bar. So we will choose it from our assets. Now the brand image of footer is also added. You can edit all these texts, links of order n, These copyright message. Now the footer is also added in our website. So our first page or website is ready. You can see hero section, then GridLayout of credit card section, contact form and our footer. Now we will create more pages in our website in our next video. 17. Create Page and Symbols: Now we're going to create a new page for our website. To create a new page, we will click on the speech section. And then we will click on create a new page. After clicking on create a new page, we will give our page a name which is about us. We're creating this page for our About Us section. And then we will click on Create too. Then our page will be created. So a new page with name About Us is created. Now we want to add a nav bar and a footer, same as our homepage in this page. So to do that, we will use symbols. So to use symbols, we will go back to our homepage. And we will create a new symbol for our nav bar. To create a new symbol for our nav bar, we will first have to select the nav bar. After selecting a nav bar, we will go to symbol and click on Create New Symbol and give that symbol a name, nav bar. So a symbol of navbar is created. In the same way we will create a symbol for our footer by selecting the footer and then creating a symbol for that with name footer. So a symbol of navbar and footer is created. Now we have to just go back to our About Us page where we want these symbols will go to symbol and simply drag the navbar and drop it inside our body. And again, we will drag the symbol of footer and drop it inside our body. So the symbol of navbar and footer is in our About Us page. Now we will start creating the content of our about us page by dragging a section inside our body and then our container. Then in the same way we will add our heading. And then a paragraph. In this way we can create the content for our about us page. This is the way to create new pages with same nav bar that we've created and same footer. And then we can add more content to it. 18. Adding navlink: Now the next thing that we want is that when we click on About nav link on our nav bar, it should redirect us to About Us page. To do that, we will double-click on about us nav link. And after that, we will go to its setting. In settings where we'll select type page and we'll select the page about us. By doing this, the page about us is aligned to this nav link. So then we will click nav link. It will redirect us to the page that we have created. In this way, you can give link of different pages in your website. 19. Hover Effect for Images and button: Now the next thing that we're going to learn is how we can use hover effect for our different elements in our website. First of all, we will use holder for our burden. So to do that, we will select our burden. And from here we will go to H4 state. After selecting the hosted, any changes that we do now in our burden, fill will be shown when a mouse over that element. So we will change that. We want is to change the color of our burden when we hover over this burden. So to do that, we will change the color of our burden from here. So now we can see that if we hold the mouse over this person, that color off pattern will be changed. To make more changes, we will again go to hover state. And now we want to increase the size of our burden when the mouse is over it to read, we will increase the width and height of our button and also the size of our demography. Now you can see when the mouse is on the burden, its size is also increasing. Air enters, color is also changing. Now the next thing we can also do for the pictures, we also want to use for these pictures to read. We will select the image and go to overstate. This time we want to our pictures to zoom in when we go to discrete transformations and we will increase the scale. Now you can see if we hover the mouse over these images. These images are zooming in. These all three images are using same class. That's why it is applied to all of them. But we want these pictures to zoom in a little slowly. This doesn't look very nice. The way they zoom in so far as you can see from here, the design zooming in so far. So we wanted to be a little slow. So to do that, we will select our images. And from transitions, we will select Transform. And we will increase the speed, increases their duration of our transform. So now this effect is applying very slowly. This looks nice. This looks better now. So this is how we can use whole state for our website to make transitions like. 20. Breakpoints: Now we're going to see how our website looks like on different breakpoints, which mean different on different devices like mobile phone or tablets. So to see how our website looks on bigger devices, we can add more sizes from here, bigger sizes to see how our website looks on that size. We can change or edit, add any breakpoint. The changes we make, for example, the changes that we will make on this breakpoint will be applied to all the right breakpoints, not on the left hand. This is how it works. The changes I've made, any changes that I made when I'm on this breakpoint will be applied to all the breakpoints that are on the right side, but not on the left. On this breakpoint, our website looks good. This is mostly the size of the tablet. We don't have to make any changes here to text size and everything is good. But if we go two more smaller size, now from here you can see the text size is a little bigger of our heading. So we will have to change it. And all the other content is looking good. As you can see, Webflow is very responsive automatically. It changes the size of our grid images and all our elements of that we've created. So much work to do here, just the size of our headings. So to do that, we will select our heading and we will decrease the size of its type or graphy. From right side, we will go to typography. And from here we will decrease the size of our heading. The size of our second heading is also decrease because both are using same plus. Now I think it looks good on this breakpoint, know much more changes needed. And all these changes will be applied to the right side of this predict y naught the big break points that are on the left. Now, if we go two more smaller device on this size, once again, we have to decrease the size of our heading and other things are good. So from here, we will decrease the size of our heading. Now, it's not, it looks good. On this breakpoint as well. 21. Breakpoints Editing: From here we can see how our website looks like on different breakpoint, different screen sizes. But there is one problem at this size, which mostly are famous smartphones and use the image that we have added is of very small size. On smaller sizes, it automatically removes, you can see, but at this size, it doesn't look so nice. It's very small and it doesn't make any sense of this image to be here. So we will simply click on this image and change the opacity to 0 so the image is removed. Now you can see, it looks better now. But you can see the changes we did on that breakpoint does not apply to all the breakpoints on the left. But if I change the opacity of image on this breakpoint, then it will be applied to all the breakpoints on the right. So using this method, we can adjust the sizes of our elements for different breakpoints so that our website is responsive on different screen sizes. 22. Project Announcement and Final Words: So these are some of the main features of Webflow that you can learn to get started creating your website. Obviously, there is a lot more that you can learn on this tool. After completing this course, you should be able to create your first website on Webflow. So for that, in the end, there is a project for you in which you will create your first website on this tool, all their details and assets that you have to use. Our available on project section that you have to use to complete this project. Thank you so much for watching this course. I hope you learned a lot from this course. And it will help you in your web development journey.