Build Your Online Portfolio Without Writing Code

1. Introduction: Hi, I'm Mat. I'm a designer and evangelist here at Webflow in San Francisco. Webflow is a tool that empowers you to design and develop websites at the same time. It runs right in your browser and it's 100 percent visual. So you can build dynamic responsive websites without writing a single line of code. You can start designing your website from a blank Canvas so there's no restriction in your created vision. Or you can start from a template and quickly tweet the styles and content to fit you, your business or your brand. Webflow also hosts a totally visual content management system so that you can build a unique blog, portfolio, a vent site, or whatever you need, and still never think about code. When you're ready to launch your website, we offer fast, secure, and stable hosting under custom domain. Today, we're going to create a website to host your portfolio so that whether you're a designer, writer, photographer, or all of the above, you'll be able to create something unique to showcase your work. Some of the things we'll be talking about today are the importance of building an online presence, why you need to be online and how you can do this without being a developer or knowing how to write code. Today we live in a world that's moving so fast and we're constantly absorbing new information and doing new things. Your portfolio site needs to live by these rules as well. Before, we used to use things like paper resumes to keep track of the work that we've done, to show to prospective clients or people that we wanted to work for. But now, something like this just isn't good enough. We need something that's online. We need something that's always updating, something that you can show at anytime to anyone anywhere on the planet. That's what we're going to build today. 2. Project Overview: You've decided to build a website. That's great. But what are the first steps in order to get started? Well, it's sometimes depends on the project, but oftentimes it's going to rely on two simple questions: on what the purpose of your website is and what you want it to accomplish. We're going to cover why at those questions are important and strategies that help you define what those answers are. Today's project is to build a fully responsive custom website from scratch without writing a single line of code. We're going to do this in a too called Web Flow. But you can use any tool that you'd like. A lot of the principles that we're going to learn today can be applied anywhere on the web. I'm going to walk you through building this site here. A simple yet unique portfolio website that includes a mobile ready navbar, dynamic content tiles, and a responsive footer. We'll also design and build this detail page which will showcase our individual portfolio items including a main image and a description of the project. The project that I'm going to show today is for a designer portfolio. But the template can be used in a wide variety of creative services like photography or writing. You can access this template and more by going to webflow.com/templates. We've also included a link to this free template in the course description. You can access these templates at anytime and even follow along with the template as I'm moving through the course. One of the things that makes Web Flow so unique is that it's actually teaching you basic web principles as you're designing your own websites so that everything that we talk about today and everything that you learn can be applied anywhere on the web. 3. What You Need to Get Started: To get through this course, you're going to need a few basic tools. You're going to need a computer with access to the Internet. Because Webflow is an online tool, a connection to the Internet is going to be crucial for you to complete this project. We recommend using Google Chrome and that's what we're going to use to demonstrate this project today. As I mentioned before, you don't need any prior development knowledge to complete this course, but a basic understanding and certain web principles will certainly help. The first part of this course is going to be describing and explaining a lot of these web principles, so that you can follow along more clearly, and because much of the website that we're going to build today is content-driven, having some of this content readily available is going to streamline the entire process. Things like images, contents, and maybe even a logo would be helpful as you're following along. We've also included a link to a folder where you can find all the assets that I used for this class. You can follow along with those assets or create your own. If you want to create your own assets for the site, it would help to have a photo editing software like Photoshop to resize, crop, and create images. When using images on the web, it's important to use images that are of high quality so that they look good on high-definition devices like iPhones, but also be conscious of size. Uploading images that are above 250 kilobytes in size can slow down your website. So it's important to try to keep those file sizes low especially on a site like this one, that will be heavily using images in the design. Other than that, we hope that by just having a computer and access to the files that we posted in the course description, you'll be able to get through this project with flying colors, and by the end, you'll have your own portfolio website to show for it. 4. Web Fundamentals: As I mentioned before, having a strong knowledge in web development or coding is not required for this course, but having a basic understanding of some of the web principles, I think is crucial and fully understanding and taking advantage of what you can build here today. I'm going to explain some of these basic web concepts using this visual web design guide we've created here in Webflow. It consists of six different steps, each covering an important web concept that we'll apply in today's course. The first impossibly most important concept is that of the box model. The box model is the idea of thinking about web elements as boxes, just as we see here with this pricing layout structure. Here we can imagine if each element on our page had an invisible box that went around it, the idea of the box model is that the web is made up of these boxes, and that web structure is simply adding these boxes inside other boxes and styling them to add space and other layouts to coexist together in a pleasing way. In this next section, for example, we can move this paragraph text into this pricing block here, and notice this is how HTML and web structure works. Elements stack under each other or inside of each other, which is the best way to build a fluid and responsive website layout. Now, the box model is the overall concept of web elements and how they work together, but it's also important to understand the individual elements that were here as well. When it comes to overall structure, we'll be using these three main structure elements in sections, containers, and columns. A section takes up 100 percent of the width of its parent container, which would be the browser window if you added it to the body. It's great for big horizontal sections of a website like the one that we're seeing here. A container is a 960 pixels wide block centered in the middle of the browser. Usually most website content is added inside of the container, so that it's centered in the middle of our page. Using columns are the fastest way to build a unique website layout. To edit how many columns you want to add is easiest selecting our columns, and in these settings panel, we can adjust both the number of columns we want and how wide they are. We can also adjust how we want our responsive columns to be laid out on different devices. It's a combination of these three elements that will make up the website that we create today. Now that we have elements on our page, the next step is to style these elements, and on the web, this is done through CSS, a coding language that allows us to add styles like font, color, line height, gradients, borders, shadows, and so much more. Here on the left side, we have a button that has some additional styling done to it where on the right we have a simple link with no styles on it. What we need to do is first add a CSS class. Once we do, we'll be given access to a wide variety of style options. Like adding inside spacing, adjusting the font color or the font size, adding a background color, and even adding some rounded corners. CSS empowers us to design on the web in a near unlimited amount of ways. This button just being a small example of that. We'll be using plenty more CSS styles throughout our web training today. CSS styles are also more than just colors and fonts. In fact, CSS is also what creates the layouts that we use on the web as well. The first example here shows us how CSS attributes of margin and padding allow us to create the spacing that we need for our elements. Padding is the spacing that makes up the inside of an element where margin is the spacing on the outside. Let's use both margin and padding on these elements on the right so that we can make it match the left elements. I'm first going to select this outer wrapper that is holding all of the text inside of it. Then I can hold Shift on my keyboard and add padding on the inside of this element. Notice that as we add padding, we're adding space on the inside of the element, creating space between the outer border and the content inside of it. Now let's add some margin to the individual text in order to add additional spacing on the bottom. Let's add both margin and padding to this tags so that it matches its partner on the left. Let's first add our padding, great, and now some margin. Perfect. Just like that, CSS has allowed us to create the spacing in the layout that we need here. Another important CSS property is the display property. Web elements like paragraph, text, and div blocks are typically given the value of display block, which means it fills the width of the parent window and stacks on top of the other blocks as we see here. On the right, we'll see the same elements wherever they're laid out with the property of inline-block. Inline-block will make the width of the element conform to the width of the content inside it. That means that if the content is small enough, they can stack alongside of each other. Notice what happens when we change these buttons and links to display block instead. They take up the full width and stack on top of each other instead of alongside each other, because now they take up the full width of the wrapper. The next topic is to cover that of cascading styles, which allows us to easily create a variation of elements by adding additional classes on top of them. We can show this here with a different button examples. Notice on the left we have three buttons with three different colors, and on the right, we have three buttons with the same color. Well, the reason they're the same color is because they share the same class. Notice if we make a single style change on one of them, the same thing changes for each of them, which is also a huge benefit of CSS. Being able to make a site-wide change to like elements very quickly. For us to make any further style changes to these elements without affecting the others, we need to add an additional class. Let's add a class to this one, and then change the background color. Notice that this time it didn't change the color for all the buttons, just this one. Let's do the same for the next one. Perfect. The last piece I want to talk about is for mobile styling and how CSS works across all of your different devices. With CSS styling, the styles only cascade downwards, meaning that any styles that you add to your elements on desktop will follow to your mobile devices as well. The same goes for tablet or any of the other mobile devices. Any style changes made will cascade downwards. For example, if we make any style changes on our tablets, it will only cascade down to our smaller devices and in this case, override any styles done on desktop. It's also important to note that styles can not translate upwards, meaning that any styles that you would add on a tablet would not translate up to desktop, they only translate down, and that's it. I hope this web overview has been helpful and that it can provide guidance as we make our way through this course. For the remainder of this course, I won't be diving too deep into specific web topics. We're going to hear things like the box model and other CSS attributes that we've already covered throughout the course. 5. The Importance of Content in Design: At this point, we should have a good understanding of what our content is and how we want to use it across our sites. Because much of our design process is going to rely on our dynamic contents, we need to think about it ahead of time before we begin the design phase, really drilling home the concept of content first. You'll realize the full benefit of this workflow as we begin the design process. In Webflow, we think of content in the form of collections, which are simply groups of content that are organized together to form a single item like a blog post. I've already created a handful of collections here, but I'm going to show you how easy it is to create one of your own. We'll start by simply clicking the "New Collection" button. Now, the first thing we need to do is name our collection, which is what will be displayed in the CMS later on. In this case, we are creating our projects collection. Now, we need to create what the URL will be for our individual project items. For example, if we choose projects, the URL would be www.website.com/projects/the name of the project. Now, we need to add our individual fields or content that will make up these projects. The name is defaulted already for us and will simply be the name of the project. So we'll simply click "Add New Field" and are given a variety of different options here, including a plain text field, a rich text field, image, video, link, a number field, date and time, switch, color, and option dropdown, and then two different types of reference fields. Let's start by adding our image field. We need to give a label to this field, which we're going to call main image. This is going to be the main image that we use for our different project items. We can also provide help text, which can provide additional information that will help guide any CMS users as they're updating or uploading a new image. Then we click "Save". Let's now add our project description, which we'll use as a rich text field and click "Save". Lastly, I want to be able to add a tag to this project and I'm going to do so by linking to another collection that I've already created. I can do this by using the single reference field and then selecting the project tags collection that I've already created. Now, that we have all the fields that we want, we can create our collection. At first, there won't be any items in it, but we can easily add them by clicking the "New Project" button. Now, all we need is to fill in the individual fields with the content from one of our projects, which I've already saved. This project is called Sketched Designs. We can upload our main image from my desktop, and then I'm going to paste in some content that will work as our description for the project, and lastly, for the project tag, I'm going to select branding. There we have it. Now, that we have some content in place, we can begin the design process of our homepage. 6. Hero Section + Navigation: Now that we have all of our content setup and we did a brief overview of some of our basic web design principles, we're now going to go in and replicate building this homepage that I've built here that just consists of a simple hero section, followed by five different tiles that we see down below, including an about tile, latest projects tile that pulls this image from your latest project, latest posts, which is going to pull the latest blog post image, a hire me link, and then four social media links. We'll also build a footer that'll be sitewide. In order to design this, we're going to build this visually in our Web Flow tool, and when we look in here, we're going to see that we're starting with a blank canvas. There is nothing here. So we're going to build this entire page from scratch. Now, we're going to start using some of our basic fundamentals that we learned in the previous video but I'm going to try and educate you as we go. Now, the first thing we want to do is add in a section for our hero section. So I'm going to go to the Add panel and then drag in a section. Now the first thing that we want to do after we add elements is give them a style so that we can attribute styles and classes to them. In this case, let's give this a class of hero section, and let's add some padding on the top and the bottom just so we can have a little bit of space. Let's go ahead and add our background image, which is going to help us fill this space. So if I scroll down to our background section, I'm going to pull this from our assets that we already have, and I'm going to use this image here. You'll notice right now that the image is quite large so it can't quite fit. So we're going to use this cover attribute which I can select, and I'm going to fix this in the middle. There we go. Now in order for us to increase the size of this, I'm not going to add a height. I'm instead going to start adding some content. If I go ahead and if I add panel again and then scroll down to our nav bar, I can drag in the nav bar. I'm actually going to drag it right into the hero section. In this case, I want to give our nav bar class, let's call it nav, and lets begin to style it. First I want to add a little bit of padding on the inside. I also want to change the background color to this clear, transparent color to be clear instead of that gray. I also want this to be absolutely positioned on the top of the page. In this case I can choose top, and we'll notice that it's at the very top. Now one thing that I did was I added a little bit of extra space on the top as well, just to push it down slightly. Now we have the basis of our navigation. We need to add and style some additional links as well as add our logo. For the logo, all I did was simply take a text block and drag it into this brand, and then I can give this textbook a class, let's call it our logo text, and we can begin to style it. Let's change the color to white. We'll increase the size, and let's add in our texts. There we are. I can additionally style this until I am happy with it. Let's go ahead and just increase the size a little bit more, also the line heights. Now what I did was I added an additional class in a tag. So I can simply bold it. There we go. Now what I need to do is center it so that it's in line with the links that we have here. But maybe before we do that, let's go ahead and style our links as well. I'm going to click on this first link and then go to a class. Let's add a class for each of these. So we have nav link, and let's adjust the color. Let's make it all caps. I'm going to keep with this font, which is the font that we have on our body, and I'm also going to increase a kerning in-between. There we go. So that's our link. But notice that the other links have not followed. That's because we need to still add the class, so let's go ahead and type in our class and select it. We'll notice that these styles are going to be carried over. There we go. Let's go ahead and add the remaining links that we have, and we can begin to add the text. So we have our home, we had our portfolio, we have an About page, and we have our blog, and then we do have a contact button, which is going to be a slightly different class. So again, I'm going to copy this, which I can do on my keyboard, and then I'm going to add the text for contact. Then here, I'm going to add an additional class which is going to help us additionally style it. Let's go ahead and type in contact. Then here, we can do things like adjust the background color. I want to make this white with a slight opacity, and then I also want to decrease the padding that we have on there that was defaulted. Let's make it 10, and we also want it to remain centered with their links, so I'm going to add some margin on the top. There we go. I'm going to decrease the font size, as well as decrease this line height just a little. There we go. We also had some rounded corners, just slightly. So add a two pixel rounded quarter radius. There we go. I believe there was also some additional margin on the left hand side, so I can add, let's do 30 pixels. Great. We're getting closer. Let's go ahead and adjust these nav links just a little bit more. I'm going to decrease the size. Again, this is the beauty of using a tool that's already in the web. We can actually preview this as much as we want by this preview link and actually see what we're building in the actual environment that it will be published in. With our logo texts, remember, I wanted to center it just a little so I'm going to add some margin on top, and we can adjust this until it feels right. That looks good. Now we have our logo and our nav bar on the top of the page. We also need to add our hero text, which I can simply drag in. I'm going to drag in a heading, and this was our H1. I want to make some additional changes. All of our H1s are going to follow the same style and they're centered. We're going to change the color to white. I also want to make this all caps. It will decrease the size just a little bit. The text that was on here, I can go ahead and type this, and there we go. Now I can make any adjustments that I want. Using the padding, I can adjust to add some additional space. Notice because we already have some padding on the bottom, it's adjusting the height of this container as we go. Let's just add a little bit more because we're actually going to be adding our container below this, and it's going to move up into this section. But again, the beauty of doing it in the web is that we can iterate as we go. I'm going to leave the hero section like this for now. Let's go ahead and move to our next section. 7. Dynamic Homepage Tiles: I'm going to drag in a new section, simply drag it into our body. Again, I want to give it an additional class. Let's call this just our section class. Then here, I can add some padding, and this is going to be the section that we use across our sites. I like to set that up first. Then I'm also going to add an additional class because in this case we don't want any padding on the top. Let's go ahead and do know. Let's just call this our top section. Then in this case, we don't want to have any padding on the top. Let's go ahead and add in our container, so I can just click and our container is added in, and if we look back at our final product, we'll, notice that the container is moved up over this hero section. Let's go ahead and give this container a class. Let's call this our hero container, and let's move it up. In order to do that, we need to have it positioned relative so that we can get this position arrows here, and let's go ahead and scale it upwards. Let's try 70 pixels, and we'll be sure to give it a background color. There we go. There's also some additional padding on the inside. Let's do five pixels. There we are. Now we have this container that's moving up into our hero section. Now we need to add the content that goes inside it. If you remember, we have the five tiles. Each of them are of slightly different size, the bottom three being three thirds. Let's go ahead and add in our first. But the first thing I want to do is actually add a Div Block, which is going to wrap all that content, and then I want to add in my about widgets or my about tile. Now that we have a Div Block, let's go ahead and give it a class. What I'm going to do with these classes, is actually name them based on the sizes that they're going to take up in this container. in this case, this is our 60 block, and it's going to take up a 60 percent width, and the height is going to be 300 pixels. There we go. Now, inside of this block is where we have our image and the wrapper that's going to be used on all of our different tiles. In this case, let's drag in an additional Div Block, which is hitting home the fact of the box model of boxes inside other boxes, adding elements inside other elements. In this class, we're going to give is our hero tile, and we're going to make sure that it's relative, and I'll tell you why in just a moment, and it has a height of 100 percents. Notice it's going to fill that 60 block container that we put it in. Now, inside of this hero tile, we have our image, as well as the text that is labeling the tile. I'm going to drag in one more Div Block for the image. Let's call this our tile image. Then here what I want, is I want it to be positioned absolutes, which is why we had to have the previous wrapper is relative, and I want it to be full with the heights of 100 percents. Now noticing again, it's covering up the entire image, let's go ahead and take the background, and we're going to select this image here. There we go. That's the image that we wanted, and then overlaid on top is where we have our text. I'm going to once again go back to our add panel and then drag in a text block, and I want this to be in our hero tile. We'll call this our hero text or sorry, let's do tile text. We'll increase the size first, let's go ahead and change the font color, and I want to increase the size of this text. This is also going to be positioned absolute. We want to move it to this bottom left corner. Notice it's translating there, but right now it's behind the image. Let's use our z-index here, which is going to move it in front, so now we get a better view. Let's go ahead and type in the final text before we start styling it. In this case, we have about myself is what the text is going to be. Let's go ahead and style it so that it looks similar to what we have in the end. The text is a little bit bigger. Let's change the line height. It's a bold text so we can adjust it to be ultra bold. Then we also have it as all caps. Then we can adjust the size now that we have it a little bit bigger. There we go. Another thing that we need to do is adjust the position. Right now we have it pinned to the bottom left corner, let's go ahead and move it over and move it up. Let's do actually 30 and 30. There we go. Another thing that we did was an additional style on this text was to add a tech shadow, and we can add this by going to our tech shadow, and we can adjust the opacity just so it isn't as bold, and this will help it appear over the images that we have. There we go. That is our about tile. Now, the beauty of what I'm going to show you here is also going to be duplicating the work that we've already done. In this case, I want to duplicate this entire object or 60 block, and I'm going to duplicate it one more time. I'm going to use copy and paste, and it's going to be pasted below here for now, but that's because this is taking up 60 percent, and if we added them together, it would make 120, this is 100 percent width. Let's go ahead and adjust this 60 block here to a different class altogether. In this case, we're going to use 40 block, and the width is going to be 40 percent, and we also want this photo to the left and position relative. Let's go ahead and also float this to the left, make sure that both of them are floated to the left, and they are. Fantastic. Another thing that we forgot to do is add the height. Notice right now there is no heights. So here we can do 300 pixels, and notice now that we are seeing the final product. They look very similar. Notice that the one on the right-hand side is still just the 40 percent, the one on the left is 60 percent. Now, on our final product, we actually added a little bit of separation between the different images. Let's go ahead and add some padding. If we go to our panel here for our hero tile, let's go ahead and add some padding. Let's actually add it onto our different blocks. The 60 and 40 block, let's go ahead and go to our style and holding shift on my keyboard, I'm going to add five extra pixels on each side. I want to do the same here. If I click on this elements, I can use this little shortcuts down here and go to my 40 block, and I'm going to do the same thing. Let's go ahead and add five pixels on each side. There we go. That is the top side. We also have the three elements on the bottom, and again, I'm going to duplicate the exact same process. I'm going to take this 40 block and use commands CMI keyboard and then Command V, and I'm going to paste one more so that we can adjust the different class here. Instead of the 40 block, I'm going to change this if you haven't guessed already to a 33 block. In this case we're splitting it into thirds and we're going to follow the same pattern. We want it floated to the left. We want to change the width to 33.33 percent with a height of 300 pixels. There we go. Now we need to duplicate this two more times for a total of three. Let's go ahead and do Command C, Command V. Great. Just like we did before, let's add in our padding on each side so we have the five pixels. There we go, so we're getting somewhere. Now we just need to update all the contents to match and then also, change these social icons here. So instead of the image, we're going to add four social icons. Let's go ahead and start by changing the text. In this case, I have my latest projects. Down here, I have my latest posts. Then I have hire me. Then over here, we're going to swap that out, so I'm just going to delete the text for now. Let's swap out some of the images that we have here. Remember what I said earlier, the latest projects and posts are actually going to pull from our latest blog posts and latest projects as we add them. Quickly, let's just update our tile image here, which is going to be our hire, so I'm going to add an additional class and I can swap out this background photo. There we go. Now, for these, it's going to be slightly different, what we need to do is add in our dynamic data so that it knows where to pull from and update the background image for us. In this case, let's go ahead and go to our Add panel again. I'm going to take our dynamic list contents and I want to drag it into our hero tile. I can bind this, and in this case, we have our projects and it's pulling our projects here. Now, what I want to do is change so that the tile text and the tile image are inside of this dynamic list. So let's go ahead and drag these into our dynamic item. There we go. Now that they're inside of our dynamic item, I can actually pull and use content from within it. In this case, I can go to our tile image and I can select to get background image from our main image. Notice already it's pulling in our background image from our latest project. We can check this by going to our collection panel on the left-hand side, going to our projects, sketch designs, and there's the image there. That's the image that is being pulled in. Now we can do the exact same thing for our latest posts. Again, I'm going to go ahead and drag in a dynamic list and I want to drag it into our hero tile. This time I'm going to bind it to our blogs, which is a collection that we've already created. Again, this is why it is so beneficial to start designing with content first, you already have these assets created for you. Then over here I'm going to go ahead and drag in our different elements, our title texts, and our title image. Once again, I'm going to go ahead and go to our settings panel. I need to click on our title image and settings panel and then get the background image from our blog, and there we go. Now we have an updated tile for each four different posts. Now what I want to do is update this right here, if we go to our final product to be this four-quadrant link system here with these different social media accounts. In this case, I'm going to go ahead and delete my title image so that now all I have is our hero title. Now, what I want to do is add in four blocks, I'm going to use link blocks, so let's go ahead and drag in a link block. In this case, I want to give it a class that it's going to allow it to sit 1.5 of the width and 1.5 of the height. Let's go ahead and add a class first, social block, and I want the width to be 50 percent and I want the height to be half of what the height is for these elements, which was that 300 pixels, so in this case, we will choose 150 pixels. Just so we get a better idea of what's going on, let's go ahead and pick our colors. I've saved the colors for the social media icons that we're going to use, starting with Twitter. Let's add our background image, which in this case, is going to be the Twitter icon that I have here. The beauty about background images is that you get to position them right in the center. Right now it's tiled, I can select Don't Repeat. Then let's increase the size of this guy here to 50 pixels, and it's going to remain as not fixed. There we go. That is our Twitter block. We're going to duplicate this four times, so Command C, Command V again, we're reusing the assets that we've created. In this case, I can go ahead and start to adjust the colors for these. It also looks like we're going to have to adjust the size a little bit, that's okay. So social block, let's type an additional class so that we can add additional styles, like change the background color and adjust the icon. In this case, we want it to be 50 pixels again. Great. We have Pinterest down over here. Let's add our additional class. Let's change the background color, update the graphic. Again, let's change the width to be 50 pixels. Lastly, we have our dribble account, so let's go ahead and add an additional class. Swap out the icon. Again, 50 pixels. Then change the background color here. Now, we're almost set. One thing that we'll notice is that we still have some additional padding. I can simply adjust this so that they're all floating to the left. In fact, let's use our original social block so that it adds it to each of these elements so I can float it to the left. There we go. Notice that it's still a little bit higher. Let's go ahead and decrease the height until we feel like it matches, 145, that looks good. There we go. We're looking pretty good with our design here. The last piece that we need is to add our footer, which is what we're going to cover in our next video. 8. Footer: The last piece that we need is to add our footer, which is going to sit right here at the bottom. Again, let's go ahead and add a new section, which I can simply drag into our body, which we can add right here. In this case, I want to add it to the bottom. Let me close some of these up, and let's move it down to the bottom. In this case, let's go ahead and call this our Footer, our Footer Section, and we can add some additional spacing. Let's change the background color here. Let's use a dark gray. Now, we need the container that is going to hold our contents. Let's go ahead and go to our container, and let's drag it into our section. Now, we have the container to hold our individual elements. In this case, what I want to do is drag in a column. Let's adjust it so we have the logo on the left-hand side over here, and then we're going to have the links on the right-hand side. In fact, we can go up and pull some of the same content. In this case, I'm going to pull this brand, which if we look in the Navigator panel, it's just the link block that surrounds this logo, and scroll down, I'm going to add it into our column. I also want to replicate what we see here with our nav links. What I can do is simply go to our Add panel again, and let's drag in a text link, and in this case, we can use the term Nav Link to get the similar class, except this time I'm also going to add an additional class of Footer Link to make some additional changes. For example, we want them floating to the right, and we can add some additional spacing, and I'm going to remove the underline. Again, we have the different links. We have 1, 2, 3, 4, and our Contact button, so let's go ahead and add that. We have one and ⌘+C, ⌘+V, get all of our links. One more. Perfect. We can do the same thing here where we can add the additional class for Contact, which we'll see right here. Let's add an additional link or additional style so that we can center these a little bit more. There we go. Let's go ahead and add in the text. We have Contact, Blog, About, Portfolio, and our Home link. Now, one thing that we did not cover even with the nav link is how easy it is to link up your sites. Right now, if we go to our Pages panel, we'll notice that we don't have any other pages created yet, but what will it be able to do is our Home link, because that exists, we'll click on the link, and then in Settings, we have our Link Settings, we could paste in a legitimate direct link to our different sites, we could also use an existing page on our site, which we're going to do, we can also use a direct link to a section on our page, which we don't have any in this page, an email, or phone number. But in this case, we're going to use our Home. Notice that the color has changed to blue. That's because we're now in an active state. One thing that we could do is adjust the style of this link for this page because we are on the homepage. Let's go ahead and change it to maybe this blue here. There we go. That looks good. Now it's just a call that we're on the homepage, and the same thing would happen for these links had we been on their pages. So that's our homepage. One thing we still need to do is make sure that it works on all of our different devices, which is what we're going to do next. 9. Making our Site Mobile-ready: So that's our homepage. One thing we still need to do is make sure that it works on all of our different devices. Now in web flow, we can do this with these panels up here. Right now we're on desktop. If we go to tablets, we can get a better idea of what the site begins to look like and the same for the other devices as well. Now remember in our previous conversation, styles that we make on the desktop are going to cascade downwards to our other devices, which is why we noticed that the design and everything is very similar here as it was on desktop. But if we were to make additional changes on tablet, like for example, change the size of the text so that it fits on one line, it's not going to change the size on the homepage. We also need to make sure that we've built out our mobile navbar. Right now we have our menu button with no class. Let's give it a class so that we can style it. In this case, the color is being pulled from typography. Let's go ahead and adjust the color there and we can preview what it looks like when we open this menu by clicking on the button, going to our settings and pressing, Open. We want to add some additional styles so that we can make this look a little bit better. Let's go ahead and use our nav menu options. You can select that by going to our style panel or navigator panel or selecting it when it's dropped down and let's give it a class. Call it our nav menu and let's adjust it so that it also has a background color that is darker. There we go. Let's adjust the menu button. Right now it is open, which is an additional class that we can style. When it's open, maybe we use that blue again. We also want to make some additional changes to our contacts length. Let's go ahead and remove that background color. Let's add some additional space on the bottom. There we go. Now we have all of our links setup. We can take a look and take a peek at what this would look like on different devices. Let's go ahead and remove that. As you notice here, we have 20 pixels on each of these. Let's match it with our contacts here. There we go. That's hold shift, which we'll use it for all sides and let's remove the top and bottom margin. So now it matches all of the other links, and then lastly we have our mobile device. There we go. We've adjusted these on all of our devices to make sure the mobile menu works well, and that looks great. Now lastly, let's make sure that everything else looks good like these tiles and our footer. On here, this looks pretty good still. Let's go ahead and remove some of the extra padding that we have on the bottom of this section, bring it closer to our bottom footer. Let's realign these just a little bit, so our footer links are a little more in lines with the logo. Let's adjust the padding on the top here so that, that hero section is a little bit more in lines. We're noticing right now how much customization we actually get with using this tool and being able to build this in the browser. There we go. Let's also adjust the padding on the sides so that we move it closer to the corner and great. Let's keep going down to our different devices and everything that we've changed on the tablet device is going to pass onto these devices. You hope that as you get closer to the bottom, it starts to look just as good. Let's go ahead and decrease the size of these again and move them to the side a little bit more. There we go. Now here we're noticing that this is starting to break just a little bit. That's okay let's go ahead and center some of these. In this case, whenever you have a class to our footer logo brand. Let's call this our logo footer and let's position it so that it's not to the left and let's center the text in the middle. Let's do the same down here. In this case, let's give our column to our footer link column, and let's center the text in the middle. Right now they're not centring because there are floated. Let's go ahead and unfloat them. Make sure they're all unfloated. There we go. Notice again that a lot of this process is iteration. It's going back and forth and adding the necessary tweaks in order to make sure that everything looks good. Up here, let's go ahead and increase the size of this text. Again, it's going to break to two lines regardless. Let's make sure that it looks good and there we go. In this case, I don't necessarily need the column to come out and over. Let's go ahead and just remove this back to auto. Let's just adjust the hero section size so that it fits better with the page. Fantastic, so that's looking good. The last device is our mobile device and let's go ahead and add a shadow to this image here. On the each one, will go to all each one and let's add a text shadow which will help the text pop out just a little bit over that lighter background. Fantastic. Now we're getting a little bit tight down here with these tiles. The beauty of using the percentage width that we used earlier is that now we can actually adjust this width to take up 100 percent of the view instead of the 60, 40, and 33. We can use 100 percent for each of these. There we go. Now they're taking 100 percent of the width. Let's adjust the title text here. Now it can be a little bit larger since we have a little bit more room. We'll adjust the line heights and let's move it back so that it's a little bit further away from the corner. That looks good ups down here it looks like we have a little bit of break. Let's go ahead and adjust this so that we can decrease the size of the text and we can decrease the size here. That was our contact, you need to make sure that we do it to our footer link. In fact, let's do 100 percent and we'll stack them on top of each other. Let's do 13 pixels. There we go. Now we have our mobile view, and if we look up to are different devices one more time, we'll notice that these all look great. Perfect. That's us building this homepage from scratch. Let's go ahead in the next video and build a sample template page which in this case will be our projects page. 10. Contact: One of the primary goals for our website is to make it easy for a prospective clients to contact us if they wanted to do some work. For this project, we're going to combine the use of effective interaction design with good UI and layout design, to create an effective process for people to reach out and contact you. In this video, we're going to tackle on top of what we did here, with adding and designing a page from scratch. In this case, we're going to create a template for our project's collection over here. So it's going to be pulling and using data and contents from the data collection that we've already created. In this case, this project item here. So what we're going to do is start by going to our section or a template. We're going to notice that we have a blank page. The item is displayed for us up here, but we have no content displayed down here. So we're going to use a lot of the assets that we've already created, starting with this Hero section. So I'm going to go ahead and use Command C, or I can use Right-click and Copy, then go back to my projects templates, and I can paste. There we go. I'm going to go ahead and grab our, to go back to home., I'm going to grab the next section as well, and I can use Command C again, and go back to our projects templates and paste. I'm going to delete this content here, so again, I have that div block that's wrapping everything. Now, I just have my hero container. I'm going to go ahead and drag in a new div block. Then in this case, I'm going to just add in our rich text fields, and an image to get us started. There we go. Then lastly, before I start adding any of the contents, let's go ahead and go back to home and grab our footer. Now, the reason I want to show you how we do the footer, is because we're actually going to create a symbol out of it. So a symbol allows you to take a capture of an image, asset or a group of elements like this footer here, and then save them to be used elsewhere. So we can duplicate this or create a new symbol around it, we'll call this our footer. Notice it's now an encapsulated in this green and added to our symbols here. So if we go back to our template, instead of copy and paste, this time, I'm simply going to add in our footer from the symbols panel so I can drag it in right to the bottom of the page, and if we scroll down here, we will see it. Now the beauty of using symbols is that if we were ever to make any changes like for example, adding a link or updating a link, it would update wherever this symbol exists. So no need to hop around to different pages to make the same change. So now we're looking like we have all the content in place, but I want to adjust everything that we see here to fit the style that we're going for. So in a previous video, I dragged in a dynamic list elements and we binded it to a different collection to pull in that data. Well in this case, this entire templates, is ready to pull in data from our projects. So in this case, I can simply click on an object like this heading, and I can choose to get my texts from the name of the project, and we can see it right there. I'm going to do the exact same for the background image in the Hero section, and I'm going to choose main image. I'm going to do the same for this image, there we go. Then down here, I also wrote a project description for each of my contents. So I can simply bind this text to that there. Just like that, we've created a very basic template, but a template that is pulling data from collection that we already have. As we add additional contents or additional projects, they will automatically create this template that we see here. 11. Publishing: Once you've finished building your website and adding all of your contents, we can now publish it live for the rest of the world to see. We can publish our website in just two simple clicks. Just like that, we can view our website live on any device. You can also add a custom domain so that you can publish directly to your own website. So you've published a website, what now? The best thing that you can do is share it with the rest of the world. You can use your existing network and e-mail previous clients or potential clients, you can also post it to social accounts like Twitter, Facebook, or Dribble. One of the more important things that you can do is reach out to previous clients or people that you've worked with in the past. Ninety percent or more of clients that you get in the future are going to be referral based, based on the recommendations of people that you've already worked with. It's also really important to keep your website updated and constantly update it with either new information about yourself or some new projects that you've done with new clients. If you have returned visitors are clients that come back to your site days or weeks later and the content is still the same, this can give the signal that you're either no longer working or continuing to take on new work. With Webflow, it's incredibly easy to go through the visual CMS, which we access directly through the publish URL itself. Once we've logged in, we can make any changes that we want directly on the page, including editing some text or swapping out images. Once we're done, we can see all of our changes and publish the content instantly. If we want to add additional content like a new blog post, we can do that here as well. Just as we did in previous steps while in the Webflow tool, updating content is as easy as filling out the necessary fields and adding the necessary content, and then publishing directly onto the site. What's happening is all the content that we've added is being placed in the proper formatting that we've argued designed for the website. Remember, updating your website is not only beneficial for SEO purposes, but also to encourage new users that you're still updating and taking on new work. 12. Summary: That's it. We've covered a whole lot today, including some basic web and development principles, as well as how you can easily update your portfolio through the Webflow CMS. The next steps are all up to you. We hope that this course helped you in getting started with your websites, but continuing to update it, share it, and get new clients is all on your plate. We hope that you can share this course, both with us here in this community, but also anywhere else. We look forward to seeing what other new things that you create using Webflow or any other tool. We hope this course was a great first step in building your first websites. But we also hope that you continue to do so using either Webflow or other web design tools to continue to build your portfolio online and beyond.