Building a single-page site in Webflow – Episode 2 of Designing a Website

Building a single-page site in Webflow – Episode 2 of Designing a Website


– Hello, everyone. Welcome to the second video in my Website Redesign series. In the first one, in the last video, which I’ll link to on
the playlist up there, we went through the site map like planning the website, planning out exactly what
templates I’m going to need to design and build, what
pages I’m gonna need, and as part of that, in that video, I mentioned that what I’m going to be doing first is making an MVP which stands for a minimum
or minimal viable product. I’m pretty sure that’s what it stands for. Basically, it just means it’s
the smallest possible version of the project that will
still get the job done. And in my case, the job that needs to be done is, with my website, provide access to all
of my content online. I need to showcase my work and also make it easy to contact me. So that’s what we’re gonna be doing today, is designing and building the MVP of my website which, in my case, is basically just gonna be a single page. I’m gonna be walking you through how I designed it and also
building it live with you in Webflow, well, not live, because I’m gonna be editing this video, but you know what I mean. I actually kind of like when people have just one-page websites. I think it’s kind of minimal and cool, and it’s just like a blurb about them, and yeah, links off to their stuff. So that’s what I’ve decided to go with for this MVP of my website. I recorded my screen as I went
through the design process, but as you can see, as you watch it, I pretty much already had an idea in mind of exactly what I wanted to do. I definitely did try out
a few different versions and explore a couple of
different arrangement ideas for this text, but for the most part, the idea was pretty
solid before I started. I was originally thinking about having it be a white page with some white colored links or something to bring some color accents in there, but then I thought, “You know what? “It’s my website, and I
really like pink and purple. “So why not just have a
pink and purple gradient “as my background?” I tried it with a photo,
but it didn’t really work, and I decided it wasn’t
incredibly important at this stage either. So this is what I’ve
ended up with as the page that I’m going to be building today. It’s just a plain pink and purple gradient in the background, a logo at the top, and that logo is actually
gonna be animated. There’s some very simple text that just explains who I am and what I do and links off to the relevant stuff. For my work, for the
Check Out My Work link, I’m gonna be linking to my Drupal profile, instead of a portfolio. Then at the bottom, there’s
links to all of the socials and the stuff and the places to find me. So it’ll serve that purpose of, yeah, access to my content, access to contact me and see my work but
without too much design and development work at this stage. It’ll be a good placeholder while I work on the rest. So what I’m gonna do now
is start screen-recording and building this in Webflow. I’ll be honest. I have not really used
Webflow all that much before. In fact, I filmed a video
of my first impressions, and I’ve not used it much since then. So it’s gonna be a learning
curve to go through, but I’m excited to get stuck
in and get to know it better. And I think that a small project
like this is a great place to start, so let’s dive in. All right, so this is
a new Webflow project, and I know that to start it,
I need to add a container. And actually, first, I
should style the body with the gradient, shouldn’t I? So let’s figure out how we do that. (upbeat music) Cool, that was pretty easy. This is already looking better than a plain white page (chuckles). I went to a Webflow workshop at Epicurrence that was hosted by Ran who runs the channel Flux. He went through an introduction
to Webflow and using it, and a lot of what he said, like, it really clicked with me, that this is not a website
builder in the sense that you’re just dragging
stuff around on the screen, and it’ll make the code for you. You’re still thinking about regular HTML and CSS structure and how that, you know, you’d put together if you
were coding it by hand, but it’s just that this
makes it a whole lot easier. So with this container here, instead of just dropping
the logo straight in, what I would generally do if I
was building myself is put it in a div block, so
that’s what I’m gonna do. (upbeat music) I’m gonna add a class to
this div, ’cause I think that was another one
of the mistakes I made when I was doing the first impressions, is that I was kind of just
building all over the place, and I wasn’t creating classes as I go, which if I was coding by
hand, I would be doing. So I’m gonna call this one logo, and then on logo, I’m going to
add some margins at the top. (upbeat music) Okay, to start this H1, I
would hope that I don’t have to add a class to it. and
instead if I just style it, it’ll apply to all each ones on the page, even though there’s only gonna be one, but yeah, I would assume
that’s how it works. So that’s what I’m just gonna go with. I need to work out how
to host my web font. If I take advanced… (Charli hums) I think something else
I need to come back to. We’ll just go with aerial for now, but the font type used
in my design is Averta, which is a fave. It’s from the Designers Foundry, and yeah, I use it in
pretty much everything. So I’m sure you’ve seen it before. Let’s test that theory here. If I style this paragraph text to be white, when I add another
paragraph, will it be white? (upbeat music) No. There we go, got it, okay. So if you want to style all
of the thing on the page and not accidentally create a
random class for it, you have to select it so that it’s all
paragraphs, all H1, I guess. (upbeat music) One thing you have to make sure of is that you’re dropping your
block in the right place. See how if I put it here at
the outside of the container, so I gotta make sure that
there’s a place to drop it. Okay, so I want this guy to be pinned to the bottom of the screen, and I feel like I know
how to do this in code. So let’s see if we can figure it out here. Yeah, there we go, absolute, and then, is this the one to put? Maybe it’s this one, zero. There we go. Cool. That’s not exactly what
I want though, is it? I feel like I’m gonna have
to do some CSS research, but anyway, let’s keep adding stuff. So for these guys here,
I want them to be SVG’s, because I want to be able
to change the hover state, like change the color on hover. I’m gonna make me go a
dark purple, I think. I was doing better
research about it before and come across this guy here. So yes, I have to embed the SVG code, rather than upload it as an image file. Let’s see how to go about doing that. So I’m guessing I take
an HTML block somehow. Embed, there we go. That’s probably it. Let’s put it in here. Now I use a tool called, actually I can never
remember if it’s OMGSVG. No, it’s SVGOMG. Okay, so this is a tool that I use to compress SVG files. Oh, what am i doing? I can’t like navigate my computer and talk at the same time. Okay, so I like using this, because it just compresses
them a little bit and gets rid of things like
the title, stuff like that. So yes, and then I can
just go to Markup actually, and hopefully you just
copy it straight from here. Let’s see, if I add this in… (upbeat music) Cool, there we go. We’ve got it. Wonder if I gonna label
this thingy, though. No, it doesn’t seem to be, okay. That’s all right. I do want to put a class on it, though, because then I can just
change the hover state on that class, and
hopefully, it should apply to all of them, like logically thinking. Let’s call this Social Icon. Makes sense, right? (upbeat music) Oh, hey, I just realized that you can just use
the Undo key in Webflow. That’s kind of nice. I, you know, just did it out of habit, and it worked (laughs). All right, we’ll solve that problem later. I’m just gonna get all of my icons sitting in this space, for now. (upbeat music) I’m wondering, see how
the fill is embedded in the code here? I’m wondering if that, perhaps,
shouldn’t be like that. I should instead just be
doing that through the CSS, but I guess we’ll find out when I work on our marketing website. We use IcoMoon to generate an icon font. So usually, for small
SVGs and things like this, I would just use that, because then you just
change the color of text, and it changes the color of the icon, because the icon is the
font, if that makes sense. All right, now all the
pieces are in there. I guess I should add the links as well, ’cause that’s like something
else that I need to style. I know I had trouble
with links, last time, styling them, so let’s see how we go. All right, make this a link. Here we go, and this,
just like the paragraphs, I think this was my problem, last time, is I didn’t select All Links to style. So that’s what we’re gonna do. So our links are going to be… Why is it telling me that it is white when it is actually purple? I hope this does the
hover for all links, too. That would be ideal. Okay, we have a rogue dot purple link, and I don’t know why it is doing that. (keys clacking) Okay, it looks like maybe this is a bug. So what we’re gonna do is… Boom, that worked, cool. Okay, this is where you
get on our forums (laughs). Right, so I’m gonna put a bottom
border on all of my links. I don’t like doing it underlined, because I feel like it
sits too close to the text, and I think yeah, I don’t know. A bottom border just looks
a little bit more sleek. So we’re gonna have it solid. It’s gonna be one pixel. And it’s gonna be white. I also really like adding a transition on to links and things like that, ’cause I just think it eases in, and it looks really nice. So we’re gonna transform the border color. Yup, and we’re also going
to, can I add another one? (upbeat music) So you know, when I hover, like, it does seem kind of cool. Yeah, yeah, okay, for this content block, how do I make sure I isolate to that? I think I can go in here and go content. There we go. I put a percentage on the height, but I think I’m gonna actually do it based on the viewport, ’cause that way, when I
shrink up the page, yeah, that will change to, okay. Should we do the easy thing first? Should we figure out how to make these things change color? I don’t know why I think that’s easy. I did have a tutorial about it. So let’s try and follow this here. I guess the first thing to
do is make this guy a link. And I would guess that
the best way to do that, I’m probably gonna have to
edit in this HTML file here. (upbeat music) Okay, so now that there’s a link, it, of course, has that underneath, because we set that to go on all links, so it’s got an underline, but I’m gonna set social icons to have a bottom of none. Ooh, ooh, no, that’s what I need to do. I think I need to go to a
link within Social Icon. Looks like this is gonna be
another one of those things that I’m adding to my to-solve-later list. Ooh, interesting, let’s try this. Yeah, buddy, we got it. So because I want the
colors to go the same as the link colors do, it’s easy. All that I’m dealing with
is that border issue. But that’s okay. We’ll sort that out. Now that that one’s sorted,
let’s move on to this issue of this footer thing not doing how I want. I know I’ve coded this before. I’m sure it’s easy. I’ve just forgotten how, so anchor footer to bottom of page. This is a tip for coding. If there’s something you want to do, you can be pretty sure there’s like a Stack Overflow or a CodePen, a CSS-Tricks or something
that explains how to do it. So you just gotta, like,
type in the right thing into Google basically. (upbeat music) Okay, I’ve gotten somewhere. I forgot, silly me, that
Webflow uses Flexbox, which is a pretty great
modern CSS framework. I don’t know if that’s the right word, and I’m sure all the code
people will tell me I’m wrong for it, but Flexbox is pretty
great, because it helps you with alignment and things. How I did it was I found this tutorial from one of the Webflow training videos, I guess is the word I’m looking for, which helped me do exactly
what I was trying to do. So there we go, that’s great. Just to walk you through it, in case this is something
you’re having trouble with too, here’s what I did. So first of all, my container
has flex display on it now, rather than being display blocks, my flex set to vertical
and set to a space between, so that, like, the top
thing will go at the top, and the bottom thing
will go at the bottom, if that makes sense. Then my content block, which is this thing in the middle here with my text in it. I’ve set it to expand,
and that means that, say, if I change it to this,
which is the regular setting. Expand means that it will
fill in any extra space in between like either side of this item. So basically it adds space
at the bottom and at the top to push the other things out
to the end, which is great. So then if I shrink my page in, like the footer is staying there, and it won’t overlap it
anymore, either, which is ideal. I also added, so I put all
of my middle content stuff into its own div, to nest it in there, made that a bit shorter,
’cause I was worried that my line length was a bit too long, and then I put 20% of
the view height margin on this thing, just to like,
yeah, be a bit more responsive, so as you shrink the screen up, the space shrinks a little bit too. So not sort of the issue
of these lines yet, but what I have done, ’cause
also remembering Flexbox, is I’ve made my footer to
be display flex as well, and I’ve aligned the
items to the center, see, whereas before they were
all hanging up top here. So I mean, you couldn’t really
tell because of the lines, I think, but yeah, it looks
better if they’re all aligned with the center of the image. So really happy that I figured that out. Something cool about Webflow
is that it’s really easy to do the responsive styles. So I’ve just been clicking through here and changing things as needed. Here’s an example. In my main desktop view, I have this content text
block at 90% width, right, because they didn’t want
it stretching all the way to the end. When I go into tablet view though, and then further down, I
want it to be back to 100%. So I change it here, and it applies to all of the breakpoints below it, as well. So that’s really handy. This is all looking good. Ooh, something, an issue here though, I’ve made the heading smaller on mobile, just because it was a
little bit obnoxious, and I think I’m gonna make
the paragraph text smaller as well, so let’s remember
to go to all paragraphs and shrink this guy down. Then if I go back up, you see
the text gets bigger again. It’s so handy. Yeah, solving this issue of
targeting a link within a div, so rather than all links on the page, I know I could go through and just, like, instead of having link
styling across the board, I could make all these a class, like a text link class and
apply it to all these links. But I don’t think I
should have to do that. There must be a way to target all links within a certain div. So yes, I have done what
I always do when I get to a point that I’m stuck
and have asked for help, reached out to Webflow on Twitter. So I’m gonna wait now
and see what they say. Okay, I’m back. I figured it out, and
it’s a few days later, as you can probably tell by the fact that my hair is a lot more purple than it was in the last clip. So it turns out that
targeting a link or a heading or whatever within another
class is not yet a feature of Webflow, but it was a pretty easy fix to just add a few lines of custom code in the project settings section of, yeah, this Webflow
project that I have. So I just wrote a few lines in there to take away the bottom
border from the social icons and also from the logo as well, ’cause I made that link to the home page. Something else I did,
without screen-recording it, was set up some pages
for the static things that I have a linked on my old website, so things like my portfolio
review instructions, things like the form to download
my screen printing guide, which is linked to from what I think is my most popular video. I didn’t want those pages to be offline, ’cause I wanted people to
still have that information and be able to access it, so I just made a really simple basic page that house that information, and yeah, takes over that URL so that it doesn’t go to a 404 error. And with that said, this version
of my website is now live, which is really exciting. I’m happy to finally have it out there, and it feels like that first step towards tackling this huge
project that I have in mind. I hope you enjoyed seeing
the coding process of it. As I suspected, it was a really
good, simple little project to get back into using Webflow
and just get used to it and how it works, learn
some things as well. So if you’re wanting to
learn Webflow yourself, perhaps making yourself a single-page site could be a really good place to start. I’ve put a link in the description to where you can try Webflow out. It’s free to just get in
there and have a play. You have to pay if you
want to host the project or export the code, but
yeah, if you just want to get started using it
and seeing what you think, then you can dive in. If you did enjoy the second video in my Website Redesign series, then please give it a thumbs up and let me know down below in the comments what your favorite part of this video is. If there was, I don’t know, a particular thing you learned in it or maybe something I did wrong that you think I need to learn, maybe you can share that
down below in the comments. Next up in the series, we’ll be tackling the
bigger website project, and I’ll be starting to
wireframe out the pages that I planned that I
need, in my sitemap video, the first video in the series. So stay tuned for that. I think it should be a good one. I’ll be taking you
through my thought process when I’m in those initial
stages of designing a web page, and in this case, designing
multiple web pages and how elements might
transfer across them. So look forward to that, and I will see you in the next video, bye. (upbeat music)

Author: Kevin Mason

68 thoughts on “Building a single-page site in Webflow – Episode 2 of Designing a Website

  1. Love this series!! So helpful for beginners 🙂 Please keep this series going. Thank you for your efforts and great quality explanations!

  2. Get coding it, Webflow isn't proper web design! Infuriated me when I tried it. That page is so simple to do anyway. Like web design for the intellectually challenged. Everything has to be dumbed down these days. The colours shouldn't be in the SVG code. This will make them go black then you can change with CSS using the fill property.

    That's my issue with apps like this, you don't learn concepts properly. FlexBox for example isn't a framework. Can't believe you had to resort to writing CSS just to format those links pretty lame. I'd put a link to Visual Studio Code as well as Webflow 😁

  3. Do you think making text smaller on mobile is the best experience when visitors will be seeing it on a smaller display to begin with? Doesn’t seem to be the best user experience choice.

  4. I love the simplicity of the new website. My one issue would be that on my mobile the gradient doesn't scroll with the content or scale to fit the page so halfway down the page there's a line where the background jumps from pink back to purple. Is that fixable?

  5. Really useful video! Thank you so much for sharing your knowledge with us(especially for those who cannot afford expensive courses). What you're doing here is amazing! Pease, don't listen to trolls.

  6. This looks awesome! Is the MVP always meant to be used only as a placeholder until the final solution is done?

  7. I've been using Adobe Muse for the past 6 years, and Adobe have just decided to pull the plug on it. I'm excited to expand my skills and master Webflow now 🙂 Hopefully the team at Webflow don't decide to bin that too in the near future!

  8. Interesting that you chose to use a vanilla SVG an not build and icon font as it would be much easier to manipulate through css probably a web flow thing?

    Note I need to remember not to comment before I have watched the whole video 😑

  9. i would like some tips to design a functional website about sport events. It's a proyect from high school. it has different users like trainer, admin and normal user, it allows schedule trainings, receive documentation on pdf and shows past, actual and future events. Help pls!! I'd like your opinions

  10. Keep up the good content, Charli!..don't pay attention to people being picky about what's code and what's not code. Your tutorial about webflow was that: How to use this tool, not to get philosophical about code. I know this tools can help many people who doesn't have the time to learn in depth html css js on creating their content online. Of course it has pros and cons, and yes, personally I would prefer to code it from the scratch because that's my job, but I love that people can create their own websites to share what they do with the world.

  11. The pink color is not easy to see. Might be better to add a bit more pink color on the right bottom of the gradient?

  12. You should look at the adobe suite for web design. Here is a video that describes their stuff. https://www.youtube.com/watch?v=Gge99MBMyJk

  13. Awesome work on the new site Charli! 😄

    I noticed that you're trying to target the links within a paragraph element. While we don't support targeting links within a regular paragraph element, we do support targeting all sub elements (headings, links, quotes, lists etc) within a Rich Text Element once the Rich Text Element has a class applied to it 😄 (https://university.webflow.com/article/rich-text)

    I noticed someone commented below about the favicon as well, that's a quick update in your site settings which you can make if you'd like: https://university.webflow.com/article/favicons-and-touch-icons

    Beautiful new site, looking forward to your future videos 💯🚀 💜

  14. Hi great videos, I started with Webflow a few years ago. Am currently rebuilding my site, now I've a better understanding of how the coding works. Was a bit frustrating coming from design tools, but once we understand the structure of pages it all makes sense. My tip is to create a test page, where you can try elements without interrupting your main site. P

  15. Good video – I don't think you said – What program did you do your roughs in at the beginning? I don't recognize it….

  16. Thanks, curious what is the learning curve for Webflow, from the video above seems fairly high?

    Looking to rebuild my current wordpress (divi theme) to something more easy to use.

  17. Charli clearly knows her 'stuff'. And she also is very engaging too. Bubbly, effervescent and fun. The issue for me isn't about Charli's knowledge, skill or experience; my issue is the speed at which all of this happens. I suppose the first thing to do when making 'training' videos of this type is to decide on the 'target' audience; i.e. is this for beginners, intermediate or advanced users?

  18. Wish you could have slowed the part where you speeded through but, I enjoyed it and it sure helped me to give thought to what I need to do.

  19. Great intro video for those wanting to learn more about Webflow. I find it amusing that even here there are haters that down voted this vid. There are butt hurt losers everywhere. But thanks for the upload and I look forward to more videos.

  20. For icons, it's a ton easier to upload an icon font like font awesome or any other icon font. Then you can change the color easily using text attributes without having to add code. I do hope Webflow incorporates icons into the designer very soon.

  21. I don't know how you do it but you have the best voice quality in your videos 0 noise, anyway good job with the website mockup.

  22. hi can i design in webflow and export the codes to different hosting partner.
    what is the price i have to pay? to design and export code

Leave a Reply

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