Build a website hero section - Webflow 101 (Part 1 of 10)

Sdílet
Vložit
  • čas přidán 8. 09. 2024

Komentáře • 112

  • @Webflow
    @Webflow  Před měsícem

    Watch this lesson with the updated UI (as of August 6th, 2024) → czcams.com/video/Gp8A55gZnBU/video.html

  • @LiDevil543
    @LiDevil543 Před měsícem

    These training videos are something I actually watch! Short and understandable! I love it!

  • @c-tech_
    @c-tech_ Před 4 měsíci +2

    These are such great training videos and the light comedic back-and-forth is hilarious.

  • @Webflow
    @Webflow  Před 6 měsíci +13

    We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

    • @ComAnth
      @ComAnth Před 5 měsíci

      Wow! Looking forward to it

    • @imuhtalhakhan
      @imuhtalhakhan Před 5 měsíci +3

      where can I get the resources from?

    • @nicolaslondon
      @nicolaslondon Před 4 měsíci +1

      i dont know why you dont answer to people asking for the assets, Can someone from webflow explain how we can learn if assets are not available or they are difficult to find?

    • @Webflow
      @Webflow  Před měsícem

      ​@@nicolaslondon Hello, you can find the course assets on the main course page: university.webflow.com/courses/webflow-101
      It's the link called "Download the course assets" and there's a link to clone the completed project as well.

  • @carljj7942
    @carljj7942 Před rokem +10

    Iam new to WebFlow but after like 15 hours learning. I love it and the interaction and how I can apply my own style and design is just fantastic and convert Figma design to WebFlow is just WOW WOW WOW.

    • @carljj7942
      @carljj7942 Před rokem

      @@itsfrxzy I did some on YT, then I looked through the basics of WebFlow and Webflow101 where they do the calendar app. where good learning is do by learn. and experiment your self lo learn all the functions. after this I nailed the certification =)

    • @carljj7942
      @carljj7942 Před rokem

      @@itsfrxzy Do you want the links btw?

  • @JorgePalma95
    @JorgePalma95 Před 9 měsíci +21

    I'm obsessed with these trainings. Exceptional speakers!

  • @butterflymantis
    @butterflymantis Před 9 měsíci +4

    The best tutorials Ive ever seen!

  • @Webflow
    @Webflow  Před rokem +6

    Watch the whole course now: wfl.io/101

    • @DavidBlank-pv6qe
      @DavidBlank-pv6qe Před 5 měsíci +1

      Where can we find the example files?!

    • @Webflow
      @Webflow  Před měsícem

      @@DavidBlank-pv6qe ​Hello, you can find the course assets on the main course page: university.webflow.com/courses/webflow-101
      It's the link called "Download the course assets" and there's a link to clone the completed project, if you'd like to inspect that as well.

  • @xandrillin
    @xandrillin Před 2 měsíci

    Thank you so much ! The explanation was just awesome 💯

  • @QuentinLeBosser
    @QuentinLeBosser Před rokem +116

    Your way of delivering the content is exeptional. Amazing script, intro music, and insane jokes. I just love it and it makes it very pleasing to watch you... I have been loving switching to Webflow for the past couple of days.

    • @jessicalorrene5626
      @jessicalorrene5626 Před rokem +2

      Learning never felt so fun, @webflow this was such an amazing experience for me. Hugs to the tutors and Instructional designers.

    • @moochogusto
      @moochogusto Před rokem

      I came here to say the exact same thing! This content is phenomenal

    • @sxfghsdgfasdfgadsf5713
      @sxfghsdgfasdfgadsf5713 Před rokem +3

      you must be really easily amused by their tragic attempts at humour and the most unnecessary "sidekick" ever seen. Why is she there apart from to be obnoxious and give useless instructions?

    • @yt_abc3029
      @yt_abc3029 Před rokem

      @@sxfghsdgfasdfgadsf5713 it's fun, keeps the learning experience good.

  • @youngmentor21
    @youngmentor21 Před 4 měsíci +3

    HOw do i get the Assets 101 for the webflow 101 course

  • @MushfiqAKhan
    @MushfiqAKhan Před rokem +5

    Love these tutorials. Awesome.

  • @JoshJetStream
    @JoshJetStream Před 11 měsíci +21

    The most genuinely entertainng tutorials I've ever seen. Amazing job!

  • @schultzeworks
    @schultzeworks Před rokem +13

    A container is really a div-block with a fixed width that you never see … so you will eventually get confused if you try to change it. Instead, I have found it best to place a div-block, then make it editable with a class name. Many designers use the standard ‘wrapper’ class name. So much less confusing!
    I burned a few hours on this before I was told in the forum what was up.

    • @Webflow
      @Webflow  Před rokem +8

      Hi @schultzeworks . Happy to help clear up the confusion with the Container element. With the Container element, you can change the width by setting a value of the "max-width". For more information on this, please view this article: university.webflow.com/lesson/container
      Hope this helps :)

  • @webbae
    @webbae Před rokem +7

    Why did the box-shadow get kicked out of the CSS party?

    It was always throwing shade!

  • @69aids420
    @69aids420 Před 3 měsíci +2

    Genuinely fascinating system you all have built up. I don't mean to be rude in the slightest, and it could make more sense later, but why is Sara even in this? I had to scroll back several times to hear and re-listen to what you said again since she just splurts out what/whenever. Is that the point? to like verbally say what the viewer may be thinking live? Maybe others did but I just found it much more distracting in all honesty. I hope it makes more sense later. Thank you both for the great overall tutorial!

  • @marvellouseabraham8436
    @marvellouseabraham8436 Před 10 měsíci +6

    How can i get the assets used in this lesson

  • @md.abdurrauf9343
    @md.abdurrauf9343 Před 8 měsíci +2

    may i know where can i download the images that have been used in this projects

  • @AgboolaIsreal-wv9du
    @AgboolaIsreal-wv9du Před 2 měsíci +1

    Pls where are you creating it

  • @jaymodi8744
    @jaymodi8744 Před rokem +2

    Really webflow i addicted to your videos.
    your videos are very informative and very understanding🎉🎉❤❤❤.

  • @abdullahmubashshir7464
    @abdullahmubashshir7464 Před 2 měsíci

    how I am gonna get the assets
    ???

  • @allenmf88
    @allenmf88 Před 7 měsíci +2

    In the new UI, the drop shadow blur caps at 20px, making this effect impossible without going into the stylesheet manually. I'm brand new to Webflow, so I'm unsure how the UI would even reflect a value that exceeds the default cap. Also, the "angle" and distance sections have been replaced with X and Y axis values, but don't seem to allow the same amount of "distance" as this video shows. Maybe I'm missing something?

  • @PrimitiveMind
    @PrimitiveMind Před 9 měsíci +1

    So helpful!!!

  • @DesignDen673
    @DesignDen673 Před rokem +5

    Are the assets downloadable somewhere?

    • @Webflow
      @Webflow  Před rokem +4

      You can download the assets here: d3e54v103j8qbb.cloudfront.net/zip/Webflow+101+course+assets.zip

    • @sma_bari
      @sma_bari Před 10 měsíci +6

      why isn't it's in the discription or the webflow university?
      @@Webflow

    • @Cutiestie
      @Cutiestie Před 6 měsíci

      ​@@Webflowtnx

  • @camilorosas7770
    @camilorosas7770 Před 10 měsíci +1

    I don't see the plus sign when adding a swatch color.

    • @camilorosas7770
      @camilorosas7770 Před 10 měsíci +2

      nvm, after some googling I just found out it has been renamed to variables.

  • @ikemkrueger
    @ikemkrueger Před rokem +1

    00:47 Drag and drop of folders doesn't work properly. It shows the error "Upload failed. Invalid file.".
    04:30 Highlighting and entering text adds the text instead of replacing it.
    08:12 I can't select the bold font variant.

    • @BigPieCreative
      @BigPieCreative Před rokem +3

      The drag and drop did not work for me at first. But what eventually worked was I extracted the zip file, then select and drag individual files instead of the folders.

  • @mdsoharab1103
    @mdsoharab1103 Před rokem +2

    oh that's great. waiting for some great learning thanks lot.

  • @YoCC270
    @YoCC270 Před 5 měsíci

    The girl is funny! Good production content. Love the back and forth.

  • @roseguox
    @roseguox Před 11 měsíci +1

    I'm just really confused, because I'm not able to add brand colors or adjust the button of the shadow in the same he does in the video. I am wondering if that has anything to do with the fact I am using the free version? Or if there's something missing in my system.

  • @feelcollins4358
    @feelcollins4358 Před 10 měsíci +1

    @Webflow 5:52 Has this feature been moved? I don't see a plus button where you can save the color you chose

    • @Webflow
      @Webflow  Před 9 měsíci +1

      Yes! To create a reusable color, you want to create a color variable. Learn how to here → czcams.com/video/GQQo_zcCjdE/video.html

    • @JonBanquer
      @JonBanquer Před měsícem

      @@Webflow Thank you!

  • @yt_abc3029
    @yt_abc3029 Před rokem +1

    I can't upload the assets for some odd reason, the files are corrupted. Help please?

  • @grafitocreative2805
    @grafitocreative2805 Před 9 měsíci

    The assets are i the webpage, where its says details

  • @ilonamartinez6817
    @ilonamartinez6817 Před 6 měsíci

    Hey! How did you create the cards in the assets they look spectacular!

  • @royzac7829
    @royzac7829 Před 10 měsíci +3

    Where can I find the assets they are using for this and other tutorials?

  • @ilonamartinez6817
    @ilonamartinez6817 Před 10 měsíci

    i love this course, but on my version of the site, i can't seem to find/ have the "undo" button ? Can someone help please :)

    • @Webflow
      @Webflow  Před 10 měsíci +3

      Hey Ilona, the undo button has moved in the hamburger menu under the webflow logo in the top left. You can also use the command Z on mac or control Z on windows shortcut!

  • @karimaait6385
    @karimaait6385 Před 11 měsíci

    I can't see the color swatch functionality. Somebody can help me please?

    • @Webflow
      @Webflow  Před 11 měsíci +1

      Hey Karima, color swatches are now part of variables! If you add a color as a variable, you'll be able to select it by clicking the purple plus when hovering over the color selector!

  • @francis_codex
    @francis_codex Před 10 měsíci +2

    it looks as if am watching a thrilling movie, so interesting

  • @muhfaad9545
    @muhfaad9545 Před rokem +1

    Please create new playlist so we easily save and watch.

    • @Webflow
      @Webflow  Před rokem +2

      You can watch the full course here: university.webflow.com/courses/webflow-101
      Hope this helps :)

  • @PensarDiferenteVivirDiferente
    @PensarDiferenteVivirDiferente Před 9 měsíci +2

    I happen to enjoy Sara’s humor and little interruptions. It makes the video a lot more interesting.

    • @craigwall6071
      @craigwall6071 Před 7 měsíci +2

      About 1/3 of the time they are enjoyable. Also about 1/3 of the time they are sheer annoyance and degrade.

  • @abettervideographer
    @abettervideographer Před rokem

    Yall, this is baller.

  • @abdulkareemuddinmasirmoham5889

    I followed along but the elements are blur. What should I do to remove the blur or glass like effect ?

    • @Webflow
      @Webflow  Před rokem

      You can remove filters from your elements towards the bottom of the style panel. For more information on filters, check out this article: university.webflow.com/lesson/filters
      Hope this helps :)

  • @davidaseweje
    @davidaseweje Před 8 měsíci

    where can we download the assets used in the tutorial?

    • @Webflow
      @Webflow  Před 8 měsíci +4

      Hello, you can download the assets on the course page: university.webflow.com/courses/webflow-101
      Right where it says "Download the course assets"!

  • @brianPowalski
    @brianPowalski Před rokem +1

    Cool video! I think Kevin Geary's Page Building 101 is a comparable wordpress alternative with Bricks. how does webflow compare to Bricks?

    • @Webflow
      @Webflow  Před rokem

      I did a quick search on Bricks and I think you might be referring to a WordPress plugin. If this is correct, we can only speak to the difference between WordPress and Webflow. You can see that comparison here: webflow.com/vs/wordpress

    • @brianPowalski
      @brianPowalski Před rokem +1

      @@Webflow webflow is cool. wp page builders are using and iterating on webflow. please keep crushing it so WP builders, like Bricks, continue to improve. WP offers so many non proprietary use cases like Custom Post Types. webflow has some great community resources. GJ!

    • @luveeescar3103
      @luveeescar3103 Před 11 měsíci +1

      @@Webflow Where can i get the assets

  • @uiuxdesigner101
    @uiuxdesigner101 Před rokem

    What resolution of your screen is right now?

  • @ysfoodrecipes
    @ysfoodrecipes Před rokem

    Thanks❤

  • @miguelcordeir_
    @miguelcordeir_ Před 10 měsíci +3

    really amazing course. You guys could provide the assets for download to follow along though

    • @jewelbency5072
      @jewelbency5072 Před 9 měsíci +1

      Tell me if you find it

    • @nurek1080
      @nurek1080 Před 8 měsíci

      They are on the course website Under the progress and detail bar on the right@@jewelbency5072

  • @maxh.2293
    @maxh.2293 Před rokem +13

    and some idiots out there make paid courses when there's this gold.

  • @ansarsaeed1676
    @ansarsaeed1676 Před 9 měsíci

    Where are asset files used in this video?

  • @des7638
    @des7638 Před rokem +2

    im here for the new jokes and banter

  • @caeloob
    @caeloob Před rokem

    would I be able to use Webflow to make a peer to peer marketplace kind of like Turo, Uber, Air bnb?

    • @Webflow
      @Webflow  Před rokem

      When building with just Webflow, this is not possible. However, using Webflow as your main frontend tool while combining the power of other platforms into it, you might be able to.

    • @caeloob
      @caeloob Před rokem

      @@Webflow hmm. would you happen to know which services I could potentially pair up with?

    • @jessicalorrene5626
      @jessicalorrene5626 Před rokem

      try flutterflow/Adalo

  • @Rise_Hardstyle
    @Rise_Hardstyle Před rokem

    10:55 Im super new to all of this and have been following along replicating everything but with my own text and image and when i drag my image over into the "container" section, it explodes onto the screen and I havent been able to find a way inside of webflow to simply just stretch or shink the image. Cant drag the corners, etc. The images im uploading are obvioulsy too big but how am i supposed to know what dimensions work and which dont with the container size. Noob here but thanks

    • @Rise_Hardstyle
      @Rise_Hardstyle Před rokem

      And ontop of that, as soon as i drag my image into the container underneath the button, my button shoots to the top of the container with the image right below it but the text that was orginally above the button randomly vanishes. I wanna quit but i realize this is where most people quit and throw in the towel so yeah, i eventually find out but would love some directoin if any. Thanks

    • @Rise_Hardstyle
      @Rise_Hardstyle Před rokem

      and yes to clarify, my image exceeds the bottom side of the container when i thought everything inside a container is supposed to contain it

    • @Rise_Hardstyle
      @Rise_Hardstyle Před rokem

      lol, just resolved it by pure luck. I selected the image, looked at the css side, scrolled down to "size", within "size" seen "overflow" and clicked on the "scale" option rather than the defalt option that was selected which was "visible". Anyways im sure another problem will arise but never give it up !

  • @BenedictHarris
    @BenedictHarris Před 9 měsíci +1

    Great videos, despite the distracting jokes!

  • @jennielyra3694
    @jennielyra3694 Před měsícem

    😂😂😂 editing 👌 😂😂😂

  • @Xiox321
    @Xiox321 Před rokem +1

    Webflow is by far the most powerful website builder out there, but the e-commerce side of things is pretty lacking compared to the other options that are very limited in their design capabilities... I really hope Webflow overhauls the e-commerce aspect in the near future.

    • @jessicalorrene5626
      @jessicalorrene5626 Před rokem

      what other options can you recommend? Also when you say the options are limited , are you referring to functionality or design

    • @Xiox321
      @Xiox321 Před rokem

      @Jessica Lorrene
      I can't really recommend any others because I haven't found a single one that can do everything I want. The others that I refer to are Squarespace, Weebly, Wix, and even Shopify. They are limited in design. I've tried them all, and I always get to a spot where I realize that I can't do something really simple that's crucial to achieving what I want.

    • @jessicalorrene5626
      @jessicalorrene5626 Před rokem

      @@Xiox321 Thank you!

    • @digital.frenchy
      @digital.frenchy Před 8 měsíci

      @@Xiox321 Learn web Dev then and you'd be limitless

  • @MohanaKumar-xy5xm
    @MohanaKumar-xy5xm Před 6 měsíci +1

    Webflow is giving apple vibes

  • @anyone6415
    @anyone6415 Před měsícem

    a bit dated

  • @breemudi
    @breemudi Před 9 měsíci +2

    I love the delivery... I just don't get why SHE always interupts you... It's rather distracting and reduces from the content value.

  • @caseycao812
    @caseycao812 Před rokem

    🤣so dramatic

  • @francis_codex
    @francis_codex Před 10 měsíci +34

    pls where can i get the assets from

    • @simonalazar6924
      @simonalazar6924 Před 3 měsíci +2

      In the right part, below progress bar and details

    • @ammariskandar1059
      @ammariskandar1059 Před měsícem

      @@simonalazar6924 no i cant find it, is it on webflow university? bcs i cant see it too

  • @frenkelasi
    @frenkelasi Před 5 měsíci +3

    Where do I download the lesseon assets?

  • @md.abdurrauf9343
    @md.abdurrauf9343 Před 8 měsíci

    may i know where can i download the images that have been used in this projects please

  • @md.abdurrauf9343
    @md.abdurrauf9343 Před 8 měsíci

    may i know where can i download the images that have been used in this projects