Webflow Tutorials for Frontend Developers

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
powerful thing.

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

for.
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
and effectively.

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

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
don't really want to, to put JavaScript and

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
gonna go.

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

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

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

right now.
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
some JavaScript library, that's gonna be on

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
right side.

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

class.
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
as well.

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
the style.

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

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'd expect.

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
don't care.

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

is butter.
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

not true.
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
glass.

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

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

at once.
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

you're okay.
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
more space.

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.

‍