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 onthe playlist up there, we went through the place planned like planning the website, scheming out exactly whattemplates I’m going to need to scheme and build, whatpages I’m gonna need, and as one of the purposes of that, in that video, I mentioned that what I’m going to be doing first is making an MVP which expressed support for a minimumor minimal viable product.I’m pretty sure that’s what it expressed support for. Basically, it simply entails it’sthe smallest possible explanation of the project that willstill get the job done. And in my example, the job that needs to be done is, with my website, is available to allof my material 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 build the MVP of my website which, in my event, is basically just gonna be a single page.I’m gonna be walking you through how I designed it and alsobuilding it live with you in Webflow, well , not live, because I’m gonna be editing this video, but you know what I intend. I actually kind of like when people have just one-page websites. I think it’s kind of negligible and cool, and it’s just like a blurb about them, and yeah, attaches 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 wentthrough the design process, but as “youre seeing”, as “youre watching” it, I pretty much previously had an idea in recollection of exactly what I wanted to do.I definitely did try outa few different versions and explore a couple ofdifferent arrangement theories for this text, but for the most part, the idea was prettysolid before I started. I was initially thinking about having it be a white page with some white colored attaches or something to produce some dye accents in there, but then I considered, “You know what? “It’s my website, and Ireally like pink and purple. “So why not just have apink and purple gradient “as my background? ” I tried it with a photograph, but it didn’t really undertaking, and I decided it wasn’tincredibly important at this stage either.So this is what I’veended up with as the page that I’m going to be build today. It’s just a plain pink and purple gradient in the background, a logo at the top, and that emblem is actuallygonna be animated. There’s some very simple text that precisely asks who I am and what I do and links off to the relevant stuff. For my work, for theCheck Out My Work link, I’m gonna be linking to my Drupal profile, instead of a portfolio.Then at the bottom, there’slinks to all of the socials and the stuff and the places to find me. So it’ll perform that is the subject of, yeah, be made available to my content, access to contact me and view my work butwithout too much design and development work at this stage. It’ll has become a good placeholder while I is currently working on the residue. So what I’m gonna do nowis start screen-recording and house this in Webflow. I’ll be honest. I have not really usedWebflow all that much before. In point, I filmed a videoof my first impressions, and I’ve not use it much since then. So it’s gonna be a learningcurve to go through, but I’m roused to get stuckin and get to know it better. And I think that a small projectlike this is a great place to start, so let’s dive in. All privilege, so this isa brand-new Webflow project, and I know that to start it, I need to add a container.And actually, first, Ishould 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 lily-white page( chuckles ). I went to a Webflow workshop at Epicurrence that was hosted by Ran who runs the canal Flux. He went through an introductionto Webflow and using it, and a great deal of what he said, like, it actually clicked with me, that this is not a websitebuilder in the sense that you’re just draggingstuff around on the screen, and it’ll realise the system for you.You’re still thinking about regular HTML and CSS structure and how that, you are familiar with, you’d put together if youwere coding it by hand, but it’s just that thismakes it a whole lot easier. So with this container now, instead of really droppingthe logo straight in, what I are mostly do if Iwas building myself is introduced it in a div block, sothat’s what I’m gonna do.( upbeat music) I’m gonna include a class tothis div,’ justification I think that was another oneof the mistakes I offset when I was doing the first impressions, is that I was kind of justbuilding all over the place, and I wasn’t originating grades as I depart, which if I was coding byhand, I would be doing. So I’m gonna bawl this one logo, and then on badge, I’m going toadd some boundaries at the top .( upbeat music) Okay, to start this H1, Iwould hope that I don’t have to add a class to it. andinstead if I exactly style it, it’ll apply to all each ones on the page, even though there’s only gonna be one, but yeah, I would assumethat’s how it offices. So that’s what I’m just gonna go with. I need to work out howto host my network typeface. If I take advanced …( Charli vibrates) I think something elseI need to come back to. We’ll just go with aerial for now, but the font nature usedin my intend is Averta, which is a fave. It’s from the Decorators Foundry, and yeah, I use it inpretty much everything. So I’m sure you’ve seen it before. Let’s assessment that presumption now. If I style this paragraph text to be white, when I add anotherparagraph, will it be grey?( upbeat music) No. There we go, got it, okay. So if you want to style allof the thing on the page and not inadvertently create arandom class for it, you have to select it so that it’s allparagraphs, all H1, I approximate .( upbeat music) One thing you have to make sure of is that you’re dropping yourblock in the right place. See how if I articulated it now atthe outside of the container, so I gotta make sure thatthere’s a place to drop it. Okay, so I crave this guy to be pinned to the bottom of the screen, and I feel like I knowhow to do this in code. So let’s see if we can figure it out here. Yeah, there we go, ultimate, and then, is this the one to lean? Maybe it’s this one, zero. There “theres going”. Cool. That’s not exactly whatI want though, is it? I feel like I’m gonna haveto do some CSS research, but regardless, let’s continue lending stuff.So for these people here, I want them to be SVG’s, because I want to be ableto change the flit commonwealth, like deepen the emblazon on poise. I’m gonna manufacture me extend adark purple, I imagine. I was doing betterresearch about it before and come across this guy now. So yes, I have to embed the SVG code, rather than upload it as an likenes datum. Let’s see how to go about doing that. So I’m guessing I takean HTML block somehow. Embed, there “theres going”. That’s probably it. Let’s set it in here. Now I use a implement called, actually I can neverremember if it’s OMGSVG.No, it’s SVGOMG. Okay, so this is a tool that I use to compress SVG registers. Oh, what am i doing? I can’t like steer my computer and talk at the same time. Okay, so I like utilizing this, because it really compressesthem a little and get rid of things likethe title, stuff like that. So yes, and then I canjust go to Markup actually, and hopefully you justcopy it straight-out from here. Let’s see, if I include this in …( upbeat music) Cool, there we go. We’ve got it. Wonder if I gonna labelthis thingy, though. No, it doesn’t seem to be, okay. That’s all right. I do want to articulated a class on it, though, because then I can justchange the levitate territory on that class, andhopefully, it should apply to all of them, like logically envisaging. Let’s announce this Social Icon.Makes gumption, right?( upbeat music) Oh, hey, I time realized that you can simply usethe Undo key in Webflow. That’s kind of nice. I, you are familiar with, really did it out of habit, and it manipulated( roars ). All privilege, we’ll solve that problem last-minute. I’m just gonna get all of my icons sitting in this space, for now.( upbeat music) I’m wondering, see howthe fill is been incorporated in the code here? I’m wondering if that, perhaps, shouldn’t be like that.I should rather really bedoing that through the CSS, but I approximate we’ll catch out when I is currently working on our marketing website. We use IcoMoon to generate an icon font. So usually, for smallSVGs and things like this, I would simply use that, because then you justchange the color of text, and it changes the color of the icon, because the icon is thefont, if that becomes appreciation. All title , now all thepieces “re around”. I predict I should lend the links as well,’ compel that’s like somethingelse that I need to style.I know I had troublewith attaches, last time, styling them, so let’s see how we go. All right, make this a link. Now “theres going”, and this, just like the paragraphs, I think this was my problem, last-place go, is I didn’t hand-picked 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 thehover for all ties-in, too. That would be ideal. Okay, we have a rogue speck violet link, and I don’t know why it is doing that .( keys clucking) Okay, it was like perhaps this is a bug. So what we’re gonna do is … Boom, that worked, cool. Okay, this is where youget on our gatherings( shrieks ). Right, so I’m gonna made a bottomborder on all of my links. I don’t like doing it marked, because I feel like itsits too close to the text, and I reckon yeah, I don’t know. A underside borderline merely looksa little bit more sleek. So we’re gonna have it solid. It’s gonna be one pixel.And it’s gonna be grey. I also really like adding a transition on to connects and things like that,’ begin I just think it eases in, and it looks really nice. So we’re gonna transform the border color. Yup, and we’re too goingto, can I add another one?( upbeat music) So you are familiar with, when I levitate, like, it does seem kind of cool. Yeah, yeah, okay, for this content block, how do I make sure I isolate to that? I recollect I can go in now and depart content.There we go. I placed a percentage on the altitude, but I meditate I’m gonna actually do it based on the viewport,’ cause that nature, when Ishrink up the page, yeah, that will change to, okay. Should we do the easy thing firstly? Should we figure out how to oblige these things reform emblazon? 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 predict the first thing todo is make this guy a attach. And I would guess thatthe best way to do that, I’m probably gonna have toedit in this HTML file now.( upbeat music) Okay, so now that there’s a relation, it, of course, has that underneath, since we are rectified that to go on all relations, so it’s got an stres, but I’m gonna set social icons to have a bottom of none.Ooh, ooh , no, that’s what I it is necessary do. I see I need to go to alink within Social Icon. Looks like this is gonna beanother 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 miss thecolors to go the same as the link colorings do, it’s easy. All that I’m dealing withis 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 crave. I know I’ve coded this before. I’m sure it’s easy. I’ve just forgotten how, so fix footer to bottom of sheet. 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 somethingthat explains how to make love. So you just gotta, like, kind in the right thing into Google basically.( upbeat music) Okay, I’ve gotten somewhere. I forgot, silly me, thatWebflow consumes Flexbox, which is a pretty greatmodern CSS framework. I don’t know if that’s the right word, and I’m sure all the codepeople will tell me I’m wrong for it, but Flexbox is prettygreat, because it helps you with adjustment and things. How I did it was I observed this tutorial from one of the Webflow training videos, I guess is the word I’m looking for, which have contributed to me do exactlywhat I was trying to do. So there we go, that’s great. Exactly to walk you through it, in case this is somethingyou’re having trouble with too, here’s what I did.So first of all, my containerhas flex display on it now, rather than being display blocks, my flex set to verticaland set to a space between, so that, like, the topthing will go at the top, and the bottom thingwill go at the bottom, if that obliges smell. Then my material block, which is this thing in the middle here with my text in it. I’ve determined it to expand, and that means that, say, if I change it to this, which is the regular set. Expand means that it willfill in any extra gap in between like either surface of its consideration of the sub-item. So basically it adds spaceat the bottom and at the top to push the other things outto the end, which is great. So then if I wince my page in, like the footer is staying there, and it won’t overlap itanymore, either, which is ideal. I likewise included, so I situated allof my middle content stuff into its own div, to nest it in there, reached that a bit shorter ,’ crusade I are concerned that my wrinkle portion “ve been a little” too long, and then I placed 20% ofthe notion stature margin on this thing, just to like, yeah, be a bit more responsive, so as you diminish the screen up, the infinite reduces a little bit too.So not sort of the issueof these lines hitherto, but what I have done,’ causealso recollecting Flexbox, is I’ve earn my footer tobe expose flex as well, and I’ve aligned theitems to the center, ensure, whereas before they wereall hanging up top now. So I entail, you couldn’t reallytell because of the lines, I ponder, but yeah, it looksbetter if they’re all aligned with the center of the image.So really happy that I figured that out. Something cool about Webflowis that it’s really easy to do the accept styles. So I’ve just been tick through now and changeable things as needed. Here’s an example. In my primary desktop attitude, I have this content textblock at 90% diameter, right, because they didn’t wantit unfold all the way to the end. When I go into tablet notion though, and then further down, Iwant it to be back to 100 %. So I change it now, 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 now though, I’ve constitute the lead smaller on portable, precisely because it was alittle bit nasty, and I speculate I’m gonna makethe paragraph text smaller as well, so let’s rememberto go to all paragraphs and wince this guy down. Then if I go back up, you seethe text comes bigger again. It’s so handy.Yeah, solving this issue oftargeting a link within a div, so rather than all tie-ups on the page, I know I could go through and time, like, instead of having linkstyling across the board, I could make all these a class, like a textbook tie-in class andapply it to all these tie-ups. But I don’t think Ishould have to do that. There must be a way to target all links within a certain div. So yes, I have done whatI ever do when I get to a point that I’m stuckand have asked for help, reached out to Webflow on Twitter. So I’m gonna wait nowand see what they say. Okay, I’m back. I figured it out, andit’s a few days later, as you can probably tell by the fact that my whisker is a lot more purple than it was in the last clip.So it turns out thattargeting a connect or a leader or whatever within anotherclass is not yet a feature of Webflow, but it was a pretty easy fix to exactly included a few cases courses of custom-made system in the project gives slouse of, yeah, this Webflowproject that I have. So I time wrote a few boundaries in there to take away the bottomborder from the social icons and also from the logo as well,’ stimulate I realise that link to the home page. Something else I did, without screen-recording it, been established some pagesfor the static things that I have a joined on my old website, so things like my portfolioreview instructions, things like the figure to downloadmy screen etching navigate, which is linked to from what I think is my most popular video. I didn’t want those sheets to be offline,’ stimulate I craved parties tostill have that information and be able to access it, so I just made a really simple basic page that mansion that intelligence, and yeah, makes over that URL so that it doesn’t going to see a 404 error.And with that said, this versionof 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 hugeproject that I is available in sentiment. I hope you experienced seeingthe coding process of it. As I suspected, it was a reallygood, simple little project to get back into using Webflowand only get used to it and how it cultivates, learnsome things as well. So if you’re wanting tolearn Webflow yourself, perhaps stirring yourself a single-page site could be a really good place to start. I’ve articulate a relation in the description to where you can try Webflow out. It’s free to simply get inthere and have a play. You have to pay if youwant to host the project or export the system, butyeah, if you time want to get started employing itand examining what you think, then you can dive in. If you did enjoy the second largest video in my Website Redesign series, then being given 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, perhaps you can share thatdown below in the comments. Next up in the streak, we’ll be tackling thebigger website project, and I’ll be starting towireframe out the pages that I schemed that Ineed, in my sitemap video, the first video in the series.So abide chanted for that. I think it should be a good one. I’ll going to take youthrough my thought process when I’m in those initialstages of designing a web page, and in such cases, designingmultiple web pages and how components mighttransfer across them. So look forward to that, and I will see you in the next video, bye.( upbeat music ).

digital marketing

As found on YouTube

Share this article

Leave a comment