Building a site in Webflow – First impressions review!


– Hey everyone, welcome
back to my channel. Today’s video is one that has
been very highly requested by a bunch of different people,
every time I’ve mentioned learning to code, or designing
or building a website in a vlog or a video,
you’ve been telling me to try out Webflow. It’s become a very popular
tool these days it seems. If you haven’t heard of it,
if you’re not one of those people who’ve been
telling me to try I out, it’s basically a
design-slash-development tool, software, whatever you want to call it, for creating websites. It basically is a drag-and-drop editor for making a website so
you don’t have to code it. I’ve never personally been interested in using one of these website
building tools before, because they notoriously
give out really bad code, like bloated, which makes
your site run slower, and it’s harder to edit again later, but Webflow has a really good reputation. I decided to try it out,
because Mackenzie Child, who is a designer-slash-developer
here on YouTube, who makes really good
stuff, you should definitely subscribe to him, he’ll be
linked on a card up there, but he ventured Webflow,
and said that he was pleasantly surprised at the
quality of code it produces, and so, that definitely got
me interested in trying it. In this video, right here,
right now, I’m gonna be using it for the first time. I’ve not actually dived
in yet, because I wanted to be able to film a
first impressions video, and tell you my thoughts as I go along. I have a design that I
have created and sketched for my pricing course that by
the time you see this video, will have gone live. So this right here is
what I’ll be attempting to build in Webflow. It’s pretty basic, pretty
simple, but I think it’ll be a good place for me to start
getting the feel for it, and seeing what it’s
like to use the software and tell you my opinions on it. Now, I will say that I have
watched a few tutorials for using Webflow on their
website, so that I am kind of familiar with where to click or whatever when I dive into it, and I
found them really useful, so if you’re looking to
get started using Webflow, then I would definitely
recommend checking them out, they’ll be linked down
below in the description. But enough intro, let’s get
into attempting to build this page using Webflow. So this is the dashboard on Webflow, and I’m gonna click new
project and get started. I’m gonna get started by adding a section, comes first I suppose, and
then a container to it. (soft, contemplative dance beat) What I really liked when I
was watching the tutorials, and I can see it in here
now, is that it seems like Webflow just takes regular
html and css things, and makes it visual, so I
recognize all of these options here as things that I would write in code, but instead, obviously,
I’m just gonna put them in these places, and that’s
definitely what makes me trust it and trust the
code that comes out of it, because I’m not, for example,
able to drag that dev block that I just put in anywhere on the screen, I put it where it went, and
now I’m going to have to set the width of it myself, which is what you would have to do in code. I’m gonna refer to my
design every now and then so off of this, just so you know. So I’ve used a Bootstrap
grid for my design, because that’s just what
I’ve always tended to use, so now I’ve gotta work
out how to work with the columns and things within Webflow. I don’t know if they do flex
box or something like that, that might be what these columns are. Yes, it does seem to be that. There we go. Right, so now I’m going to
add in my heading, I suppose. Let’s see what that does. The font I’ve used in my
design is a Google font, and I assumed that I would be able to access it through here. There must be a way to do that, but I do not currently know it, so I’m just gonna go
with this one for now. It is pretty nice just being
able to click, in all these text options here and basically
have it coded for you. I like this option. When I tick it, it knows that
I’ve uploaded a 2X version, so it’s gonna like put it half the size so it shows nicely on retina screens. My only problem is that
I cannot see this image, because it is white. And centering is apparently not a thing I can do on the image. Let’s see somehow if
I can edit this class. The thing is if this was
code, I know that centering in this column here would do it all, so let’s try that, I guess, if I tick this is that gonna put, yes, put
the image in the middle. Okay, so I think you kind of need to, well so far it seems anyway,
have an understanding, basic understanding of
code to use this properly. I like that this has defaults
in place to start with, because obviously if I’m
putting in paragraph text, it’s put like a common size
and style for a piece of, like you know, long bits of text, which is really cool, and then
I can just edit it from there rather than having to create
that style from scratch, I guess that just saves
a little bit of time. Okay, so my form, obviously because I went for Convert Kit, in case you didn’t know, which is an email
marketing software company, I’m gonna be using
Convert Kit for my form, but for now I’m just
gonna drag this guy in and see what happens with it. Who knows, so I want you in this column, what have I done? Hmm, okay, so this is gonna take a bit of styling work it seems. Don’t want that label there,
so can I just delete that? Nice, I’ve now decided that
I want to put all of this in a div because I think
that that will help, I’ll be able to change the
padding and things easier, so I wonder if I can
just grab a div block, and nope, not like that. It’s strange that I can’t pick things up after I’ve put it down,
if that makes sense. All of you Webflow experts out there are gonna be thinking I’m
doing this really wrong, aren’t you, but anyway. Just jumped ahead a bit,
because my battery needed to charge, I’m not having
much luck working out how to change the color of this text here, ’cause it says white, but it’s not. So I need to Google that. But I’ve discovered this
tab component in here, which I am going to use
for, if I open up my design, for this bit here, because
this is where I’m gonna embed the YouTube video, and then
you’re gonna click through and it’ll load, and you went in the place, and I though I might have
to do this like adapting a carousel or something
weird, but this is very handy, I’ve just been able to create some tabs, so I’m currently styling these buttons. Seems like you should
just be able to put in the YouTube link to embed
a video, so let’s try that. Yes, that worked out very well. I don’t know if it’s my Chrome or what, but it seems to be having
trouble adding things to the bottom of the page. Well, as you can see, I’ve
got all the basic stuff in, I’m not quite sure how to
create these sharing icons best yet, I need to do a
bit of research into that, but I’ve just got some
buttons in the place for now. All in all, that was really
fast, and easy to build. Quite excited about that. Still a few issues, like
these text fields here that I’m not quite sure about, and like I said these buttons,
but for the most part, this is the bones of my site. Now I haven’t looked yet
at the mobile options, so time to click through
and see what that’s doing. So, on tablet. Nice, nice. Is it gonna be like using the
column options in Bootstrap, where it’ll only affect it from here down? No, it has not done it. Okay, so that doesn’t
work as I was expecting. All in all, this adapts pretty well. This is interesting, I’m not quite sure what it’s doing here, but, I know that on mobile I
don’t want these giant gaps in the way, so what can I do about that? Ah, I see, so those
things were only showing in the editing window, and
actually when you’re not there, it’s absolutely fine, so that’s great. Okay, I think I’m gonna stop here for now, because this is a really good start, and I will Google to help
me with these final things. That was really easy, I’m quite impressed. I’ve said that several
times now, haven’t I? This is what it looks like on desktop, so like I said, there’s just
those form field options, and I need to fill in the
content for these tabs, because currently there’s
only a video in the first one, but it’s amazing that it
just already works like that, so that’s good, and this is
gonna link out to YouTube, I need to put that link in. Need to work out these
icons, but for the most part, this looks pretty similar to
the design that I created. I was able to put things
where I wanted them, and it’s already following the styling for the different devices as well, which is incredibly handy,
’cause that’s much less work, isn’t it for me. There are some things that
didn’t work quite how I expected, for example, I’m still
confused about this form field, I’m sure it’s a really simple answer, and I’ve just not worked
it out, but anyway. And some things, it seems
at the bottom of the screen it was getting confused, like you saw. It is drag and drop from
the menu at the side, but if you try and
arrange stuff within here, you can’t actually click
and drag them it seems, you gotta do it in this
layers panel at the side here. Overall, very happy with it. And we’ll definitely be using it again. Next bit for me, obviously,
is to finish this off and then export the
code and have it hosted on my own website with my own URL, etc. Skipping forward a little
bit into the future, I just wanted to insert
this clip and show you what the page ended up looking like. So this is it live on my site. As you can see, I got those
placeholder texts sorted out. In the end, I had to talk
to the Webflow team about it to get help on that, it’s a known issue, and they were able to help me. Basically, I had to insert
this in line styles in here. To use the code for the site,
I used this option here, which exports the code,
so it downloads a zip file with html to css and the
assets that you’ve used in the code as well, which is very handy, and then I was able to
just make that essentially into a WordPress page by
putting a blank header, and a blank footer on it
that I created especially, so that was a good way around of getting to use that on WordPress. I know that Webflow does
have some publishing options, but I obviously wanted to integrate this with the rest of my site, so
that’s how I chose to do it. I’m glad that I did that,
because it got me to dive in, and take a bit of a closer look
at the code itself, as well. As you can see, it looks pretty normal. Obviously, I’m no expert with code, but it looks pretty good to me. There is a lot of
classes on these columns, though, for example, but anyway, one thing I do wish it
did more was encourage me to use classes in the way
I would if I was coding, because I feel like that
would’ve been a help. I ended up for some reason
having classes on links that I don’t think should
really be necessary. I should’ve just been able to edit a tag within the block that I had that in, so I’m not sure what happened there, but obviously this is a learning curve, and probably that’s not necessary. This is obviously something
that I will learn from, and be able to do better next time. All in all, though, very
impressed, and it’s definitely the best website builder
tool that I’ve used. Anyway, back to past Charli. I really hope you’ve enjoyed
seeming my first impression of Webflow, especially if
you’re one of the people who has been telling me
to try it for a long time. So thank you for suggesting
it, I’m really glad I tried it, and we’ll definitely be using it again. If you’d like to check out
this website that I have been creating in this video,
then the link will be here, I can’t remember what I
said the URL was gonna be for it right now. Thank you for watching
this video, please give it a thumbs up if you enjoyed it, and enjoyed seeing me try it. There’s some more software
that I have not tried yet that I could do a first impression of, like Adobe XD springs to
mind as one that people have been saying I should try for a while. So if you’d like to see
that, let me know as well, and if you’ve used Webflow, let me know what you think of it down
below in the comments. If you’ve got any tips for me, then that would be much appreciated. Thank you for watching, I
hope you have a good day, and I will see you next time, bye.

Author: Kevin Mason

Leave a Reply

Your email address will not be published. Required fields are marked *