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

Подписаться 198 тыс.

Просмотров 88 тыс.

50% 1

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

Опубликовано:

14 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 113

@Webflow 4 месяца назад

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

@ComAnth 4 месяца назад

Wow! Looking forward to it

@imuhtalhakhan 3 месяца назад

where can I get the resources from?

@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 Год назад

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 Год назад

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

@moochogusto Год назад

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

@sxfghsdgfasdfgadsf5713 11 месяцев назад

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 10 месяцев назад

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

@JorgePalma95 7 месяцев назад

I'm obsessed with these trainings. Exceptional speakers!

@JoshJetStream 9 месяцев назад

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

@c-tech_ 2 месяца назад

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

@carljj7942 11 месяцев назад

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 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 11 месяцев назад

@@itsfrxzy Do you want the links btw?

@MushfiqAKhan 10 месяцев назад

Love these tutorials. Awesome.

@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 Год назад

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

@butterflymantis 7 месяцев назад

The best tutorials Ive ever seen!

@jaymodi8744 11 месяцев назад

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

@mdsoharab1103 Год назад

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

@xandrillin 24 дня назад

Thank you so much ! The explanation was just awesome 💯

@PrimitiveMind 7 месяцев назад

So helpful!!!

@maxh.2293 Год назад

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

@francis_codex 9 месяцев назад

pls where can i get the assets from

@simonalazar6924 Месяц назад

In the right part, below progress bar and details

@ammariskandar1059 3 дня назад

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

@abettervideographer 10 месяцев назад

Yall, this is baller.

@ysfoodrecipes Год назад

Thanks❤

@PensarDiferenteVivirDiferente 7 месяцев назад

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

@craigwall6071 5 месяцев назад

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

@YoCC270 3 месяца назад

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

@webbae Год назад

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

@roseguox 9 месяцев назад

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.

@Webflow Год назад

Watch the whole course now: wfl.io/101

@DavidBlank-pv6qe 3 месяца назад

Where can we find the example files?!

@marvellouseabraham8436 8 месяцев назад

How can i get the assets used in this lesson

@ilonamartinez6817 4 месяца назад

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

@des7638 Год назад

im here for the new jokes and banter

@allenmf88 5 месяцев назад

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?

@ikemkrueger 10 месяцев назад

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 10 месяцев назад

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.

@yt_abc3029 10 месяцев назад

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

@frenkelasi 3 месяца назад

Where do I download the lesseon assets?

@md.abdurrauf9343 6 месяцев назад

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

@feelcollins4358 8 месяцев назад

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

@Webflow 8 месяцев назад

Yes! To create a reusable color, you want to create a color variable. Learn how to here → ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GQQo_zcCjdE.html

@uiuxdesigner101 Год назад

What resolution of your screen is right now?

@abdulkareemuddinmasirmoham5889 Год назад

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

@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 Месяц назад

Pls where are you creating it

@youngmentor21 2 месяца назад

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

@francis_codex 9 месяцев назад

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

@grafitocreative2805 7 месяцев назад

The assets are i the webpage, where its says details

@DesignDen673 Год назад

Are the assets downloadable somewhere?

@Webflow Год назад

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

@sma_bari 8 месяцев назад

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

@linnnaaaa278 4 месяца назад

@@Webflowtnx

@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 Год назад

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 Год назад

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 Год назад

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 !

@ilonamartinez6817 9 месяцев назад

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 9 месяцев назад

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!

@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 Год назад

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 Год назад

@@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 9 месяцев назад

@@Webflow Where can i get the assets

@BenedictHarris 7 месяцев назад

Great videos, despite the distracting jokes!

@digital.frenchy 6 месяцев назад

that's what makes them pop, lol

@miguelcordeir_ 8 месяцев назад

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

@jewelbency5072 7 месяцев назад

Tell me if you find it

@nurek1080 6 месяцев назад

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

@caeloob Год назад

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

@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 Год назад

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

@jessicalorrene5626 Год назад

try flutterflow/Adalo

@camilorosas7770 8 месяцев назад

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

@camilorosas7770 8 месяцев назад

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

@davidaseweje 6 месяцев назад

where can we download the assets used in the tutorial?

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

@abdullahmubashshir7464 22 дня назад

how I am gonna get the assets ???

@muhfaad9545 Год назад

Please create new playlist so we easily save and watch.

@Webflow Год назад

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

@karimaait6385 9 месяцев назад

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

@Webflow 9 месяцев назад

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 Год назад

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 Год назад

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

@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 Год назад

@@Xiox321 Thank you!

@digital.frenchy 6 месяцев назад

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

@royzac7829 8 месяцев назад

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

@jewelbency5072 7 месяцев назад

Hey please let me know if you find it

@johnkraus4 5 месяцев назад

Github has the assets.

@bryanorellana483 2 месяца назад

@@johnkraus4 share the link plis

@petertoshliltoshmakafui9886 Год назад

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

@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 Год назад

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

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

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

@Mohammed.V2 8 месяцев назад

where can we get the asset

@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 8 месяцев назад

@@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 6 месяцев назад

@@Webflow Thanks!