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

Now that you have a solid understanding of the box model, HTML, CSS, and the Webflow Designer, let’s start building! Here we’ll walk through a hero section build (typically the top section of a website homepage) and, along the way, we’ll explore flexbox, CSS styling, and how to add and style visual assets.
00:00 - Introduction
00:32 - Hello Sara
00:47 - Assets
01:00 - Content
01:44 - Flexbox
04:30 - Button
10:44 - App image
14:08 - Recap
14:34 - CTA: Share your hero section design using the #webflow101 on Twitter
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Go take the full course at Webflow University: wfl.io/101
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

Пікірлер: 112

  • @Webflow
    @Webflow3 ай бұрын

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

  • @ComAnth

    @ComAnth

    3 ай бұрын

    Wow! Looking forward to it

  • @imuhtalhakhan

    @imuhtalhakhan

    3 ай бұрын

    where can I get the resources from?

  • @nicolaslondon

    @nicolaslondon

    2 ай бұрын

    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?

  • @QuentinLeBosser
    @QuentinLeBosser Жыл бұрын

    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

    Жыл бұрын

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

  • @moochogusto

    @moochogusto

    11 ай бұрын

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

  • @sxfghsdgfasdfgadsf5713

    @sxfghsdgfasdfgadsf5713

    10 ай бұрын

    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

    10 ай бұрын

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

  • @JorgePalma95
    @JorgePalma956 ай бұрын

    I'm obsessed with these trainings. Exceptional speakers!

  • @JoshJetStream
    @JoshJetStream8 ай бұрын

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

  • @codextalkstech
    @codextalkstech8 ай бұрын

    pls where can i get the assets from

  • @simonalazar6924

    @simonalazar6924

    Ай бұрын

    In the right part, below progress bar and details

  • @c-tech_
    @c-tech_2 ай бұрын

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

  • @butterflymantis
    @butterflymantis7 ай бұрын

    The best tutorials Ive ever seen!

  • @MushfiqAKhan
    @MushfiqAKhan10 ай бұрын

    Love these tutorials. Awesome.

  • @carljj7942
    @carljj794211 ай бұрын

    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

    11 ай бұрын

    @@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

    11 ай бұрын

    @@itsfrxzy Do you want the links btw?

  • @jaymodi8744
    @jaymodi874411 ай бұрын

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

  • @schultzeworks
    @schultzeworks Жыл бұрын

    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

    Жыл бұрын

    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 :)

  • @xandrillin
    @xandrillin14 күн бұрын

    Thank you so much ! The explanation was just awesome 💯

  • @mdsoharab1103
    @mdsoharab1103 Жыл бұрын

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

  • @maxh.2293
    @maxh.2293 Жыл бұрын

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

  • @webbae
    @webbae Жыл бұрын

    Why did the box-shadow get kicked out of the CSS party? ❓ It was always throwing shade!

  • @Webflow
    @Webflow Жыл бұрын

    Watch the whole course now: wfl.io/101

  • @DavidBlank-pv6qe

    @DavidBlank-pv6qe

    3 ай бұрын

    Where can we find the example files?!

  • @PrimitiveMind
    @PrimitiveMind7 ай бұрын

    So helpful!!!

  • @roseguox
    @roseguox8 ай бұрын

    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.

  • @ilonamartinez6817
    @ilonamartinez68173 ай бұрын

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

  • @abettervideographer
    @abettervideographer9 ай бұрын

    Yall, this is baller.

  • @allenmf88
    @allenmf885 ай бұрын

    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?

  • @marvellouseabraham8436
    @marvellouseabraham84368 ай бұрын

    How can i get the assets used in this lesson

  • @frenkelasi
    @frenkelasi3 ай бұрын

    Where do I download the lesseon assets?

  • @YoCC270
    @YoCC2703 ай бұрын

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

  • @ysfoodrecipes
    @ysfoodrecipes Жыл бұрын

    Thanks❤

  • @md.abdurrauf9343
    @md.abdurrauf93436 ай бұрын

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

  • @uiuxdesigner101
    @uiuxdesigner101 Жыл бұрын

    What resolution of your screen is right now?

  • @yt_abc3029
    @yt_abc302910 ай бұрын

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

  • @ikemkrueger
    @ikemkrueger10 ай бұрын

    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

    9 ай бұрын

    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.

  • @grafitocreative2805
    @grafitocreative28057 ай бұрын

    The assets are i the webpage, where its says details

  • @feelcollins4358
    @feelcollins43587 ай бұрын

    @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

    7 ай бұрын

    Yes! To create a reusable color, you want to create a color variable. Learn how to here → kzread.info/dash/bejne/eYWF0cGzk6bQlKg.html

  • @PensarDiferenteVivirDiferente
    @PensarDiferenteVivirDiferente7 ай бұрын

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

  • @craigwall6071

    @craigwall6071

    5 ай бұрын

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

  • @youngmentor21
    @youngmentor212 ай бұрын

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

  • @abdulkareemuddinmasirmoham5889
    @abdulkareemuddinmasirmoham5889 Жыл бұрын

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

  • @Webflow

    @Webflow

    Жыл бұрын

    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 :)

  • @AgboolaIsreal-wv9du
    @AgboolaIsreal-wv9du22 күн бұрын

    Pls where are you creating it

  • @ilonamartinez6817
    @ilonamartinez68178 ай бұрын

    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

    8 ай бұрын

    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!

  • @Rise_Hardstyle
    @Rise_Hardstyle Жыл бұрын

    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

    Жыл бұрын

    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

    Жыл бұрын

    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

    Жыл бұрын

    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 !

  • @caeloob
    @caeloob Жыл бұрын

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

  • @Webflow

    @Webflow

    Жыл бұрын

    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

    Жыл бұрын

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

  • @jessicalorrene5626

    @jessicalorrene5626

    Жыл бұрын

    try flutterflow/Adalo

  • @brianPowalski
    @brianPowalski Жыл бұрын

    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

    Жыл бұрын

    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

    Жыл бұрын

    @@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

    9 ай бұрын

    @@Webflow Where can i get the assets

  • @des7638
    @des7638 Жыл бұрын

    im here for the new jokes and banter

  • @DesignDen673
    @DesignDen673 Жыл бұрын

    Are the assets downloadable somewhere?

  • @Webflow

    @Webflow

    Жыл бұрын

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

  • @sma_bari

    @sma_bari

    8 ай бұрын

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

  • @linnnaaaa278

    @linnnaaaa278

    3 ай бұрын

    ​@@Webflowtnx

  • @camilorosas7770
    @camilorosas77708 ай бұрын

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

  • @camilorosas7770

    @camilorosas7770

    8 ай бұрын

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

  • @codextalkstech
    @codextalkstech8 ай бұрын

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

  • @davidaseweje
    @davidaseweje6 ай бұрын

    where can we download the assets used in the tutorial?

  • @Webflow

    @Webflow

    6 ай бұрын

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

  • @miguelcordeir_
    @miguelcordeir_8 ай бұрын

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

  • @jewelbency5072

    @jewelbency5072

    7 ай бұрын

    Tell me if you find it

  • @nurek1080

    @nurek1080

    5 ай бұрын

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

  • @abdullahmubashshir7464
    @abdullahmubashshir746412 күн бұрын

    how I am gonna get the assets ???

  • @royzac7829
    @royzac78298 ай бұрын

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

  • @jewelbency5072

    @jewelbency5072

    7 ай бұрын

    Hey please let me know if you find it

  • @johnkraus4

    @johnkraus4

    5 ай бұрын

    Github has the assets.

  • @bryanorellana483

    @bryanorellana483

    2 ай бұрын

    @@johnkraus4 share the link plis

  • @karimaait6385
    @karimaait63859 ай бұрын

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

  • @Webflow

    @Webflow

    8 ай бұрын

    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!

  • @Xiox321
    @Xiox321 Жыл бұрын

    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

    Жыл бұрын

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

  • @Xiox321

    @Xiox321

    Жыл бұрын

    @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

    Жыл бұрын

    @@Xiox321 Thank you!

  • @digital.frenchy

    @digital.frenchy

    6 ай бұрын

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

  • @petertoshliltoshmakafui9886
    @petertoshliltoshmakafui9886 Жыл бұрын

    Please how to create admin panel and link my website to my admin panel.

  • @Webflow

    @Webflow

    Жыл бұрын

    The project settings is only available to the owner of the workspace where the project lives in. For more information, please view this article: university.webflow.com/lesson/dashboard

  • @petertoshliltoshmakafui9886

    @petertoshliltoshmakafui9886

    Жыл бұрын

    @@Webflow I have coded my html files and now I want admin panel to manage the pages on my website for me

  • @Webflow

    @Webflow

    Жыл бұрын

    At this time, you cannot import already coded websites into Webflow. If you're talking about something like CPanel or a WordPress admin panel, this is not available in Webflow.

  • @Mohammed.V2
    @Mohammed.V28 ай бұрын

    where can we get the asset

  • @Webflow

    @Webflow

    8 ай бұрын

    Hi! You can download the assets for this course on the Webflow 101 course page (over to the right) on Webflow University: university.webflow.com/courses/webflow-101

  • @VuBuu

    @VuBuu

    7 ай бұрын

    @@WebflowCan you include the Assets download link on the actual video where the assets are first mentioned? I believe the section is called Site build: Hero. It'd be easier for those looking for it.

  • @Mohammed.V2

    @Mohammed.V2

    5 ай бұрын

    @@Webflow Thanks!

  • @ansarsaeed1676
    @ansarsaeed16766 ай бұрын

    Where are asset files used in this video?

  • @johnkraus4

    @johnkraus4

    5 ай бұрын

    Github

  • @muhfaad9545
    @muhfaad9545 Жыл бұрын

    Please create new playlist so we easily save and watch.

  • @Webflow

    @Webflow

    Жыл бұрын

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

  • @BenedictHarris
    @BenedictHarris7 ай бұрын

    Great videos, despite the distracting jokes!

  • @digital.frenchy

    @digital.frenchy

    6 ай бұрын

    that's what makes them pop, lol

  • @69aids420
    @69aids420Ай бұрын

    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!

  • @MohanaKumar-xy5xm
    @MohanaKumar-xy5xm4 ай бұрын

    Webflow is giving apple vibes

  • @caseycao812
    @caseycao812 Жыл бұрын

    🤣so dramatic

  • @breemudi
    @breemudi7 ай бұрын

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

  • @tohigherhighs

    @tohigherhighs

    19 күн бұрын

    u dont get it

  • @md.abdurrauf9343
    @md.abdurrauf93436 ай бұрын

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

  • @md.abdurrauf9343
    @md.abdurrauf93436 ай бұрын

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

Келесі