Build a Website With No Code - Figma & Webflow | Oliur | Skillshare

Build a Website With No Code - Figma & Webflow

Oliur, Designer and creator.

Build a Website With No Code - Figma & Webflow

Oliur, Designer and creator.

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (1h 9m)
    • 1. Intro

      0:39
    • 2. Getting Started & Header

      12:32
    • 3. Hero

      5:06
    • 4. Work

      10:20
    • 5. Services

      8:45
    • 6. News / Blog

      8:33
    • 7. Footer

      13:00
    • 8. Let's make it responsive

      10:21
36 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

937

Students

2

Projects

About This Class

In this class you'll be taking a website that I've designed and building in Webflow without having to learn any code.

You can see the website we'll be designing here - Simple Business Website in Figma.

This class is ideal for beginners and anyone who is interested in building a website but doesn't want to learn any code.

Meet Your Teacher

Teacher Profile Image

Oliur

Designer and creator.

Teacher

Hello, I'm Oliur. I'm a designer and creator who has been designing for over 10 years. I've had the privilege of working with clients from small local businesses to multi-billion dollar companies. I now earn six figures as a designer so I hope you can learn something from me to also have a great career in design and creativity. 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: Hey everyone, my name is alia. I'm a designer, a UI UX designer, and are being designed by over ten years now, I've had the privilege of working with various different companies, ranging from small local businesses to multi-billion dollar companies. In this class, we'll be taking a design and building it in Web flowing without actually having to learn any code. I'll be showing you step-by-step how to get it done. Because I personally think one of the best ways of learning is by building. This class is ideal for beginners and for anyone who's looking to build websites without actually touching any guide. So hope you guys enjoy it. Let's get into it. 2. Getting Started & Header: We need to work out what we're actually designing. So I've designed a website here in sigma. Now I'll leave a link to it down the night so that you can also check out this file, checkout everything in it, and follow the same design. This design is pretty simple, nothing too complex, and that's how I've kept it so that it's easy for you guys to follow along. You will of course, need a web flow account. Once you're in your workflow, can he go to dashboard? You go to New Project, select blank side. Cooler, iodine because that is what the design is called as well. And then we RDC guy. So once you've done that philosophy presented with this soft Canvas star on the left hand side. Over on the left, we have add elements, symbols, navigator, pages, CMS, e-commerce, assess, and settings. With fewer things down here, such as grades and staff hiding elements, recoding well, video tutorials and support. Next to that we have the navigator. The navigator is something we're going to be using a lot. And it's basically where all of your layers and your elements and everything will be contained similar to the layers files in FISMA. Along the top, we have our desktop, tablet, mobile landscape, and mobile views. This will be used to basically make sure our website is responsive and seeing what it looks like when it's responsive. On the right-hand side, we have the style at certain of the solid is another thing that we're going to be using a lot to style any element or any section on the website. We also have elements settings. We have style manager and we have interactions. Interactions isn't something we are going to be dealing with today. We're mainly going to be focusing on styling. So we need to familiarize ourselves with our design, the colors, the styling, the fonts, things either. So we can see our design has a very light blue background. So we can take that background here, that color, that hex code, copy it, go to Web Flow, select our body. And then we go down and we choose backgrounds, and then we go into color. And we simply paste that in there. Now our website has a light, very light bluey grey background. We also need to change the font. So our design mainly uses a phone cord into, into is a free phone. I highly recommend checking out is perfect for websites and mobile apps and things like that. We also need to add that to our website. So in web fly, if we go to our fonts, we can see that inter isn't here, but we can add it very easily. We get to add fonts or the top, or open up a new tab and go to Google Fonts. We select Google phone, and then we just simply scroll down to find into who are scrolled past it. In. Here. Maria will add all of the weights for now, just to make it easy for us. And fun. There we are. We close this tab and then we refresh our web play time. Now when we select boating and we go to forms, we see into perfect. We also need to change the color of our body form. So if we look at our design, I mean, using this or grain as our main sum of body color, body font, color. We copy that color. And we paste that into. There, will also change the size of it, 16, and change the line height to maybe 24. Now we are, we are ready to solve, gets died without design. When we look at our design, we're first going to tackle the header section, the nav bar, and had a section that you see here. We can see we have our logo, we have our text logo, we have navigation links, and we have some spacing above and below it. So let's get started and doing that in Web line. We're going to add element. We're going to add a section. We drag and drop the section onto canvas. And then over here on the right-hand side, we have this bit here where it says select a class or tag. So this is very, very important in this section because it's basically a way for us to name our sections and are elements and everything else within web flight. So because we're going to be making this our header, we're going to give it a class of header. Now that we have our header section, we need to add a container because we can see our content isn't actually the width of the page is currently at a width of 1000170 pixels. So we need to have the same width in our workflow website. So we're going to add another element. We're going to add a container into our header section. It's very important that our container is within the head section because it can actually be outside the header. So we just wanna get it in the header section. Then we're going to give it a width. So we're going to come to the styling section over here. And we're going to come to max width. And we are going to give it a width of 1170. And then we are, we can see it's much wider and is already centered within the page. Now we're going to add our nav bar so we can use Web Flow is I'm navbar element and it has, when you go to add elements, you can scroll down and you can see at the bottom and the combining section, they have an navbar combining. So we can drag and drop that in. You can see our navbar already comes with some navigation links. It comes with a brand so of section here. And it also comes with a gray background, which without one hour and we can also see is not actually the width of our container. So we're going to modify a little bit to match our design. So we gotta make sure that our navbar I selected. We can scroll down and we gotta come to backgrounds. We can see that it's got a, so a light gray background. We're gonna select that and then we can choose the transparent on here. And there we are. We've gotten rid of our background. We also need to make sure that it's fitting our width of our container. So we open an app boy here in the navigator, which is the container. We can change the width of the container again in here to 170. There we are, and now it fits the width of our site. Next, we need to actually add our logo and our text Lego. So we can see we have a logo here and we can have, we have our text like so we need to export our logo from sigma so that we can put it into web flow. So what we do is we select our logo. There we are, the layer is selected. We got to export down in the right-hand side. And we'll make sure to choose two times. That will mean that it is basically retina already ready for high resolution displays like your phone or a MacBook or something like that, where the pixel density, density is higher so that you have a sharp image. We're going to export that, save it somewhere in a folder that is 90. You can see I've named a folder called ozone and we're going to have all of our assets in here just to make it easier to access them whenever we need to, when it comes to making the website and web flow. So we'll save it here and override it. Then we go to Web Flow. We make sure to choose our brand container here. We choose add elements. We get image, and we drag and drop it into the brand element. Our brand element is actually a link block. And usually with mice websites, you have the logo and the text Lego linking back to the homepage. And this is what the brand element is exactly doing. So when you've clicked on the brand link block, you can go over to the right-hand side and you can go to the settings for the element, and then you can link it to wherever you like. So obviously we're going to have a link to our homepage and we're going to put a forward slash in there. And then that will simply link to our homepage. But we can't have a link to anywhere. But we're going to have a link time page. Now that we've added our image element, we're going to choose image and we're brought up the assets section here. So we're going to drag and drop our logo into the asset section. So my logo is n, but you can see the logo is a bit too large and it's a bit blurry. And the reason for that is because we need to tick the image is HI DPI. Once we've done that, is the right size and it's also the right pixel density, making sure that a sharper cause all displays. Next wheels, I need to add a text block because we need our text like we're going to drag and drop that into the brand section. We'll give it the name ozone. But we can see that the text logo is below the image layer. Now, we can change that very easily when we select the brand link block. And we look at our style editor, we have some layout options here. Currently is laid out in block elements, and this is the default. This is what every website will do it, but we can also choose flex. Now what flex does is basically put your items together along a horizontal or vertical axis. You have a bit more control. So let me select that. It will automatically put them together. But now we can see our tax lawyer isn't centered with our image library. So we can change that again when we look at the aligned section here for under and layout section, and we simply choose center, and now our logo is centered. But now let's also give it some space because we can see our logo and our text like our busy procedure. So let's select our text Lego. Let's go to this dollar which are going to spacing and choose margin are left margin here. Give it a margin of ten pixels. And now we have some spacing between our Lai guys. However, our logos and our nav links on aligned together in a lego is, are at the top of the page and the nav links have some padding around them. So we can change that, we can fix that. We select and navbar and then select the container for the nav bar. And then we choose flex again. And we can see that there are aligned, but now our nav links on the left-hand side and we want them on the right-hand side. But we can change that. We select the nav many and we give it a margin of auteur. And that will automatically keep it. On the right-hand side of the nav section will also want to give some spacing above and below the header section, as shown in our design here. So let's do that. Let's select the header section. Give it a margin of 40 above and a margin of 40 below. Let's also change the color and size of our nav links. Now, if we had six or seven nav links, you can imagine there being a bit of a pain to change every single one to be the same size, to be the same font color, and whatever else. So this is where classes become really powerful. So if we give our nav link, a class of nav link, create new class. And then we assign our other nav links that class to study for the final one. Now, if we change the font size for one of them, because we only have one selected, it will actually change it for all of them. Because we have assigned class to multiple elements. And that's what makes class is really, really powerful. When you change a styling for an element that has that class, you will change here for any other element that also has that class, we also need to change the color of ion nav links. So if we go to sigma and we copy over the color of our nav link, and then we choose it here. You need to make sure that the color is right. There we go. And there we are. We've finished our header section of the website. In the next lesson, we'll be going over the hero section with the hero image and the text. 3. Hero: Okay, so now we're going to tackle the hair section. First thing first, we need to get our hero image. So we select the hero image from the file and we export that image, save it into our folder. I'll just call it Hero. Then we go to Web fly. Then we're going to add a new section. So let's add a section in. More cool, this section, give it a class of hero. We are. Then we add our container within there as well. We give that the class of container. There we go, so it automatically fits the width of the page. Then we're going to add our image track into their Choose image. We've got drag and drop or image. You can see it's uploading images in. We also select images. Hi DPI, sweep. There we are. Our image is in that one is pretty easy, pretty simple. Next, we're going to add our text sections. So we have our hero section, we have our container, and then we have our image. So let's add a div block this time into our container, which is below the image. We are going to give this a class of Hero text. And then we're going to add our, let's add a heading into here. And we're going to copy and paste our texts from sigma. So we'll copy it all. And we put it all into here. Let's change the styling of it because we want it to match what we haven't sigma. We have a medium way. Medium weight is around 500. For my, We have a size of 44 pixels, mostly have a color as well. So let's copy and paste that in. So do color first, change the weight of it. And then we'll change the letter spacing to minus two. Cu will also add our other checks actually now we have here. So we'll copy that. We'll add element at text, put it into our heroes tech section, as you can see here. And then paste. Okay, there we are. But we can see our text is above and below is not in columns as shown here. Now to make them show side-by-side, and we're going to select our hero text, which contains those two text blocks. And we're going to choose grid. So now our grid shows the text as two different sections. And we can actually change the width of each one to whatever we like. So let's keep it quite equal area. And we can also give a larger gap between the columns. Let's give it a gap of maybe let's just say 100 pixels. As an example. Here we are. Once we've done that, we can click on done on editing our grid. And yeah, I think we're looking pretty good. If we select our hero text again, because, because we want to give it a margin above. So let's give it a margin of 60 above. There we are, that's looking pretty good. Our heading here has a bit of margin above it as well. We can see here it's got a bit of margin so we can remove that 0. We can also change the text size of deaths. Oh yes, I also forgot we need to change the text size of our heading. So we need to give it a larger text size of 44. There we aren't also increased the line height to 50. We'll change the font size of our other textblock is, well, we can see this one has a text size of 21. So we'll do the same for this. 121 will increase the line height of the texts. That 28. That looks good. That looks pretty good. But I don't like how the image word is on its own line. So let's change the Great Again. So you change the grid here. And we can maybe move it over one. Yeah, we'll move over one block. Where we are, I think is looking pretty good and very similar to what we have here. And yeah, that's pretty much it for our hero section. Pretty simple, pretty quick and easy compared to our header section, which was much more complicated. In our next lesson, we're going to be tackling our work section that you can see here. 4. Work: Now we're going to tackle our work section that we have here. So we can see our work section actually has a different color background to the rest of the website. Now this is pretty simple and easy to do. And because of the way I've sectioned website and the way I've designed it shouldn't be too much trouble doing that. So we're going to add a new element. We're going to add a section, a new section on the hero. And we're going to give that section and name of work, of course. And then we're going to scroll down and we're going to give it a background color. So we need to look at the background color that we have here. So if I select the background rectangle, we see here, we copy that color. Make sure our work session in the navigator is selected. And then give it a background color. And there we are, we have our background color. Now we're going to do the same thing again of adding a container within our work section, giving that the existing class of container. And then let's see what we have. So we have a heading a of C, Some of our selected work. So we can see that the size of 28 has a font way of medium and has a spacing of 1.27. Now, again, let us basing doesn't have to be exactly what I have here and probably just gonna go with minus one in an actual Web Flow website. So let's copy that in. Add a heading into here. Let's change the heading type because we actually giving six different headings. So let's change a to H two. And then we're going to change our text to what we have as seasonally selected work. We can also see in our figure profile that is why, and again, as I said, is a size of 28. So let's do that. So let's change it to white and change the font way to medium. Now we can see our text in our work section, but we can also see there isn't much space above and below that text. It looks pretty tight in there. So what we're going to do is give it some padding. Now we've been using margins mainly. And you may be wondering, what's the difference between margin and most difference between padding? The easiest way for me to explain it is margin is the spacing outside of an element and padding is the spacing within an element. So we're going to give our element, our work section, some padding because we want padding to be within the element we want by seeing around our text. So that's what we're going to do. We're going to give it a padding of 16 above, and we're gonna give it a padding of 60 below. Now I actually don't think that's enough. So we're going to change that to, let's change that to 100. I think that'd be batter gets a bit more spacing, a bit more room. And I think it looks better to school. Because we can see in our Fichman design we have copy of spacing above and below. So next we need to look at our portfolio item. So we need to think about our portfolio item and the elements within it, because it is a block, is a block of content. So we have our portfolio item. And that portfolio item contains an image, contains a text title, and it contains a text category. Now these elements would usually be connected to a content management system. Usually people show in it to CMS, which website does have. But we're not going to be going into that because that is a whole another thing, another thing that I think requires a different asset or portfolio item also has to link to the actual portfolio page. So we need to think about that too. So what we're going to do is add a div block within our container, which is within work. We're going to name that portfolio blocks. We're going to then choose our portfolio blocks and make it a grid. Sweet. We're going to change the gaps between our grid to 30, the pixels. And we're going to remove one of the rows. And we are cool. I've also just realized in our hero section in our hair, I text that we have two extra blocks in our grid. So we need to remove those two. Let's do that. Done. So now that we've removed that extra right, we need to give some margin below it too. So let's select our hero tech section and give some margin below 100. There we are. It looks much better. Now let's get back to our work section and add our portfolio blocks. So we've made our grade for the portfolio blocks. We're going to add a link block within one of those. We don't need to link anywhere for now. And then we're going to add our image block. And then we'll also add our we also need to make sure that our image and our heading are within the link block. Because if they're outside it, they're going to end up going into the other column, which we don't want. So yeah, let's make sure it's within our link block moves. I need to add another text layer for our category. There we are. Let's change our heading to a heading three element. And let's put in our image. So we need to export our two images that we have in our portfolio. So I'm going to do that now. Export this image, going to call it orange. Just to be quick. Export this image. Going to call it bottles. There we are. And then we're going to add our image is n. So we have our image in our heads. Hi DPI, very Guy. Let's change that to orange playback. And then let's change that to brand identity. As shown our Fichman design. However, these blue links on looking at Great, so let's change them less, give our heading a color of white. But we can also see our orange playbook and our brand identity tags have link underlines underneath them. Now, the way to get rid of that is to click the actual link block and then go to styling topography. And you see here on the styling dies already has an underlying, you just press on none and we won't have any underlying smell. Will also change the font weight to medium. And then will change. Lattice spacing to minus one. And let us look at our brand identity. Brand identity has a different color, so we'll get that color and put that into. So we're going to choose brand identity, but we can see our brand identity already has the color. So buffalo has a bit of a bug right now where it doesn't actually follow the color that you have here. So you have to choose the color. You choose any random color. And then do it again. Now we are sweet. But we also want to make the sum classes because we want to reuse them for our next porfolio blog. So we're going to give it the class portfolio title. And then we're going to give our category portfolio category sweep. And then what we can do is we can copy the link block. So I command copy or control copy and then command v or control when. And now we are, we have another block and we can change the image. We'll replace it with our other one, will also get our title from FISMA. Put dying. And then we'll change this to product design. Sweetness also give our work section heading some margin below it. So let's give it some margin of 40. That's also removed the top margin as well. Actually, let's give it 0. Sweet. Then we also need to add a button which will link to our portfolio page. So let's do that. Let's add element, and let's add a button. We want to add our button below our portfolio blocks or let's move it around. Our button is in. Nice also give some margin below our portfolio block. Give it a margin of 60, actually knows, gives you a modular 40. And then our button, we need to style it to what we have here. So let's get our texts that we have here. Paste it in. So let's go the color of our button. So let's choose the actual button itself. Get that color. Choose our button in web flow. Backgrounds down here. Called, Let's also give it some roundedness and make the font size smaller too. So let's choose the button again. And then we can see here borders, we can change that to three. Actually let change it to. And then let's also give about in a bit more padding. Right now it's called a padding of 15 it aside and nine above and below. Let's give it and 15 above. 15 below. And then 25 on the left-hand side, and 25 on the right-hand side. As also make the text a bit smaller. Let's give it a tax eyes with 14. And then let's also change the font color. So we'll get the font color from FISMA. Choose the button. And there we are. Our work section is completed. In the next lesson, we're going to be covering our services section. 5. Services: Okay, so now we're going to tackle the Services section. And we can see the Services section actually has a white background. It doesn't follow the light grey, light blue background that we have on our website. So we're going to add a new section as drag and drop that into here. And we're going to give it a class of services. And then we're going to give you a background of white. Cool. Let's also add a container within there. And let's give that container the container class that we have. Now if we look at our services section in sigma, we can see we have text on the left and we have an image on the right. So let's start with the text. But what we can actually do is we can copy this heading here. So if we copy that and we put it into our services container, now that we paste it in there, it's actually why you cannot see it. So we're going to change the text color of that to another colour, but then we can see it changes the text color of the other one. So we need to get this heading its own class. So if we remove the heading Palestine it has here, and we give it a class section heading. And then we're going to make it the same as our design is fine. We're going to change it to services, of course, change the letter spacing to minus1. And we also need to give it the same color. So the color we have here is a dark blue, a grey color. And there we are. We have our services tacked in there. So one very useful thing with Web Flow is that you can add colors to a palette, which then you can reuse whenever you like. So we have our color picker here, but we can add our dark color that we have a dot text color as a preset into our palate. So if we press this plus icon here, we can add in. So we can put it in as a dark grey, for example. And now we are, we can also add our other colors that we have. So let's add our text color here. So if we add that in, we can put that in as just great. Let's just call it gray and he sort of dark gray. And yeah, we can we use those colors when it comes to our design. I've just realized i, that because we have these two columns we're going to need to put in a grid. So let's add a new block. Let's add a good block into our container. And let's make that a grid with one row. I shine, done. And then let's drag our section heading into the grid. Whoops, I got into the grid area, but then we also need to put our text into his own block as well. So we're going to drag and drop a div block into our grid. And I'm going to drag and drop the section heading into our div block. And we're going to call this services, can't spell services text. And then we have our services texts within our grid. And let's copy and paste the rest of the text that we have here. So let's add another text block into our services text block. And we are in our sigma file, we can see that we have a list of services that are offered. So we need to add a list of items. So the way we do that is we add elements. And we can see here we have a list block, so we put that in into our services text. So here we have a list with three items, both even start putting stuff in them. So let's put in product design. What are the others? We have web design. Whoops. We have web design, web development. And then we also need some more list item. So we can actually just select our list item here, control copy or command copy, and then control V or Command V. And we can add three more items. So we have creative direction, branding and photography. So creative direction, branding, photography. Now, we want to get some spacing oscillate between our list items. So we're going to select a list item and we're going to give it a class of services list item. And then we're going to give it a margin below of five. Let say i, she now let's give it a margin of ten. As I've said before, when applying classes, we've only added the style to one item here. But we want to, of course all of them. So we just select each item and we give it the same tag. So if we look for our tag, There we go. Services list item. And it will automatically apply the same styling to all of the area. That's also give our text some margin below it. Or 40. Actually, it doesn't make too much. Let's give it 20. Was I need to change the font size because our fun here is much larger. We have a font size of 21, as we can see here, 21. So let's change this to 21. I suppose I change the line height because the text is, put a compact in there, change it to 30. And then we also want to do the same with our list items, so 21. And I think we're looking at K. Now it's not falling this exactly the same design as we have here with the lines and stuff, but it will do for now. Let's actually change the margins a little bit. We can change the margin here to minus ten years. Let's actually make it a bit more. Maybe. Actually is the padding and we can change. So we can change it to maybe 20. There we go, cool. It's looking a bit better. Let's also give our services section a bit of space. So let's select our grid and give it a margin above of 100 and a margin below of 100. Cool. Then we need to add our image. So let's get our image. Let's export that quite MacBook. And then we're going to add image. We're going to make sure it's within our grid. Yep. It's within our grid. Next to services, text, Choose image. I've just dragged and dropped the image in there. And it will put it in, select it as a high DPI image, HI DPI image. But we can see that we need a bit of spacing. So let's change the spacing of the grid. We can choose grid here we are. We can also make the text along if we want to, but we need to change the spacing, the spacing between the columns, and we can change that here. Let's change that to a 100. Actually, let's change it to be more maybe. Actually, now let's keep it to a 100 and then move this over. Cool. There we go. And then we are, our services section is complete. Again, another pretty simple section by websites coming along. It's getting nice getting there and we have a few more sections to go. And then we'll have a finished website. In the next lesson, we'll be going over the new section and adding these blocks. 6. News / Blog: Alright, so now we're going to do the blog bisection or new section of our website. We can see what it looks like you're here in sigma. So let's add a section, drag and drop it here. And then add a container. Of course. Make sure to give our container, the container class. And we can see we have our title. So we're going to add the end. We can actually copy this section heading from the other section and paste it in. Somebody in that perfect latest from mu sub o can't even spell. I Should we need to give our second unnamed. Let me, let's give our section the name news. And then we also need to give it some padding above and below. So let's do that. Actually, we can just give it a margin, 100 above and 100 below CO. From looking at our design in sigma, we can see we have three block place, three pieces of news here. We can see we have a sort of Castile design, and within those cards we have the thumbnail, we have the title, we have a bit of text, and we haven't Read More link. However, we want the whole card to link, to be a link basically. So wherever you click on the card, goes to a blog post. First things first, we're going to add a grid. So let's add a grid into our container. Co will remove one of the columns. And we'll also add a column will also change the width between the columns, of course, to 30. Now that we've done that, finished our grid, we can start adding things into our grid. So first need add a link block. Of course, because we want the whole card to be clickable, we need to add a link block. And we're going to add an image. And then we'll add a heading. And there as well. Just make sure it's within the link block. Change the heading to h3. Then we'll add the text block. And there is, well, then we'll add another text block for the Read More link. So now that we have the elements of our card ready, let's start styling it. Let's change the name of the link block, two log pi. Let's give it a class blog post. And then let's give it a background. Color of white. Let's also give it a shadow. Because if we look at our Fichman design, we have a very subtle shadow under the card. So let's do that. Give it a distance. I should will make sure that I sell 180 degrees. Distance of one, blow of two. And then we look at the color. We want to give it an opacity of ten. There we go. Let's also add in another div block actually into here, because we want the text to be within the div block. Now let's upload our image. So we need to export and the images from here, of course. So let's do each one. And again. Drag and drop our images in. As choose monitor. Make sure the image is high DPI. And then our text block in here. Let's give it a class of blog post text. Because we want some padding around our textblock. Heading here also has margin above and below. Let's remove that. That's when we made the margin above anyway. Select our blog post text again and give it 30 pixels all around. Say we are. So you can click and drag to add padding as well. Now of course, we want to remove all of the underlines, the text equation that we had before. So we click on the blog post link block and we go into typography down here on the right and click None and you'll get rid of it all. Brilliant. And then we want to give our text color and obviously want to fill in the text too. So let's do that. Let's put in their code. Let's give this a weight of normal. Let's also see what font size R1 is. Our font size is 21, and a font weight of medium. So medium, give it some letter spacing as well. Let's give it a class so that when we change something in one place, it replicates everywhere else. So we'll put blog post card. Title was I need to change the color of it to a dark grey. Then let's copy over. The text. Is a size of 14 and he uses a lighter gray. Actually. Say, let's copy the color liver, all of the text. Give it a little lighter gray, will also add that to our palate. Changed the size to 14, change the line height because it is a bit high to 20. And then will also change this to read. Looking good. Let's change the color of it. Give it our orange color, our Ajax and color. And also add that to the palette as well. Tomato, let's just call it orange. Is also change the font size. 14, actually, let's change it. Changes 12. Give it a medium light. And then we'll also give our text some margin below. And we will move on, move this line height now than I want it to be, as give it a line height of 12. And then we are, we have our blog post done. Very easy. So if we just copy it and paste it three twice, so that we have three. And then let's change each of them and put in the rest of us, say top design books, design, UX, design books. And then this one was sketches to product. And we change this image as well, of course, plays image to sketches. And there we are. We have done our news hub, grid, blood bisection. All done pretty simple, pretty quick and easy. This one, thankfully, there isn't much else to it. In the next section, we will be doing the footer, and then we will be nearing completion of our website. 7. Footer: Okay, so let's get started on the final section of our website. Again, this footer section has a dark background and he has a two column layout with some text on the left-hand side, some social media icons and a form on the right-hand side. So let's actually export the social media icons first. So let's export this one to two times. Export, Twitter. Export to two times, again, place Book. And then let's export Instagram. So we've exported our social media icons. Now we can get started with the actual footer itself. So let's add a new section. My shorts drag and drop it right at the bottom. At a container, of course, as well. Into that section. Let's give our section of the class of Footer. Give it the dark background, like this section over here. We'll just copy and paste it. We also need to give our container, the container Tag Suite. Let's give offered us some padding to give it a padding of 100 above and 100 below. Actually, we might not need a 100 below because our footer text is a bit different. But we'll get onto that in a second. Now let's add a grid into a container. Let's get rid of one of the columns. I mean one of the rows even. And let's start putting our content in so we can actually copy and paste the heading from. And we'll work section into here. And we show change the text to come work with us, of course. Then we will add another tech section. Oh yes, I've just realized we need to put a block in here into our Great and then put the text inside the div block, heading inside the block. And we'll give that a class of filter, text. Copy and paste text over that we have from the Fichman design. Make it a bit larger to how big is it own? Here it is, font size of 20 on call. And then we'll give it a line high as well of 30. Sweet. Then we want to add our social media icons. So we need our social media icons to also be clickable links. So we're going to use a link block first. So if we go and get a link block which is here, make sure it's in our footer text. Cope. And then if we put in an image. Choose image. We're going to upload our images here, Twitter, Instagram, Twitter first images, HI DPI, call. Now that we have a link block, we actually also should really put it in its own section. So let's put another div block in there and give it a class of social media. Cool. And then let's put our link block inside that social media section. And then let's give our link block for the social media icon. Social media link. Yeah, perfect. Copy that. Paste that. And let's change this one to get this on the Facebook icon. Copy-paste again, change that to the Instagram icon. Cool. But as you can see, there isn't much spacing between each of them. Let's give our social media link a margin. So make sure to actually click on social media link. And then let's give it a margin of ten. Actually, let's give it a margin or a bit more at 20. Yes, that looks to me more comfortable as also give our social media or margin above it. Maybe 30. There we are. That's looking pretty good. Okay, so now that we've done that, we're going to add our form to our website. So workflow has a nice form section where you can add a Form Block labels, inputs, things like that. So they make it super easy. Let's drag and drop a Form Block into our grid. Now we have name and email address, but we also need to add a subject, budget and message. I just realized my form doesn't actually have an email. So someone sends a message, they're not going to be able to ammonia to apply to them. So yeah, we actually also need to add an email form, so we'll do that. So even though we only have name and e-mail address, we can actually add more by just dragging and dropping into here. And then adding an input as well. Coal. We need name, subject by email, name. Email. Subject and budget is well, say, we'll name this one subject. We remove the placeholder font, both placeholder text even. And we'll also need to add budget. So let's add another label and then another input. And then let's also add the final message box, say text area. But we also need to add a label about that as well. So let's add that budget. And then message. Now let's get styling. I've just realized we don't even need the labels because. Labels are actually here inside the forms that we have named subject by Jen message. So we can remove each of the label forms an area. Each of the labels even. And then we can actually just add the placeholder text in here so we can have name. Kevin has a required field. We can have email required. Of course. This one will be budget. And let's pretend budget. This one will be subject to subject. And then in here message, while we put in here, will just be in message. Okay, let's do that. Their message, ok. We also need to give our TextField, obviously a class. So let's put in footer for input. And then let's start styling that. So we have a nice light gray background with a dark background. So let's do that. So we have that color there. We select our input field, give it a. And this is looking good already. And then give the text color. That is it. Actually you might need to be a darker color. What color is this? Always the same color. Okay, that's fine. That works. We also need to remove the border because as you can see, there was a white board around the field. So if we select it and then we just click here on style none, that will get rid of the border. Let's give the corners of a radius as well. Let's give it two pixels cope. Let's give our fields a bit more padding. So by default, they're padding is 0 actually, so we need to give it a bit more. So let's give it a padding of I say 30. I she 13 might be a bit too much like he's asking me 25. And then 25 below. Yeah, that looks much better. So now that we've done it for one, we can easily apply it to the others because we've given them, while we've given our first form, a class are first input field or class. So we just find that there we go. We can just easily copy and paste it over. Oops, and we got there, we are. Thing that's looking pretty good. Now let's give our submit button the same styling as we have here. So let's give it an arrow, as shown in, as cool. And let's give it a background color of orange or works. We don't want our Thanksgiving globe, we just want the button color to be orange. Coup as give it a border radius as well of to the rest of our fields. And let's change the font size as well to 14 and give it a weight of medium. Now let's give about in a bit more padding like our button from our design. So let's give it 20 either side, maybe just give it a bit more than that. 2525. And then above and below will make it 1515. And we are, I think that's looking pretty good as well. So give a bit more margin between each field 15. There we go. Our form is looking pretty good, but it's a bit too close together. So let's go back to selecting our grid. And let's edit grid. And then let's change the gap between the grid. So let's make it maybe 50. Actually, we'll make it even more than that, a 100. Cool. Now there's quite a bit more space between the text and the form. Then let's add the final bit that you see down here. Let's add a container will make it 170. We'll give it a height of one. A background color of this, because we want this little line there. You can see here this little line is actually two pixels high. So that's what we're going to try and do. Get this container height of two pixels cold. We also need to copy the color over from this one. So it has got the color of this, this one here into our design. Say, let's give it a background color of dark gray coal was I need to give it a bit of margin above and below. So let's give it a margin of 100 above. And then what we'll also need to do is get rid of the padding within our fitter because we're going to have a bit too much, I think. But let's add the final via text that we see here. Let's copy it. Copy it, add text into here. And we go center. There we are. Given a font size. Make it a bit darker. Maybe. What kinda have we made in here? Different color. Every guy. Now let's give our copyright text a bit of padding because we need some planning above it. So we select it or margin even, let's give it some margin, 30 above. But now we have a bit too much space down here. So if we select our fritter section and change the bottom padding to 30. We are. That's pretty much it. Our website is pretty much finished. So in the next section, we're going to be tackling the responsiveness and making the website responsive. And then from there we should be finished. 8. Let's make it responsive: Okay, so now it's time to make our website responsive. So I haven't actually made a responsive version of the design because I usually like to make a website responsive once I've actually built it, because I think it's easier to do it then. And you save a lot of hassle when it comes to designing it as well. So if we go to the tablet view, we can see what the website looks like in your end, it needs a bit of work for sure. So let's start with the headfirst on many button is all the way on the left-hand side when it shouldn't be. So we're going to get a margin of auto. There we are now is on the right hand side. But we can also see we need a bit of padding on the left-hand side and the right-hand side. So we can do that quite easily. So let's select our container and then give it some padding. Either side. 2020. The area. Now you can see because I've selected the container and a valid padding of 2020 either side, because we used that container throughout the website, is now added padding to everything, which is exactly what we want, which is exactly what I wanted anyway. Because now the website will be consistent when it comes to having spacing either side. And that is exactly what makes class is very powerful. You can change one thing and it will be applied to anything else that was or has that class. Now I think our header and nav bar actually has a bit too much space above and below. So we are going to change that. And we're going to select our header here. And we're gonna change that to 20 above. And 20 belied barrier makes it a bit more complex. In the tablet view, menu icon though isn't aligned to the right hand side, is floating a bit to the left. So what we can do is we can actually select the menu button here and then give it a minus margin of minus 20. And that will move it along to that right hand side. So now it's more aligned with the rest of our website. Let's get into the hero section and let's make our hero text not a grid anymore. Let's change it to a block element so that now the text is more easier to read. Let's give it some margin below. Let's give it a margin of 40 below. As we can see, even though we've done that on the tablet view, if we go back to the desktop view, we're still going to be keeping the GridView, which is actually what you want. So anything we do in the tablet view will only be in the tablet view and below. Because this will also apply to the mobile view. Let's change the margin at the bottom because I think there is a bit too much modular bottom of the hero text section. So we can go here and we can change that to, for example, 60. Let's do that here instead of a 100. So yeah, I think that is looking pretty good. Now let's go to our work section. So in the Work section, a bit too much space above and below, we can change that. If we choose the Work section itself, change it to 60 above. 60 below barrier looks a bit more compact, but I still like the grid view, so I'm going to keep the grid view on the tablet view. Now we're on the Services section. Again, we can do the same for each select the grid. Then we change 60 above. 60 below because I've added the margin to the grid instead of the Services section itself for the Services section, I also think the services heading is a bit too much margin below. So let's change that to 20. And I also am going to get rid of the grid view. So let's change that to display as a block. And then let's give our image a bit of margin above it is give it a modular 40 above. We can see our image though is sort of just sitting on the left-hand side, not taking out the right-hand side, we can change that. We can select the image here, and then on the width here, we select 100. And then we put in the percentage sign. There we are. We'll make it full width for us looking much better already. Next, the news section. Now the new section we can see it looks a bit cramped. But first let's get started on changing the margins of above and below, 60 above and 60 below. And we are going to have a different approach here. So what we're gonna do is we're going to edit the grade. And we're actually just going to get rid of one of the columns done. And now we have the blog posts. So of, in a four-by-four grid, let's actually change the margin of the grade because we need margin the same above and below. So when we select the grid, we can change the margin between them there. Okay, that is the tablet view for the news hub. Finally, the photo section. Let's change the margin above or the padding above to 60. And we'll leave the bottom bit the same as well. And we'll also make the grid a bit tighter. So let's change the gap between a grid items to 40. Cool. Okay, that's looking pretty good. Now let's go to our mobile view. Now. In our mobile view, we can see that some of the fonts are a bit too big, I think. And I'll grids are bit way too cramped. So we're going to fix that. So let's start with the font for the main heading. Let's change that to something like maybe 24. And then let's change the line height. Is while, something like that. There we are. There's also change the font size to 16, changed the line high to 202122 years Alix better as also changed some of the margins because I think it's a bit too much spacing between the elements. So if we select the hero text, let's change the margin of that to 20 above. We'll leave 60 below actually. And then let's choose a heading, change the margin of that 20 below. There we are. I think that's looking better already. We can also change the letter spacing to one and minus one because I think it looked a bit too cramp there. Let's also make it a bit small. I've changed it to 22. Change the line height, 30, Cool. Let's change our headings are section headings, or change the font size of those because those are a bit too big. I change it to 20. Yep. Already looking good. And then let's change our grid. Our portfolio blocks to display as long block elements. And we are loosening to give some margin between them. So let's select a link block, one of the link blocks. And let's give a margin of 40. Blind Neriyah, cool. It's also changed the font sizes of dyes to 18. And I think we also should reduce the margins a little bit as we reduce it to five. Actually, we can just reduce it to 0. Cool, change the portfolio category as well as change the font size to 12. But then our button has a bit too much space above it. So let's choose our portfolio blocks and change this to 0. Area Ku. Next section we're going to tackle is the Services section. Again, we wanna change the heading so we want the same as this one is almost 20. So let's change that to 20 as well. Let's change the font size to 16 from line height to 24. And let's choose the services list item 14. Change the line out 14 as well. Here we are. Services actually has done. I think that one was actually on the easiest and quickest today. Now, our nice hub. So let's choose our grid that we have here. And of course change that to a block view. Choose the block post block, give it a margin below of 20. Let's suppose I change the padding and little bit of the blog post text because it looks a bit Titan. Let's change actually, let's change it to 20. I think 20 looks nice, cool. So let's do each bit to 20. There we are. Now we got that one done. And then let's do the footer section. Say if we choose the grid again, change the tablet view and then give our footer text and margin below or 40. And then let's also change the marginalia, the spacing here, let's choose our container. We ended earlier showing the margin of this to 20. Yeah, looking good. Okay. So that is it lies our website done, the mobile view done, and I think it looks pretty good. So yeah, if we go back to the desktop view, we can see a fantastic tableview. Everything fits. Cool. I don't really bother with the landscape view and mobile are mainly just go straight to the mobile view. And yeah, I'm pretty happy with that. I hope you guys enjoyed this. Hopefully gives you a quick rundown on just how to make a website and web flow analogue people learned by doing, that's how I learn. I actually wanna make things and that's the best way Ireland. So I hope you guys have learned a lot here. Make sure to follow me on my social media, Instagram, Twitter, YouTube, places like that. I'm always going to be applied in new lessons. And I'm also a taking suggestions on what lessons you guys are looking for two. So yeah, thanks for watching.