Webflow Intermediate: Progress Your Webflow Skills (2021) | Sam Harrison | Skillshare

Playback Speed


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

Webflow Intermediate: Progress Your Webflow Skills (2021)

teacher avatar Sam Harrison, Webflow Enthusiast & Business Owner

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

40 Lessons (6h 10m)
    • 1. COURSE INTRODUCTION

      2:10
    • 2. NAVIGATIONS

      0:24
    • 3. NAVIGATION: ALIGNED LEFT

      7:41
    • 4. NAVIGATION: CENTERED

      5:41
    • 5. NAVIGATION: LOGO CENTERED

      3:44
    • 6. NAVIGATION: DESKTOP HAMBURGER

      4:52
    • 7. NAVIGATION: DROPDOWN

      7:25
    • 8. NAVIGATION: MEGA MENU

      14:17
    • 9. NAVIGATION: CUSTOM MOBILE

      12:35
    • 10. HERO SECTIONS

      0:34
    • 11. HERO SECTION: CENTERED

      12:07
    • 12. HERO SECTION: GRADIENT

      4:51
    • 13. HERO SECTION: BOTTOM BANNER

      17:04
    • 14. HERO SECTION: BACKGROUND VIDEO

      4:15
    • 15. HERO SECTION: SLIDERS

      10:00
    • 16. INFO SECTIONS

      0:38
    • 17. INFO SECTION: ICONS

      8:00
    • 18. INFO SECTION: ABSOLUTE POSITION

      13:17
    • 19. INFO SECTION: 3 COL GRID

      4:46
    • 20. INFO SECTION: CARDS

      8:40
    • 21. INFO SECTION: FLEX CARD

      11:30
    • 22. ANIMATIONS & INTERACTIONS

      0:45
    • 23. ANIMATIONS HOVER CARD 1

      15:33
    • 24. ANIMATION HOVER CARD 2

      4:04
    • 25. ANIMATIONS HOVER CARD 3

      5:23
    • 26. ANIMATIONS HOVER CARD 4

      12:33
    • 27. ANIMATION HOVER CARD 5

      23:17
    • 28. ANIMATIONS SLIDER ANIMATIONS

      8:55
    • 29. ANIMATIONS LOTTIE ON SCOLL

      5:35
    • 30. CLASS PROJECT

      0:53
    • 31. CLASS PROJECT WALKTHROUGH

      2:16
    • 32. CLASS PROJECT MAIN NAVIGATION

      27:05
    • 33. CLASS PROJECT CUSTOM MOBILE NAV

      21:43
    • 34. CLASS PROJECT HERO SECTION

      14:29
    • 35. CLASS PROJECT INTRO SECTION

      12:46
    • 36. CLASS PROJECT HOVER CARDS

      28:55
    • 37. CLASS PROJECT SOCIAL PROOF

      13:50
    • 38. CLASS PROJECT CTA & FOOTER

      6:29
    • 39. CLASS PROJECT MOBILE RESPONSIVE

      10:42
    • 40. MORE COURSES ON THE WAY!

      0:40
  • --
  • 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.

271

Students

1

Project

About This Class

WEBFLOW TUTORIAL: THE SEQUEL!

Hello Everyone and welcome to my second Webflow course!

This Webflow course is for beginners to intermediate levels and we cover the following main topics:

  • HERO SECTIONS
  • CUSTOM NAVIGATIONS
  • INFO SECTIONS
  • WEBFLOW INTERACTIONS AND ANIMATIONS
  • CLASS PROJECT¬†

The aim of this course is to provide you the skills required to start creating more complex websites within Webflow and you can implement the skills learned in this course within the class project.

Meet Your Teacher

Teacher Profile Image

Sam Harrison

Webflow Enthusiast & Business Owner

Teacher

Hi Everyone,

I'm a multiple business owner (entrepreneur feels too pretentious) based in the UK and I currently run a digital agency along with a consulting/teaching business.

I love Webflow and currently have a beginners class on Skillshare for it.

 

 

See full profile

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. COURSE INTRODUCTION: Hi everyone and welcome to my second Webflow course for beginners to intermediate levels. I've run one, I'm Sam Harrison and I run a digital agency based in the UK. And in this course I want to take you through sort of the next logical step into progressing your Webflow skills. I'm going to go into how to craze. So the comment sections and elements that you're going to use within your designs. So in the first part of the course, we're going to go into how to manipulate the menu or the nav bar and to changing the way works into having Lego centered, have a Lego adjusted to the left, or having the navigation in the middle. Basically lots of different ways of positioning the navigation. From there, we're going to go into how it's cray, various different types of hero section and just sort of column types of design that you're going to see when creating websites. The third part of the course, we're going to go into how to create different sorts of info sections where we have maybe different icon sections by using grids and flexbox was going to make use of positioning such as relative and an absolutely to get all the different items weight woman to be. The fourth part of the course is going into more depth into how to use interactions and animations to have at least four or five videos and how to create hover cause and how you can create various different animations on mouse hover rows agrarian to look at how to use Lottie files and how to animate those on page scroll. Nonetheless, parts of the course we're going to create a landing page together by using all the techniques learned throughout the course so far. So ideally, what I'd like you to do is to use all the techniques that we've done and create your own version of a landing page by using mine as an example. If you don't want to do that, we don't have to worry. You can also do is just copy along with me on the landing page I created, which also makes use of at least most of the techniques used throughout the course. Well, you'll need for this course is a laptop or a PC. And all you need also is an active Webflow account. And in terms of the assets for creating the landing page, I'll make sure all that is available within the course materials. Okay, So if that sounds good to you, we'll get started. 37. CLASS PROJECT SOCIAL PROOF: Okay, So it's probably get onto the next section. I wanted to just let you know that if you want to have this or it was clickable and if it was going to link through to something, currently, this is just a block. If you wanted to make it clickable, you just right-click and then converts a link block. And then when we hover over it, you'll see there's an option to click through to someone obsolete. You want to link it to somewhere. You then have to just go into the settings wheel here and then select where you want it to link to. And the same will be true for the entire call containers. Well, if you wanted everywhere clickable it after just make the call container itself and convert it into link block. Okay, So anyway, back on to the next section. So at this point here, we don't even technically need to make it a section, but just so it's consistent, I think we probably will. So let's do that now. So what we need to do is go on to navigate, to collapse everything on the body. We will add on another section and we'll give it our class of section. However, for this one, we don't want any of this padding or anyway. And we didn't want any padding whatsoever because this is right to the edge of the page and we're going to control the padding on the inside. Hey, I'm will control the width by setting maximum width. Okay, so first things first, then let's just 0 this out. And we'll call this. So what kinda section would you call away? So this is kind of like a social proof section. We'll just call this social just for ease so we know what it means. And then we can just 0 this all out completely. And the same for padding as well, say back to 0 and obviously nothing in there. So you can actually see it, but it's still selected. And then we'll throw on a grid. I'm What would you just so we can see what we're doing, we'll give it some minimum heights or something like 500 pixels so we can see what we're doing. Again, that weren't necessarily mass if we have a minimum point. And so that's fine. It means the ultra-high great day. So we need to have it so that we only have one row. So get rid of a row, and that's going to be fine. Okay? And we also wanted to get rid of any kind of gap as well. So double-click on the grid and then just pull inwards. And you can say, that's all fine. On the left-hand side, we're going to have an image. So we are going to put a div in first row. So let's do that now. And we'll just call this social def left. And then what we can do is either give it a background image or we can just throw an image inside and set the image to a 100 percent of the width and height, which I think we're going to do. So let's throw in the image. And I believe it was this one again, I should have used a different one, but never mind. Okay, That's so fun. Okay, So if all the image itself, we're going to just rename this and we'll call it social image. And we're going to have this set to 100% of the width would be the same also for the height as well. Okay? Right, so next up we're going to throw in an innovative and this will be, we'll call this issue texts in quotes, whatever you want. Okay? And in here we're going to have some padding. And so it's going to have padding when it gets to the edges, hey, on, onresize is going to have some kind of padding to the size and also to make it so it's not going all the way across the screen, will probably have padding as well. But just first of all, let's throw our text elements in. And to save time, I'm actually going to just copy and paste this. Again. I'm sure you know how to enter these different things is I, this is an h4 will be reusing the elements from air Iran in the page. So this is an H3, say this one is going to be the same as this one here, but we're going to have a dark version of it basically say, That's all fine. Say let's copy that. And we'll paste that in here. Copy that as well. So this one, we're going to have to change the classes for this of course. So this is going to be a class of H5. And so let's have that will remove that class. I will add the H 51 that again. And this is going to actually be an A3. So again, remove that class. You are after Davis necessarily. And so this is going to be h3 on by default is going to be dog. Sounds fine. The reason by default it was dark, even though we kinda copied this, is that obviously we set a combo class for this one. So that's was with bearing in mind again. And then we have just a paragraph which we can kinda just copy from somewhere else. I will copy this paragraph here, and we'll paste that one in two. And we have, then we have this section here. So what I've done is poppies within a diblock. Now you could have this as like a list item as well. So if we go to the navigator and I have here you see this section here, you can have a listing block. And you could do that. I mean, I think I'm going to just have it as individual divs bonds with these. I, I kinda just makes sense. And so first of all, we, just before we do that, I'm going to put the padding on now. So the padding is on the actual social text div itself. And we're going to hold down Shift and create the padding on literally every side here. Something like 50. I think you're going to be fun. Okay? So it's not quite to the edge. I'm probably going to restrict the width of this too. So what we could do is pop all of us in its own div as well, which I think we might do actually. Yeah, let's do that. So let's pop in. And that's pop all of this inside this div block. And we'll call this div and social text container. So not to be confused with a social text div, okay, right, so let's just pop this to the top and then we can literally just drag all these items inside. And this will lead to sort of control the, the padding away from other elements as well. So we didn't necessarily want to have I did blocks all in the same place. Okay. So that's all fine. And yeah, and we can also use this text contained to restrict the width as well to whatever we want to do that. Because when we get on larger screens, you can see it's getting quite away across. So the way to get around this problem is we set a defined or a minimum, or a maximum width for this social text. So if we do something, say like 700 and that's probably fine. And then I'm biggest grain is not going to go right the way across. So we may alter that again in just a moment. Okay, so next up we're going to have a div. And this is going to house our other latae file, which will be kind of this, this sort of take the thing that's going on here. So let's do that as well. So let's pop this in. So insert Latifah, but we'll call this social Lottie. And what we'll do then is throw an analyte file. And it's going to be this one here. Now obviously we need to set it to find highly viscous. It's absolutely massive at the moment. So what did I do for these ones? Let's have a look. So it was 30. So that's fine. Let's do that. So good, we can leave the highest is 0, 2. Actually, you don't need to say I defined for them. So we preview that now, you can see it is actually automatically play or going to perhaps alter how they play individually one at a time by giving them combo classes. Now show you what I mean by that. Okay, so what we're going to also do and is just within this contain half the associate text container. We're going to just give this a little bit of margin so we can push this down slowly. Again. That's fine to do, but we're only using it for the, for this particular section. Say something like, something like 50 pixels. Actually, it's probably gonna be good. Okay. We're going to have that as an inline-block. We probably don't need to expand. It takes up that amount anyway, and so on. But also, what we're going to do now is throw on again some, some titles here. So I don't, what did I give the so there was a textbook. Okay, that's fun. So let's run a text block. We're going to make this text block inline-block. So it sits next to this part here. To get all this aligned properly. I'm actually going to just make this a flexbox to be super simple. And then we can get everything centered like that. Okay, so that's all good. The latae file itself. So don't call it Latino and Asian five. In fact, I should probably make sure I called all the rest lots of files, proper names. So we'll call this, we'll rename it and call it latae tick. And then we can give that a little bit of margin. So we push the text away, say something like, Yes, I don't like 20 would be fun. Again, this textbook is going to be, and what should we call this? And so be social, social century text. That's not the best name for this to be fair, but whatever it's fine, you know what it means. Okay. And then we're going to have this as we'll keep it as normal actually, but we'll have it also fits the rest of it. And we'll have a slightly larger say something like 18, perhaps, not so good. And yeah, we want to all caps as well. And again, so there we go. I'll just copy and paste the text, this one in here. And I'll, again, I'll fill the rest of the text in off-camera. Okay, so now that we have this in place, we're going to start an animation. So what we're going to do is make sure that the social latae div is selected. And I'm going to start the animation, so we'll have it when we scroll into view. The electrophile is going to play basically. So let's do that as well. Started donation and we'll call this, and we'll call it latae tick. Go to may also make, make sure your lottery tickets selected. And I'm going to click on integrations where it says Lottie. I'm basically just going to just play the animation whilst we scroll into view. So the initial state is going to be 0. Make sure you do actually set it at 0. Otherwise, even though, even though it's grayed out, you actually have to make sure it says 0. Okay? And then what we'll do is just duplicate this. And then we'll pop it all the way to the n like that again. So that's all fine and that's kind of it. And to be honest with you, that's all we actually need them to do that when we scroll over this element. Okay? So what we can do now is just copy and paste that three times. This one. I'm going to give a combo class 2 of padding. So that way we can just get this a little bit space down better. Say something like yes. And did my 25 looks pretty good to me. So that's all good. Now, let's have a look at that. So if we preview and as we scroll down, we get the first one. And then we get that one too. Now, they're all happening quite quickly. So we actually want to maybe give these a slight offset as well. So let's do that. And so when we go into this animation, we're going to have an offset of something like 30% for this one. And I'm going to have maybe 40 percent for this one. So this is just one way of staggering the animation slightly. There's a few ways you could do is actually this way for now. Okay, so now that we've set all the different offsets, will, I'll just actually after add something below this to show you how this will actually look. So on the navigator we're going to just add something random, I think. And just so I can scroll past so I can show you as if I preview this now. As we scroll down, we get one followed by two, followed by the third. Aka say for the button, what we'll do is actually we'll just kinda uses one that's up here. And we'll sort of just give it a combo class. The change ever so slightly? Yes. When to hover for this one, we have just a black border and blank text. So that's what we'll do, is let's do that now. So give it a combo class. We'll just call it dark so we know what we mean. And what we'll do then on the combo class, it will make it, rather than having a white border, we'll give it a black border. And then when we hover over it, that's still going to be yeah, As we want. Okay. So that looks pretty good. And we can probably reuse this button again for the next part as well. Okay. Is that pretty much is it for the social sanction off when we get to tablet, we're going to have to alter this a little bit as we off everything else. So we're very nearly at the responsive stage analogist sort of t more bits today, which while doing in one video. Okay, So that's pretty much it for the sort of the social proof sort of take section. And next up, we're going to do both the call-to-action and the header, the footer all in one go. 40. MORE COURSES ON THE WAY!: Okay, So this means you are now at the end of the course, so well done for getting this far. Hopefully you've understood everything that we've gone through and hopefully you've created some kind of landing page that you're happy with and you're happy with all the techniques that you've used so far in the course. If you need any help with this whatsoever, just let me know in the comment section on I'll get back to you as soon as I possibly can if you'd like to learn more about Webflow, I also have a YouTube channel. If you just search for Sam Harris and Webflow, I should pop up. And I go into again some of the things that we mentioned already, along with a few of the things that maybe weren't within these courses. Okay, so I hope you find that over a useful, leave me some kind of review, if you would, it would mean a lot to me and thank you for watching. I'll see you on the next course.