Build a website hero section - Webflow 101 (Part 1 of 10)
HTML-код
- Опубликовано: 5 авг 2024
- Watch this lesson with the updated UI (as of August 6th, 2024) → • Build a website hero s...
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
----------
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
Watch this lesson with the updated UI (as of August 6th, 2024) → ruclips.net/video/Gp8A55gZnBU/видео.html
These training videos are something I actually watch! Short and understandable! I love it!
These are such great training videos and the light comedic back-and-forth is hilarious.
Thank you so much ! The explanation was just awesome 💯
Love these tutorials. Awesome.
The best tutorials Ive ever seen!
I'm obsessed with these trainings. Exceptional speakers!
oh that's great. waiting for some great learning thanks lot.
So helpful!!!
how I am gonna get the assets
???
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.
@@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 =)
@@itsfrxzy Do you want the links btw?
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.
Learning never felt so fun, @webflow this was such an amazing experience for me. Hugs to the tutors and Instructional designers.
I came here to say the exact same thing! This content is phenomenal
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?
@@sxfghsdgfasdfgadsf5713 it's fun, keeps the learning experience good.
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
Wow! Looking forward to it
where can I get the resources from?
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?
@@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.
Really webflow i addicted to your videos.
your videos are very informative and very understanding🎉🎉❤❤❤.
HOw do i get the Assets 101 for the webflow 101 course
Thanks❤
it looks as if am watching a thrilling movie, so interesting
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.
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 :)
The most genuinely entertainng tutorials I've ever seen. Amazing job!
Pls where are you creating it
How can i get the assets used in this lesson
may i know where can i download the images that have been used in this projects
Why did the box-shadow get kicked out of the CSS party?
❓
It was always throwing shade!
Yall, this is baller.
Watch the whole course now: wfl.io/101
Where can we find the example files?!
@@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.
Where do I download the lesseon assets?
The girl is funny! Good production content. Love the back and forth.
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?
pls where can i get the assets from
In the right part, below progress bar and details
@@simonalazar6924 no i cant find it, is it on webflow university? bcs i cant see it too
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!
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.
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.
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.
I don't see the plus sign when adding a swatch color.
nvm, after some googling I just found out it has been renamed to variables.
Hey! How did you create the cards in the assets they look spectacular!
Are the assets downloadable somewhere?
You can download the assets here: d3e54v103j8qbb.cloudfront.net/zip/Webflow+101+course+assets.zip
why isn't it's in the discription or the webflow university?
@@Webflow
@@Webflowtnx
The assets are i the webpage, where its says details
I can't upload the assets for some odd reason, the files are corrupted. Help please?
@Webflow 5:52 Has this feature been moved? I don't see a plus button where you can save the color you chose
Yes! To create a reusable color, you want to create a color variable. Learn how to here → ruclips.net/video/GQQo_zcCjdE/видео.html
@@Webflow Thank you!
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 :)
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!
What resolution of your screen is right now?
and some idiots out there make paid courses when there's this gold.
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
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
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
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 !
Cool video! I think Kevin Geary's Page Building 101 is a comparable wordpress alternative with Bricks. how does webflow compare to Bricks?
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
@@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!
@@Webflow Where can i get the assets
I followed along but the elements are blur. What should I do to remove the blur or glass like effect ?
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 :)
im here for the new jokes and banter
where can we get the asset
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
@@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.
@@Webflow Thanks!
would I be able to use Webflow to make a peer to peer marketplace kind of like Turo, Uber, Air bnb?
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.
@@Webflow hmm. would you happen to know which services I could potentially pair up with?
try flutterflow/Adalo
I happen to enjoy Sara’s humor and little interruptions. It makes the video a lot more interesting.
About 1/3 of the time they are enjoyable. Also about 1/3 of the time they are sheer annoyance and degrade.
Where can I find the assets they are using for this and other tutorials?
Hey please let me know if you find it
Github has the assets.
@@johnkraus4 share the link plis
Please create new playlist so we easily save and watch.
You can watch the full course here: university.webflow.com/courses/webflow-101
Hope this helps :)
I can't see the color swatch functionality. Somebody can help me please?
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!
where can we download the assets used in the tutorial?
Hello, you can download the assets on the course page: university.webflow.com/courses/webflow-101
Right where it says "Download the course assets"!
really amazing course. You guys could provide the assets for download to follow along though
Tell me if you find it
They are on the course website Under the progress and detail bar on the right@@jewelbency5072
Great videos, despite the distracting jokes!
that's what makes them pop, lol
Please how to create admin panel and link my website to my admin panel.
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
@@Webflow I have coded my html files and now I want admin panel to manage the pages on my website for me
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.
Where are asset files used in this video?
Github
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.
what other options can you recommend? Also when you say the options are limited , are you referring to functionality or design
@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.
@@Xiox321 Thank you!
@@Xiox321 Learn web Dev then and you'd be limitless
😂😂😂 editing 👌 😂😂😂
Webflow is giving apple vibes
a bit dated
🤣so dramatic
I love the delivery... I just don't get why SHE always interupts you... It's rather distracting and reduces from the content value.
u dont get it
may i know where can i download the images that have been used in this projects please
may i know where can i download the images that have been used in this projects