Chicago Webflow video beginner tutorials for experienced frontend or ui developers. Overview of the interface and tips and tricks to speed up your workflows through the eyes of a frontend developer.
If you're a frontend developer, the visual code editor that Webflow provides can initially feel cumbersome. As a team of frontend devs ourselves, this Webflow tutorial series is to help you get up and running quickly. This video is oriented toward experienced frontend developers investigating Webflow as a way to accelerate their workflows and integrate a CMS editors love. As an experienced developer, I'll translate and map the interfaces to get you up and running with speed.
By the end of the series you should have all the tools and knowledge needed to go FASTER than your original workflows in building frontend UIs as well as doing your own CMS configurations. #thepowerisyours
In this video I'll cover:
- Overview of Webflow elements menu• How to add elements to the DOM (the normal and fast way)
- A few quick-keys
- Where to access meta or custom page code snippets
- How to manipulate, duplicate and next the hierarchy of elements
- How to apply classes and limitations with some pseudo classes
- Where to find CSS properties
- How to overwrite breakpoints
- Previewing your workUnicorn Road is on a mission to accelerate entrepreneurs and early-stage startups.
Based in Chicago, John is the CEO and Founder of Unicorn Road. He's been actively in development, ux, and design since the late 90s working at global agencies as well as the CoFounder of Eight Bit Studios in Chicago. Unicorn Road is a Chicago Webflow Developer & Certified Webflow Professional Expert.
Hey everybody. This is John frontend developer
here giving you a walkthrough of the webflow
interface, especially for you guys who enjoy
your life in the text editor.
And now have been given a golden ticket to
experience webflow for the first time. This
is your overview. I'm gonna set this up and
use the vernacular.
Hopefully you're used to. And, if not
leave a comment, let me know. So let's start
at the top left [Gaboosh].
We're gonna start with the plus sign and really
what we're gonna be doing here is talking
about adding elements. So this main area is
effectively the HTML page.
And as we hit the plus sign, we'll see that
there are a number of elements that a web
flow has put in there.
Some are sections and containers. They have
some pre formatting to them. Um, and columns
are things like the co L type type block,
but for the most part, you're gonna be using
a lot of these basic elements to create your
pages and layouts blocks, lists and buttons.
And if, as we scroll down through here, there's
typography as well. Uh, rich text is the only
thing that's really special in that it's effectively,
it's like a block that is meant to have nested
in line elements to it.
Usually you use this on a blog detail page,
but you can also use it in a section. And
it really allows content editors because this,
the power of this is the, is the CMS piece,
the editor piece.
It allows a content creator to effectively
add images or list items to any block of,
of text. So that's a little bit more of a
I'm gonna keep skimming down here. Um, one
of the notable things here is that you can
add video, but this is really a video embed.
Um, they don't, allow you to host or they
don't host your videos for you yet, unless
it's a background video, which there's a component
And there's a limitation there in 30 megs,
one of the exciting parts. And I think one
of the things that web flow is constantly
showcasing is the lot animation, uh, element
This is a container for a lot. And once you
throw your JSUN file in there, uh, you can
have it loop and do some of the basic Lottie,
uh, functions, but then you can also appear
there is an animation library built in and
you can trigger that on scroll and do some
of those things.
So again, it's a helper. If you haven't done
Lottie much, this is a great, um, way of getting
started on it.
And, uh, there's a lot of tutorials out there
on the forms. I won't go into any of this
too much, but I will say this, that when you
drop a form block on it'll automatically get
wired up on the back end to be able to send
So that's really nice. If you try to set up
a contact page, uh, it's kind of done for
you last but not least components.
There's that background video from like 2005,
six, uh, still rocking and rolling with a
play pause. Dropdowns are generally used for
things like in, in nav, and you've got a dropdown
in a nav.
There is a nav bar component that has a built
in, um, uh, hamburger menu. That'll show on
hide. And there's a little gear thing that
opens or closes, but this is used a lot by
web flow developers.
And then there's, um, an embed for embedding
HTML CSS, if you wanna just do it in line,
and this is really appropriate for when you've
got a newsletter or something like that, we
script tags in the middle of a page.
Do we? I don't think so. Um, and then they
also have a carousel component. It works.
It's very basic and it works.
Most of the guys, I know still go back to
their, their sliders, their J quarry based
stuff, or something custom.
So it's just worth knowing, this might
do if you just need something simple, but
you'll probably end up doing something custom.
So just to start us off here, let's talk about
adding elements to the Dom. There's three
ways to do it.
One is to click it'll show up. The second
way is to drag, which is nice. If you're gonna
nest something, you'll see on the top right
there, it's showing you where it, where it's
And the third way, and the most powerful way
is actually to hit command E E is for everything.
And the find anything tool is really for the,
the elements menu.
And so I can start typing D and div blocks
shows up. I hit return. It adds it. Um, and
they've got a bunch of helpers for that.
So that's just a really nice, nice feature.
So I just wanted to cover adding elements
to the HTML. That is the Dom.
So, um, the second thing I wanna show you
is the navigator. If you hit the Z button,
you'll actually see the hierarchy of the page
and you can drag and drop it, nest things.
You can use your, all your copy and paste
commands, which is really nice. And you can
use these as across pages as well to past
You can also copy and paste HTML from a text
editor. So if you built a page statically
and you're trying to bring it in over, you
can actually paste HTML in here, which is
kind of fun.
Um, it doesn't work perfectly every time,
but it's a nice to have, and you can do the
other things that you would do on a Mac and,
and windows machine where you can hold the
option key and drag, and it's gonna duplicate
it that way as well.
So that's the navigator. You can think of
that as the Haml area. Maybe if you really
want to get nuts, but yeah, that's what it
And then last but not least on the page, um,
pages, I should say, this is where you're
gonna add more pages, but we're on the homepage
And if you hit the gear icon, this is where
you're gonna have access to some of the header,
things like the title tag, meta description,
open graph stuff.
You know, some of these things I think, um,
we've got templates for, right, we'll start
a page and have these things, but it's nice
to have, uh, a section that's, that's neat
and easy to edit.
And then lastly on, this is a custom code
area. Now this is specific to this page. So
if you're gonna do a GDPR or, you know, have
top of everything.
You're gonna do that in a separate area. You're
gonna do it at each page. Um, but there is
one inside the head before the body.
There's a, there's a way to inject some code,
some scripts, some styles in there if you
really want to. So I think the most common
use case I think is having kind of a cool
splash thing happen on the homepage when you'd
use this, or maybe your newsletters, uh, constrained,
um, to a certain page or analytics or something.
But generally speaking, um, this isn't used,
you're gonna use the one that's that's globally
included. That's the left side. Okay.
So we we're really just focused on the HTML
side of things. So you've got your plus you've
got your navigator to kind of get you situated,
maybe select an element this way, or here
is the way of selected elements, but I think
we're, it starts to get, get kind of cool
and interesting is if we slide over to the
Good. So this paint brush is effectively the
universal symbol for CSS, just so you know.
Okay. Paint, brushes, um, at the top of your
selector, selectors, a cool way of saying
Um, it is a little bit more sophisticated
than that, but effectively, this is where
you're gonna put your class names on.
So for me here for this diviv I might call
it a rapper. Some of you guys are bound people.
I don't know what's going on anymore with,
with the, uh, semantic web.
Is that semantic web? I don't know, but like
container names are over the place. Um, so
you can add a class, you can do a combo class
You know, once I've got rapper here, I might
say, no padding or Excel padding, what are
you guys doing right now?
I'm not really sure. Um, so you can do combo
classes as well. The thing that, um, this
also, there also is a few pseudo things like
hover and the, this menu will get bigger if
you're using a button.
Um, so you can do some of those dates as well
as they've got this really cool accessibility
thing, which is the focus keyboard.
You can basically, uh, if you start using
tab on a screen, you know, somebody who's,
uh, visually impaired or using a screen reader,
if you're using tab, you can actually change
So that highlights certain areas as you tab
down the screen, it's super great. It's a
new feature. Web flow does an amazing job
on their, the, the inclusion side of things.
They've got inspectors for, um, looking at
how well your contrast is going. They're gonna
give you alerts if you forgot to put alt tags
It's great for that. So huge props to you
guys for doing that. As you scroll down on
the right side, you're gonna find all the
properties that you would want to put or be
able to put on any element.
So here's your display of properties. And
I think where some of the power really comes
in is for me, I haven't really, I don't really
subscribe and memorize to like every little
thing that the, the flex box or grid can do.
I know some of you guys are like hardcore,
and of course you, you do. But I like started
front in the, in the nineties.
So like flex box is like the nicest thing
to have in the world. As far as I'm concerned,
we should do a table based layout, use Macromedia,
dream Weaver, live our dreams, drink PBRs.
So if I click on this, uh, flex box, you'll
see, you can flip. I mean, it's all the properties
You can flip it to horizontal and vertical
and change the orientation and grids get even
more nuts. Um, but it, it, it kind of does
all those things in a visual way.
And I think that's super helpful when you're
looking at a Figma design and you're translating
things and you need to kind of see what it's
gonna look like in the spacing and padding.
Um, this stuff's kind of cool because there
are shortcuts. So I can, I can drag this to,
to size it.
I can hold the option key to restrict it.
I can hold the option shift to double, double
restrict it. So, I mean, you know, for you
guys, you're just gonna put margin 28 pixels
and it's gonna do this, but I don't know.
I kinda like the shortcut keys to be honest.
Um, and the other thing too, is you can change
the units within here to your Rams.
So it's got all those things in there as well,
some presets. So I think, think that's pretty
nice, um, where it starts to pay off.
Maybe when you get down to like fonts is if
you're using using relative font sizes. And
right now, what we're looking at is in orange,
everything is highlighted the body, the body
tag is inheriting an aerial font and size
14, for some reason why not?
Um, but if, you know, if you're working in
M's or REMS this area for size, you can do
calculations on the fly.
Um, a lot of programs like this can do that,
like unity. So you can multiply it by four
and get your number.
Oh yeah. It was 2.5. Okay. Maybe that math
wasn't great. But the idea is that you can
do your math right in line was kind of nice.
Just one less thing, one less calculator to
have up in a separate window. Another thing
that I think is really nice about having an
editor that's visual is, is backgrounds.
I know layering backgrounds can get kind of
wild sometimes, especially with all the shorthand
you can do with it. So again, if you guys
are like senior level front end devs, you
You think I'm dumb, but this is really nice
to be able to layer it up. And even if you're
real cocky and you were, are like, I do not
need any of these helpers.
I'm never gonna use web flow in my entire
life. Like, I don't know where this business
requirement came from. The thing that will
save your butt, because somebody on the business
side will force you to do so is when we start
dealing with break points, which I'm gonna
get into a minute in a minute, because break
points with backgrounds and flex box and grid.
It's a wild ride. If you don't have a visual
editor, in my opinion. And, and, uh, we flow
When it comes to that, I'll scroll a little
bit further down. They do have some experimental
stuff in here. That's experimental is that's
There's some stuff that aren't supported in
all browsers. Welcome to I E six. Um, but
backdrop filters is something new.
They just added in terms of blurring the background,
because every designer he uses sketch of Figma
has decided it needs to look like frosted
I'm sure that trend's gonna end eventually,
but for now you can put it right in there.
There's also filters for like, say reverse,
doing reverse type on a image or graphic.
And, you know, you might do this. If you're
using a logo that's black on, on a white background
and then white on a black background.
So that reverse type is a good helper. A couple
other things I know that, uh, is, was hard
for me to do.
Just, just typing in and looking at the visual
editor is doing 3d transforms, especially
when you've got the perspective really dialed
in, and this thing's all warping around and
you're going back and forth and back and forth,
um, that is also in here.
So I can very simply add and rotate elements
and do the things I want to do with them.
Um, and you know, even, even if that would
maybe seem simple ish, um, they have the built
in transitions as well.
And these are the CSS, um, CSS three transitions
that came around probably like 10 years ago
or so. And all you're having to do with a
transition is effectively.
I mean, this is loaded up. It's got like some
of the things that you need custom libraries
for at least used to this is like how old
I am, but I mean, you could change, uh, colors
of fonts and backgrounds and margins and all
And this is just, this could be on hover,
just very simple stuff, um, based on your
pseudo tags. So really it's really nice.
Uh, I, I find this really nice. I, I have
all these properties memorized and I could
type 'em fast enough, but as a front end developer,
you will fly because someone who is a low-code
designer getting into web flow, it's gonna
take them a long time to do these layouts.
They don't totally understand the constructs,
but you guys, with your like background, you're
gonna be on to flags, be like, okay, yeah,
this is gonna be a plug box.
We'll move this thing around. You'll do layouts
so fast. It's gonna be great. The gear icon
will allow you to change, uh, that tag to
be something else.
So it could be a section and address if you
wanna be super semantic, some, some SEO folks
like that. Um, Navin Maine.
And then, you know, one of those, some of
those presets I showed on the other side,
they're gonna, they're gonna start as a section
tag, but you can change it, put your IDs,
put your attributes on those as well.
And then there is also an inspector here that
shows you the classes you've made. So, um,
what's nice about this is you can roll over
and see what the actual CSS looks like.
So it's kind of fun. Um, and this is great
for debugging too. I would say if, if web
flow's doing something that you know is not
gonna work on a certain browser or something
like that, which I would say is, does not
happen very much for the unicorn row team.
I would say we pretty much fly. Um, it's a
great way to inspect it, as well as just clean
up your, you know, you, if you work on enough
projects and enough frameworks, you might
flip between Excel dash things or bounds or
calling, you know, we got long tail where
you gotta like make classes like a hundred
characters long, you can do all that in audit
it here and clean it up.
And it's really a great way to do it. This
also has a, an easy cleanup command. If you've
got any, um, orphan classes you created by
accent or something like that, you can click
this and remove 'em.
So this will just tell you all the places
it exists and allow to clean up. So, wow.
What a great helper last but not least.
I just wanted to highlight that. I think even
if you call BS on all this, because I, I even
tell you every front and developer I've ever
talked to, who's never been in web flow or
use an ID is like anti.
Like, this is like clown shoes. I'm not doing
this. Even if you are in that camp after this
point or after maybe a couple videos in I'm
telling you the one thing that you will love
about web flow is being able to check the,
the break points and do the cascading all
So an example of this would be, So here's
a, you know, something just threw together
really quick. Here's a grid with six blocks.
It's a pretty common scenario, right.
Where you've got a three column and maybe
you wanna adjust it on different break points.
So I just wanted to show on the tablet, maybe
But as you get into mobile, uh, landscape
or mobile portrait, we switch to, to blocks.
So those elements are blocks, but you could
also do something much different.
I think that would be a common playbook if
you're using a text editor, but you might
not be as ambitious in terms of manipulating
the grid in some way.
So maybe you might say like, oh, I don't know,
like maybe we wanna do something a little
bit different where we want the first column
to be one and a half.
And, uh, I don't know. And maybe, maybe you
do wanna reduce it to a two column, but you
want that, that first column to be, um, a
little bit wider, maybe takes up a little
Um, so it, it's what I think is great about
it from a speed perspective and this of course
then can cascade down.
Then you can say, you know what, actually
let's do a block at this point. What I think
is great is that I'd say generally when it
comes to workflow and doing styles on, on
break points, I'm always a little bit cautious
to do a lot of overrides, cuz it's a lot to
keep track of, right?
You override something and you're inspecting
it. You're like, oh gosh, I, I didn't override
everything and you're going back and forth
and making sure everything lines up.
And the idea in web flow helps you do this
really fast. And, and you know, you have access
to literally every property here that will
respond at the break point.
It's very quick and easy to see what has changed.
So I just wanted to highlight that for you.
And then the last thing is this eye icon allows
you to toggle a preview and this within the
preview allows you to see it at different
scales in the same way and adjust that.
Um, and so this is similar to what you know,
safari and, and you know, if you've got developer
tools, you're gonna have this obviously as
part of your workflow to be able to change
the browser with, but it's very quick, a,
a way to inspect it quickly in the browser
you're working in.
And then you can publish the staging once
you feel like it's it's working. So that pulls
all the, all the Chrome out of there.
So you can actually see in action. So that
concludes the overview of how to, how to approach
or how to, how to get juxtaposed into a web
flow interface as a front end developer.
Hopefully that's been helpful. Um, keep watching,
uh, this is part of a whole series and, uh,
if you have any questions or comments, you
know, put 'em in there.
So we'll see you on the next one.