(upbeat music)
So if you're anything like me,
when you use a new app or tool for the first time,
you just sort of dive right in there
and start clicking around, playing around with the options,
and trying to create the thing that you set out to do,
which is great, I love that attitude,
but sometimes it turns out that you're not doing things
in the best way, and you're making a lot of mistakes.
That's definitely what happened with me
when I first started using Webflow.
I looked back at my first ever site
I designed in Webflow the other day
and noticed a lot of mistakes
that I now know how to do better.
I've learned the error of my ways
and so in this video I wanna share with you
the five most common Webflow mistakes
that I myself have made and that I've seen other people make
and share with you how to avoid them.
Mistake number one is not using classes.
I think this mistake is especially easy to make
if you don't have a lot of code knowledge,
because using classes is kind of an essential part of CSS,
like styling objects on websites,
basically any style that add to an element
will be attached to a class
and what's great about classes is that you can reuse them,
which means you do less work repeating the same styling,
like say I've got this white box here with rounded corners,
slight drop shadow.
I can just add that same class that I used on this one
to any other box that I want to look the same.
If you don't set a class before styling an element
then Webflow will just make one for you, which is great,
but its really hard to reuse things,
when you don't know what they're called in the first place.
So it keeps your site a lot tidier
and it lets you work much faster if you
give your objects a class before you style them.
Mistake number two is not making use
of the components in Webflow.
There are a bunch of things
that are really common across most websites
that Webflow have saved as a component for you.
So you can just drag and drop that in to use
as your starting point when you are building your website.
Things like navigation, this is super important for.
If you don't use the component
for your navigation bar at the top of your site,
you're gonna have to manually style
all of it from breakpoints.
You're gonna have to manually swap out
all the links for an icon, for example, a mobile.
Just seems like a lot of work
when you could just drag in this navigation component
and work from this base that Workflow has provided.
There are a bunch of them that are really useful,
things like tabs, carousel, lightbox,
lots of things that you might find
yourself creating for your website.
So if you start with this base
you can just apply your own styles to it
and it'll be much faster for you to work.
Mistake number three is floating objects,
instead of making use of flexbox or CSS grid.
Web has come a long way in recent years.
Floating objects used to be the main way
that you can position them in a layout,
where you wanted them,
but now we have much more modern things,
like flexbox, and CSS grid that help us position elements
in a much more responsive way and it's a lot easier too.
So I would definitely recommend taking the time
to understand how those things work.
It'll save you a lot of time and effort
and a lot of frustration as well,
trying to position your object more manually.
I'm gonna leave some links in the description box
for some resources where you can learn how these work
and just like have on hand to refresh you memory
when you are building at your website.
Mistake number four is not saving your colors
to the swatch pallet.
It's so easy just to click the button and add the color
instead of having to paste in
the Hex code every single time.
So do yourself a favor,
just save your color to the swatch pallet.
Mistake number five
is not being smart with your type styling.
If you're not careful, you can end up
accidentally individually styling every single paragraph,
every single heading on your page.
Just because it is really easy
to just quickly change the font, change the color, whatever,
but if you decide later on down the line
that you wanna increase the size of all your headings,
how frustrating will it be if you have to go in
and do all of them individually, no thank you.
You absolutely need to be making use of classes
when you are styling a typography on your page
and a great tip here is to actually
style your type when you first make your website
based on the body tab.
If you set the font and the type color
or whatever right there, the rest of your site
will inherit from the type stylings
you set in that body tag.
So you're gonna save yourself a lot of work if you do that.
I would also recommend clicking through
and styling all of the h1s, all of the h2s,
all of the tags, whatever.
That way when you edit a new piece of text,
it'll automatically be styled how you want it
and you won't have to even go adding any classes
or things like that.
So those are the five things that you should watch out for
when you're getting started with Webflow.
These are the mistakes to avoid.
If you haven't gone and started with Webflow yet,
then you should check it out.
There'll be a link on the screen and in the description.
You can get started for free.
Start playing around, building stuff.
Start using classes and styling your type
and all of those things.
If you enjoyed this video, please give it a thumbs up
and share it with any other Webflow newbies out there
who you might know, who might also be making these mistakes.
Let's help them out.
And if you're Webflow user already,
I would love to hear about any mistakes
that you found yourself making
when you were first getting started with it.
Share them down below in the comments.
Let's all just admit our faults to each other.
Alright, thank you for watching.
I hope you have a good week
and I will see you in the next video.
Bye.
(upbeat music)