Complete Web Design from Figma to Webflow (New UI)

1. Class Overview: People who try their life with freelance web design fail to get there. There are three great obstacles that they face, and one at a time, each of these obstacles remove them from their journey. These courses actually three in one, three courses to tackle three big obstacles. The great obstacle number one, learning to code just takes them too long. Hundreds of thousands of students enroll on web design courses, but only 10%, barely 10% make it through the end. I know this because that's what happened to me. Before I knew how to build websites, I was just a visual designer. I was designing the mockups, a prototype of a website, and I was giving this to my client, and the client then would give these designs to the web developer, usually a Wordpress developer, and that person then would build the whole website. I realized I was leaving a lot of money on the table. If I could also build the entire website, then I would take the whole cake to myself. So I decided to sign up for some coding classes and courses to learn web design in terms of building a website and started learning HTML and CSS and JAScrit and all that. Now, since I've already worked on real projects and I know what my clients, real clients ask for in terms of functionality of the website, and often they ask for some complicated and complex custom interactions and animations. So I looked into that how that could be done with what I already know and how much do I have left to learn. When I looked at the whole picture, I realized this was how much I had learned so far. I thought I had this much left to learn to be able to deliver what my clients usually ask for. But in reality, that's how much was left. I put the whole coding thing aside until some indefinite future date. But then I bumped into a web design tool called Webflow, and that changed everything. I opened it up, watched some video tutorials. Within a few hours, I'm building a full website from scratch with custom interactions, no templates and nothing. Was blown away, love at first sight. I started offering my clients the full package design and development. Clients loved the fact that I was doing the whole thing, and they started flowing. That's something that never happened to me before. Webflow gets rid of the biggest obstacle you will ever face time and dedication to learn how to code a website. With Webflow, it's faster, smoother, and miles more fun. You will learn how to build amazing websites as good as a pro web designer without needing to write a single line of code. Webflow is a kind of powerhouse that big brands like discord, upwork, and dropbox entrust their sites to. And Webflo's creative powers are so vast that world's top design agencies use Webflow to deliver award winning sites for celebrities like Lando Norris. So you can be sure that your energy is directed towards a truly powerful tool. Webflow is also an AI site Builder, and what makes weblos AI unique is that unlike traditional AI Builders, the output is fully editable through their visual designer. You don't have to wrestle with a chat bot to get the desired look, but that's just tip of the iceberg. Businesses need more than just a website. They need an entire ecosystem around it, strong SEO tools, multi ilanguage support, a CMS non technical people can use a space for marketers to spin up campaigns without breaking the site, user friendly way to edit the site content, and much more. With other AI Builders, you're pretty much on your own to piece that together, but Webflow comes with all of that out of the box. Is a reason why even the world's leading AI model for coding, Cloud has their marketing site built on Webflow. There is a video after this title, What is Webflow. You can watch it if you need more info before enrolling into the course. After some brave students who make through the whole learning process, there awaits an obstacle number two. They can't actually design well. Because almost all web design courses, they're focused on the technical part, which is the coding, HTML, CSS, JavaScript and all that. But the design itself is part of the graphic design field. Things like color theory, typography, photography it's more art. And most of them they never get to learn that crucial skill. And what do most web designers do, they use themes and templates. And sometimes that's a valid thing to do, but high paying clients don't want a template site. They are not going to pay thousands for installing a word press theme, right? They want a beautiful custom design that's going to put them ahead of their competition, whatever their business is. And if you're a web designer who can deliver that, not only you attract high paying clients, but also your competition is slimmer because not many web designers know how to do that. So I'm going to teach you graphic design, but only what's needed for web. So you can learn how to design beautiful and custom websites. You don't have to be creative or have any prerequisites. If you can move a mouse and see colors, I will teach you how to design. Design is quite simple. There are rules, guidelines, and a lot of hidden tricks, and it's fun as hell. To create these designs, we're going to need to use an interface design tool. You see, great websites are not built right away. First, you need to design a prototype. Sort of like a non functional drawing of the side, and then you develop it. For that, we're going to use the best tool on the market, which is Figma. It's free, easy to use, yet powerful. You'll have design exercises and projects. You'll design company websites, you'll design a blog. You'll learn the process of pro designers from writing a project brief to wire framing to designing the final prototype. In the third course, you'll learn how to do successful frequency because a lot of web designers they trip on this final step. They feel very confused. They don't know how to price themselves. They don't know how to write winning proposals, how to approach clients, and how to perform negotiations and all that. And lastly, I'm going to let you go with a gift, an awesome portfolio website that I designed and built for you. So the moment you're done with this course, you're going to have a shiny, impressive portfolio site with portfolio work from this course that is already published on it. Most web designers actually don't have a personal website. You will have no difficulty impressing your potential clients. I'm acoshwlli and I'll be your guide on this journey. Now, all you have to do is enroll. 2. What is Webflow?: This video, I want to answer several questions you might have about Webflow. So what is Webflow? Webflow is a no code website builder that is unlike anything else out there. It helps you design and build responsive websites from scratch, like any pro web designer would, but without writing any code. Well, actually, Webflow writes it for you. You design everything visually while Webflow writes clean semantic code for you. You can then either export this code or keep it and host the website in Webflow. In addition to the web designer, it's a CMS platform, sort of like Wordpress, which means you can build full blown dynamic sites like blogs and ecommerce websites. And here is a really big one. With Webflow, you can build rich animations and interactions. If coding, it's something that requires advanced knowledge of Javascript. But in Webflow, you do it visually without even thinking about the code. Learning Webflow feels like learning a new superpower. It's really a groundbreaking tool that has changed the industry. You want site examples built in Webflow? No worries. Webflow sites are regular winners at design competitions like awards.com. That's Oscarsoft Web Design, and that says a lot when a visual design tool is competing with custom coded websites using complex animation engines made for games. After Webflow's acquisition and integration of Greensock in 2025, which is considered the number one web animation engine, we're going to see a lot more award winning sites made in Webflow. Already the same year, a Webflow site made for Lando Norris takes home the Side of the Year Award. Impressive designs aren't the only reason why brands go for Webflow. Performance and functionality is another. Discord uses Webflow for the main marketing site and blog. Upwork two for all their non application side pages, dropbox for their marketing campaigns and product launches. And here's a kicker. Even Clod's marketing site is on Webflow. That's ironic because clot is the best model for becding. None of these companies lack developers to hand code or vibe code their sites. They just see more benefits in going with Webflow. If you want more examples, you can see Webflow side showcases on places like lapan Ninja, awards.com or directly on Webflow Showcase page. Just a couple of examples are enough to show how endless are the possibilities of what you can achieve with Webflow. As someone entering the web design industry, I'm sure you want to know how does Webflow compare with other tools in the industry, including vibe coding. Choosing the right tool for the project is extremely important. There are so many options out there, and simply googling What's the best will get you the wrong answers because there is no best. They all have their place and occupy a very particular niche, and within their niche, they are very strong. Comparing all this is difficult, but we can do this using a handy little chart called Magic Quadrant. For example, we can take two meaningful aspects for business sites, design power and functionality and chart the most popular tools on this scale. We'd get something like this. The vibe coding tools, I'm uniting them in one because fundamentally, they're all the same. The method of building and designing is identical. It's prompting. And output quality depends less on the platform and more on the AI model they use. So I'm just assuming the best model for this comparison. Wix comes with very high functionality due to its native tools for businesses like restaurant menus, hotel booking, scheduling, events, and so on, and a strong app market for other supplemental features. But you're not winning any awards with a weak side. It's great for people building their own site, but not suitable for design agencies that want to deliver highly polished premium designs. When it comes to functionality, nothing beats Wordpress with its near unlimited functionality due to its massive 60,000 plug in ecosystem. But Wordpress visual designers like Elementor are widget constrained, meaning you have to use premade designs. Yes, they can have beautiful options, but they will be limited. And the results will be generic since everyone will have to pull from the same selection of widgets and components. Of course, to completely unique designs and war parts, too, but that's only with custom coded sites without using visual builders. When it comes to vibe coding, theoretically, it has unlimited functionality. But in practice, most of that functionality is not an out of the box website feature. It's a generated code that a non coder may struggle to validate and maintain. With traditional no code platforms, whatever functionality they do offer, you can count on it. It's battle tested, built and maintained by professionals. This is based on 2026 evaluation of AI tools. They will improve still, and over time, they'll move slightly right on the scale, but prompt to functionality will always be less superior compared to native robust functionality that you don't have to invent from scratch. On the design power, the placement is less debatable. Even a skilled visual designer cannot reliably direct AI to produce high end unique designs. Trust me, I've tried. This is not a limitation of AI Tech. It's a limitation of natural language itself because a picture is worth 1,000 words. It's easier and faster to draw our vision ourselves than to describe it using words. That's why we don't see any ward winning sites coming out of vibe coding tools. Only Webflow and framer earn their spot above the award winning reference line. Their sites are a constant appearance on design competition sites like awards.com, especially Webflow. Both of them offer full control over the design and extremely powerful animation editors. Framer offers date based animator, which is simple and powerful, and Webflow offers timeline based animator, which is what you get in professional animation tools like Adobe After Effects. And compared to Framer, Webflow offers better, more established functionality for business use. The territory where high functionality meets high design capabilities is where premium earning happens. That's why Webflow is the tool of choice for design agency. Note that I'm evaluating these tools for business and marketing site, not for web applications. This distinction matters because business sites and web applications have very different needs and none of these site builders are made for web applications except for vibe code. There are other aspects one might compare which would tell a very different story. For example, if we compare functionality versus ease of use here Webflow would score quite differently due to its learning curve. Webflow isn't something that you just jump in and start using and start building websites. It's not as intuitive as something like maybe square space. It has a learning curve. And mainly it's because it is based on the regular code structure that a regular web designer and developer would use. For example, you add HTM elements in Webflow and style them using CSS classes, just like what one would do when actually coding the website. If you have some experience with HTML and CSS, definitely it will come in handy. But if you don't have any, don't worry about it. I will teach you everything as we go. As a matter of fact, Webflow learning curve actually works in your benefit because it's the only one that pushes you to learn the unchanging fundamentals of web development, the box model, the flexbox, classes, and the beautifully weird physics of HTML and CSS. These web foundations are not going anywhere ever. If one day you decide to transition to coding or vibe coding, you're going to carry this knowledge with you. It's a timeless skill. Ibecding theoretically is the easiest to use has no learning curve because you just talk to it. But for non coders, that simplicity turns into max complexity moment you hit a roadblock. Roadblocks are more common than one might think. Wix takes home this category. It's both functional and easy to use. This is their niche and they dominate it. It's made to be user friendly and accessible for non technical business owners. All features a business might need from SEO to shopping carts, it just takes a few clicks in a guided user interface. You might think, then why not learn weeks or square space since they are the easiest? But that easiness actually works against you as a professional who wants to get paid for their expertise. Simplicity brings more people to that tools job market. Here's a take home wisdom for you. If you want to make money, doing what you do cannot be too easy because everyone can gather a one week patients to learn a new skill and they will flood the job market. But if a skill takes six years to learn, then very few people are going to stick around for that long. That's why doctors and dentists get paid well and can always find the job. There is no easy money in this world. There is either hard money or no money. We can keep going and compare different aspects and we'd get different winners for different niches like Framer taking the design power versus ease of use niche and vibe coding taking a niche where one needs to achieve unique complexity relatively fast. All these tools find their niches and focus on them, training aspects in favor of those that will make them stronger within their niche. Last two meaningful aspects I want to show is the aspects that might not be that important for most people, but very meaningful for the web design business itself. Client hand off quality. Can you hand this to a client who can later manage the site themselves with an ease and output professionalism? Does the end result look like a bespoke agency build or a do it yourself project? Freelancer or an agency to comfortably sell a premium web design service, they need to be able to address the client's pain points. I see clients need to keep their website updated, they need to create content. They need to update the text on the pages. They need to create new blog posts and so on. In WordPress, they have to update that content in a very complicated Clunky, not very user friendly admin panel, which looks something like this. This environment comes with lots of moving parts, more places to click into, and more risk for clients wandering into things they should not touch. Now, in Webflow, clients edit content directly on the live side. No admin panels and weird text editors. They edit exactly what they see. They can change photos, update text, and no way for them to break the side. Be coding, for instance, has a terrible client handle. There is no visual dashboard for a client to manage their own blog or store without technical friction. They're pretty much locked out from their own site. Webflow is the gold standard in this category mashup. Webflow's genuinely usable content management system and dedicated UI for roles like marketers and content editors gives businesses an ability to actually run their site themselves. Businesses are constantly promoting, creating campaigns, pages, events, product launch, and more. They need more than just a website. They need a set of back office tools and features to run their entire web experience. Sweet spot that Webflow offers between design polish, functionality, and client side features is the reason why it has become the top choice for design agencies and freelancers like me who operate in business markets. It gave us the power to deliver extremely high value solutions to businesses without leaving the platform. Yes, with a little bit of a learning curve and slower build speed, but those aren't the aspect my clients care about. I can't sell them a platform because it's easy for me to learn. That's a me problem. They want design polish, power, and ease of use on their side. Choosing Webflow doesn't mean you can't utilize the power of vibe coding. Webflow has AI Builder as well. It actually has two AppGen which works like a traditional AI App Builder, just as powerful as other Builders, using the current best model out there, which is Cloud. Webflow's AI App Builder has an added benefit that it lets you connect components and CMS content from your existing site. Every site has repeated components like navigation bars, footers, sign up forms, testimonial sections, and so on. Being able to plug those right inside your prompt is super powerful, especially given those components and database items are fully under your control visually inside Webflow's regular editor. This AI Builder obviously extends Webflow's functionality ceiling, and I didn't even account for it in my previous comparisons. Apps and pages created here can't be edited in Webflow designer. You're going to have to prompt your way through it just like any other vibe code Pool. But Webflows second AI tool, the sit Builder is able to generate a visually editable site. This generation will be deployed to the Webflow designer where you can visually iterate on it. In the next lecture, we're going to take this AI side Builder for a spin, so I'm going to cover all nuances there. There is another type of site you can build on Webflow, ecommerce sites, but we're not going to cover those in this course. The demand for ecommerce sites are much smaller than regular websites. So my recommendation would be to go and move to ecommerce site web design and web development once you gain a good enough real work experience with regular and general web design. Doesn't make a lot of sense to jump right into complex, a bit more complex web development, which is ecommerce rather than regular websites, which is much simpler and much more straightforward. Webflow is free until you need to publish the website, and then you pay for the hosting. But hosting is something that every website owner has to pay, even if they're using free platform like WordPress. But you don't have to worry too much about this. It's not your expense. Clients pay for the hosting. In conclusion, Webflow has changed mine and so many other people's careers, and it can do the same for you. 3. Webflow Teaser: Course has six parts. In Part one, you will learn secrets of good design. In Part two, you will practice design on real projects. In part three, you will learn Webflow by building a company's homepage. In Part four, we're going to do a client project from start to finish. I'm going to take you through the same process that I go through with each client. We're going to start by wireframing then designing the website in Figma, then taking the whole thing and designing and building inside Webflow with the blog, and finally publishing and delivering it to the client. In Part five, you'll learn the secrets of making money freelancing, and Part six has several advanced tutorials, both in design and Webflow. In the promo video, I mentioned Webflow first, but we actually going to start this course with the design because every good website project starts with the design first. Just like any great building always starts with the architectural plans first, and then comes the since we start working with Webflow, only in the third part of this course, I wanted to give you a little taste before we go on. So go ahead and open up on Webflow so we can take it for a quick spin. You should already have the Webflow account from the previous lesson. If not, go to webflow.com and sign up. Use Google Chrome. The Webflow designer works the best in there. After you sign up, you'll get to some version of this page. Have three ways we can build a site in Webflow. One is templates. Webflow marketplace has more than 7,000 templates paid and free. They're absolutely marvelous. They're surprisingly unique for templates. There is variety. They have rich animations and interactions. It's a very valid way for a web designer to work. You can install templates for a client, edit them, customize them for their content, their branding, their business. And provide ongoing site maintenance and update services. Since these templates are built in Webflow, you're not template bound. They are fully editable and can be completely modified. Second approach is to build with AI. It's one of the two AI Builders inside Webflow. This is different from the app gen that I showed previously, which is a more traditional vibe coding tool. This one works like a first draft generator. Let's give this one a quick test. You can choose your own prompt or use mine. Before it generates the site, you're going to get to this sort of page structure. This is a handy little feature that Webflow offers unlike some other AI Builders. What this gives us is that we are able to actually structure our page, not just our page, but our site before we actually have the AI generated. This is very useful because you don't usually have everything structured in your head before you kind of can tell this to NAI. So these are each of them are pages. In these little boxes, they are sections. So for example, if we forgot to add some sort of a section, we can come here and think, Okay, we need another section on the bottom, like an FAQ section before or after the contact form. And Webflow is going to offer these many different kind of types of sections that we can pick from. So in reality, Webflows AI Builder is sort of AI at the same time, and then also like a library of components and different layouts that it offers. So it kind of gives the best of both worlds where you don't have to come up with everything on your own, but you can also use AI. So for example, we can add FAQ at the bottom, but okay, maybe I changed my mind. I don't want it on the bottom. No problem. I can drag it up, and then you can review the different sections here if they work, if they don't work, and then you can add more pages. So if you want to add more page, in reality, it has a five page limit. It's not going to generate more than five pages. So if, for example, you don't need services page or contact page, you can delete this one, and now you'll be able to create a new, let's say, pricing page. And then Webflow will generate a pricing page for you. And then once you're done structuring can click Generate SI. It's going to take a few minutes, give it some time. All right. So we're going to get a five page layout or a few pages depends how much you've generated. And what this place is here is actually this is like a pre step before we move it to the Wilo designer. This step lets us before we accept the changes made by AI, we are able to actually edit this and style them even more. So for example, we can go inside one of these pages by clicking Edit and we get these sorts of kind of like an e user friendly interface to update some styles and experiment, and offers different themes that you can switch out and complete it's going to change different colors. It will change different heading styles, colors. It will update many different things about the site, and will give you an idea of the structure and the content will remain the same. But now the colors have changed and the fonts have changed and gives you an idea of how this all looks in a different style. Each of these sections, they are editable. And for example, if you click on this, this will open up a huge selection of component libraries and layout libraries, let's say, and you have different hero sections, features, gallery pricing, or what not. And this is right now a hero section, and you have many many different options of how you want to style this hero section. And for quickside buildings, this is actually a great way to approach it because you don't have to prompt wrangle with AIS and it gives you a bit more ability to choose something visually that you see and you like, and you can edit. For example, I quite like these kind of sections that has images inside the text. We can update that. This here gives you ability to swap styles. You will keep this section, but it will change the colors based on the palette that is already used inside this theme. Color palette can be changed from here as well. For example, we can go with a little bit more, a little bit more intensive, more vibrant color like purplish, holy flower, blue. And you can see that gives you many, many different color palette variations. The entire sections update. You can use dark themes. Also, we can update topography. We can update the weight for the typography, maybe make it more bold. Sizes can be changed as well, and go a bit smaller. We can update styles for buttons. Right now we have this kind of flat design. We can go for potentially a bit more schumorphic design, a bit more clasmorphic like gradients and stuff. We can add new sections from here. For example, a logo section would be very interesting here. The color and style can be updated for different sections like this. We can switch out, for example, this gallery is not as interesting, which is a bunch of photos. These photos are all AI generated, and right now, obviously, everything looks very soles and blend. You're going to have to update the content, update the images to make it more personal. And once we're done with the changes, the styles that we have applied, all of them are going to be carried and applied to all the pages. As you can see, the colors, the typography, the button styles, everything has been carried everywhere, which is very nice. And once we're done with this, we're going to click this Continue building, and this will now take us inside the Webflow designer. The only issue here is that on the free plan, you only get two pages, so we're going to have to get rid of some of these pages that we don't want. We can keep maybe a services page. And a homepage. Then we're going to end inside Webflow designer. Here we have full control, how we can edit our site, fix any issues we have. For example, we can update our images. And fix issues like, for example, in this case, given whatever the font is and the way images are placed, they are touching here, and this is not nice. They shouldn't be touching, so we can fix this issue. Now, this is not going to be easy for you at this moment because you don't know how to work this designer. You don't know how this elements, how the styles and properties and all that works, but we'll get to it. This gives us a full control. Obviously, we can update the content that's easy. Different changes, for example, I'd prefer these logos to be spread out. Once you understand how flexbox works, you can do that very easily with a single click. And if you forgot and you wanted to add new sections, we can still do that through AI. These little generate layout buttons will show up. And then, for example, we can add a pricing section, and the Webflow gain is going to give us many different options for pricing that we can add. It will adapt the content to our website. And if you get any of some issues here, that can be deleted, yeah, we get the full control, and we can preview our web page from here and see how everything interacts and works. The images right now are terrible, but let's say. The website is going to be responsive right away, you can test it by shrinking this canvas. You can see they are adjusting to different sizes. And you can see also from here the different break points like mobile, tablet, and so on. But working with an already built site is going to be too confusing for a beginner. To learn the fundamentals of the web design, we need to start from scratch. Go back to the dashboard and create a new site. On a free plane, you can only have two free sites. So if you already hit that limit by playing with AI Builder, then you can just archive one of the sites from here. Create a new site and then choose blank site. As a first time user, you'll get this onboarding pop up. You don't need to go through it, but you can if you want to. On the left, we have a navigator. It shows the structure of the page and all objects on it. Right now, there is only one object, the body. From the plus icon, we can add new elements. Let's add a container which we can simply drag on the canvas. Also, let's add a heading and a paragraph inside. And write something in it. Let's center the text. We can do that by selecting the container and pressing center alignment under typography. And we're going to add some spacing to move the text in the middle of the screen, keep the container selected, and with your mouse drag this top padding handle. You can toggle a preview mode to see how your page looks like in real time. If you go to code Export, you're going to see the actual code that Webflow wrote for us. HTML shows the objects that we have edited, like the container, heading, and a paragraph. And inside CSS, you will see the style changes that we have made, the top pading and the center alignment. We could export this code and host it anywhere else. The page would work perfectly outside of Webflow two. But we're not going to do that in this course. The best option is to publish our page on Webflow. So go to publish and click Publish to selected domains. Once it's done, click the link to open the live site. Your first ever webpage built from scratch, ugly and useless, but still a webpage. Without knowing how to design, all our websites would look as unappealing as this one, even if we were pro Webflow designers. The design skill always comes first. So we're going to put the Webflow aside for now and learn and practice good design and then in part three, come back to Webflow so we can make the magic happen and design and build beautiful website. 4. PART 1: SECRETS OF GOOD DESIGN: Haven't studied in an art school. I don't think I've ever been inside one. My favorite subject in school was mathematics, and I didn't like to draw. Never in my life I would ever consider becoming a designer. My friend and a business partner at the time, who was a graphic designer, went to an art school and then was a regular graphic designer, and one day I discovered that he didn't know how to draw. He couldn't draw. And I gave him a strange look. What do you mean you can draw? You're a graphic designer, right? And he goes like, that's fun, isn't it? He explains that to be a designer, you don't have to know how to draw. You don't have to have some innate talent for creativity or be a flamboyant artist. Design has rules and techniques and guidelines, and you just need to learn how to follow them. I was shocked. I thought, Wait a second. Like, I felt like I just discovered some amazing secret this world has been hiding from me. And in this part of the course, this is exactly what I want to teach you. All those little tricks and guidelines that make something look so designed. And I want to teach you and show you how simple it is to turn something that is just random content and turn it into a beautiful design composition. I will give you assignments and practice exercises so you can get your hands. Dirty. We will learn how to use a design tool called Figma. It's a simple tool, and we're going to learn it in a step by step manner, so we're not going to turn it inside out. We'll learn new features as we go and as we practice through different designs. And as a matter of fact, design isn't really in the tool. You don't become a graphic designer or web designer just by learning Photoshop. Or sketch or whatever. Its design is a mental scale in reality. It's not that, you know, creativity that people really think about. It's obviously there is a lot of creative part inside, but often it's a mental skill, and it's a way of looking at things. Sort of like the way the car mechanic looks at the car and hears the engine of the car and then understands just by looking at something and just by hearing the sound where to tighten up the screws and where to listen them up. I'm going to teach you this exact design skill. So you can take a blank canvas and create something very attractive out of it. Something that people will pay you good money for 5. Getting started with Figma: We dive into design, let's first set up Figma. It's going to be a quick overview. I'm going to show you just a general understanding of how the tool works and all the important features that we will need to design websites in FIGMA. I will teach you them and show you them as we move through the material and as you need them. No right away. So first things first, let's download FIGMa, right? We have two options Mac and Windows. I'm on a Mac, but Windows app works and looks the same. So even on Windows, you will be able to follow my tutorials perfectly. If you're on Linux or some other operating system, don't worry. You can use FIGMa directly in your browser. It's that awesome, but I strongly recommend using desktop app if you have a chance. Now, let's install it. On a MAC, it just needs to be moved to the applications folder, and that's all. I don't know how the installation works on Windows, but I'm sure it's not your first time installing an application, so just go with the usual installation process. This is the initial registration screen. Sign up with Google if you want to make it easier or sign up with an email. It's going to ask you to verify your email address. Your name Waco. What kind of work you do design? Figm's free version has some limitations, but nothing crucial for a freelance designer. You can easily use it for free forever. And we're going to arrive on our homepage, which is our file browser. All your Figma files will show here. Figma is cloud based, so you will need Internet when working with it. You can work offline, but only if you load the file before going offline. Then you can work with a file, and once you get back online, it will sync and update that file. It's okay, but I wouldn't recommend doing this. You don't want to risk losing your hard work. Let's start by creating a new file. We can do that from here. Now we are in the Figma editor. This is where everything happens. Nothing to be scared of, it's quite simple. Open files will show as tab sort of like your browser. And if you want to get back to the homepage to open another file, you can do that from this icon right here. Or if you're working from the browser, then you can either click the parent folder of the file right here. It will say drafts in most cases. But if you are working under a team plan, then it might say the name of the team or the project. Or under this dropdown, you can select back to files. To get back to the file, you just need to select the open tab if the file is still open. But if it's not open, then all of your files will show here on the RSNs tab. More precise locations for those files will be either drafts folder or one of the team folders. But the team is a paid feature and the free plan only allows three files. So in case you ever get a message that you've reached the limit of files, it's just about the team files. Inside drafts folder, you can have unlimited free files. And as a freelancer, the drafts folder will work for you just fine. Let's go through a tool bar here. As you can see, it only has a handful of tools, nothing like what you'd get in Photoshop. First one is a move tool, the default tool that is selected most of the time. It does exactly what it says. It moves objects and interacts with them. The next one is the frame tool. It's similar to artboard that you get in other design tools. All our designs will start with a frame. Depending what we are designing for, we need to choose a specific size, the screen that we are designing for. So either we are designing a screen for a desktop computer, a laptop, iPhone, and so on. Is this is a web design course, we'll be designing for desktop and laptop computers. You can draw it, but better option is to choose one of the preset sizes. And choose the screen from this drop down. There are iPhones, Androids, tablets, even Facebook covers. We're going to choose one of the desktop screen sizes, obviously. You're not stuck with these dimensions. If you want, you can resize it like this. By the way, this moving of the canvas that I did, the technical term for this is panning. I'm doing this by swiping with two fingers on my touchpad. If you are on a laptop, you should be able to do the same. If you're using a mouse, then you can use the scroll wheel to pan up or down or hold shift, and it will pan left or right. But a better option with the mouse might be to hold down the space bar that will activate a hand tool, and then you can click and direct the canvas as you wish. There is also zooming you'll need to do from time to time on a touchpad. Again, that's easy. Just need to pinch with two fingers exactly the way you'd do it on your phone. And with a mouse, you'll need to hold down a Control or command on Mac while you scroll. All right, up next is a shape tool. When you click a tiny arrow, it will let you select any of the following shapes like rectangle, line, et cetera. Let's draw a rectangle. It's the first thing selected by default, and on the frame you draw a rectangle like this. Click and Drag. Same logic for other shapes. Then we have a Pen tool. Don't worry about this for now. We won't be using it that much. Next to it is a text tool. Pretty straightforward. The commenting tool, this is for collaboration. When you send it to your client or team members to review, they can directly comment on each element, very handy tool. Here we have Actions menu, which is the home for many different features. All the Figma settings and options you can find from here, for example, Zoom or dark mode. I actually prefer the light mode. You can open up the menu using a shortcut Control K or Command K on Mac. You can actually see all the shortcuts when you hover over each of these tool bar items. Inside Actions Menu will find tabs for assets and plug ins. Assets are basically small components that we create in our file, more on that later. And plugins and widges that are created by the community, they're like mini apps that can make our work in Figma more efficient and more productive. Sometimes they're paid, sometimes they're free. Then we have a Dev mode, that's another paid feature which is not needed for this course nor for freelance web design. It's a feature for developers. It facilitates the design handoff process when the designer delivers the designs to developers to build an app or a web interface. The developers will be able to find all the necessary elements and information in a format and language that is more useful to them. That's all you need to know about the toolbar for now. On the other side, we have the properties panel. Fun thing about properties panel is that it changes based on an object you have selected. We select a rectangle and we get all the properties for this particular rectangle. When we select text, we get slightly different properties, font, text size, so on. We'll explore each of these properties later when we actually need them. No need to worry about them right now. Finally, on the left side, we have the navigation panel, which has a few different sections. There is the main menu. You'll see all the FICMa settings and options here again. File name and some actions of the file. File versus Asset stab. That's the same assets that you find in the menu below pages because we can have multiple pages in our file. And the layer section. Every new element that we create will show up here under layers. Now, why is it called layers, and why not objects or elements or something like that? Because they lay on top of each other. They exist in the layered space. For example, if we want the purple box to go below, we just need to drag that layer and move it below the gray rectangle. All these objects are the children of our frame called desktop. That's where they live. And if we move any of these objects outside of this frame, you'll see how the layers panel will update and will move the object outside of the frame onto the general canvas. That's all you need to know about Figma for now. More features will come up in all the practice exercises that we're going to do. If you haven't been following along, stop pause and go ahead and do this right now, then continue with the next lesson. If at any point in this course, you get stuck, it's new tools, they sometimes update and, you know, different things change, and I might not be as quick as updating the screens and everything. Obviously, I will, but, you know, they move very fast, all these tools, and they update screens and user interface very quick. So I might show you something and it might be all of a sudden gone. Let me know. I'll fix that. But if you get stuck, you can always drop me a message or ask a question in the discussion forums. Either me or some other student will help you out. 6. Getting started with Figma: We dive into design, let's first set up Figma. It's going to be a quick overview. I'm going to show you just a general understanding of how the tool works and all the important features that we will need to design websites in FIGMA. I will teach you them and show you them as we move through the material and as you need them. No right away. So first things first, let's download FIGMa, right? We have two options Mac and Windows. I'm on a Mac, but Windows app works and looks the same. So even on Windows, you will be able to follow my tutorials perfectly. If you're on Linux or some other operating system, don't worry. You can use FIGMa directly in your browser. It's that awesome, but I strongly recommend using desktop app if you have a chance. Now, let's install it. On a MAC, it just needs to be moved to the applications folder, and that's all. I don't know how the installation works on Windows, but I'm sure it's not your first time installing an application, so just go with the usual installation process. This is the initial registration screen. Sign up with Google if you want to make it easier or sign up with an email. It's going to ask you to verify your email address. Your name Waco. What kind of work you do design? Figma's free version has some limitations, but nothing crucial for a freelance designer. You can easily use it for free forever. And we're going to arrive on our homepage, which is our file browser. All your Figma files will show here. Figma is cloud based, so you will need Internet when working with it. You can work offline, but only if you load the file before going offline. Then you can work with a file, and once you get back online, it will sync and update that file. It's okay, but I wouldn't recommend doing this. You don't want to risk losing your hard work. Let's start by creating a new file. We can do that from here or here. Now we are in the Figma editor. This is where everything happens. Nothing to be scared of, it's quite simple. Open files will show as tab sort of like your browser. And if you want to get back to the homepage to open another file, you can do that from this icon right here. Or if you're working from the browser, then you can either click the parent folder of the file right here. It will say drafts in most cases. But if you are working under a team plan, then it might say the name of the team or the project. Or under this dropdown, you can select back to files. To get back to the file, you just need to select the open tab if the file is still open. But if it's not open, then all of your files will show here on the RSNstab. More precise locations for those files will be either drafts folder or one of the team folders. But the team is a paid feature and the free plan only allows three files. So in case you ever get a message that you've reached the limit of files, it's just about the team files. Inside drafts folder, you can have unlimited free files. And as a freelancer, the drafts folder will work for you just fine. Let's go through a tool bar here. As you can see, it only has a handful of tools, nothing like what you'd get in Photoshop. First one is a move tool, the default tool that is selected most of the time. It does exactly what it says. It moves objects and interacts with them. The next one is the frame tool. It's similar to artboard that you get in other design tools. All our designs will start with a frame. Depending what we are designing for, we need to choose a specific size, the screen that we are designing for. So either we are designing a screen for a desktop computer, a laptop, iPhone, and so on. Is this is a web design course, we'll be designing for desktop and laptop computers. You can draw it, but better option is to choose one of the preset sizes. And choose the screen from this drop down. There are iPhones, Androids, tablets, even Facebook covers. We're going to choose one of the desktop screen sizes, obviously. You're not stuck with these dimensions. If you want, you can resize it like this. By the way, this moving of the canvas that I did, the technical term for this is panning. I'm doing this by swiping with two fingers on my touchpad. If you are on a laptop, you should be able to do the same. If you're using a mouse, then you can use the scroll wheel to pan up or down or hold shift, and it will pan left or right. But a better option with the mouse might be to hold down the space bar that will activate a hand tool, and then you can click and direct the canvas as you wish. There is also zooming you'll need to do from time to time on a touchpad. Again, that's easy. Just need to pinch with two fingers exactly the way you'd do it on your phone. And with a mouse, you'll need to hold down a Control or command on Mac while you scroll. All right, up next is a shape tool. When you click a tiny arrow, it will let you select any of the following shapes like rectangle, line, et cetera. Let's draw a rectangle. It's the first thing selected by default, and on the frame, you draw a rectangle like this. Click and Drag. Same logic for other shapes. Then we have a Pen tool. Don't worry about this for now. We won't be using it that much. Next to it is a text tool. Pretty straightforward. The commenting tool, this is for collaboration. When you send it to your client or team members to review, they can directly comment on each element, very handy tool. Here we have Actions menu, which is the home for many different features, all the Figma settings and options you can find from here, for example, Zoom or dark mode. I actually prefer the light mode. You can open up the menu using a shortcut Control K or Command K on Mac. You can actually see all the shortcuts when you hover over each of these tool bar items. Inside Actions Menu will find tabs for assets and plug ins. Assets are basically small components that we create in our file, more on that later. And plugins and widges that are created by the community, they're like mini apps that can make our work in Figma more efficient and more productive. Sometimes they're paid, sometimes they're free. Then we have a Dev mode, that's another paid feature which is not needed for this course nor for freelance web design. It's a feature for developers. It facilitates the design handoff process when the designer delivers the designs to developers to build an app or a web interface. The developers will be able to find all the necessary elements and information in a format and language that is more useful to them. That's all you need to know about the toolbar for now. On the other side, we have the properties panel. Fun thing about properties panel is that it changes based on an object you have selected. We select a rectangle and we get all the properties for this particular rectangle. When we select text, we get slightly different properties. Font, text size, so on. We'll explore each of these properties later when we actually need them. No need to worry about them right now. Finally, on the left side, we have the navigation panel, which has a few different sections. There is the main menu. You'll see all the FICMa settings and options here again. File name and some actions of the file. File versus Asset Stab. That's the same assets that you find in the menu below pages because we can have multiple pages in our file. And the layer section. Every new element that we create will show up here under layers. Now, why is it called layers? And why not objects or elements or something like that? Because they lay on top of each other. They exist in the layered space. For example, if we want the purple box to go below, we just need to drag that layer and move it below the gray rectangle. All these objects are the children of our frame called desktop. That's where they live. And if we move any of these objects outside of this frame, you'll see how the layers panel will update and will move the object outside of the frame onto the general canvas. That's all you need to know about Figma for now. More features will come up in all the practice exercises that we're going to do. If you haven't been following along, stop pause and go ahead and do this right now, then continue with the next lesson. If at any point in this course, you get stuck, it's new tools, they sometimes update and different things change, and I might not be as quick as updating the screens and everything. Obviously, I will, but they move very fast, hold these tools and they update screens and user interface very quick. So I might show you something and it might be all of a sudden gone. Let me know. I'll fix that. But if you get stuck, you can always drop me a message or ask a question in the discussion forums. Either me or some other student will help you out. 7. Layout is King: take a look at this hero section design. This design isn't bad at all, but there's one thing wrong with it. See if you can notice individual. Each element is variable design, but composition together look somewhat off before were to draw lines on the edges off each element, you'll see that elements aren't really lined up. Fixing this is quite easy. We just lying. Things are as much as we can. A simple trick. Change the same design, looking from clumsy, toe, orderly and polished. Now, if I was to draw lines on the edges, you'd see a simplistic grade with two main vertical access. Why does aligning objects make a composition look better? It's exactly the same reason why this room looks better than this room. It's the order. We avoid chaos and seek order, and everything that is orderly, symmetric and organized will be perceived as more beautiful than anything that is chaotic and disorderly. Some of the most important design rules are about layout. It's a question of where to put things, how to arrange them, what comes after what and upcoming lessons will be talking about all the design techniques and rules related to lay out. This one is about alignment, probably one of the simplest, the most basic but one of the most powerful design rules out there. Just a simple alignment can make something look designed. On the other hand, misalignment will make it look sloppy and amateur work. How many Web developers who don't have a background in design will just drop elements of the page randomly wherever they fit. This makes a page look messy and not attractive at all, but we take every chance to align objects with each other. Then we create something that looks s statically, more attractive. There are six ways you can align objects left alignment. That's the most natural way of the lining things. Because the way we reading Western languages from left to right, it feels the most natural to our eyes to start scanning for objects from top left corner. Then you have the center alignment. This is frequently seen in weapons on last in print design. If you're designing for a rabbit, Hebrew and other right let languages than most natural alignment would be right alignment notches for tax. But for other objects to and there are three similar ways toe the line objects on the horizontal axis. Top lineman center alignment again, but horizontal axes and the bottom alignment. Almost old design software will have alignment action buttons, and they will use this exact icons to represent ege feed my uses three cycles to, and I will show you where they are. In this example, you can see that with a line objects on their left edges. Alignment is the first staff for a good layer. When you start lining things up, you'll see that the layout starts to form some sort of a structure. This is called the Great. It's the way of organizing elements on the page to put them in a recognizable structure. But what design really likes the greed that is divided in equal sizes? So if we were to draw eight equal with columns that are spaced out evenly and we took all our objects and align them with this columns, then we would get a layout that feels so much more balance and designed. And the final step in this process is to reuse the same values as much as possible. The vertical gas between objects are all 30 pixels, but the horizontal gap is 60 pixels. The right move here would be to make that horizontal gap 30 as well. Now we have a truly balanced layout. Why stick greed so important? It gives the audience the sense of clarity. The agreements aren't actually drawn right, you know, they're implied. And there that and audience sort of feels it. And when Ah, something looks predictable and familiar and because of the repeating creed, the audience and the viewer will trust the website more, and they'll understand. And they know this is the website that it's not going to waste their time. The group rule is flexible on always design inside the great Sometimes sometimes I do. Sometimes I ignore eight. Sometimes I have agreed. And then, you know, I let things sometimes go out of the constraints on guy know many designers to exactly the same, which is, you know, they might not use it, greet completely or they might somehow have it. But, you know, using more in a flexible manner. But for you, in the beginning, I want you to use the greed because for the beginnings and when you're learning how to design it just really amazing way how to kind of ingrained this great design habit inside of you, and then later on you can and cannot go about it a bit more flexible way. We're going to do a practice exercise after this lesson, and I'm going to show you how to easily create agreed Inside Sigma and how Teoh design within the grid. Most of the design rules that we're going to be speaking in this course can be broken, although if we're breaking a design rule, we have to do with an intention, because if we're not doing it with an attention in which we are not really thinking about, it, probably were being sloppy. One very common design Lee out to use in Web design is a center lee out, which doesn't really fall under a proper grid. Let's take a look at this example. There's no prominent grid on this section that artists free flowing, and the elements in the middle aren't creating any sort of grid. However, it still looks good and doesn't look sloppy at all because at least there is an alignment. You can break greed, but it can really break in alignment. We can feel the imaginary vertical line thesis elements are aligned with imprint design, the rarely use center alignment. However, unlike print, the website can be viewed on hundreds of different screen sizes anywhere from a tiny smartphone toe. A large TV screen. Because of these are upsides have become responsive. The content can shrink or expand, depending on the screen is being viewed on imprint. The designer would mold the elements to his absolute. Were Whatever is printed wasn't going to change shape or size. So you know he would achieve an optimal result. This is why you see crazy layout in magazines, but not in Web. So that's alignment and greed in theory. Up next, we're going to practice alignment in Great so you can make it as part of your design process. 9. Assignment: Alignment & Grid: This video, you're going to practice alignment. You're going to create a very simple design in Figma, and you're going to submit that in an assignment. After this, it's a follow along video, so fire up your Figma. Okay, so we're not going to design anything useful. The purpose of this exercise is to practice alignment and gain some hands on experience with Figma. We are going to sketch a hero section of a web page, sometimes also called a header or above the fold. We're not going to do anything fancy, no images, no text, just a bunch of rectangle, sort of like a doodle. So what's the first thing we insert when we start any design? That's right. Frame. As of show this in the Figma tutorial, we can add a frame by selecting frame tool and then selecting one of the presets from the property s panel. Let's select the desktop frame. Next, we're going to define our grid for this frame. Why? Because we want to structure our website in a way that it looks neat and organized. Setting up a grid in Figma is very simple. Grids apply to each frame individually, so we need to select the frame, and in the properties panel, we will get an option to add a new layout grid. Don't forget to select the frame, otherwise, this won't show up. By default, we get this two dimensional grid that divides a frame little squares that are ten pixel in size, but this is not the grid we want. What we want is a vertical grid that divides the page in several columns. The most widely used layout grid in web design is 12 column grid. Why 12 columns because it divides really well. 12 is a multiple of three and four, so 12 column can be split in half with six columns on each side. It can be split in three with each part being four column wide, or it can be split in four with each part being three column wide. Other layout grids will offer less options. For example, ten or eight column grid can be split in three equal sizes, so it's very limiting. Apply 12 point grid from the dropdown, select columns in the count, type pin 12. Now let's adjust some spacing of our grid. The content on the website isn't usually laid out on the edges. There are margins on the edges of any website and the content is laid out in the center. We can apply those margins to our grid right here. Something like 140 pixels should be fine. If we increase the margin, you can see how columns start to shrink. One more thing I like to adjust here is the spacing between the columns. This is called the gutter. By default, it's 20 pixels, but for me, it's not enough. I like to create a bit more spep separation between the objects around 30 or 40 pixels. Alright, this is our grid. I'd like you to create the exact same grid with the same values. This is where we're going to lay out our website content. The grid is an overlay. You cannot select it with your mouse, and we can show or hide the grid right from here. There is a shortcut next to it. It's showing for Mac, which is Control G. On Windows, it's probably something else, but you'll be able to see it if you're on Windows. And there, that's where our design will go. Next, I want to give this frame a background color for no particular reason, just for fun. How do we do that? Remember, for any object that you want to edit, you have to first select that object. Properties panel instantly updates as you select it, and now we have an option right here to change the background color. This is a very standard color picker that you'd see on nearly any other design or non design application. Later, we will learn color in more detail, and also I will show you how to work this color picker like a pro. You can pick any color you prefer or keep it white if you'd like. If you're background color and the grid don't have a good contrast, you can always adjust the color of the grid. See, that's much better. Now, let's start laying out some general elements that we would have on a standard website. Remember, we're just doing a super simple wireframe, so we're going to use just rectangles. What do we have on top of every website? A navigation bar, which usually contains a logo and some links to different pages on the side. Let's draw a rectangle. That's going to be our navbar. You'll hear me sometimes use a word navbar as a short for navigation bar. Okay. I like being precise, so I'm going to change the height of this rectangle to 70 pixels from here. The H is a value for the height and the W is the value for the width. Here's a quick tip. If you press your keyboard arrows up and down, while being inside this field, you can increase or decrease values just like that. And if you hold shift at the same time, instead of increasing the value by one pixel, it will increase it by ten pixels. Okay, let's give this navigation bar a slightly darker color. So one more time, if we want to add in an object, we select it, and we will have all the properties in the panel right here, and we can change the field color of this rectangle from here. I'm going to make it black, but we'll make it transparent. This slider here changes the transparency of the color. This is commonly called opacity. You've probably heard this term before. Also, you can set the opacity from this percentage box. Let's set it to 20%. This is a little design trick to maintain the same color palette. You can use black or white overlays that are semi transparent. As a result, the background color spreads through it and you get a color that is part of the same color palette. Next, let's draw a logo on the left side. We're going to draw a rectangle as a place holder for the logo. Here is where the grid starts to come into play. When we start drawing objects, we are going to place them within these grid columns. Our options are either to fit it in one column, two column three, and so on. For our logo, we have an option to go for one or two columns. Let's go with two. The grid makes our decision process much simpler. We only have to decide between two sizes instead of deciding between hundreds of different pixel sizes. As you resize objects, you will see the smart guides that appear when your object aligns to the edge of the grid column that will help you size them precisely. And let's change the color. The color is up to you. Another thing I want to do is to make this rounded rectangle. To do so, we'll need to change what's called a corner radius. I want it completely rounded. This value will depend on the dimensions of the rectangle, so just increase it until it's fully rounded. It doesn't matter if you get a very weird value. That's our placeholder for the logo. Now we need navigation links. I'm just going to duplicate this box. There are a couple of ways you can do that. The most obvious ways to go Control C, Control V or Command C, Command V on the mac. That's going to paste it right on top, and then you can drag it from there. But my favorite way to duplicate something is to press out or option on Mac and then drag that object. That's going to duplicate the original object. Let's make this tan pixel smaller and fit it into one column only to make it look a little more like a link. Now let's drag a few more of these and align them with columns. Red quick guides help you with alignment. However, Figma can also do the aligning for you. First, we need to select the objects we're aligning. You can just drag a cursor around your objects. Now we can align these objects with one of these options. You can probably recognize the shapes from the previous lesson. The first option will align objects to the left, but that's not what we want. We want this option to center objects horizontally. And right, that's our navbar. Now for the rest of the content. Okay, what do we have on our hero section? A headline, right. Again, let's duplicate this rectangle and make it look more like a headline. After the headline, we usually have a paragraph explaining the company or the product. Let's draw a little something that looks like a paragraph. All right. That's our paragraph placeholder. And after the paragraph, we usually have buttons asking us to sign up, learn more, and so on. And that's our hero section. Let's see how it looks without the grid. That's it, a very simple exercise to get you started and comfortable with Figma and practice beginning steps of web design. We created nothing useful, but we took a very important step. Jeff Pesos, the CEO of Amazon loves this Latin saying step by step ferociously. This is how we're going to approach this course. We're going to take one step at a time, leading us to the final goal ferociously. 10. Layout: Importance of Visual Hierarchy: meet links cars dot com one of the most terrifying websites I've ever seen. What does that make some websites so hilariously terrible? And what makes other looks well designed already covered? The first big reason that alignment this page hates alignment its anti ally. The second big reason is a visual hierarchy. Every object on this godforsaken page demands our attention all at the same time. We don't know where to look at where to start our journey, and that can be so overwhelming that we would rather close the page. Now this page there's a very strong visual hierarchy. What's the first thing that you looked at? Probably either that funky, colorful art on the ride or the headline. Then comes the rest of the elements, one by want. These composition took us by the hand and guided us step by step on what was the most important information First and second and so on. Check out the two buttons. There's a clear hierarchy, even between them. Obviously, the full button is the Alfa Doc. This is called a visual high rock, and it's a fundamental principle off good design. Visual hierarchy has a lot to do. The way our attention works. We simply cannot focus on more than one thing at a time. This is especially true off our vision. The only very small fraction of what we see what we look at is a high definition. The rest is a low resolution peripheral, er, peripheral blurriness. Do this, make a thumbs up sign, put your hand in front of you and look directly at your thumbnail. And that small some nail is the high definition is the only high definition that you see the rest off. It is low rez and quite blurry. The hierarchy in design begins with a focal point. Tom Hanks sitting on the bench is the undeniable visual target off this poster. It's the most interesting Hank. Think of a focal point as a spotlight on a stage. You see how this stage is not actually in late. It's dark and oldest, but lines are shining on Michael Jackson, making him the obvious focal point at this stage. If they had the stage completely lied, then everything else would be visible. But that is not their aim. Our visual interest is obviously on Michael, and the stage designers have made sure to give audience exactly that we could This design this graphic guys the focal point off this composition? He's the main hero in it. That's exactly why we're for two than main graphic on the pages. The hero shot was Do a little self critique off one of my early works this the lending page that up built for a real estate agency. I cringe a little when I see a design mistakes in South my early work. But what you gonna do? It's the learning process. The clear villain off this work is definitely a lack off proper visual hierarchy. The forms sort of these unsuccessfully trying to be the focal point. However, it's not supposed to be on top of that Iraq. It's not the main message of this page. So how come is trying to steal so much attention when there's a big background image like this? Usually it's because we wanted to be the hero for the audience to start there, but that's not happening here. It's dark, low quality, and it's not clear what the hell is happening in the image. Not to mention how the huge form and the taxes covering so much off it picks and wonder. What is this image doing? Terrible together? It has no value. It's just adding more noise to the composition. Playing background would be a huge improvement to this. Same with the copy. There's no clear hierarchy. It's hard to tell where headline ands and where paragraph begins, because they're so similar and style when we see good design, a lot of times it's a visual hierarchy that contributes to its beauty. What's there were designing a website or a made up lawyer called Vinson Schwartz. What is the most important thing on this page? Easy. The fact that he's a Boston lawyer or is it his own record? Or is his photo we don't know? Because there's no hierarchy. Everything looks like, Well, we can't really follow the narrative. This is a whole different story. It's 100% improvement, and I haven't done much. I've used a few design tricks to create a clear hierarchy between the objects, and I'm going to teach you all about this tricks later in this part of the course, so you can take something that looks like an amateur, placing elements on the page randomly and turn it into well polished war that you can get paid really well for. Let's break down the high ranking here. Do we have a focal point? Obviously, it's the photo of Vincent and how's the rest of the high regulated out? The second and importance? I'd say the name tag because how close it is to the focal point. It's part of it. So the viewer will glance at the image and the name in one quick oh than the Bold All Caps headline. Fourth is actually the button before the tax because it's ah, larger object with some white space around it. And finally, this up had text. So what exactly did I do here to create this visual hierarchy? How come this? And nearly no hierarchy? But this has a very distinctive vocal point and a clearly defined visual hierarchy among the elements believe this has to do with sizes and weights or elements. Size and weight is what usually defines the hierarchy. There are other ways as well, like collar contrast or images that draw a lot of attention and so on. But designers primarily rely on size and weight first. What I did was to increase the size of the photo. I made it the biggest element. That's it. Whatever is the biggest on the screen will attract the most attention. It's that simple. The purple rectangle behind the picture is also bringing more attention to the photo. Without it, I would have to make the photo much bigger. Then I have defined the hierarchy between the headline paragraph and the button. I made the headline Big, Bold and all caps. Not only Up made the fun size much bigger than the original, but also made it extremely ball thes. Boldness is what I refer to as a weight often element. It looks heavy in the phone families. You'll even see the style called Habit. The paragraph underneath the headline is significantly smaller than the headline. It's like David and the go Hyah! It's a regular phone wait, small caps and small phone size and the button I have made transparent with only the borders. This is commonly known as the Ghost Button. You don't usually want to use this as a primary button, but for secondary actions and in cases where you want to decrease its significance. It's a great use. And last but not least, I have used a batter alignment for the content before it was all just centered in the middle. I do open your center alignment, but often it doesn't do a good job and making the design look polish it and organized the left alignment with agreed definitely does a better job as a fun exercise. I want you to pay attention to the designs around you. Pay attention to the billboards and posters, flyers that people hand you and obviously the websites. And look, if the designer had used a good visual hierarchy or not, and up next, we're going to practice hierarchy, stick around. 11. Assignment: Visual Hierarchy: This video, we're going to practice visual hierarchy. We're going to take the content from that lawyer website and apply whatever we have already learned about visual hierarchy and alignment and practice it and apply it to our example. It's a follow along video, so fire up your Figma. Go to the Figma file that I have linked in the resources. The files that are link should automatically create a copy in your account once you log in. If next to the file name, it says view only or locked. That means it didn't duplicate. You'll need to create a copy of the file before you can edit. Next to the file name, click the arrow and select duplicate to your drafts. That will create a copy of the file in your Figma account, and you'll be able to edit the file as you wish. Now, let's give this design another redo. We just need to apply what we've already learned so far. You'll see how thinking about hierarchy and alignment is going to take care of most of the designing for us. Let's start with our grid. Remember how to add that? We have to select the frame first, and then the layout grid option will appear in the properties panel. Just like the last time, columns 12 30 pixel gutter, but 60 pixel margin this time because we're using a smaller MacBook frame instead of the desktop. The navbar fits perfectly on the edges of this grid because this is exactly what I was using when designing the navbar. For that reason, we can leave the navigation bar in its position. You'll see that links in the navigation bar don't align with the grid columns, but that's alright. As I said before, grid is a guideline, not a forceful rule. We don't always have to take it literally. If we align the button and the links to columns, in this case, we wouldn't get the best results. For example, one column is too small for the button, and two columns are too big. Let's think about the visual hierarchy. Remember what's the name for the visually most interesting object, the focal point. Using the photo as a focal point is a good idea. When you have photos, especially of people, usually it's a great idea to make them the focal point. So how do we do that? Last time, I used some tricks to draw more attention to it, but we can go simpler than that. Making it very large always works. Want something to be noticed, make it big baby. Simple as that. Because it's a vertical photo, as you can see, it doesn't make a good background photo. Instead, we can use it on the half of the screen. Okay, so this photo is covering up the navigation bar. Remember the Layers panel. Since it's a higher layer, it covers up everything underneath. We need to move it below the now bar. We can do that by either dragging it in the Layers panel, but easier ways to use an option that does this for us. Right click on the photo and select Send to Back. This will send photo all the way to the back. Now, the navbar is on top. But because navbar tax is dark, we can't see anything, let's fix this. I'm going to disable the grid layout so I can see better what's going on. We can turn that off for the entire document from here, but you'll see me often use a shortcut. Let's now make the navbar links white. Good. Let's do something similar with the button. It's not very visible. I could, of course, flip the colors, make the button white and text dark. But a better looking option in this case is to use either a ghost button or a semi transparent one. Change the background fill to white and decrease the opacity of the color fill to about ten to 20%. I really like these semi transparent buttons. They have a very slick look to them. You can see how our design is starting to take a much better shape with very simple modifications. We have an undeniable focal point of this composition. Now, let's organize our content better and create a visual hierarchy between them. First, let's align them to the left and fit them into a grid. Now we have to decide on what is going to be our primary message. Here, we have to start thinking a bit deeper about our goals of the website and the visitors. Being a designer isn't just making things look pretty. Often it's thinking about the goals of your design and how to achieve those goals most effectively. A hero section of almost every website has to answer three questions for the user. What is this website about? What am I going to get out of this website, and how do I get it? The first question is, what is this website about? Well, it's about Vincent Schwartz, who is a Boston divorce attorney. Now, out of these two information, his name and Boston divorce attorney, which one is more important? This can depend on some other factors. For example, if he is a well known lawyer, then his name would be more important to show first. If he isn't known, then it's more important to show that this page is about Boston divorce attorney. Let's say we know from the client that his name is an important information and needs to be displayed as the primary info. Case, we're going to make the name big and bold. I'm going to go much bigger at this time because the focal point, the photo is so much more prominent that I can afford a bigger text. In my previous example, I couldn't go too big because the photo was smaller. For the headline font, I have chosen play for display font and use the black style, which is its heaviest form. There is an entire section of this course dedicated to typography. It's a big topic in design, and you learn a lot on how to choose fonts in a way to make your designs look great. In this exercise, you can choose whatever font you like, but pay attention how you choose the weights and sizes of these fonts. The weight of the font can be selected from here. How many options you get here depends on the font family and how many weights does it come with. Okay, as I have chosen a big and heavy style for the name, I'm going to do the opposite for the Boston divorce attorney text. I'm going to keep whatever font it was and choose a light style and make it even smaller. The subtitle definitely doesn't compete for the attention. The name gets all the Spotlight, which is exactly what we want. The hierarchy between the two is clear. Next, let's adjust the paragraph text. I'm going to decrease the text size a little more, and that's it. The button I will live as it is. I'll just make it smaller, and that's going to be enough to decrease its importance. That's all. It's looking pretty neat. How about the hierarchy? Do we have a focal point? You bet we do. How about the rest of the elements? We have our headline that is visually most noticeable text, and then the rest of the elements with different degrees of visual importance. And that's it. If you haven't been following along, now it's your turn. Feel free to deviate from our version if you prefer it. The important thing is to reach two goals, which is A, to have a focal point and B to have different levels of visual importance between other elements. It up to you if you want to use different colors, no problem, different fonts, different arrangement, or you can recreate my Version pixel to pixel. Doesn't matter. The important thing is you start thinking like a designer and start noticing and have visual hierarchy in your mind at all times. 12. Layout: Beware of Optical Illusions: between these two horizontal lies, just the lions, not counting their own heads, which one off this lines is longer, Just like 8% of the people. You probably went with the bottom line, but the truth is that their exact the same length thes sort of optical illusions happen all the time. In design, you will take two objects, measure them and see that they are often exact size. But our eyes tell is that the circle is slightly smaller than the square. So what do we do in such cases? Do we go? What are ruler says, Or do we trust our eyes? Most of the time, we're going to trust our eyes. That means if an object appear slightly smaller than its counterpart, we need to compensate for the optical illusion and increase the size slightly until the both appear the equal size. Then we're going to have to objects that appear the same size. This is more important than their actual pixel sizes because audience isn't going to get out the rulers and start measuring. But if something looks smaller, they will find it ought. Illustrations are common graphic elements that you will use in your Web designs. A lot of times these illustrations, or Aikens, are going to have very, uh, shapes. It's gonna make equal size. Illustrations look very different from each other. In this example, Envelope on the Laughed looks bigger. It's overpowering the icon on the right when they are supposed to have equal hierarchy. Although their sizes are identical, they have both the same height and the same with, but the envelope has much fuller body compared to that tent. This is what designers usually referred to as the ways off the object, and heavier objects will look bigger. They will look wider or taller, so we need to manually compensate for the tense, lighter body by increasing its actual pixel dimensions. There is no rule on how much to increase. This has to be done by I increase it until they feel like equal size. Then you'll get balanced composition that feels aligned with matching sizes. These tiny little do tell us is what makes the page look like it was designed by an amateur or a pro. Most Web designers and developers who don't have a background in graphic design or anything designed related. They measure things by a ruler. And what happens is the results come out to be inconsistent and quite clumsy, declined or user isn't going to notice what is exactly wrong with a page. They will notice it, but they won't know what exactly is off with it, but they will fail that the page isn't quote unquote designed. Here's another very common optical illusion. This waas, one of the very first, is Unless is that I received from my design mentor. Whenever we need to put something, for example, tax inside of box, what does one usually do? Find the exact middle off the container in place there, element right in the center. The issue with this is that text feels like it's sinking. It even feels like space above the Texas larger compared to the space below it, sinking feeling isn't a good impression for any design. Instead, what we want to do is to notch the tax a little towards the top, so it feels like it's floating to remember easily. Think of it as a ship sinking ship. Not good floating ship. Great. This doesn't mean you should always nudge it up instead of aligning exactly in the middle. Sometimes it won't be necessary. It will depend on the typography, spacing and so on, just like all optical illusions. Either it appears, or it doesn't no need to fix an illusion if it doesn't exist. But if you see this sinking, the fact, then fix it. As a matter of fact, heavier looking objects will feel like they're sinking Mawr, and lighter objects will tend to feel like they're floating. It's crazy how accurate this is to a real world. 13. Layout: Proximity: one thing. Beginner designers tend to do a space out elements equally on the page. Mainly, they do these to fill them to space because all beginner designers have a fear of empty space. More about this in the later lesson. But what design actually likes is grouping elements closer to each other if they have something in common. This is a design concept called proximity. The basic idea of proximity is that thinks that are related should be close together, and things that are non related should be farther apart. In this example, I have moved all the navigation links closer to each other because they are related. They have a same context. Now the headline is closer to the text underneath because they are related. The buttons are a little farther from the tax, but two of them are close to each other because they're similar action batons. They both offer what to do next, and finally the little tax underneath the green button. I have moved much closer to the bottom because it's sort of a description off the buttons so it can even exist without it. Now what happens if you put unrelated elements close to each other well, this will imply of relation, which in fact doesn't exist. For example, if we put a slogan right next to the navigation links because off its proximity, users will easily confuse the slogan with a menu item and will think it's a clip clickable link, especially if those elements have a similar style. Proximity is a very useful design guideline. Not only it makes content easy to understand and digest for the user, but it also makes it pretty and design. And I guess you know things that are simple and easy to understand is quite beautiful for the users. 14. How to Use Typography Beautifully: every website out there has text on it, and a lot of design depends on how we select that taxed styles. This is called typography. Typography isn't just choosing the right phoned. It's about choosing the combination off those phones, the different styles like skinny and bold and regular and wait, choosing right typefaces and phones for the right occasions and bright contacts. Topography can make website grade and with outstanding readability. Or it can make it childish looking, or maybe out of contacts or look confusing and very hard to rid. You can easily have a website that is typography only and still make it look good and designed without any graphic elements. As a matter of fact, the world's most popular website is primarily just text. If taxes this important in design, then there must be some rules and guidelines on how to choose the and use them, right? You bet there are, and you'll learn all about them in next few less inches. Following the simple guidelines will make your designs look great. You'll hear me use the terms typeface type and fallen interchangeably type of short for typeface, and the difference between typeface and font is this in this case. Hello, Vatikai za typeface family that has many different phone styles in it, like light, bold and so on. Doesn't matter which term we use, not really, but it's still good to know the difference and not get confused. I remember I was confused in the beginning because everybody was using whatever they wanted and he had phones and types and typefaces, and I was like, Am I using the correct thing for my designs? 15. Typography: Typeface Comes With a Personality: each time. Face has a personality. Some are fun and playful, summer streaked and blonde, and some feel academic and fancy. The personality of a typeface is as important as choosing the right outfit for the right occasion. You don't want to be wearing cargo shorts on a date. In offensive restaurant, for example, a typeface called Proxima Soft would be very suitable for a winter holiday page but would be completely out of place on a page that sells luxury office space. Why is this the case? Because Proxima Soft has a casual and friendly personality, just like the name Heene's. The ladders are soft and rounded. They look sort of like they were made off snow. It would be suitable for websites that are related to holy days or Children. Casual food, maybe for websites that want to feel friendly and approachable. Why doesn't work for the luxury of real estate website? For starters, the photo tells us a lot. You see that streak rectangular architecture er, that is already dictating the mood off this composition. It's asking for some something streaked and straight, but more importantly, eats the context. Luxury is the key ward, and there's nothing luxury about Proxima Nova Soft. On the other hand, a typeface called Adoni would be an excellent fit for this page. It's a classic looking typeface. It looks serious, straight and fancy, yet modern. Exactly the words you would use to describe luxury office space. But how can we tell What's the personality of the typeface? Actually, it's not that difficult. There are certain classifications that each typeface falls under. Those already tell a lot of story about the time Let's go through them in our next lesson. And after that, let's do a small exercise to practise tiefest prototype phase personalities. 16. Typography: Typeface Categories: Standing the typeface categories will make it easier for you to choose the right typeface, right font for your project because a lot of personality is sort of dependent on the category, the overall general category that they belong to. First of all, most of the typefaces fall under these two camps, Serif or Sans Serif. The difference is super simple. Those tails on the letter are called Serifs. In French, sans means without. So Sans Serif means without Serif easy as that. Besides these two broad categories, we have two more. Display, sometimes called decorative and script. Let's go over each one. Serve typefaces have three distinctive styles within them. These are old style. The old style is the most popular style in Serafons. It's a classic, traditional typeface that goes way back. This is the most commonly used style in print, and most books will be set in this typeface. However, in web design, old style serifons are starting to appear only print material has higher definition in general than screen. Tiny Serif and letters are harder to see on the screen due to lower resolutions and screen in flickering. This was the main reason why San Serif fonts became the dominant style in digital design. Although today as screens are becoming higher and higher resolutions, Serif fonts are making a comeback, especially in blogs and Internet magazines. Old style typeface, just like the name says, has a very classic personality. They can be used for websites that want to show refined and classical look, for example, upscale restaurants, musical instruments, law firms, et cetera. But it can also be quite neutral and used for non classical websites, especially for paragraph text as it offers great readability. Modern serif typefaces can be quite similar to the old Style. The best way to tell if the font is modern is by the flat serif. As you can see, Oldstyle has a slanted serif, but modern has it flat. Another very distinctive characteristic is the dramatic contrast between thicks and thins. Notice how first leg on the A is thin as a hair. But the second is thick as a pole. Modern types are frequently used for fashion and all the things of luxury. Although they're not limited to this, it can be used for anything where you want to portray serious, modern and refined personality. In the previous example, I have used exactly the modern serif type called Bedni. However, I would reserve modern typefaces only for headlines and big tech. That's usually the main purpose they are made for, and they don't have a good readability for long texts. You wouldn't want to read an entire blog post written in Onyx. Slab type faces are boxes, serves are flat and they don't have thick and thin contrasts like the other two. Slap phones are suitable for anything that feels mechanical or strong. Just like modern style, it's not good for paragraphs, reserve it for headlines only. Sensory family is going to be the main type that you'll end up using in most projects. It's the most versatile. It can fit a design with a wide range of personality. It's the safest bat out of all the styles. It can work perfectly both for small paragraph text and big display text like headlines. There are a few different styles within Sensor family like grotesque, geometric, and humanistic, I'm not going to go over them in detail because there is not that of a significant distinction between them for me to attribute a dominant personality with each one. You already have a lot of information on your plate, so let's save your brain power for most important stuff. When it comes to San sari fonts, they have to be judged individually because they can cover a huge range of personalities from playful and soft to serious and conservative. I've broken down styles because they can be unified much more easily into a useful category, like almost every old style serif will have the same classic traditional personality. If I really had to generalize the personality of San serif fonts, then I would say they have mostly modern serious and neutral feel. Display or decorative typefaces are usually the ones that have the strongest personality to them, but this doesn't mean it's a good thing. On the contrary, they have a potential to be quite silly. Their personality can range anywhere from the type that looks like a writing on a chalkboard to something that can be quite elegant. Most of the time, you'd want to stay away from these type faces because of their unforgiving personality. But sometimes they do come in more neutral and elegant styles, and they can be quite handsome. Nevertheless, no matter how neutral it looks, you never want to use it for paragraph text, only for big headlines. Script typefaces are based on handwriting. Just like display, very rarely you're going to use script style. Although there can be times when they come in quite handy, say, if you were to design a website for a childcare, a playful handwritten typeface can give the site a nice personality, but only for headline text. Same as display, don't use scriptyle for paragraph text. Most typefaces have been designed with a specific intention. The designer had an intention and a destination for this typeface, and usually they will put it inside the description or font whatever the manual it comes depending where you get the typeface, and you will have the sort of description of where you can use it. Here is a pro tip. If the description of the typeface says that it was meant for general use, then that means it's safe to use for paragraphs and long text. But if it says it was display, right, it was meant for display, then that means even if it was not under display category, that means the designer's intention was to use it for big headlines. So never use it for something like paragraphs or big long text because they're just not going to be suitable for it. For example, this is a Google phone called Railway. It's quite popular. At section says that the typeface is intended for display text like headlines and large text, but many web designers have been using it for paragraph text, making thousands of websites and themes and templates with poor paragraph readability. This could have been avoided if they had just read the manual. So many web designers haven't had the design training at all. Learning these guidelines and following them will definitely give you an edge overdose, even if they have years of experience. 17. Assignment: Typeface Personality: Here's a fun exercise on typeface personalities. I wrote out seven different phrases in this Figma file. I want you to choose the typeface for each phrase that you think is suitable for it. You can use either fonts that are installed on your computer or Google fonts that come with Figma. Google Fonts is a great repository of a lot of free yet beautifully designed fonts. When you click the font selector in Figma, it will give you choices of both the fonts that are installed on your computer and also Google fonts. Using funds right from this drop down is very useful. What we can do instead is go on Google Fonts website and find the right typeface there. But before we do that, first, we need to understand what we're actually looking for. Imagine that we're building a website for each of these businesses, we need to choose fitting typefaces. We need to get an idea of what would work, look good, and be suitable for each of these industries. Here's a simple process on how to get about this. I'll use the fitness coach for the demonstration. I'm going to take the important keywords from here. That would be fitness or fitness coach and Google Images, so I can find examples of what sort of fonts are being used for fitness theme. But just fitness or fitness coach is not enough. That will not give us examples of design. To get examples of actual design and typography, we need to add keywords like magazine, poster, brand, logo, website, ads, and now we can build a good idea on what sort of typography is used by other designers. We can see a lot of uppercase, big and bold phones, which makes a lot of sense because fitness associates with strength, bulky muscles, and symmetrical shapes. Combine that with what you've already learned about typeface categories, and that's it. So for the fitness coach, I'm looking for a typeface that is symmetrical and bulky looking, something that looks good in uppercase. First, I'm going to type out my phrase in capital letters because that's the style I want to check. Using our actual text for the preview makes looking for the right font much easier. Now I'm going to filter my search results. We have different filters here quite similar to categories that we already discussed. We have Serif, which has classic, refined and luxurious personality, obviously not very suitable for fitness. Slab Serif potentially could work for fitness. It has a mechanical and strong personality. Sanseri modern minimal neutral will work with fitness because works with anything. Out of these categories for the fitness theme, Sans Serif best place to choose from. Sadly, I'm not able to see the bold versions of these fonts directly from here. That would have been idea. Instead, I'm going to have to check the bold version individually on the front page. Montserrat is an excellent option. It's heavy, strong and bulky, just like muscles. I like how balanced and symmetrical each letter is. But before we choose this, remember what we need to do first. We need to read the manual. Let's make sure that the designer didn't intend this typeface for something that is not suitable for fitness. It says it was inspired by urban typography, that's suitable for us. It even mentions the keywords like work and dedication. Well, isn't that just great? Work and dedication is directly related to fitness, done. That's our font. Next, go to the assignment file and apply the font to the text. Thing to note, the assignment files that I shared with you should automatically duplicate when you click on them. That way you get the copy of the file into your Figma account. But if you notice that the file is not editable, in this case, then probably it failed to duplicate. One reason would be because you're not logged in into Figma on your browser. You'll have to login and then try clicking the link one more time. If it fails still to create a copy, then go to myfile and duplicate it from this little drop down. Now that's your own Figma file and you can edit as you wish. All those duplicates are automatically saved inside your Figma account under drafts. So from the font selector, I'm going to select Montserrat. As a default, it will be in regular style, but I want it thick and bold. I'm going to select its boldest style, which is called black in this case. Also, I want it to be uppercase. Of course, I can type it out one more time with my caps lock on, but there is an easier way to do this. This link here opens up extra settings, and there we can select uppercase. This way, no matter how I type my text caps or not, it will display in uppercase and you can remove the uppercase by clicking this option. This is also where you have underline option if you need it. In this box, I want you to explain your thought process on why you chose the font. So in my case, I would write what I already described. Don't skip this last step. To become a designer, you have to start thinking like a designer to actually have a deeper understanding of every step and decision that you make. And actually clients, your clients will definitely appreciate this. I remember they always did. I would send this email with, you know, step by step of major design decisions that I would make about typefaces or fonts and things like that. And in the beginning, I like doing it, but then I kind of got lazy. And when I didn't write these descriptions of my thought process behind it, revisions increased because now they didn't trust what I had made a choice. And they wanted to review and, you know, change fonts or change colors or things like that because they thought I just picked them out of nowhere. So definitely practice this. And then when you work with your clients, show them how much thought process has been put behind the scenes. 18. Typography: Setting type: This is the opening title off the movie Gravity. Pay attention to how the type is set. Here's another one from the Dark Knight rises or this one from interstellar. Do you notice the similarity? All three have a very wide letter spacing. Other spacing is one off the attributes that can change about the phone and customize it to your needs. You can make it very tight and snug, or you can make it nice and airy. These sort of extra white spacing is called Panorama. It's a really cool design trick, and it kind of creates is nice, finished and refined. Look and adds an extra importance to the tax and makes it feel like it's saying something very important. If you're ever stuck with a very boring and bland design, you can set your type in Panorama and will instantly going Teoh. Give it a nice and refined look. For instance, if I need to add an extra title to a block off tax that already has a title, I can take that secondary title and set it in Panorama. Their secondary title now is very interesting compared to what we had before. This feels more deliberate it's secondary hands not competing with the original headline. It has its own specific style, so I'll be able to repeat these on other similar blocks of tax and be very identifiable. One big benefit off the Panorama typesetting is that it lets you shrink your phone to very small sizes without losing readability. I've removed the panoramic effect here, and the tax has become much less readable. This means I would have to increase the size of the front, but this now competes too much with the main headline. I wanted to be the secondary information, but it has almost become the primary title. One thing to note. When setting type in this way most of time, you should use upper case. This effect doesn't really work while in lower case letters. Okay, so that's about white space. But how about tighter spacing? When would we want to use that? One? Such cases, when dealing with large, heavy text on large text spaces between letters, are proportionately large. For instance, I was working on a website for a scooter sharing company, As you can see, amusing an enormous fun size that is quite bold and happy. The default letter spacing for these felt a little too spaced out for me, so I added a negative letters basic. If I'm using a very bold and large headline, I want to create a tax that looks bold, heavy and concentrating in one tight space. A refree letter Spacing is the opposite of what I want to achieve, so I tightened things up. In this case. Most of the time, you want to keep the default ladder spacing for your taxed. But in specific cases, you haven't ability to customize the phone to your needs to the rule of thumb. If you're ever adjusting the letter, spacing that increased spacing as phoned gets smaller or lighter and decrease basing, winning gets bigger and bolder. Let's compare these two identical tax blocks. It's same phone size, and the text is exactly the same. Their difference is in their line spacing or line height. The type is sat in aerial 25 pixel size. The left paragraph has a default line high, but on the right, one have increased it. The default line high value off area is very tight. This makes the tax harder to read and follow the increased line spacing on the second blocks. Mixed text mawr Airy. It feels less heavy, easier to read. And even though it's longer in size, it still feels less intimidating than the original. Intimidating taxes something to actually Wolcott for. People don't usually read text on websites. They scan. They're frantically scanning for keywords and phrases to find what they're looking for or to decide if the website it's relevant for them altogether. The text on the ride will help them scan tax easier and find what they are looking for. You can try it yourself positivity and try to read each tax as fast as you can't. You'll notice that you will have much is your and faster speed on the text on the right, The original line spacing will feel like running on a sandy bitch, a little draggy and slow. This issue gets extremely evident when we deal with wide text blocks. When you finish reading one line of tax in this block, jumping on the left to the find following line is a challenge. It's very easy to get lost, and you have to rely on connecting links with context or ah, finger or ruler. Old phones come with their own default lines facing and it changes based on the phone size . Some phones that are very well made and well balance will have better line spacing than others. This, for example, is one of my favorite typefaces, called Avenir. The default line Heidi's 34 pixels on the specific phone size. As you can see, it's not very different from the adjustment that I made for aerial. So in this case, I might even leave the line spacing as its default value. Now there are times when you need to shrink the lines facing instead of increasing it. And that's usually when dealing with large and very bold tax, especially in upper case the default line. Hide on these taxes a little area for me. I chose all capitals and heavy phone to make the headlines purples heavy and strong, concentrated in one place. So in this case, I am going to decrease the line high just a little bit. Now. This version is exactly what I was looking for. We can think of this as a gravity have your objects have stronger gravity, so they push bother closer and lighter objects? Not as much, so they're floating in space and Fillmore Airy, speaking of phone points, lie regular, semi bold, bold extra bolt having black skinny hairline and so on. This that was called phone weights or styles or thickness. Every typeface will have their own set of weights, some more than others. Things, for example, are phone weights off. A very popular Google phone called Open Sense has five different weights. Area, on the other hand, has only two regular and bold. The typeface that has this little weights is very difficult to work with. On a modern website, you have so many different places that you need to protect on paragraphs on buttons, navigation bar, drop down menus, headlines, secondary headlines, footer links and more. If you pick one high face that has only two weights regular and pull, you will struggle a lot when you need to create a hierarchy and contrast between a headline , an ESOP had you're basically left with the tax size to duel the heavy lifting regular white tax on dark background sometimes looks boulder To compensate for this optical illusion, you may want to use the lighter weight. The tax on these two cars now looks like their same weight But on the previous example, the right taxed looked heavier. Let me show you that one more time, light and regular, another situation where we might need to adjust the weight off the phone is on large text has increased the size off the phone. It becomes heavier both of this irregular weight in this case. But because the first is much larger, it's bodies thicker and heavier. Sometimes we wanted to look similar weight, just different sizes. In such scenario, we will have to pair the light and regular styles. Now the large tax and smaller text feel more like they are off same weight. You can do this in the other direction to by making the smaller attacks a little bolder, you'll need something like semi bald. In this case, if you're typeface doesn't have enough weights, then your hands are tight and you won't be able to achieve optimal results. Pick typefaces that are versatile and have sufficient number of weights. Most motor and general used tie faces today will have at least four ways, which is decent enough. Some complete tie faces will have nine different weights, like this typeface called Montserrat. You're not going to run out off waits here are you So we have letter spacing, line hide and phone waits. These attributes help us with two things mainly want is to make tax easy to read, especially on the body and big tax. And second, to achieve a really good visual hierarchy between different elements, text elements, obviously on the page and in the upcoming lesson, we're going to practice this exact type setting between line heights where you send all that stuff, stick around. 19. Assignment: Setting type: Topography is huge for web design, and learning how to set type properly is going to make you a superior web designer. In this video, we're going to do a little fun exercise on setting type, which basically means simply said it's choosing the right font size, right line heights, weights for the font, and letter spacing. That's all. It just combining all these four different elements to make something look deliberate. As usual, you'll find this figma file under the resources, either on the page that I have linked or under the resources of this video. And in this Figma file, I have arranged five blocks of text. Each one has a headline and a paragraph. Each of these blocks are set up in a different type faces, the same type face for the headline and the paragraph pair. The name of the type faces right here on the corner. Don't worry about the content. It's a dummy text that I've generated randomly. I want you to go through each of these blocks and improve the type setting for each pair. Your goal is to achieve two things. First, good text readability. This can be achieved by mainly adjusting phone sizes and line heights. All the text blocks are set in their default line heights for some of these phones, Their default line height might have pretty good readability like crimson tax here, but for others, it might be a little too tight. There are no specific rules for line heights. Just measure it based on your eye and increase it up and down and see what feels the most pleasant to you when you read it. The same goes for the font size. They are all set in 16 pixels, but as you can see, 16 pixel is quite different from one to another. For example, 16 on crimson tax is way too small. Second, your goal is to achieve good hierarchy between headline and the paragraph. Remember our lesson about hierarchy right, the visual hierarchy makes design easier to follow and more pleasing to an eye. You can achieve this hierarchy between the headline and texts by making the headline very large or very heavy or both. To achieve both of these goals, you are allowed to adjust one the font size. Second, the font weight. And the line heights. No need to worry about the letter spacing. Just keep them as they are. Also, don't change the type face or the color, keep it as they are. You're free to adjust the position of each textbox. In fact, you will most likely need to adjust it because as you start setting your type, things will have to be moved around accordingly. But I want you to keep the width of each textbox as it is. They're all 500 pixels wide right now. I want you to work within those constraints and set your type in a best way within those dimensions. The height of the box will adjust automatically. L et me demonstrate the first one. First, make sure that you have zoomed your Canvas to 100%. Otherwise, you won't see the realistic size. There are many different ways to zoom in and out in Figma. Two most common ways is either pinching your mousepd on laptop. This will probably work on on newer laptops that has the support of multitouch pinching action or another way which is with your mouse wheel, and while holding control or command on Mac. And with your mouse well, just go scroll up and down, and while you hold on control or command, then it's going to zoom in or out. Or my favorite way, which is just to heat the shortcut shift zero, and that's going to instantly zoom into 100%. You can see the shortcut if you go to the few options and then under the dropdown, you can see that Zoom to 100% has this shortcut. Most of your design work should be done in this normal state. Otherwise, you won't be seeing the realistic picture of sizes and proportion. However, it is okay to zoom in and out when you need for some reason. Once we've made sure we're working in a normal Zoom state, first, I will adjust the headline. I want it to be thin. Underneath the font name, you can select the font weight. As I previously mentioned, available options here depend on the font family itself, and if you have installed all the available styles on your computer or if it came with Figma. I select thin. Now to achieve a good visual hierarchy between the headline and the pyro graph, I should increase the headline size. Since I went with a thin headline, I should make it even bigger than what I would do for a heavier textile. I'm pressing an up arrow here, which increases the phone size by one pixel. As I'm enlarging my text, I'm also paying attention to where my tax breaks. Since the width of my text box is fixed, I can break the tax only based on its size or weight. The breaking of the tax is important because you don't want the tax to break on an odd place, like for example, at an article A and the word jumping on the second line. That doesn't make a good readability. In this sentence, that the best line break is when a telescope is on the second line or when buying a telescope is on the second line. I even prefer the second version because there is a logic break in the sentence, the basics of what? Buying a telescope. I quite like how the headline looks. Now I'm going to adjust the paragraph text. In most cases, I wouldn't touch the paragraph weight and keep it regular. Regular is usually the best option for paragraph text, but because I have made the headline quite skinny, the paragraph feels heavy in comparison and is stealing a lot of attention from the headline. Remember, in visual hierarchy, we clearly define what should be the most noticeable element, then second most noticeable, and so on. Now I'm going to increase the line height of this paragraph. The default line height of this font, which is Roboto Roboto. I'm not sure how you pronounce that. It's very tight. Doesn't make a good readability experience. I'm going to increase it from this line height field. All right. This looks great. The headline is thin and slick, but still grabs the main attention, and paragraph t is a and easy to read what an improvement to what it was before. Let me show you what would I change if I went with a heavy headline instead. In this case, I would actually decrease the line height of the headline text. Remember, as I explained in the lesson, when dealing with large and very bold text, we might need to shrink the line height. That's because the letters have gravitational pull and heavier objects pull each other together. In this case, I'm going to return the paragraph text back to regular weight. I generally avoid using thin weights for a paragraph text. On desktop screens that don't have very high pixel density, they can be hard to read. All right, that's it. Very simple and fun exercise to practice setting type and messing around with different values of heights and phone sizes and whatnot. And in the upcoming assignment, I'm going to check out your submission. 20. Typography: Two fonts only: Here's one important rule to follow when choosing typefaces for your projects. Use maximum two fonts for each project and make sure they look different. Let's discuss first half of this role lie only two, because deciphering too many font styles is overwhelming. And two will give you enough room for any specific personality that you want to portray. Say through some display typeface and have something more neutral for the paragraph and other texts. As for the second half of this rule, if used two typefaces that are too similar, you feel like you miss clicked and accidentally picked the wrong phone for one of them. The headline is an Open Sans in their paragraph is set in Roboto. The only contrast that is created is through their size and the weight of the headline. If we put them in same weights and sizes, you'll see they're way too similar, but not the same. If you're going with two very similar types than one, I just go with one of them. That's a perfectly reasonable thing to do. In this example, I replace Open Sans with Playfair display. This looks significantly better. So contrasts between these two typefaces is very high. First one is a modern serif, and the second one is a neutral sans serifs that has high readability for smaller text. Now this looks deliberate and intentional. You don't want the best ways to make these and look good. Make it feel intentional. Sometimes you can break the rules and ignore the guidelines and do something that is completely out of line. But if you, if it feels intentional, it will probably look at this why learning and practicing this design rules and guidelines that's going to make you a very good web designer because your ward will feel and look intentional. It's going to feel like you have put some work and start process behind it. And you weren't just throwing things around finding enough Open Sans and Roboto is very commonly used pairing. This just points to the fact that there are a ton of web designers out there who have no understanding of good design principles. And if you follow this simple typographic guidelines view will make your designs much more superior. This doesn't mean you can pair two sans serif typefaces together. When you do, it just has to make sense. For instance, when a pair to sensory types, it's usually because I want something with a personality for the headline texts and then something neutral with excellent readability for the body text, for the main body takes, I often use the same typefaces across all projects. Depending on what's my obsession for a certain period of time, I choose something that is neutral and has a lot of font weights like Open Sans Roboto or newly this way then I have a lot of freedom with airlines. I can use fonts with limited weights, but a bit more personality. And I will choose something that's most fitting with the personality of that particular project and the brand. 21. Typography: Where to find fonts: Ing phones online is quite simple, and you probably might have some experience already with downloading and looking for some phones online. There are many different paid and free options, so let's go over some of these options. Sites like defont.com have a big selection of free funds. The problem with free fonts is that they can be designed by amateur designers who created them for fun or to gain some font design experience. You could end up with anything from badly spaced font to something like a kitty font. Avoid these sort of refunds until you gain good experience in typography. And even then, it's just best to keep away and stay away from the sort of free funds. Often they are overused, which means there is a lot of different designs or websites that they have been using them, and they have been using them wrongly, and it just has a really bad reputation. Paid phones obviously are more superior option. One benefit of a premium fund is that it can give you your project more unique feel because they are not as popular and they're not as overused. With individual paid phones, you pay for each style, usually around 20 to 50 bucks. So if you want an entire family with all the weights, then it can get costly. Also, you have to buy a license for each project separately. So best approach with individual paid phones would be to buy one or two styles for a headline text. And as the main body text where you need a lot of different weights like boats and extra boats and all that stuff, then you can use things places like Google Phones and some other options that I mentioned. There's a cheaper way to get hands on a lot of premium phones, and that's by using subscription based sites. The most popular being Adobe phones. The old name is Type kit. Adobe phones is included in their creative cloud subscription. These are subscriptions to Photoshop, Illustrator, and other Adobe software. So if you subscribe to that, you get more than 7,000 Adobe phones with it. The cheapest plan is about $10 a month, I think, so it's a pretty good deal. Personally, my favorite place is Google Phones. It's free. No licensing worries. They are well designed. It's curated by Google, and both Figma and Webflow already come with it. So that just saves me from so much installation and all that headache. My advice for you in the beginning is to stick with Google Phones or Adobe phones. Two together provide more than enough phones that you will need for any project. One important note about fonts generally is that fonts are actually regular computer files. So that means they can be copied and redistributed countless times. So if you have a file for this particular phone, that doesn't mean you can actually use it. To use a font for a website on your project, either you need to have a license that you paid for, or the font itself has to come with a commercial free for commercial use license. Here's a cool browser extension that I frequently use. It's called Font Phase Ninja, and it lets you see the font that any website is using. I'm a type geek. I love the look of an attractive typeface. So when I see a website that uses a beautiful font and typography, I want to know what it is and save it as an inspiration for my future projects, which basically means so I can steal it and then use it on my projects later. Link in the resources. Install this extension and start noticing different fonts on websites that you visit. Getting curious is a designer's best teacher. Noticing designs around you and examining them closely will teach you a lot and will actually improve your design skills. 22. Assignment: Typeface Pairing: Alright, fire off your Figma, time for another typography assignment. We're going to put everything you have learned so far about typefaces into practice. Just like in the previous assignment, I have arranged three text blocks. This time, they are all in single typeface. Your task is to pick two font pairings for each text block. Plus, just like you did in the previous exercise, set the type for each text to achieve one good hierarchy and second, good readability, just like you've done the last time. You will pick a total of six different fonts, three, four headlines, and 34 paragraph text. When you choose your type faces, I want you to use what you have learned about type personality. We watch the video about personalities if you need to. I want you to think about the context that you are choosing for and pick one of the typefaces that shows the personality that is good for that context. As you read the headlines, you will notice the first text is about travel and Hawaii. Second one is about cooking and barbecue, and the third one is about technology. Now, here's a hint. The type with the personality should be for the headline. For the paragraph, you should choose something a bit more neutral with high readability. By the way, if you're wondering why the text doesn't end properly, I just didn't put the entire article in there. It just been excerpt from some random blog articles that I picked. Let me do a demo for the first one. So the text is about travel to the islands of Hawaii. Now, I'm going to think about what sort of typeface can display that feeling of travel to beautiful sandy beaches. To get a better feel of style of such them, I'm going to Google some images of Hawaii and see if there is some sort of style of a typography that is used locally in Hawaii. I with a quick search, I can see that there are actually certain typefaces that are used in Hawaiian theme. I also search for things like postcards and signs in Hawaii. Look at that. Now I have authentic examples of topography that is actually in use on the islands, and that will remind people of Hawaii. It seems like the script handwritten typeface is the way to go. Let's see what I can find on Google fonts that matches this theme. I'm going to filter only handwriting fonts and will paste in our text to give me the exact demonstration. I You can see that there are several fonts that can be quite suitable. Pay attention to the font name. A lot of times they will give you the hint on what's the theme of the font. Because I Googled some images and real examples. Beforehand, I was able to get the right feel for Hawaii. Now picking the font is much easier because I can recognize similarities in the postcards and signs. As I browse fonts, I am also looking for those that have high readability. It doesn't matter that it's a headline. I still want it to be readable. Difficult to read fonts like these are going to be a bad choice no matter how good they look. Okay, I think I have enough to choose from. Now I'm going to read the manual of these phones that I've selected to see what were they intended for. I already see a problem with this one. On capitalized sentence, like in my headline, the readability was better, but on lowercase words, the readability significantly decreased. Yes, I'm going to use uppercase for my headline, but what if I change my mind? It very much limits my options. The second is Kashan script, Cashan Noure. The description of the phone is quite neutral. It doesn't look like it was intended for a very limited theme. It looks quite fun and laid back, just the way I would imagine being in Hawaii, so I'm going to go with it. One thing you'll notice here is that headline isn't really aligned with the paragraph. This happens a lot with large display text. They have extra space and you will need to fix this manually. Otherwise, the design will look unaligned. Remember our lesson about optical illusions, Ruler isn't what matters in design, it's the eye. If something looks not aligned, then it's not aligned done. Now, it looks on the dot. For the paragraph, I'm going to go with something neutral. The obvious choice would be a sans sera font. A Open sas is an obvious choice. It's a very popular and an excellent font. Roboto is another very popular font. I quite like Lato. It's a very good font that I use frequently. It has a very nice style event on headlines. And look at this. Lato means summer in polish. That's certainly a perfect font for our Hawaii theme. This was a lucky shot. W neutral paragraph text, you don't have to go on a crazy search for the right font that was designed with exactly the same feeling. I'm going to make the paragraph more like a dark gray rather than a full contrast black. This is a great way to add airiness to paragraph text without using a thinner font weight. Avoid thin weights for paragraph text because they have bad readability on lower resolution screens. There we have it two phone pairs for a Hawaii them text block. It looks exciting, yet it's stylish and it's easy to read. Now it's your turn. One more thing. On top of each text block, I want you to write down your reasoning behind your phone choices, as you've already done in the type personality assignment. Remember, writing down your thought process is going to get you used to thinking like a designer. You will start seeing things on deeper and more detailed dialogue. And also, you'll realize often that you made a choice for a phone without thinking about it because maybe it just looked pretty. 23. The Art of Color: Is one of my website project. It's a website for a scooter sharing app. When I was designing this website, I've picked a very vibrant green color. The name of the app is go green. The scooters are electric and eco friendly. So this particular green fits the concept really well. It's the right shade of green. But my clients had a different plan, and they had me change it to this green. This is forest green, not a good match for this product. Forest green will work well with outdoor related businesses, camping, hiking, outdoor clothing, fishing, and so on. But not something that is electric and modern green technology. But sometimes you got to do what your client says. Colors can make or break any design. We are attracted to the colors that we like and quite repelled by those that we don't be it web design or other products like cars, clothing, ketchup bottles, whatever. We might see the best design product, but if we don't like the color, we're not buying it. In the upcoming lessons, I'm going to teach you how to pick and work with colors like a pro to make your designs look great. Stick. 24. Colors: Sampling Colors: well, we know that picking good colors is a very important thing to do in designs. But how do we know what's a good color? And what's a bad collar? You might be thinking? Oh no, I have terrible taste in colors. Don't worry, and I have a good taste either. But there is a trick to picking collars, and the trick is to not to pick the colors from your hat or directly inside sigma, but to still colors from some sort of inspiration. This can be other design work, like websites or illustrations or posters, whatever, or even from re award like photos. In this lesson, I'm going to teach you how to use the world around us as our inspiration for our colors simply colors from the real world. Like people, nature, animals well, almost always give you create results. Why? Because most of us already agree that an orchid looks beautiful, but a cockroach, not as much. Picking good colorist is only half off the job. The second half is actually matching the right colors together. Using real world is our inspiration solves this problem, too, of because most of the time natural world provides great color combinations. These photo of the line looks beautiful. If we find a color palette that is already on this image, we can be sure that most of the time these colors will really go together. Otherwise, we wouldn't find a photo of this line as appealing. Weaken simple. A few dominant colors from the image. And now we have a color palette that is natural and harmonious. Here's where it gets interesting. Let's say we are designing a section that looks something like this. If we get this photo and use it in our design together with our new color palette, we're going to get some really good looking results because we're not just matching cars together, but we are actually matching colors with our image. We can then play around and use these colors for text or backgrounds, or create very interesting color combinations. Look at that. It's like a magic. And I was in the one who came up with this colors. Mother Nature did 25. Assignment: Sampling Colors: Let's do a fun exercise on sampling colors from images. I've prepared a Figma file for this assignment. It has three frames with the same layout. This is a very common web layout, having a sort of split screen. 50% of the screen is the image, and then 50 is for the content. It's a very simple layout to make and can be quite effective and beautiful. It will be good for you to practice this layout as we practice our color sampling. Are three frames in this file. On two of them, I have prepared images for you and one is empty. I want you to sample colors from these images for each frame and paint the left side of the frame with a color palette. On the empty one, I want you to pick your own photo. You might discover that not all photos are good pick for the color palette. Also, I want you to use what you have learned so far and apply that to the left side of the frame, the hierarchy, and everything about the typography. Let me do one as a demonstration. I'm going to use an empty frame. First, let's go to unsplash.com and find a good photo. Unsplash is a great source for free photos. They are free for commercial use, not just personal, and they have, you know, wide variety of different photos. They're not very they don't look like stock, so they're quite natural and nice looking, although because they are free in designs, they are used a lot, but more about the photography later. Okay, so I love mountains, so I'm going to pick a nice photo with a mountain view. This one is a good choice. It has a lot of colors in it, so it will be fun to work with. First, I'm going to create a placeholder for the image. I'm going to draw a rectangle to make this exactly half of the frame. Let's check the size of our frame. It's 1,152 pixels. And now I'll make the rectangle the half of that size. Here's a cool Figma trick. I'm going to type in 1152/2, and then hit Enter, and Figma will do the math for me. It's exactly the half of the frame. Now I'm going to place my image. You can directly drag your image in Figma or you can choose Place Image option from the shape tool. Here are a few things to look out for when working with images and Figma. The photos that you get from Osplash or other stock signs will be quite large in size. So give it a little time for Figma to think because it's uploading the image to its servers before you can place it. The image will be placed in its original dimensions. Since this image is very large, it looks super zoomed in like this. But because it's part of the frame only this is visible. As it's huge, we need to resize it. When you select an image that is filling the entire space of the frame, instead of selecting the image layer, it selects the entire frame. I find this a little annoying, but it's not a big deal. To select a photolayer, the obvious option is to select it in the Layers panel, but the better way is to click on the image while holding a Control or command key. This is a very handy trick. Keep it in mind. To resize the photo to some useful dimensions, let's zoom out so we can see the borders of the image. You see those blue lines, those are the borders of the image. The image is really big in comparison to the frame. That's why the borders are so far from the frame. We can grab the handles and resize our image. Hold shift while you do this to keep the proportions of the image. An image element in Figma is basically a rectangle with image as a background fill. You don't have to hold the shift. It's not going to distort the image, but in this case, I want to see the original image, so I can choose exactly what part of the image to display. If you place an image on a rectangle, it's going to become a fill of that rectangle instead of being an independent image. One last thing to look out for. When you place an image or anything for that matter, make sure that the layer lives on that frame you are working on because besides that frame, it may be accidentally placed on other frames that are close by. Or it can be placed on the canvas independent of all the frames. If it's not on your frame, it will not behave the way you expect it to. It might drive you crazy until you figure this out. This is why I want to cover all the possible ways that something might go wrong and not behave the way you expect it. This is usually what causes the brickest frustration in learning anything new, not understanding why something isn't behaving the way it's supposed to. So if it's acting weird, have a look at the flares panel and make sure it's on your frame. To drag it on the frame, your cursor, the mouse has to be on the frame, overlapping the frame. Then it's going to drag it inside, and if it kind of goes outside of the frame, then it's going to drag it outside of the frame and put it on the canvas or somewhere else. One last option we have to import an image into Figma is to import it as an image fill. Select the rectangle, click the color fill settings, and from this option, select image. You'll get this checkered placeholder image. Then click Choose Image and just select your image file. It will fill your layer with that image. The fun part about this option is that you can do this with almost any layer, even with text layer. This opens up a lot of creative possibilities to use in your designs. Now, which one of these options you use to import your image doesn't actually matter. The result is always an image fill. That is what always happens. Even if you just place the image on the canvas, Figma just creates a rectangle and puts the image as a fill. In this particular case, my preferred method is to upload the image right into our rectangles fill because it's the most control way in this specific case, we know that we want this image to be half of this frame and we already created a placeholder rectangle for it. Might as well just drop the image inside it. Now, chances are that your image and the placeholder shape you created for it aren't exactly the same proportions. When you fill your shape with the image, you will get image cropped at certain places. You might not like this cropping, so you'll need to adjust it to get the ideal position. Luckily, we can do this by selecting a cropping option from here and then just moving our image around to position it exactly the way we want it. This cropping tool works pretty much the same way you would crop an image on your phone. You can move the image around, position where you want, and if you need to enlarge it or shrink it, you can do that too. Just one important note, when changing the image size inside the crop tool, the resizing doesn't lock the aspect ratio right off the bat, you may get a distorted image if you're not careful. An easy solution to this is to hold shift while you resize. This will lock the aspec ratio while you resize, you end up with original proportions and not some pancake version of it. Excellent. Our image is ready. Now I'm going to style my text a little. You can place your own text in the headline when you pick your image. You don't have to worry about the paragraph. I've used the dummy text, the infamous Loren Ipsum. I already have the fonts in mind. I'm not choosing them based on images, but you can if you'd like to. The Playfair Display is a beautiful typeface in modern service style, gives a lot of class to the page. And Lato is an excellent sensory tie for any general kind of use. Now, let's align our elements to the grid. Do you remember how to apply the grid to the frame? First, select the frame in the properties panel under layout grid, click plus icon. By default, it's a two dimensional grid. We want columns. Enter 12 columns. The gutter space is flexible. You can usually put anything 20-40. I prefer 30 pixels. Let's also apply the margins. Margins are necessary because the content on the website doesn't start from the edges. Every website has some content margin on the sides. What are the best margins depends on the width of the frame. If we are designing on the large desktop screen, then our margins will be much larger compared if we were designing for the phone. For this frame size, 60 pixels is pretty good. Y One thing you might notice is that my image place holder doesn't align with the grid, that one might think, wait a second, isn't that grid important and don't we align our elements based on our grid? Yes, that's true, but in this case, our image is part of the canvas. Our canvas is the background color and background images of the page. They have their own fabric of space and don't obey to the rules of our grid. The grid is usually for the content and for things that lay on top of your background page background canvas. I one thing that I don't like on text is what's called orphan words. You see that single word on the last line, that's called an orphan word. I design, we try to avoid such orphans. They make the paragraph look a little clumsy. It's not a big crime to leave them in, but it's a nice extra detail to polish up your work. In such a case, I will break the alignment with the grid. It's not as strong anyways on the right side of text because text is already jagged, it's okay to break the grid a bit in favor of fixing an orphan word. Just need to shrink the text box until at least one or more word jumps on the last line to give that word a friend. This paragraph now looks more balanced. That's what you want to go for as a rule, a more bunched up and rectangular text block with the lines of text being more uniform as much as it allows it. Now that we have prepared our frame, we can start sampling our color palette. To sample a color from our image, first, we need to blur our image. What this does is that it averages out the adjacent pixels and gives you a more accurate color palette, close to what our eyes are perceiving because we don't actually see those independent pixels. In real life, we see an average with its shadows and gradients and all that. The color picker tool on a computer is super precise, so it grabs the color of individual pixels. And individual pixel is not the most accurate representation of the overall picture. Select the image in the properties panel, you'll see effects option. Add a new effect by clicking the plus icon. By default, this will add a drop shadow. Click on the dropdown to see other effect types and select layer blur. By default, this is not usually enough blur. We need a bit heavier. To increase the blur, click on the icon and then start increasing and stop before colors start to mix too much. 24 is pretty good in this case. Although this isn't an exact sign, sometimes you will need much less blur, sometimes more, especially if you want to sample a color from something small like a blue eyes, red lipstick, then you will need smaller blurry value, otherwise, the color will mix too much. Notice how the color palette is very noticeable. We have the blue, these light brown colors, and the dark brown. Figma can pick out these colors for us with an eyedropper tool. Draw rectangle. And then click on this field to change the color of the rectangle, then select the eyedropper to. As you hover over the image, we will pick the color from that exact pixel and paint the rectangle in that color. Repeat the process for all the other colors. How many colors you will pick will depend on the image and on you. You want to pick the dominant colors, those that are undeniably visible and make up the most of the image, and any smaller colors that are quite prominent include some neutral tones as well like gray. Now that we have our color palette, disable the blur effect on the image and start painting the left side content in these colors and see what works and what doesn't. Let's add another rectangle on the left side as our background fill. Remember why is this covering our elements because the layer is higher in the list. Just move it down below, so it's arranged as a background. You can also right click and select Send to Back. That will send all the way to the back. Now let's try some background colors. Let's wry these neutral colors. Let's see the color that goes the best with this dark brown. Oops, I forgot to remove the image l from the text when I was playing around with. The blue does contrast very well, and it can be useful for some exciting design. This bright sended color is not bad either. There, I think this one is the best. Really bad at color names, so I usually look it up on color sites. This one is called Tumbleweed. As for a paragraph, I can pick white color. Although it's popping too much and competing for the attention with the headline, in such cases, what I do is that I decrease the opacity of the white text to around 80%. This will decrease the intensity of that white color, and also the background color will permeate a little since it has some transparency, and that will suit the background quite handsomely. We can also try that same tumble weet on the tax, which is not a bad result at all. Although I would never do something like this, that just creates a mass out of colours instead of intentional and natural looking color combinations. When it comes to paragraph, never go with a vibrant color option. That just looks super amateurish. Color for paragraph text is very hard to pull off correctly. With headlines, colors work great because they are big and color pops properly. But with small paragraph text, intense colors just look weird. Often they are hard to read and look like a sales manager making a PowerPoint presentation. To be on the safe side, just use white or black and play with the opacity. Don't even have to dry any of these options from the colors you sampled. It is a bit risky for a beginner. It's easy to go wrong. This tumbleweod option does work but it's a bit of a lucky shot because it is a muted color and it's exactly in the same palette as the background. It's also the headline color. Given all these conditions, it works. Remove one of these conditions and it might not work. This opacity track is a perfect and safe option. Designers across all levels of skill just love using this a lot. Stick to it for now and once you gain a little more experience, you may start experimenting more. In this case, I did white, but on a very light background, you start with a black paragraph and decrease the opacity from there. Let's check other color backgrounds. Oh, yeah, this looks gorgeous as well. Okay, so this one feels the most organic to me and lets the beauty of the landscape really stand out. Plus, the color is quite suitable for outdoorsy theme. Alright, very fun exercise to get you started with colors and play around with them. After you submit your work in the assignments after this, you'll find the link to a file that has a solution to it. Don't worry if the solution isn't exactly same as yours. There isn't just one solution to this exercise. 26. Colors: Fine-tuning Colors: Let's take it up a notch and make a color proud of you. You have already learned how to simple colors from the world around you. Now let's learn how to fine tune those collar samples. Ability to find tomb colors is a very handy skill, and we'll let you nail those designs. A good chunk of design magic is in color, so we want to make sure that you learn all the secrets and become very confident when working with collars. Let me show you how and why we find tomb collars. This is a gorgeous photo. I like the color contrast between the bird and the background. I say bird because I have no idea which birth this is. Is it a hawk and eagle? A falcon? No idea. Let's simple these two collars. But do you notice how the collars, especially the brown, don't really hit the mark? These colors look dull compared to the image. The thing is, feathers don't have a uniform color. Some parts are lied. Some parts star. The light reflects also differently on different parts. So all these gives a different perception than sampling a color from a single spot. But the colors on the bird are lighter, more vibrant and overall look more exciting. This is what we can do to make the best out of our color in vig Ma or any other designed self fair. For that matter, we have this color picker tool alerts learn how to work this thing real quick. This year is a color spectrum on this packed room, we peak asks you. A hue is the main ingredient that makes the collar. As you can see, the hue for this collar is right here, where the slider handle is on the spectrum. Two other ingredients that make up our color are the brightness in saturation. Brightness is the vertical axis. On this map. It is exactly what it says. How bright the cholera is is remove off vertically on the map. Brighter, the color gets. And as we move down, the darker the color gets. You can think of this like the way how much light falls on the color. During a sunny summer day, you can see a collar a specific you fully as there is a lot of light falling on it. But at night, in your room with the lights, all when it's pitch black and you don't see anything than everything is black, even the brightest red color. That's why the bottom circle is completely black. On this scale, 0% light means we don't see. Not the saturation is the horizontal axis on this map. It's that intensity off this particular Hugh in the color. As you move to the right, the saturation increases and the collar becomes more intense. And as you move towards the left, we call this de saturation than the hue starts to fade away until it's completely removed from our collar. Then we got a grayscale at black and white. Photo is a fully saturated photo on this color picker. There's drop down that lets you switch between different color management systems by default. It's hacks, meaning hexi decimal code. Change this to HSB. HSB means exactly what I just talked about hue, saturation and brightness. All three values can be seen right here. 1st 1 issue second saturation in the thirties. Brightness. The last percentage values the opacity. Let's go back door Burt to fine tune the color. We keep the qs today's and play with saturation and brightness. It's important to keep the same hue value otherwise, to get completely different color that won't match the original image anymore. First, I'm going to increase the brightness because it's too dark. The brightness value before was 78. End up increased it. It's 95 the scale both on brightness and saturation and goes from zero to home, 100 like percentage. And now decrease the saturation just a little bit. And we'll get a result like this. This is more like it. It feels closer to the collar off the bird than the original. The same thing we can do with the blue. It's a bit dark. I'm just going to increase the brightness a little bit, and that's it. This way. Both colors are vibrant and bright. Such an improvement of what we had before This is more suitable for today's Web design. Look, these are exciting colors that contras with each other very well and overall looks fresh and modern 27. Assignment: Fine-tuning Colors: In this assignment, I want you to go back to the Figma file from the previous assignment. Go over each frame you have designed and fine tune the final color combinations that you have used in your design. Let me show you this on the same example that I've done myself. This was the final result that I have settled with. I think it can use some fine tuning, especially with a dark brown background. It's a little too dark and the transition between the image and the background fill isn't as evident. It can certainly use some brightening up. Here's a prote. Duplicate your frames when working on a new variation. Design involves a lot of exploration and revisions, get in the habit of having a lot of versions of the same screen. I didn't do this in the beginning for any new variation, I'll just keep on editing the original frame. Sometimes after 20 minutes of tweaking and changing things, I end up with an option, that wasn't better than the original version, but I had no way to compare. And going all the way back was too much trouble. If you don't keep your variations, changing your mind becomes difficult, and you will often settle for a lesser option. To duplicate a frame, it's done as you would expect with any other element in Figma, either select the frame and press control C and control V or drag while pressing out or option. Okay, select the background layer. Click Fail. Make sure you have HSB Color management selected and not HX or something else. To make fine tuning simpler for me, I have a personal rule. I increase or decrease the values in increments of ten. This is just to limit my options. Otherwise, I might spend the less amount of time on comparing 32 brightness with 33. Hold shift and press on up and down arrow keys to increase or decrease values in increments of ten. There you go. That's much better. Let's see if fine tuning the headline color brings any good results. Most of the time, I have no idea what's going to work and what not. Design is a lot of playing around and comparing options. The brightness is really good, so I'll just play with saturation. Oh, there, that's beautiful. Let's see the before and after. Look at that. The original wasn't bad, but I've got even better result. The text is easier to read on the new version. The transition to the image is much more evident and headline and background look like they were made for each other. So much fun. I love playing with colors. Design is supposed to be fun. Go crazy. Have fun with it. If you find yourself struggling with something, post your questions in Q&A and I'll help you 28. Colors: Color hunting: Here are two other methods of finding colors. First one, and my favorite, stealing. There's nothing wrong with stealing colors. Unlike other creative work, colors can really be owned by anyone. So designers borrow colors from each other all the time. This is basically sampling colors from other people's work instead of the photography. It's also more simpler approach to finding colors than sampling colors from the photography as we did. It's more out of the box option that you can start applying to your work right away. There are a lot of websites that create design work and inspiration. I have dedicated a special lesson to this. Later, we will dive deeper in the topic of inspiration and its importance in your workflow. For now, let's look at one place to find color inspiration, dribble.com. You can find excellent inspiration in here. Most of the work here isn't even for real projects. It's designer show and tell, a lot of exploration, ideas, and practice by other designers. Let's say we are working on a finance related website. We will search by the Finance keyword and get a lot of inspiration for our work. When we find colors that we like, we can either sample the color in exactly the same way as we did with photos. Just save the image and place it inside Figma and then use the eyedropper tool or use a separate eyedropper tool that can sample colors from anywhere on your screen. If you're on Mac, then it already has an eyedropper tool. It's inside utilities called digital color meter. If you're on PC, you can use browser extensions. ColorZ for example, is a pretty good chrome extension for this. The second way to find colors is through color generator sites like coolers.co. You can either generate palettes from scratch or you can paste one or two colors that you want to use and generate some other matches that will work with that color. Here's a pro tape. Avoid raw colors. Raw colors are those that have 100% saturation and 100% brightness. This is a mistake many non designers make when they, for example, design presentations for school or work or Facebook covers and whatnot. They often use row colors like this. We generally like colors that are present in the natural world. And rarely you get such colors in nature. Even the most extreme examples like Nemo here don't have raw colors in them. However, that doesn't mean you can never use them. There might be times when there's like trends going on, or maybe deliberately and intentionally want to use something like a very bright fluorescent green, not a problem. As always with design, if it's intentional, it's probably going to work, and if it's not, it might suck. 29. Colors: Brand Colors: I love it when I'm working on a project that doesn't already come with brand colors. That means I can find the perfect color palette for the project in my hands won't be tied with existing brand colors, and I have been more freedom to explore. But often we don't get to choose our own colors. This is good news if the project comes with good brand colors, but not as monetary. If the color sound as nice. How do you know if you have to use brand colors on the website project are not easy. If the project already has a logo, that means that you have to use the brand. Colors were to get the colors from director from the logo. But the best thing is to do is to ask your clients for the style God or the brand guidelines that came with the logo. You look something like this. This is a guide that a logo designer usually provides to decline whenever they deliver final logo designs. It will include primary, secondary and neutral colors. It might also have some guidelines on topography and other brand elements. If such document exists that you have to stick with their colorists and typography provided here. The existence of this guy depends on how much the client was willing to pay and how good off a designer they hired. If they went cheap and got a logo on Fiverr, then they might not have a style guide at all. Or if the logo was designed 10 years ago by the owner's nephew, he knew how to click few buttons on photo shop. Then they definitely don't have one. Ugly colors are very difficult to work with. And if the client's saved money on logo design that I can almost almost always bat that the colors on the logo are going to be terrible. Bad logo designers have a unique skill of time traveling into the past and borrowing colors from the nineties. In times like this, I sometimes suggest clients ah, brand refresh the color of a fresh off their brand. They can keep the logo in the shape off the logo, and once I designed the website and we settle on the new color palette, then they can go ahead and refresh the existent logo with the new colors. If that's not possible and the colors are complete, junk. Then I'll limit the use off their colors on the website, and I will use MAWR neutral colors like whites, greys and, uh, blacks because they can be used with any color palette and then use ah bit limited options and limited versions off their brand colors. This a good middle ground between needing to stick with the brand color is about not using them so much so they don't make the whole website look terrible. 30. How to Use Photos to Create Mouthwatering Websites: photos are something you'll be dealing a lot. As a Web designer, it's a major ingredient to making beautiful designs. When many attractive websites you'll see the beauty mainly coming from the well chosen photo. With the right photo and the well placed topography, you can achieve truly stunning results in the upcoming lessons. I'm going to teach you a few design tricks on handling photos to create mouthwatering designs. 31. Photos: Image Overlays: Great photo can do wonders for a design. I love this photo. It's beautiful. The colors are amazing. It's simple yet it looks like a fairy tale, but we do have an issue in this composition. There is not enough contrast between the background and all the objects on top of them. The contrast is so low that most tax is completely unreadable. Producing a design like this as a final result is a terrible job, even though everything else is spot on and image so gorgeous. How do we fix this by using overlays. Basically, putting color fills on top of the image. The most common one is to put a dark overlay on it. In figma, this means adding a black color fill on top of the image and adding transparency to that fiel until you get good contrast, but before it gets too dark. Another method is called tinting. It's taking the photo and giving it a different color tint. To do this, you take the image and desaturate it to turn it into a black and white photo. And then, again, we add a color fill, but this time instead of black, you pick a different color. This will give the image a tint of that color. This is especially useful if you want to use brand colors in the design. It's a very handy trick. You can also apply the fix to specific places instead of the whole page. For instance, in here, I've put a dark transparent box behind the content, and I've also added a dark transparent gradient behind the navigation bar. Do you notice on and off and on again? Although, just as a side note, I'm not a big fan of those black rectangles just randomly behind the content. So I avoid using them if I really know how to. Using big background images is a very easy designing. There is not a lot of designing actually involved. You find an impressive photo and put your content over it in white color. Creates a very attractive looking design without a lot of effort. And in my experience, clients love. 32. Assignment: Image Overlays: In this video, we're going to practice applying overlays to our images. So fire up your Figma and let's get cracking. In this Figma file, I have prepared three frames. The content is all designed and ready. Your task is to find photos for each frame and apply image overlays, so the content is well visible. Let me demonstrate the first one. So we have this hero section for a meditation app or something like that. Not sure exactly. I grab this content from random websites. First, we need to find a photo. So go to splash.com, and let's try searching for meditation photos. It doesn't need to be the exact meditation. You can search for whatever you think is suitable, so perhaps Calm lakes, waters, nature, sky, basically soothing and calming images. When looking for photos, we don't need to go too literally and have the image describe everything in action. What about techniques of finding photos later. This photo works just fine for me. You can use the same or something else up to you. Download from here. Now let's place the image in Figma. You can drag the image directly in Figma if you want or you can use a place image option from here. Select your file, and then once you get this thumb nail on your cursor, click somewhere on the frame and it will place the image. The image has been inserted in its original dimensions, so it's super zoomed in and let's shrink it. Zoom out so we can see the handles of the image and then just grab the handles to recise the photo. You'll see FIMA doesn't distort the photo if you shrink it weirdly, which is really nice. You don't get this in other design softwares or many other softwares usually. But this means some parts are being cropped. If you don't want any of the parts to get cropped, then hold shift while you shrink the image. That's going to lock the aspect ratio. Now, we need to send the image layer back so it's behind the content. Two options, either use a keyboard short card of control or command plus a square bracket. One little thing you might get stuck with, when you click on the image, Pigma selects the whole frame instead of the image. So use Control or command click to select the photo directly. Left square bracket sends it backward and the right bracket brings it forward. And second option, right click the image, then select, send it to back, and that's going to put it behind in one single move. Same goes here. You got to select image first with the Control click and then press right click. Control plus right click, and it's not going to work. I really got lucky with the image looks great. But as you can see, the content is very hard to read, so let's apply our overlay. Select the image layer and under fill options, add another fel by clicking the plus icon. Make sure you have the image layer selected and not the frame or it won't do the job. And then start playing with the opacity control. How much transparency we need is going to depend on the image itself. Ideally, we want as transparent as we can get until the point when any of the content becomes hard to read. I think somewhere around 30% is working fine with this photo, and that's all you need to do for each frame. Now I'm going to show you the tinting option so you can use it on one of the frames. First step in tinting, we need to make the photo black and white. This is super simple to do in Figma, click on the image fill and decrease saturation all the way down. Remember from the color lessons, saturation is the amount of hue in the color. 0% means the hue is completely gone, so no colors. That's what's happening here. The next step is to add a color tint. That's going to be added to that overlay fill. We will change black color to something else. You can play with opacity too, so you get the best result. You can also adjust other content on the page if they're not working well. For example, that sign up button on top is too pale, so I would increase the opacity a little bit. Also on tinted overlays like that, a common practice is to use brand colors. That's where tinting really comes in play. Otherwise, there is really no point, and it's better to use the original photo with a vibrant colors. For example, whatever the brand colors are, we would use them as a tint and as a button color maybe. If you need to move the content around on the page on those frames, you can do that because sometimes you have something on the background image that is interacting with the content. If you need to let's say take that content and make a center alignment, you can do that if you need to shrink a headline or make it bigger or smaller, you can do that. It's up to you definitely. Now, finish the job with other two frames and submit your results of all the three frames in the assignment after 33. Photos: Cropping Techniques - Extreme Crop: I'm a big fan of movie poster design. Most of them have a great design work. It's intriguing, exciting and often mysterious. I haven't have this habit of staring at movie posters in the streets and then boring my girlfriend with details on what sort off typography that were using. And what did they do with the photo and with sort of design trick they used on it. As you learn fundamentals of good design, you will never look at the movie posters the same way again. Here on these two posters, I want you to notice the similarity in how the photos are used. Do you notice how they're full hat is invisible and it zoomed ing very closely to their face. This is called Extreme Crop. In this and following lesson, I'm going to teach you several ways how to crop an image. How cool was designed. There are even tricks on how to crop a photo. Let's start with extreme crop. Remember this example from the color lesson? The original photo off the line is actually this, but this layout isn't as impressive as the previous one, despite the fact that we Seymour of the Lion compared to the full view. Her look now has become much more intense and a little unsettling. It adds more emotion and drama to the image. There are two things happening here. First, there is more focus on the most important part of any being their face and especially the eyes. This makes a shot more intimate. The eyes are sort of talking to us like they're trying to give us a message or demonstrate some sort of emotion, makes us more curious and interested in the second hiding. Parts of the subject reads Mystery. The story that is on the poster now doesn't end on there. Just off the poster, it feels like there is much more to read, then what we see, which means we want to find out. And we want to solve the puzzle off that mystery. This is how you make interesting design. Extreme cropping isn't just used on humans and animals. It can be used on objects. To this, a great example of extreme cropping. I came across on some website cropping out parts of the bicycle makes the section more interesting. The key to nailing extreme crop is to not go to fire and make the object unrecognizable. The audience has to understand what start. Check instantly without squinting or pausing even for a second, until the object remains obvious. Then you have a freedom to go Pretty extreme. For instance, say you are designing a website for a guitar store. Instead of using the full shape off the guitar, you can zoom in and crop to the head off the guitar. We can clearly see it's a guitar. Absolutely undeniable. But this is no more interesting this way. We're teasing an audience a little. We are dangling a little information in front of them, but none revealing the whole picture. We're making them finish the puzzle at your content. Simple of color from the guitar. Make the body text that big lighter so it doesn't compete with the headline and Bam! You have an excellent section. It's interesting and intriguing. Remember the last thing about typography and how to match the personality and mood of the type Pace with the context. Take a look at the headline it says classical guitars without knowing anything about guitars. The ward classical already dictates what choice we should make with a typography using a modern geometric tie face like Futura would be so out of place in here. But a script typeface like Apple Chancery, is a great match. Often you'll need to design for a very narrow spaces, for example, Ah, horizontal banner for newsletter sign ups in a narrow space like these, when we place an image that drama and power within the images decrease because how small it is disagreed image with a lot of emotion in it, But it's lost. There is a great solution to this. We can find a frame that tells the story. In this case, it's the faces and zoom into that frame of these frames still portrays the story of the image. The face of the kid is in focus, and the parts of the mother's face is enough to demonstrate the motion of the photo like love and happy vibes at the content. And that's it. Now we get a more effective banner than Motion is still there, and we don't have to screen to understand what's going on in damage. This trick is quite handy for Blawg Hatters and article pages find a frame that tells the story on its own cropping to that and Now you have a very interesting hander for a blocked page. One graphic design professor called this technique peeking through the blinds. Think of it not as a cropped photo, but more like the parts of the seeing that you see as you're looking at it through the blinds. 34. Photos: Cropping Techniques - Soft Crop: Another type of cropping is called a soft crop. Soft crop doesn't have a hard edge. The image gradually fades away. This is usually done by adding a fading overlay on top of the image. When it's the same color as the canvas, especially white, it looks like the image is just fading away. It feels natural. Now we have an excellent space on the left where we can add our content. The result looks fantastic. The content is laid out on the wide part of the composition. This gives it a healthy amount of breathing space. The content is airy and free, it's natural, merging with a background image without blocking it and creating extra noise. Are we using the design concepts that we've learned so far? You bet we are. There's a clear focal point, which is the mountain peak emerging from the clouds. The rest of the content is arranged with a proper visual hierarchy, starting with a large and bold headline, and there is a clear grade and alignment. This is a very simple yet, super powerful trick. It's one of my favorite go to techniques where now I'm working with images. Desktop and laptop screens are quite wide. Yet sometimes you find the perfect image, but it's vertical. Not a good solution to use it as a background for a wide screen section like this. Most of the image is oddly cropped and loses its meaning. It's too confusing and easy to look at, and there is practically no space to lay out our content. Nearly never, ever, you want to place a vertical image as a background for a full width section. With a soft crop, we have a totally different result. The photo maintains all its important aspects, and we have a perfect space to place the content on. This layout has a clear focal point, which is the guy, obviously. The content has great readability because it's on a white background. If I use a vertical image as a full width background, I get a very chaotic result. The content is merging with a focal point of the image. There is not enough visibility for the text. It's hard to read and the whole thing is just very noisy. With a soft crop, on the other hand, we give each piece of this composition its own space giving us a nice clean look with high asibility. Photos that I have a uniform black background is even easier to work with. Just sample the color from the very, very last pixel on the edge of the image. Fill the space with that color. Arrange the image in the position that is the most suitable, and you get easy lay out with a lot of space to place your content beautifully. Extending the edge of this image like this can work on other colors besides black, but it needs an extra fix. Okay. On an image like this, if we fill the space using this method, we'll get a result like this. There is a strict separation between the image and the background, which is an evident flaw, and we never want to have a design with evident flaws like this. Hopefully, you can see that hard edge between the sand and the background color. Maybe on your computer, because of the video compression, it might be blurring out that hard edge. But it's This happens because real life objects are never single color, not even uniform objects like sand. So when we sample a single color from the object, it's only that one single color. One way to fix this is by applying that same gradient fade. And in this game, instead of using white, we will sample this exact color from the image. De now, the sand is smoothly and naturally merging with that background color. On the green side though, there is a lot of texture and more color mix, so the result doesn't look as natural. It's not bad at all. It can be used just fine. Although, unlike other three examples here, the green appears as a gradient overlay over the image. It's more like a fading curtain on top of the image. Which is perfectly fine thing to do, and you can definitely use it. However, there's one trick that I use in such cases, which gives us more pleasing look. Let me show you. If our image isn't wide enough to fill in the entire frame, we can take the part of the image that is simple without any complicated shapes and stretch it to feel the remaining space. It's important to stretch only that part of the image instead of stretching the whole thing. A part that is simple doesn't have a lot of details and isn't in focus. This way, the important part of the image is crisp with its original proportions. You can't do this with all photos only if the photo has already blurry background that can afford extra stretch. At the copy, and we have a very good looking section that feels natural and the content is easy to read and the pose section is really well balanced. This is how simple and fun design can be small tricks that give you great results. The knowledge of the tricks is what designers get paid good money for. My clients usually refer to this as magic, and they will tell me, Oh Vaca, we need a new design for this page. Can you do your magic? But it's not magic. It's science. 35. Assignment: Photo Cropping: In this assignment, you will practice cropping techniques that you have learned so far. Inside the assignment file, you will see three frames. Each one has its own content and an image. I want you to apply different crop for each frame. I'll demonstrate how to apply these image croppings in a bit. On the first frame named extreme crop, I want you to apply exactly that extreme crop to the image of the boy. In terms of the layout, you can do this in a split screen layout just like you did in previous assignments. As usual, style the content accordingly, choose your phones, sizes, colors, and align elements to the grid. On the second frame, I want you to apply a white soft crop. I'll explain how this is done. On the last frame, I want you to apply a color soft crop. Same as the white version but using the color from the image to create that smooth transition. I'll show you how to do this too. All right. Let's start with an extreme crop. Extreme crop is very simple. You can pretty much guess how this is going to work. I'm going to create a split screen and crop this image directly inside it. Now, let's make this rectangle exactly half of the screen. We can have Figma do the math for us. The frame is 1,152 pixels white. Type 1152/2, and we get exactly the half. Align it to the right edge like this. Open crop tool. Now find the handles of the image and resize it to create an extreme crop effect and drag image around to find your spot. Here are a few tips when doing this crop. You don't necessarily have to crop all sides eminently. You can hide only one side of the face or of an object. The goal of the extreme crop is to create mystery by hiding parts of the subject or picking a small slice of the entire image and tell the story only through that slice. In this case, I prefer centering the lines phase. This works better with split screen layouts like this. If I was using a full width layout, then maybe side crop would suit better. Another tip, when you're cropping out a person or an image, this has to happen on the edges of the frame. If you crop an image and place it away from the edges, then this trick doesn't work. You actually get a very odd result. This is just an oddly cropped image that is placed on the canvas. Remember what I said before, an audience has to wonder what's beyond the borders. The fact we're going for is actually like looking through a window. So it's not that image is cropped up, but that's all we can see through the window. When image is cropped on the edges, then audience can feel that image is going beyond its borders. And this is exactly the visual curiosity you're creating here. Okay. Now for the soft crop, this is quite simple as well. What we need to do is to put a white fading rectangle on the edge of the image, so it smoothens out that final edge left edge of the photo. This is done using a gradient fill. Draw a rectangle. Go to the fill of this rectangle. Under these tiny boxes, select the one that says gradient. Linear, radial, angular, en diamond. These are all gradient fills. You'll notice that the fill of the rectangle starts from one color on top and fades to a different color on the bottom. We want this to be white color. Inside the color picker, we have two colors, start and the end color. This shows the same thing. We want start color to be white with 100 opacity, and the end to be white again, but with 0% opacity, meaning transparent. This will then create that fading effect. This here is a start color. On the color map, drag the dot to the top left corner because that's where the white is. If you accidentally click on this gradient line, it will change the location of where color start and end, just drag them back to their corners. The extra stop can be removed from here. Do the same thing on the end color. S. Change the opacity to 0% for the end color. Now we have a gradient fill with fading white. But this is a wrong direction. We want it to start from left and fade on the right. To change the direction, go back to the gradient tool and click this little icon that says rotate gradient. Click on it a few times until you get the desired direction. We need the 100% white to start from the left edge, and then fade away to 0% towards the right. Now we have a correct direction of the gradients. Now we position this fill right at the edge of the image where it meets with a white background. And there we have our soft crop. You can also stretch this gradient fill to make the fate more smooth. As you can see, the transition here is a little sharp. If you extend the gradient fill, then it spreads more evenly and makes a transition smoother and more natural. Now, depending on the image, sometimes this will be enough, but sometimes you will still have a little abrupt transition like this one. In cases like this, I duplicate the gradient fill two more times, so I have a total of three fields. You can see how it already improved, but we can still do a little more. You can take each rectangle and shrink or extend them, basically creating three fields with three different widths. This gives you a bit more control on fixing any sharp transitions. There is no exact role here. You basically play with their positioning and sizes until you find that sweet spot of the transition. A choice of an image matters, too, some images work better than others. With white soft crop, you want to go for an image that has a lighter background. For instance, a daylight sky in a background makes a good transition. On dark backgrounds, the white fade isn't as effective. You see here it feels unnatural. A black background and Black fade does much better job here, as you can see. But the ideal solution on a background like this would be to pick a color from the edge of the image and use that as a background for that fade. Let's do that on this example. Here's a cool figma trick that can come in handy in the future. Right click on the image and click flip horizontally. It basically mirrors the image. This comes in very handy often. For example, when I want to put a content on the left side, but the image has a model on the left and empty space on the right, I can reverse it and done. First, we have to sample a color from the sand and use it as our color for the background and the fade. Select the frame. Click background and then sample the very last color pixel of the image. Zoom in real close to get a better handle and pay attention to the pixel zoom here. This shows which pixel will be sampled exactly. The reason why we are selecting the last pixel is to create as smooth transition as possible between the image and the background without the gradient fill. Now we are going to use the same exact color to create a gradient fill. Copy the hex code of the color from the background and insert it as a start and end color in the gradient fill. Change the opacity to 0% for the hand color. Now go ahead and apply those crops accordingly to each of the frames and then submit your results in the assignment after this, and I will have a look at them. As you notice, probably, I haven't included the stretch crop and stretch photo tutorial in this video, but I have put a photoshop tutorial in the advanced part of this section, which you can learn how to do and practice once you finish this course, because you don't really need it right now. It's not that necessary to know it, but once you finish the course, and you can go through this main material, then definitely have a look at it and give it a. 36. Photos: Rule of Thirds: have you ever noticed how in movies actors are often positioned off center in the frame? After you learn these, you'll never be able to not to notice, and you will be obsessed about it Every time you watch a movie, movie makers and photographers use a technique called Rule of Thirds to add some visual interest to the shot. It goes like this. If you divide a screen in three equal parts, both vertically and horizontally, the intersection of those lines will be the visual in most interesting spots to place your subject. If the object is big, like Angelina Jolie here than you'd place her across that entire vertical line, and if it's an image off landscape like this, then you would position the horizon on one of the horizontal lines. Putting a subject in the debt center is something that is expected. It's symmetric has equal space around it. It's safe and comfortable. That's also what a non photographer would usually do or a non designer. You would grab a camera and point directly at the subject, and that's usually boring. But placing your subject off center creates tension. It's unexpected, yet looks intentional, like there is a specific hidden reason behind this, and we want to know what it is. A camera app on your phone probably has this option. I know. I found us. Turn it on and try it. Your photos will significantly improve by doing so, to demonstrate this point, let's take a look at this simple example. We have a box that is placed in the dead center off the canvas. The distance between the address of the cameras and the box are identical on all sides. The result is symmetrical stationery and box it at rest. It's not moving. If we move the box a little off center, it instantly adds tension. But this is not a good kind of tension, because it looks like the box is supposed to be in the center. But it's not. This looks like an ever that a designer Miskell ate or didn't notice. But if we move the box quite far off center than the result looks intentional, it doesn't look like it was meant to be in the center, but that it's deliberately out of parents. This creates a good kind of tension, giving as a visual interest. The rule of thirds is in a law, it's more of a soft guideline. You can sometimes go quite far from those intersection points. This rule comes super handy when you work with faces. Take a look at this example. The face off this model is in the center, off the frame, and this makes it appear like he's too low in the frame. The empty space above his hand is sort of pressing him down. To fix this, we moved the model on one off the top intersection points use Always the eyes as your guide ice are the focal point of any human face. That's where we always look at first. Now this is much better look, and the space above him is small enough, so it's not pressing down on him. And another great news. This works no matter the size off the face. The person can be far in the frame or in extreme close up. As long as we keep those eyes aligned with that intersection point, it will always look correct. Watch what happens when we zoom in. Still looking great. Let's zoom in more looking great. No doubt one last time still looks good. No matter how far resume in. This is the beauty of rule of thirds. It's a super simple guideline, yet can make photos look way better. Now. The rule of thirds is a soft guideline, and it has exceptions. There are a lot of cases when you will have better results. If you don't follow this rule on an image like this, the center is the best position, and you shouldn't use the rule of thirds. Why? Because the central point of view is the intention here. The photo is in the first person perspective. We are seeing the view from the guy's eyes and with his perspective. Obviously, the most natural placement is center because it wouldn't make sense for him to see things sideways. There are more examples of central position being the correct choice. For instance, when the subject placement and other elements in the image actually create the visual interest in the center, the road edges the yellow road marking in the middle that gap between the palm trees. All that is creating visual interest in the middle. Keeping this ruling mind helps you pick out good, better photos when you're searching for them on stock photography sides, for example, if you're looking for a photo for a split screen like in our exercise, then in those cases, a photo with the model that is in the center is a better choice because in cases of a split screen, you get this narrow portrayed mode off the photo and in the narrow photos. It's not the best option to use the rule of thirds. But if you're looking for a background photo, especially one where you're going to place a content on, then off center alignment will be the best bet. So this way you will look through the photos and you'll find a while where there is enough room for you to move a subject to wards one off the lines off the rule of thirds. 37. Photos: Unbox it!: photos always come in a box. That's the original format when you exported from your camera, or even if you downloaded from our website. When you take a boxed image in, place it right on the canvas, it's often not very impressive. It's a separate object, not merging with the space, and it creates extra boxes around it. You don't notice this consciously about our eyes do, and they need to process those extra boxes that have been created between the image and the address off the canvas. Let's use a real example from one of my landing page projects that have done for a dental clinic. I've used this exact image for that project, and this is sort of where I started. So how can we improve a section with an image like this? We need to think outside of the box, literally unbox the image by completely removing the background, put her on the bottom right edge, and now, instead of it being a boring photo slapped on the page, that model is sort of coming out of the page. The white background isn't really working with this image. Can you guess why? Because the model is wearing a white top. It makes a terrible contrast, and if not for her red hair, she would be fading away. Since the image doesn't have a background anymore, we have more freedom to put our own background color on the entire canvas. This gives us more freedom to experiment and choose interesting color combinations and make the design of more exciting. This color complements her red hair, the contrast well, and make a very good combo. Also, this bluish color is a right pick for the dentistry theme. Blue colors, Fillmore Clean and sanitary. Good feeling to create for dentistry and many other colors would be a red flag for a dental clinic like red and pink. That would remind us off blood, not a good feel. Often I like to add a shadow behind the motto. This makes her look like she's standing in front of a wall. He'd adds more dimension to the space. There are now two separate layers. There's a wall, and then there is a model standing in front of it. You don't necessarily need to apply a shadow. You can still get good results without it. Sometimes it won't even Borg this time. It works and renders a very good result because it's a direct shot off the model and she can easily be standing in front of the wall. It the headline. See what I did with the type? It's heavy, wide and upper case. That's to match their context off this page. Wide straight teeth at black skinny phone wouldn't be as effective here, would it? We should always keep the topic in mind when designing everything we do on the page creates associations with people. The calls were used shapes that we choose all that is going to create certain feelings in people, just like what we discussed in the typography lesson about Taipei's personalities. This is designed thinking, and it's a one very important scale in the designer skill set. Okay, now add the rest of the copy at the navigation bar, and we have a beautiful hero section for a dental clinic. Do you notice why I made the button orange? Because I sampled it from the girl's hair. It's not the exact color. As you can see, I've done fine tuning on it this way. It's more vibrant and suitable for modern Web site unboxing. The image has given us more freedom and control over our composition, it has added the depth. Every object seems to exist in one shared space, but on different layers, just like the real world is in. These has given as a very good looking and interesting hero section. You don't necessarily need to unbox an entire image. You can achieve an exciting result by taking a small part of the object out of its frame. For example, that's what I've done for this website. On another project for a roofing company. I wanted to emphasize the roof somehow. But the's layout isn't really cutting the mustard. The roof is lost in the design, so I took the tip off the roof and lead it poke outside of the frame. Now the roof has gained a spotlight. It's a point of interest, plus the images and as separate thing anymore. It's interacting with the canvas and other elements on it. That's all it takes to free and image from its frame and bring it to life. We can't really create this effect in fig MMA. We will definitely need a photo shop for these in the advanced part of the scores. I have put a photo shop tutorial and an assignment on how to achieve this effect and how to cut out a subject or a model from of the image and remove the background out of it. It's not an essential effect, but knowing how to make this effect work really opens up your options in design at once. You remove the background from the subject. It opens up a lot of different design options, just like what happened with here, because now we can change the background. We can move, let's say headlines and tax behind objects, and we can create a bit more three dimensional layers in our designs. So when you reach the advanced part off this course, definitely don't miss this tutorial and practice it because it's really gonna come in handy when you start designing. 38. Photos: Pick photos Like a Pro: These photo techniques are going to be useless if you don't know how to choose the right photos for your designs. In this lesson, I'm going to teach you how to pick photos like Pro. The photos that you'll be using for your projects are called stock photos, which you download from free stock sites like Osplash and paid ones like I Stock. Now, the big chunk of stock photos are plain terrible. I'm sure you have visited websites that use photos like this. What exactly is the problem with this photo? Bottles are looking good. They are dressed well, they are smiling. The photo is good quality and taken in professional setting. Everything on paper seems correct, but the photo is still lame. Why is that? Because it's clearly fake. It is clear that these aren't actual business people. It's models doing a silly pose with fake smiles on them. Now, all professional photos are made like this, a model that is acting a specific role in the photo, wearing clothes that's not theirs, portraying a specific emotion and getting paid for it. And that's fine. But if the photo is done well, we shouldn't be able to tell what's happening in reality. Think of it like movies. We know that these are actors. We know that they're not actually standing on a ship in 1912. They're wearing costumes and acting a scene. When a movie is made, well, we can't tell. We forget that it's actually fake and that these people are just pretending. The same is happening here. They're wearing costumes and pretending. But unlike good actors, these guys suck at it. Do you know what happens when you use a photo that looks fake? You're sending a very bad message to your audience. If the photo is fake and pretending, then the website is going to feel fake and pretending. No real people behind this website. If I call them or email, I'm not going to get a response from real people or worse, it might even be a scam website. It takes a little practice to tell good stock photos from bad ones, but here are three questions to ask yourself when you're looking at photos. Is the scene real? Would something like this happen in a real life scenario? So would people who work in the office stand in front of a camera and hold hands like this? If you have ever worked in the corporate office, you know the last thing you want to do is to hold hands with your coworkers and stand in front of a camera. So the answer is clearly no. Fake or this photo, for example, what do you think? Is this scene real? Obviously not. For starters, the doodle on the glass is a complete gibberish. It's random charts and arrows. It makes no sense. What's with that clipboard? It's such a cliche way to describe an office scene. This photo, on the other hand, is a different story. It looks like a realistic meeting and people are wearing clothes that you'd actually see in modern offices today. They're talking with each other, which is what happens in meetings, not holding hands and staring at a glassboard with nonsense doodles on them. Fake Second way to tell a bad stock photo is by cheesy fake emotions. This doesn't look like a genuine human emotion of excitement. Neither is the scene anywhere close to real world in this photo. Have you ever held fake money in one hand and a magnifying glass in another? Or this guy who's just so excited about some fake good news on his fake laptop. Nice dry, buddy. Acting out genuine human emotions in front of a camera in a photo studio is a difficult thing. That's why so many of these models are doing a terrible job at it. Don't reward their poor work by using their photos in your project. And also don't ruin your designs with such photos. It's not difficult to tell if acting looks genuine. This is what a genuine excitement looks like. Not this. Even subtle emotions like a regular smile can look very unnatural and fake, and when it's done right, it looks genuine and inviting. Ask yourself, if the emotions feel real, you'll probably be able to tell quite easily. Besides what models are doing inside the photo, you can also easily tell a bad stock photo from a good one by paying attention to the set design. By set, I mean everything besides the model where the photo is taken, objects in the shot, even clothing the model is wearing. A lot of stock photos are often quite old. They have been taken ages ago, but are still being sold and used on websites. You really don't want to use a decade old photo for a modern technology startup website. By paying attention to clothing, you can easily identify dated photos. You don't have to be a fashionista for this. Use your common sense. It's not difficult to tell that no girl of her age would wear something like this today. This doesn't actually mean the photo was taken a long time ago. Sometimes photos are new, but photographers reuse same wardrobe. Photo studios save their costume from the shoots and they reuse them with other models and new scenarios years later. Clothes that don't fit are a clear indicator that the scene is fake, even if it was modern. Like this poor girl here. Photo studios will also try to use neutral clothing that can be reused years down the road so they don't have to buy new wardrobe every year. So you'll see this very blend clothing devoid of any personality. That's another indicator, too. But I think this photo has another clear tail that computer screen. In well designed sets like here, you'll see people wearing modern clothing and a lot of times quite suitable for their personalities. They look like real people, not like a computer simulation. Pay attention to the objects in the set. Ask yourself if they look realistic. Like this magnifying glass and fake money, nothing says fake better. The fake money and stay away from everything abstract. For example, light bulbs. God, I hate light bulbs. People love to use a freaking light bulb to represent things like idea and creativity or thinking. It's overused makes me nauseous when I see it. Once I was working on a very premium website, and as a suggestion, my client sent me a light bulb to use as a background for a website. I nearly barked on the computer screen. Abstract objects are generally a bad idea. Most of them look exactly that. Abstract, confusing and often cliche as they are overused. Your design should give an audience sense of understanding and authenticity. Anything abstract will do the opposite of this. Cliche puzzle pieces and clouds over people's heads. Ah. 39. Photos: Where to Find Photos: Alright, so where to find good photos? There are free and paid sources. My favorite free stock site is unsplash.com. You've already used this in the assignments. There are many sites that offer free photos, but they're not fully free. They come with some copyright rules like you must credit the author or only for personal use, but not for commercial use. Unsplash is truly free. You can do whatever you want with the photos, and you don't have to credit the author. Photos on unsplash.com are very realistic looking. A lot of times they're submitted by individual photographers around the world and not by stock photo studios. For this reason, you get very realistic scenarios and people that look genuine and real. Well, at least most of the time. Another decent free website that I use is packsals.com. Pack Sales is fully free as well, no limitations. The concept and photostas are very similar to Osplash, but you get a bit more diversity here. Free photo sites have a downside, though. Everybody uses them. And a particularly good looking photo will be used by a lot of people around the world. So the photos that you use in your web designs can easily be used by a lot of other web designers for their websites. At some point, when you go through a lot of these free photos from onslash or Pack Seles and other places, you start recognizing them in many different websites. And if the audience sees this photo being used on other websites, too, it sort of cheapens the website. It's not that unique anymore. Although the same applies to the paid stock sites, but because they are paid, significantly less amount of designers will be using these photos for their websites. Plus, the stock sites have way bigger selection of photos than the free sites. So for this reason on well paid projects, I would definitely recommend you to use paid sources instead of free photos. My favorite from paid stock sites is ETOck. They have one of the best quality photos with realistic looking models and scenes. But of course, you get fake looking photos here, too. It's unavoidable, as long as people are buying that crap. Can't really put an exact number on how much a photo cost on a stock side, because it all depends on how many you buy, subscription plans and sometimes on the image itself. EyestoC is a little on the pricier side. An image here costs $9-24. But then with bundles and monthly subscription, you can get pretty good discounts. Another good paid source is Shutter stock, and it's much cheaper than ETOC. With the prepaid plans, you get an image for $10 tops. Prepaid means buying a pack like $50 for five images. For heavy users, you can get a monthly subscription. You'll get certain amount of free images per month. And come down to $3 per image and less. One of the cheapest but decent options is bigstok.com. Here, the maximum should be about $3 per image with package bundles. Unlike others, Big Stock has a seven day free trial that gives you 35 images for free during that trial period. Keep in mind, though, they ask for credit card details and you have to cancel it before the last day or you'll get charged. Take all this pricing information with a grain of salt because these are independent websites and their pricing can change very often. And also, it will depend on the country where you're from or where you're checking the prices due to the taxes and VAT. But in the ballpark, this is how the pricing works for these three websites and many other paid stock sites. I have put the links to these websites, both free and paid and a little more in the resources page, so you can feel free to check them out. 40. Assignment: Finding Photos: Now let's do a fun exercise where you go and hunt some stock photos. In this Figma file, I have prepared three frames with headlines and descriptions of three businesses. I've actually grabbed text from real businesses and their websites. I want you to find an appropriate photo for each frame, imagining that you are designing their homepage and you need a photo for the hero section. You're not designing in this assignment, so don't worry about the format. It doesn't matter if the image is going to go on the background as a split screen or any other way. The goal is just to pick an image thoughtfully. You can choose photos from any of these free or paid photo sites, be it splash, Paxl, I Stock, or any other site. Finding the right photo for your project actually takes time, and sometimes you need to look on several sites to really nail it down. I sometimes can spend a couple of hours searching for the right photo just for one hero section. You can use paid sites too and just grab samples from there without paying for it. You can screenshot or download watermarked image. Big Stock, for example, has a download preview link and you can use that sample image. Don't worry about the quality format or the size of the image, but I do want you to use only stock photo sites and not Google or any other place where they have strict copyright rules on their images like flicker or grabbing someone's photo from Facebook. And for each photo that you pick, I want you to explain why you chose the photo. This is how you get into habit of design thinking. You will do much better job and have your employers happier when you put thought behind each of your decisions. I'll do an example right here. First step is to understand what is the business about and what is it that they are offering. Then think about what sort of scene we want to set on the website, given the business and the text. So this business helps other companies measure their employee happiness. This sort of gives me an idea that showing happy employees would work well for this frame. Let's head to our sites and start by searching quite literally for happy employees. All three of them returned quite diverse results. And as you can see, Shutterstock being the paid side has returned significantly more number of results than splash and pixels. When you do the search experiment with different sort of keywords. Sometimes literal key phrase like happy employees will work, but often it's going to be better to use and mix and match single keywords. For example, in this case, I do want the scene to be set in an office environment. That's sort of a hard keyword that needs to be present in the scene. So I can just use office and then some secondary keywords with it like smile, happy, and so on. Here's a pro tepe. When you see a photo that has the quality that you like, but it's still not exactly the right scene or the model, find who is the contributor and search within their photos. Under copyright, there is a link of the contributor, meaning a photographer or the photo studio who uploaded this photo on the site. If you click on this link, then you'll see all other photos from this contributor. All stock sides have their own ways to display contributor photos and where to find the link, but most of them do. And their own ways to search through the images of one contributor. Just insert your keyword and this will refine results within the contributor's photos. Without this trick, I would have to go through thousands of terrible photos. This is a pretty good option for Happy employees. Download preview and then just place it inside the Figma file. You can take a screenshot or use a download option that the site provides. That's all. No need to design anything. Leave it as is. It shows happy employees, which is the goal of this business. The photo is modern, the atmosphere feels relaxed, smiles look genuine and overall, the photo films warm and inviting. And done. That's your task. No design involved. Have fun. 41. 6 Design Tricks Every Designer Should Know: design is like magic show. There are tricks that make a work look beautiful and exciting and something people want to pay for, just like a magic trick. Good design can make you feel amazed. But once the trick is revealed, you understand, it's actually quite simple, and you start to realize that old designers are using the same tricks in the upcoming videos. I'm gonna teach you several design tricks that will help you create beautiful and very interesting desires like magic. 42. Design Trick: Contrast: take a look at this page. This is a very simple design, yet quite effective. The descent trick that is used strongly in this composition is called contrast. It's this contrast between the gigantic headline and smaller paragraph text. Also Contras. Between the heaviness, off the headline and the lightness off the paragraph contrast between black part off the headline with blue and contrast between the life background and the big blue button. I got to say it's a little sloppy on the alignment, though the contrast is very widely used design trick. It also helps us create visual hierarchy between the elements, and it can be expressed mainly in three ways. Contrast in color contrast in the size big versus small and then contrast in weight like heavy vs light. Let's take a look at another website. Do you notice the contrast in the color about You do wide phoned and book on a bride red background to him. That's one Bulls, in contrast, see the contrast in size and weight between the headline and the text. Above and below. It contrast in the design achieves two things, Usually first, it helps us establish visual hierarchy on the page and second it creates interest. Put two identical squares together, and it says nothing. It's boring, but blow one of them to extreme size in comparison, in thes large contrast between them creates interest. Now it seems like there's a story behind it or create a contrast in collar, and it becomes instantly more interesting. Contrast in color is created by using complementary colors. Purple and yellow. Here are complementary colors, and last but not least, you can create contrast using weight. So how would you create weight Contras between these boxes by removing the feel on one off them and living it with outline stroke Full box feels heavier and empty box looks lighter. Let's see how it works in practice. Say we're working on a website for bicycles and we're designing one of the sections. The client gave us a headline, a paragraph of text and a photo for one of their bicycles. Say we don't know where to begin, but we remember that contrast trick. Let's see how we can use it. Let's start with a contrast of weight. What can we may have a looking and what can we make light? Why not the headline versus paragraph. Let's create a nice contrast between them. We can make the headline extra bold and all uppercase. We don't have to stop here. We can actually add await contrast, even within the headline. Excellent. This has made it even more interesting as we apply contrast to the elements. Yours notice how visual hierarchy starts to take shape. Okay, up next. Let's do the size contrast. Let's supersize the first part of the headline and see what happens. Go big or go home right. Aligned the elements properly, All right. It's starting to take shape. We can use it extreme crop that we have already learned and crop out some parts of the bicycle. It's looking pretty good last night, but least we have color contrast. There's already one color contrast, of course, since background is white, dark tax than dark bicycle. Contrast very well with it, but we don't have to stop there. We can add an extra color in a part of the headline, something that will contrast well with the dark text weaken simple. The orange from the bicycle sit this way will kill two birds with one stone, one great color countries between orange and dark headline. And of course, you already know they sampling the color from the bicycle helps us tie the design together . That's all by applying a simple contrast rate, plus one photo propping technique. We went from this to this. You don't even need a design software for this conduce this in Power Point. This is my favorite. Go to tricks in design. If you ever stock on struggling with making design look interesting at some contrast, star beat color Wade size, and I guarantee you it will instantly improve your designs. 43. Design Trick: White Space: Is a poster from BMW spare parts advertisement campaign. It says, BW instead of BMW. On the bottom, it says, use original parts. You get the joke, right? It's a very clever ad. But that's not the reason I'm showing it to you. I want to demonstrate a huge design concept called whitespace. Whitespace is empty space around elements. In this case, around the BM, BW title. Whitespace draws attention to the object. It's not just easier to see the object, but it becomes much more interesting and important. That's Yahoo's homepage. There's not much whitespace here. It's hard to tell what's important on this page. This one, on the other hand, is a whole different story. The importance of white space isn't just in attention and simplicity. It's also your design achieving its primary goal. If your website's primary goal is for people to search, then you better make sure all attention is directed towards that. When we arrive on Google, we instantly know where to click and where to direct our attention. It's much less demanding to search on Google than on Yahoo. And much more likely that we will achieve our goal on Google than being distracted on Yahoo and forgetting what we came for in the first place. White space doesn't have to be white. It can be any color. It's any unused space that is in between the elements. The word white is a leftover from the era when graphic design used to take place only in print and on a white piece of paper. Let's have a look at this example. Say you are working on a taxi app website, you could put a photo as a background and there is nothing wrong with it at all. Or you can use white space to bring more attention to the message and the button. By the way, remember tinting with image overlays, sometimes you don't have to make the photo black and white. You can keep the image colorful and still add color tint over it, like in this case. You know, a long time ago, before I knew anything about graphic design, I worked as a marketing manager, and as a marketer, you do need to create a lot of graphic materials, design materials like flyers, booklets, magazines or posters, advertisements on Facebook or Google Adwords or Facebook covers or whatnot. And I used to work with this excellent graphic designer who later became my design mentor, basically. And when we would sit down and I would look at his design iterations, I always had this comment that I would look at his whatever composition we were doing. Sometimes it would be like a booklet for our company. And I would say, Oh, you know, why don't you fill this space? There is, like, too much too much empty space, and I always I never liked the empty space when he would making the designs, and I would always push him to try to fill that empty space with something because I felt it was empty. Oh, man, I had no idea back then. This is quite a common reaction with beginner designers or clients who don't have any design training, but are looking at the work from a kind of sort of wearing a designer's hat or from a designer's perspective. They have this insecurity about empty space, and they always try to fill it with something. For them, it feels like if it's empty space and it's not designed enough. Keep this in mind, no user will ever complain about too much empty space. However, they will be annoyed with too much clutter on the page. My personal portfolio site uses a lot of white space. I wanted to bring all the attention to me first, a person behind the work. So I removed all the distractions and pointed the entire focus towards me. Apple always does this masterfully. Using a lot of white space is a very bulsy design. That MacBook looks super important and much more valuable when it's displayed like that. White space improves almost everything, even on paragraphs. Remember what we learned about line spacing? Increasing line spacing is basically adding more white space between the lines. And guess what? Designing with a lot of white space is actually easier than designing without. Dier Rams is this industrial designer, best known for his work for Brown. He has coined these popular ten principles for good design. The closing tenth principle is this good design is as little design as possible. So don't be scared of white space and doing less. That's just good design. There is an exception with white space for items that are related and are part of the same context should be closer to each other. Putting white space between them will disconnect them and will feel like separate unrelated objects, just like we learned in the lesson about proximity. For example, the headline and the paragraph on this page, whitespace will disconnect them from each other. This does add more focus on the paragraph, but now it's an independent object, adding to the amount of elements the viewer has to process. In the original version, the headline and the paragraph looks connected due to the proximity and will be perceived as a single group. Sort of like those links in the navigation bar, because of their proximity and grouping, they will be identified as a single group instantly. This sort of grouping makes it easy for a viewer to process the elements on the page, and it's more organized and meaningful. 44. Design Trick: Repetition: This is Andy Warhol's work because not really a Web designer, but he's a very influential pop artist. In these Warrick. He uses a popular design trick called Repetition. It's when you take one item that might not be interesting on its own, but repeated several times. And now we have something that's more interesting. This is a page from Zendesk website. You can see here how repetition off square profiles in the same style has created a very interesting layout. The repetition trick doesn't just apply to identical items. You can be applied to nearly everything, like color style spacing layout. Her petition off color is one that it's used quite often and can really tie the design together. You see how the colors from the headline repeat as background colors from profile pictures . If we move below the pictures, you'll see those colors being repeated in that paragraph as well. Thes page would look much less appealing and interesting if those clothes were not repeated anywhere else. Do you know it is one more repetition that is happening on this page? It's in the layout. Off profile shots, the position off a person, how they're edging towards the ride and their names place on the top left corner. That's a repetition of layout. I'm actually a little disappointed that esta and deep ash aren't corrupt on the right side . Like the rest, they are glitch ing the repetition a little Because of that detail, let's have a look at another layout. Repetition. This is very common in Web, and you'll see it on so many websites. You see how the layout is being repeated. An illustration on one side had line and paragraph the line on the other side in as exactly out. That's exactly to the repetition. Let's apply repetition into practice. Say, we've got this content from our client. It's the benefits off their services because each paragraph, with their headlines, are part of the same contacts. We can create a repetition in their layout. We can use a split screen layout splitting the screen and exact half. So on the 1/2 placing the copy and on the other, placing a full image at some images and repeating colors and it can look quite handsome like this have repeated several items here they lay out, obviously, the repetition off collars. I'm sampling colors from the photos and repeating them on how to headlines and final the repetition off the photographer style. Old photos are in the same style, the shot from the top of some item that is laying flat on a colored background. How about other design concepts? Can you notice them? The contrast. Did I apply in contrast here? Definitely. You'll see the contrast between the headline and the paragraph in their size, weight and color. Obviously a huge contras between left and rights plaids, one being white, another being bright color. How about white space? There is white space everywhere, each white block where the copy Seitz has a healthy amount of white space around it to bring their tension and to the content. There's even white space within those photos. Whoever took those photos, they did a great job there from. I can sate good source linking the resources. But the reason why repetition is so powerful in design is because the way we look at the world as humans, we tried to recognize patterns on everything that we look at, and when we recognize a pattern, our brain goes a little excited. Luke Luke. It's the same flu that I saw earlier. Yeah, I am. Smart design is strongly linked to human psychology. It's not that there are some laws of physics that govern design. It's completely human centric in reality, always our designers. We are the ones who demand this repetition and white space and contrast and all those design approaches because we already like them. You already know what looks good and what looks about. It's sort of like food. You already know what tastes good and what taste bad. You don't have to go to a culinary school, Teoh. Learn what? What tastes good and what not. And if you learn for your recipes and practice them when you cook something good, you're going to notice it, and so will everyone else. 45. Design Trick: Consistency: What's the easiest way to tell good design from bad one. It's through consistency. Looking at the website and noticing how consistent the layout, typography, colors, and all that is. Inconsistency is very easy to tell. We are wired to recognize patterns in everything we look at, and noticing breaks in those patterns is very easy for us to tell. Breaking the pattern is like a glitch in the matrix. Sometimes it's hard to tell exactly what's breaking the pattern, yet it's always easily noticeable. Often it's better to use poor design and be consistent with it, than have nice design and be not consistent. Consistency isn't really a trick, but more like a design principle. So I'm cheating here a little bit by including this as one of the design tricks. Consistency applies to everything, but I've broken it down in several categories for easier understanding. First and most obvious one is layout consistency. This is exactly a purpose of the grid. The grid is a great way to create consistency in layout. When alignment repeats on the page, users notice it and start expecting things to be laid out in a certain way. When this expectation is met, the users have a joyful experience of the site and they trust the site at more. One way I see web designers often break layout consistencies by mixing different text alignments together. All three elements on this frame are aligned in the center with each other, or at least they're containing boxes are, but paragraph text is left aligned. This is breaking the layout consistency and making the design look sloppy. We have to choose one style of alignment and stick with it, either we center align everything or left align them. Either of these options are fine as long as we stick with one alignment. This is an evident example. More subtle and non evident example is when we have inconsistency between different sections of the page. For instance, the middle section has the content left aligned, but other sections have its center aligned. This would be completely fine if this was a different type of text, a secondary headline or other, but it's the same headline, but with a different alignment. This is quite subtle as it spread between different sections. As we scroll through a page, we only see one section at a time, so such a subtle inconsistency isn't too big of a crime. But it's a good habit to stick to one style across different sections and even across different pages of a website. Creating consistency in typography is quite simple. We just need to create specific font styles for each occasion and then stick with it. A website has several different types of texts. There are main headlines. Those are usually the biggest size. Then you have smaller level headlines like titles and subtitles. You have obviously a paragraph text, and you have buttons. You can have more, for example, tiny captions and footnote texts, menu Links, and so on. The key is to define a single style for each occasion and stick with it. For example, having one paragraph style and keep with it across sections, pages, and everywhere on the side. In Fig Mine and Webflow, this text styling is actually one of the futures, so we will practice creating text styles in our real projects. Color consistency almost doesn't need any explanation. It is the most evident and simplest to see. Most of the time we are working with the existing brand and a logo. This means colors have been defined for the company, and these colors have to be consistent not just within the website, but across its all representation, flyers, business cards, PDFs, front office, and so on. In times where we don't have defined brand colors, then we do this ourselves. We usually choose one or two primary colors like the blue and green in this example, and the rest of the colors are monotone, blacks, grace, and whites. One way we might break consistencies by mixing different shapes on the page. On a page like this that has this smooth rounded wavy edge, introducing an angle shape like this would break the consistency, making it look very odd, but keeping with the same smooth shapes would create the consistency across the page. It doesn't have to be same exact shape as long as the shape has similar characteristics. This inconsistency with shapes can actually happen in very unexpected places. For example, when we use cutouts like this, they create smooth edges on the page. They're not evident, but they're there. When we place a non cut out regular box photo on the next section, we are introducing a new conflicting shape. All of a sudden from smooth natural edges, it went to very strict straight hard lines, and it even created this new shape that wasn't there before. Just like I mentioned in optical illusion lesson, placing objects and shapes on a black canvas will affect that canvass and create new shapes. This is especially true to straight lines and rectangles. But if we use cut out again, then those hard lines and foreign shapes disappear and the section becomes consistent with the above hero section. When it comes to photos, we have to be consistent with the style of photos as well. By style, I mean a photographic style, like colors, filters, the way models, look, and so on. In this example, for instance, I didn't do a good job at choosing same style photos. The left one has more polished look, whereas the second is more natural. The camera work seems quite different, too. I'm not a photographer, but I can notice that this is not taken in the same studio nor by same photographer. Most of these photos will have very different style between because they are taken by different photographers and in different scenarios. It can be quite tricky to maintain consistency, but there is a way. One way is to pick images from the same contributor. I've mentioned this before. Many stock sites will have this option to see photos from the same contributor, meaning from the same photo studio, photographer. If we pick photos from the same contributor, then we will more or less get the same results because Same photographer will have same style, same camera, and same habits of taking photos. Although not 100%, it's the same because sometimes they will have just different shoots and different ways of shooting in different scenarios. Also their styles can change from year to year. This is a very simple and excellent way to make your design consistent and show that it's a high quality design. I know this sounds like an insane detail to pay attention to, but when it comes to design, devil is in details. Attention to this tiny details is what differentiates a mediocre designer from a top notch one. One final place I want to discuss consistency is icons and illustrations. Web is full of icons and illustrations. They are an excellent way to show different actions demonstrate some complicated concept or simply to give a design a unique look. Just like photography, combining icons with different styles will create a very inconsistent and unpolished look. No fun. As a matter of fact, icons and illustrations are even more unforgiving than regular photos. In this example, the third icon is a different style than first two. It's the same color palette, similar round the shades, but it still looks out of place. The difference is only in one small detail in fact. First two icons have outline stroke on them. It's that black line that outlines each object in the drawing. But third one doesn't have it, and it creates a completely different look. In this example, all three icons are from the same pack and have the same exact style. Although the same size, the first to have thinner lines when the last one is a little thicker. Third icon is poking my eyes. Non designer client won't notice exactly what's wrong with it. They might not be able to put a finger on it, but they will pick up such inconsistencies and will not feel like the design is very good. To avoid such inconsistencies in icons and illustrations just like with stock photos, pick them from the same source. My favorite place to get icons is flat icon.com. Icons here and elsewhere are usually organized by packs. All icons within the same pack are going to have the same style, sizes, thickness of lines, and all that. When picking icons for your projects, look for packs rather than individual icons from different packs. This will give you a look that is consistent and polished and will have you designing like a pro. 46. Design Trick: Overlapping: here's a little advanced but very cool design trick. This trick will actually make your designs look very solid. Beginner designers that usually scared off it and very, very you'll see amateur work using this trick. So if you use that, your work will certainly appear like a pro design, the trick is to take different elements and overlap them. Do you see how the hand off the statue is overlapping National Geographic title and also the yellow frame? It makes the design more interesting and adds an extra dimension to the composition. The execution of this trick is quite simple. You take two separate elements and overlap them. It ties to otherwise disconnected elements together, and it also creates drama in the design. Something interesting is going on in our eyes now interested to solve the puzzle, making an old design and tied together rather than just placed on the page randomly. The trick is very common. In prison design. You'll see headlines overlapping with people, images with each other, attacks with tags, you name it in Web design. It's a bit more measured and less extreme as you see it in print. As you can see overlaps in These examples are more subtle on the ride. You have images that are overlapping with each other, but they don't create any complex overlap with text blocks and on the left text overlaps for the background image. Quite simple. One reason I love this technique is because you can add to an otherwise bland design and nice flair of excitement was recently working on his pricing section. Usually, products have several pricing plants right, and that has some wiggle to play with and create an interesting design. But this one only had one. My initial design was something like thes, which looked very bland and boring. There was no excitement today. Send felt like it was just randomly put on there. I've created a new shape and overlapped it behind the box. Instant improvement. Now this is a non traditional shape. If you introduce something like this on the page, you have to repeat it again. Remember the repetition technique. So I used the same shape and overlapping trick on the other places on the page, which made a pretty good result. Let's see how we can apply this into practice. Say we have a section on the page where we want to show some images. We could arrange this images to something like this, which is reasonable but a little boring. Or we can overlap them and create amore. Interesting visual. You've seen this sickening 1,000,000 to self times with photo collages. Well, okay, we do have something toe overlapping here about what to do when we want to use only one photo. Simple. Let's draw box and overlap it with the image. And now we have an interesting design. Plus photo doesn't look like it just hanging in there randomly, but feels like it's laid where it belongs. The color of the box is important. In this case. I have just simple the color from the image. But in other cases, this a good opportunity to use brand colorist or repetition technique to repeat the colors across the page. One thing to note. Overlapping trick. A lot of times breaks the grid. That background box isn't aligned to the great overlapping and the create our sword are opposite concepts. Overlapping Trick is intentionally trying to break the alignment and bring some funding. The composition Breaking the great intentionally is not a crime, as I've already mentioned the intentional is the keyboard. Every design decision has to be intentional, and if it is then breaking and bending the rules, a little is welcomed. In this case, we're actually not messing with agreed that much. The boxes in the background. It's sort of part of the background canvass the image tax and other elements sit on that canvas, which in itself doesn't have a great It's the elements that are on it that leave on the grid. The same goes for full with background images. They are part off the cameras and sit on the background layer so they don't need to be aligned with the great. Let's do an exercise so you can practice this overlapping technique. 47. Assignment: Overlapping: In this assignment, you'll practice both overlapping and a bit of repetition. In the Figma file, I have prepared one frame with three text blocks inside. You'll be designing a benefit section for a travel app. Based on the way I have laid out the text, I think you can guess that I want you to create this alternating layout. Text on one side and image on the other side. But instead of illustrations using regular photography, and I want you to find photos for each text block. This way, you'll practice finding photos too. For the overlapping style, I want you to choose one style and use that with all three blocks. You can either use a photo colage type of overlapping. This will require you to find several photos for each block. Or you can use one photo and use a background box behind the photo. As usual, use other concepts you have already learned, use the grid, choose the phones, create hierarchy, and so on. I'm not going to do an example demonstration this time because you already know how to do all of this. Have fun. 48. Design Trick: Tension: design shares a lot of similarities with music. Just like designers. Musicians also use contrast trick, which can be contrast between high notes and low notes between going fast and going slow. They also use repetition, which is the rhythm off the sunk. They even use white space, which are pauses and silent parts off the music. One more technique. These two field share is called Tension in Music. That's when melody starts to pick up. Ah, and it's kind of adds to the momentum and then becomes a bit more dramatic and at some point kind of explodes in this kill me nation in, for example, and techno music. It's kind of going to this very heavy rhythm. Attention is something that makes any creative work interesting, and it's used in other fields besides design and music. For example, in fiction, tension is called suspense. So how is tension created in design? This a square laid flat on the surface, in complete balance and in central alignment? There's no tension here at all. Nothing is happening. No drama. It's solid and grounded. How about now? This is a different story, isn't it? The square is not laying flat anymore. it's standing on its corner, which seems like either it's going to tip over or fullback on the flat side with a simple tilt, we have created a lot of tension. Tilting elements is one way to create attention. There's more. You can move elements to the edge of the frame or move elements out of balance or high parts of the object. This is something we've already played with as part of the extreme cropping. The tension is one of the reasons why extreme cropping is such an interesting trick to use . And if the extreme crop is uneven, like this movie poster, it increases the tension even more. Remember the rule of thirds Tension is exactly why this rule works really well. When objects in debt center feel stable and a little boring. Off balance placement can create more visually interesting look. Overlapping is another way to create tension. Overlapping does have other merits, like adding extra dimension because objects are layered on top of each other or because interlocking elements tie the design together. But it also adds tension because two objects are now interacting with each other in a very interesting way. One way to create tension and movement in design is by using diagonal or angled shapes. These sort of tension is very useful when you want to portray speed and movement in your design. Why do diagonal shapes create tension and movement is very easy to demonstrate? This is still image, but we can feel that circle about to roll down. That's how angles at the feeling off movement in design. 49. Assignment: Tension: In this assignment, you're going to practice tension. Nailing down tension method does take some practice. I want you to relax and just play around. Don't worry if you're not too happy with the result, just have fun with it. That's how usually tension works out. You mess around for a while and at some point, one of the version looks quite all right. There is one frame in this figma file. I want you to design the section in a way that you create some tension in the design. As we already discussed, there are several ways you can create tension, for example, by use of angles. How do you use angles? Well, remember that classic split screen layout that we usually use for such sections. Instead of having it straight and erect angles, we can make them slanted. To edit any shape inside Figma, just double click it or click edit object in the tool bar. Now you'll get this sort of view. The points on the corners of the rectangle can be dragged around. Drag them to your liking to make a slanted rectangle. When your dunk heat enter, Don't forget this because the screen is now locked in this edit mode of the shape, and you won't be able to actually click on any other element and do anything else on the page. I sometimes accidentally double click on shapes like this, which then puts me into the edit mode and I'm not able to actually click on anything else, and I'm wondering what the hell is going on, and it's not very evident in Vikma that you are in the edit mode. Keep in mind if you're not able to select some element, that means you probably in the dit mode of one of the shapes. Now we can use the shape to crop our image. We can either fill the shape with an image, the usual way just by placing the image inside it as a fill. Or since we already have the image on the page, we can just edit the shape of that image. Remember, the image in Figma is just a regular shape with image fill inside. Anything you can do with a rectangle or any other shape, you can do with image two. We can just select the image, click Edit object, and change the points of the shape to create an angled shape. If you need to change the position of the image inside or change the size, you can do that using the crop tool. By the way using such shapes to creatively crop images in design is called masking. That shape we just created is called a mask. Now enlarge position the image inside the mask just the way you want to. And there with a few clicks, we already have a layout with a lot of tension. You can then change the color of the background if you like. Or change the angle and position of your mask. Another way to create tension is to align an object on the edge. This, you can only do with certain objects. For example, you could do this with a headline or some text if it's large enough. Doing this with a paragraph text will make it look like it's a mistake. I sometimes use this sort of edge alignment when I'm numbering steps or something like that. Also, you can create tension using off balance layout or by overlapping some elements. For example, overlapping headline with that photo or putting some elements of balance. All right. Now it's your turn, you already have enough ideas how to create tension and don't forget to style the headline and the text and the button. Most importantly, have fun in this exercise because when it comes to tension and overlapping tricks, the best work if you're having fun and playing with it. So have fun and play around and see if it works out. If it doesn't, don't feel too bad about it. It will come with a little bit of practice. 50. PART 2: PRACTICE DESIGN LIKE A PRO: you have finished part one of this course, give yourself a pat on the bag. That part was a handful. Great job. You have learned the secrets of good design and how to make your work look beautiful in this part. We're going to get a bit more serious. Ain designer home page from start to finish, Let's go. 51. The Mimic Method: I want to share with you a dirty little secret off all creative people. Every designer, every artist, every inventor. Every musician that has ever lived has used this method to achieve mastering their skill. This method is called the mimic method. You see the beginning steps off. Learning any new craft is mimicking the experts in that field. So if you want to learn how to cook, you grab Gordon Ramses or John Oliver's cookbook, and you start practicing some recipes. You don't start by inventing food from scratch. You start mimicking those recipes and then practicing them. And once you gain a little bit of experience and a little bit more confidence in whatever recipes have been cooking, then you start tweaking them a little bit. And then at some point, you start re inventing and creating your new recipes. If you're learning how to play guitar, you don't start by writing new songs, Nor you start by mimicking other musicians, meaning you start playing their songs. And like every other beginner guitar player, you start by learning wonderful. Many beginner designers get themselves trapped because they think the moment they start designing, they need to start creating new or an original work, and they get discouraged when this doesn't happen. They think that they don't have talent for it, but they skip the most important stab, mimicking the experts by mimicking experts. Not only you get experience and confidence, but you also practice very good habits because every good design work is full. With all the good design habits that we discuss in this ah course, be typography and layout consistency and all the tricks of white space and tension and overlapping all that thing is in good. I good design work, and you're basically practicing all that while you're mimicking somebody in sort of copying and replicating their work and inspire using their work is an inspiration. And once you start creating your own original work, you already have very good design habits ingrained in you. Mimicking has three stages. Stage one is coping. It's taking someone else's working, just copying. Get pixel by pixel it sort off like playing somebody else's song or you cooking lasagna using a recipe. This is done for practice rather than for real projects. When you're learning by copying your learning a lot of human design decisions that were made by a pro. This is where every creative person begins. Be pulled McCartney or Picasso In stage two, you're remixing. It's taking somebody else s work in giving your own twist to it. Just like food recipes. You start tweaking ingredients. Little by little. You change that phones, you use your colors, tweak the shapes a little bit. Now you've created something different. However, if you put two works together, the inspiration is clearly visible. In this stage, you can already practice working with real projects in the final stage three. Now you are drawing inspiration not from one particular work, but more like several different works or different styles and maybe even like trends. And here you add even more personal touch. So the final result doesn't resemble any one particular work anymore. And you want couldn't say that it's a remix off this particular website or this particular design, although sometimes you could say that there is clearly an influence or some specific style or some specific trend in design, there is no level beyond. There's something like truly original work, because if things aren't really based on reality and influence by reality and existing styles, then it just becomes irrelevant and quite confusing for regular audience. Sort of like the bizarre high end fashion items. Too much originality will lead to products that people don't understand and don't want to use. That doesn't mean that people don't like new things. They dio. People do little enjoying your websites that look fresh and your fashion stylist technical crash. But they enjoy these things because most of the time they've resemble something from the past and something existing, but looking at it from a very new perspective and new outlook. So it's refreshed look of something familiar. So the taste of the audience really matters for a particular work to be appreciated or rejected. This strange looking jackets, sweater or sponge ball spans is and familiar to you and me. But it might be drawing inspiration from some other Warrick and particular audience off. That show might be familiar with that inspiration, so they might easily understand it and appreciate it. You today start to say that with a straight face. Also, the stages are like a volume knob, not clear cut transition from one to another, but more like smooth increase off intensity, with different levels within each stage. We're going to practice all these three stages. But before we do that first we need to learn how to find the right inspiration and based our work on that. And make that instead off Trecia once. So let's do that up next. 52. The Biggest secret of designers - Inspiration: Pablo Picasso was looking for an inspiration for his next work. He got fascinated by African art. He used Dogon Tribe mask as his inspiration and launched himself into the Kubi style that he's most celebrated for. As you can see, the resemblance is incredible. His work was actually quite different before this period. Good inspiration can be equally transformational for your work. Let's say you're working on a project to design a website for a financial company. Your first instinct might be to go in Google and look for some examples for other finance websites. But what you get here are data templates that look the same, and there's nothing inspirational about that. Why is Google bad place to search for design inspiration? Because Google isn't a website that curates good design work. It has a very different purpose and it searches and ranks websites in a way to show content that has been there that has authority that has been there for ages and has been visited by a lot of people. And that's exact opposite of what you want in design inspiration. A keyword search for Finance website inspiration, led me to an article that featured websites like this, and the article called it innovative and inspirational website designs. No wonder it features such data designs when the article is from 2016. That's way too old for web design inspiration. Add to the fact that the mentioned websites have probably been built a couple of years prior to the article. Also the fact that the author might not be a designer at all, and you get terrible website examples. So many beginner designers make this mistake, they look for web design inspiration in wrong places, and they start mimicking very outdated or ugly web design work. Using quality inspiration for your projects is going to set you up for great design results. And I'm going to teach you my favorite places to find great and beautiful web design or an other design inspiration. One of them is dribble.com, that's Dribble with three Bs. Let's do that same finance website search here. Here are some of the results up close. This is miles ahead of what we saw on Google. The design style layout and Carls look fresh and modern here, not 90s. Dribble is basically designer show and tell. To contribute, you have to be invited by an existing member, so it creates a level of checkpoint to keep the bad work out. The search algorithm is different from Google two. Here, one of the sorting parameters is number of likes, meaning how many designers have liked the work. That's a better way to tell good work than a random finance blogger picking sites based on his taste. Many of this work are just designers playing around. That means that they haven't even been turned into real websites yet. That's an inspiration that is ahead of its time. After a while, you start following designers that you like and build a very good personalized inspiration for yourself. You pick designers that have a stem style that you like and feature design. I also use these two websites to find my inspiration. These sites curate live websites and landing pages. If you don't know what a landing page is, it's a page on a website where a visitor lands. This can be a home page of our website or a special dedicated pages used for marketing. I really like these sites because they are really well curated. The screenshots are well displayed, and I'm able to see the live website and check it out in more detail. There I can even see phones that they use sizes animations and interactions, and even see other pages of the site. Really an excellent place to find inspiration. My third favorite place to look for inspiration is actually Pinterest. Although on Pinters, you have to be a little more cautious, it's not curated content by designers. So just like Google, you can get quite a bit of bad apples. But I look for inspiration on Pinterest for one reason. They have some amazing search algorithm where whatever image you are looking for, they can find similar styles with amazing accuracy. For example, if you find a design style that you like, click on this icon. And look at that. Without even me specifying anything, it's surface designs that are very similar in style. You see how the examples on the right have wavy smooth, rounded shapes and edges, especially in this particular design. It's so similar in style, it's uncanny. Here, another example for a totally different style. This time, no vibrant colors or rounded shapes, but more photography heavy designs. This is a very powerful tool for a designer. A lot of times, I'll find a specific style that I want, but I'm not able to see other examples of the same style because I can't put them in words properly. By coming on pinras, I can find many examples of the same style and collect several different examples for my inspiration. Just like because one great but a bit advanced way to look for inspiration is to look for it outside of the web design field. For example, I was working on this project that was a charity website, and I wanted to build something and design something premium and a bit different and not looking like other charity websites. Anywhere I looked for inspiration, all I would get is this very common theme of sad looking African kids. That just looks very cliche. Sorry, kids. Instead, I went and looked for movie posters, because movie posters are designed amazingly. They depicted a lot of drama and tension. I found this poster of sicario, and I really liked the style. I was doing this on Pinters, which gave me more suggestions that look similar, and then boom, this poster showed up. This gave me more concrete ideas that I could merge a photo of a person with something else, just like Peter Dinklag's face merging with the background scene. This led me to create a hero section that looks nothing like a template charity site. 53. Assignment: Mood Board: When designers gather different work for their inspiration, they arrange what's called a moodboard. It's basically putting together any of inspiration that you think will be useful for your project. This, for example, is a moodboard from one of my client projects. There are screens of different home pages that I found on the sides that I mentioned before. You can even draw inspiration from your own personal work. For example, one of these shots that I put here is my own work. Inspiration doesn't have to be a website design. You might gather illustrations that you like, app screens, art, architecture, photography, movie posters, or you know, Do gun tribe mask just like Picasso. There are no rules. It's basically setting the mood for your project, just like the name says. In this exercise, we're going to practice creating a moodboard. Your goal is to go on those inspiration websites that I mentioned previously and gather inspiration for a website for a Uber kin R sharing app. The app itself is not your project. The project is basically a website, like a home page for the Right sharing App. Let me demonstrate an example. I'll moodboard for a team collaboration website or a landing page. You know, like Slack and Trello, if you're familiar with it. I have my inspiration sites open here. But first, I'll start looking at websites, I already know. I'm going to check Slack Asana is another one that I know in Trello and see what they're doing. When you like a website or a section or any parts of the page, just take a screenshot. We will organize all screenshots and images later. Okay. Let's now check on other inspiration websites. Dribble search with keywords, isn't that good, so try using as little keywords as possible and s in different words. This one isn't bad. Often on dribble designers post the screen of the full page, which you can see in the attachment right here. This way, you can see the full page in more detail. I'm just going to save the entire page. Here, I like these overlapping interface elements. This is nice because it gives more idea of the product. Let's check other inspiration sits. I usually spend about an hour gathering inspiration. It's an important part of the design process, and if I do this part diligently, I have more easier time designing. I I don't, I often need to come back and find more inspiration. A. Pinterest is actually where I save random inspirations outside of projects. Like if I'm randomly browsing the web and I come across to some interesting design, I will save it on Pinterest for future in reference. It's a great place to have your own personal collection. You can create your personal board on Pinterest then install the browser extension and save screenshots and images from the web to your private collection. Then you can come back to the pints later when you're looking for some inspiration for your project. Now I'm going to look off topic, not necessarily for team collaboration websites. This isn't bad. This section is very lovely. I like photo overlapping with those graphics. La Paninja, or Landbook are excellent because we can see live sites, which can give us ideas on animations and interactions and all that stuff. I think we have enough, and now we are going to create a moodboard in Figma and place all those shots in there. Draw a basic frame in Figma and pull all your screenshots on it. I use dark background because most websites are on white, so they will have better visibility on a dark frame. It doesn't really matter how you arrange them here. You can scatter them as you like. I. And that's all there is to it. That's our moodboard. Later we'll learn how to actually draw inspiration from all these things that we collected and how to use them in project while we're designing it. Now it's your turn. Go ahead and collect inspiration for our website that is for R sharing app. 54. Assignment: Figma Homepage Design: Know how to gather inspiration for our projects, and now we're going to learn how to use that inspiration for our designs. As I mentioned before, there are three stages to the mimic method, which is copying, remix, and the final stage creating. In this lesson, we're going to practice first one, the copying. You're going to create one of Apple's product pages. Your objective is to match their design as closely as possible, pixel by pixel. Doing so, you'll gain valuable hands on experience. You'll practice designing very common website elements such as navigation bars and different components and footwear and all that, and do all that while you don't have to worry about colors and typefaces and fonts and layouts and all the design stuff because you're just copying what's already there. One small step at a time, just like learning how to cook or play guitar. Open Figma file, linked to this video. Here you will find the screenshot of the page. It's not the full page. I've removed some of the sections to keep things simple, and it might not be the current version, but that's okay. We don't care about that. It's a pretty simple and timeless design, so it's perfect for this assignment. On the right is a blank frame where you will create this exact page. When you work on this assignment, I want you to notice all those design principles that you've learned so far. How do they use visual hierarchy? What contrast methods do they employ? How do they align elements and so on. With what you have practice already in Figma, you know enough to complete this task, although I'll get things started and demonstrate some of the parts. On this frame, I have included the screenshot of the homepage. It's hidden now. If you enable it, you'll see the faint version of screenshot. I have decreased the opacity, which is selecting this 30% right here. So it's not in the way, so you can work on the design and put stuff on it without the screenshot getting in the way. First, let's add the grid to the frame to help us with the alignment. Select your frame and under the layout guide, add a new grid, not this kind of checkered grid, but what we want is columns, 12 as usual. And using this section right here, this three columns section, we can calibrate the grid because this will reveal the margins, the gutter that they're using. So for example, starting with the margins, just start increasing until you hit the edge of this little white card if you are able to see it actually, because video recording compress the file and you might not be able to, but you can see it right here, right? And the gutter actually seems like it's 20 pixels, so it's just working just fine. Putting this grid on this page reveals to us how Apple handles the layout and distribution of elements. This is a very valuable information in your learning process. You get to peer into workings of other designs. For example, we can see that for the navigation here, the navbar, in the footer, right here, they are not actually following the edges of the grid or edges of the main content. The main content in a different place. Industry practice is to keep everything aligned to the main container edge to edge. It looks more consistent and neat, but Apple will have their reasons for it. Maybe consistency with their shopping site, or their code stack or something else. So don't expect strict match with our 12 point grid. Yes, even though it's an industry standard with designers to use 12 point grid, it's more of a loose guide rather than a strict rule. Plus, we use grids Figma because it helps us during the design exploration. But on production sites, we don't follow the grid anymore because we build responsive sites that shrink and stretch like accordion, and we use very different sizing rules to achieve such responsiveness, which you will see during the Webflow section. Let's insert the hero image. I have saved all the image assets in this file so you can easily insert them in your design. They are inside this asset sap under this components library, which you can access from here. Components in Figma are elements that we can create and reuse later. This is a cool feature, and we will talk about it in more detail in a latest lesson. But for now, all you need the components for is to grab the image assets. You can also find these images on the components page that we have right here. This is actually the place that Figma is grabbing everything, all these components from. If you delete something from here, it will disappear from the assets page as well. So find the hero shot in the Assets panel and then drag it onto the canvas just like this. And then just align it to match the design, just like that. This hero section, as you can see, has a gradient background. You've already worked with gradient, so I'm not going to demo that here. It's okay if you get stuck. That's how you learn. You can watch the soft Crop exercise video one more time to refresh your memory if you need to. But I'll give you a quick rundown of steps. So to create this gradient, you need a rectangle. Right? Instead of the solid field, which is currently selected, you need the gradient fill. And the gradient has stops here. First stop is this, second stop is here, and that's where it gradients from. Obviously, direction is not what you want here. You want the vertical direction, which you can just change it by rotating this. Like that. So all you need to do now, which is sample the color from this top blue, and then the ending needs to be white because as you can see, it connects and fades away and connects with the rest of the page, which is white. This is exactly what we did with a soft crop exercise. So you know how to do it. Maybe you'll get stuck, but that's okay. I'll refresh your memory, but I don't want to demonstrate all the details. Then once you do that, obviously, you'll have to place this rectangle behind the Euro image, which you can do by arranging the layers, right, right now, this is on top. And to arrange it behind, you can just drag the layer down and that will make the rectangle behind your her image, right and there's also shortcuts you can use, for example, bring to front, and this will bring the rectangle formed. There is also sent backward. And as you can see, it has a shortcut next to it, which you can use. This is going to be very useful for you overall. So kind of memorize this idea because Figma, everything works in layers and things go in front of something and behind something, and this is how the layer panel is arranged, right? So send backwards, and backward, we'll send it one layer at a time. Send to back, we'll send it all the way behind. So if I do send to back, we don't need that because it's going to go all the way behind the screenshot. We want it one by one, which you can use again, Control bracket, command bracket on Mac, and go up and down. The font they're using is Apple's Default, San Francisco Pro font, as of P. If you're on a Mac, it will be there by default, so you will be able to select it inside Figma. But if you are on Windows, it's not going to be there by default. You have an ability to download it. Apple has resources. I'll link that you can download it and install it on your computer. But in reality, you don't have to because Inter is pretty much a copy of San Francisco phone, so you can just use Inter and you're just going to be very close to the phone. You don't have to use San Francisco. But if you're on a Mc, do it, do you use San Francisco phone, which is SF Pro and then start trying to match the sizes, the weights. You can play with font sizes and weights to get the precise match. You don't have to be super precise here. It's okay if letters don't exactly align, but if you do go extra mile and try to find the exact match, it will be a good learning moment. It will reveal to you how Apple's designers set that type here. How heavy did they make the text, if they adjust the letter spacing, what font size differences did they go for to create a visual hierarchy. Such information will be picked up by your brain and it will settle there next time you're working on a project. They're using a gradient fill on their text here, which works just like any other gradient. It's just under the fill, and instead of the solid color, you're just going to choose the gradient color. And again, stops here, which is the beginning, start, the end, and you just have to sample one color from here, another one color from here, for example, and sample the end or beginning. Yeah, that's the end. And then whatever is the beginning and that's it. One thing that we haven't covered yet is stroke. For instance, to make this button, you can draw a rectangle, increase the corner radius to super high value, so it's fully rounded, and you can add stroke from here plus, and then you can remove the fill or make it white, and that's how you get the stroke. This value here controls the weight of the stroke. These sort of lines here, they are just the line two, which you can select from here or press L. And while you draw this line, just hold shift, and this will lock the axis, I guess, and you will have a perfectly vertical line. But if you don't hold it, then it's going to be like this. It will let you move around and you might not get a precise line and will look something like this. So to get a perfect line, hold shift, and it will be perfectly vertical. The weight is controlled like this, just like the stroke, Line is actually using the stroke property as well. And to sample the color, there is actually a nice shortcut you can use. You can just press I. It will open up a color sampler, as you can see, and whatever item you have selected, it will fill that item's primary color. So for the line, it's going to be a stroke, for something else, going to be a fill. To change the color here, don't remember we already covered this made with 55%. Now, let's decrease the phone a little bit. Recycle called material by weight, to be able to just style differently part of the text, you just need to drag and selecting like this. So you open this up and sample the color. That's it. And if you need to even change different font weight or anything, this is doable like this from here. And that's pretty much it that you need here. Everything else you see here, they're just rectangles. And that's say, for example, if you need a section, this footer and the bottom section has a different color, which is just a rectangle. Again, just put the rectangle on, sample the color that you need, and just send the rectangle all the way to the back somewhere, right. Well, this is a source, so somewhere right here, right. That's all you need to do with that. These are rectangles as well. And one last thing, which is the content here, I have included because some of the text, there is a lot of text here, so you don't have to type all that in. I put text for those blocks, so you can just copy them from here. And that's it. Have fun. 55. Chat App homepage design: Part 1: These and upcoming videos will practice remixing, and this is going to be our first sort of full project from design to development. First, we'll design a homepage, and then we'll take that homepage and we'll build it and develop it inside Webflow. We're going to take an inspiration, and instead of copying it just like we did with Figma'sHmepage, we're going to remix it, and we're going to use our own content, our own photos, and our own colors and change some things if we want to and if we can. I found this really nice design by Philip stich and Balcom Brothers on Triple. We're going to use Philip's designs as our inspiration, remix it a little and design a new homepage based. This time, I'm going to demonstrate the full process so I can show you new things that you will need to learn in Figma. It's going to be interesting. This demonstration is long and it's split in four parts. It's best to follow along, so fire up your Figma. As always, the Figma file is in the resources. First, let's set up our frame. You'll see that the width of the screenshot is 14 and 40 pixels. This is the same size as a desktop frame in Figma. Now, let's add our grid to the frame. I'm not sure what exact grid they are using on it, but we're going to use our own 12 point grid with our usual settings, although let's match their margins on the edges. Not the margin on the top navbar, but the one on the content. To measure anything in Figma, just draw a rectangle and then check the dimensions of that rectangle. It's 140 pixels wide, so we will use this as our margin for the grid. There. Now it's a close match to their layout. There are some differences in their layout, like the nab bar sits outside of the grid, and some other elements seem to have different logic too. But for us, we're going to stick to our grid as much as possible. Good. We're going to start designing the hero, first, the background. Pulling in our own custom colors is a great way to remix work. Let's find some color inspiration on dribble. For your designs, I want you to source your own colors just like I'm about to do. I'm going to grab a couple of options. Just screenshot your inspiration or save the images by right clicking and save as. We'll place them into Figma later. I really like this. Blue, yellow or blue orange combinations are exciting color pairs. Now, just place your screenshots into Figma so we can sample colors from there. What I like to do is to put one color as a background and another as a button on it, and then see how the combo works together. Some colors might work well next to each other, but if you put one on top of the other, they might have very low contrast. A a They're both quite nice, but I'm going to go with the blue option. You can lock the background layer from the layers panel so it doesn't get in the way when designing other objects on top of it. Now let's add the content. First, we have to choose our fonts. The fonts like colors are a good place to do an easy remix. But sometimes we might really like the typography that they are using and we might want to use the same or similar fonts. If we know the font they're using, great, but if we don't or if it's paid phone and we don't want to pay, then we have to find a similar alternative. That's what I'm going to do here so you can learn how to look for font alternatives. I don't know exactly what they're using in their designs, but let's head to Google Fonts and see if we can find something similar looking. So I'm going to narrow down the results. It's clearly a sounds seri font. I'm going to use the same text as a sample because that's going to make it easier to find similar fonts. Notice how symmetric are the letters. The letter O is a perfect circle instead of a usual oval, and that's a good hint. The biggest tell is the letter A. It's not that usual A that you get in most fonts. It's a handwritten sort of style. Those are enough hints to find similar fonts. Look, Montserrat is quite similar. The O is circle as well, but the A's are different. I can use this if I don't find something closer. But there pop ins is a really close match. The O is a circle, and the A is the same style as well. There are some differences, but this is good enough. In your case, you can either use the same phone, pick your own, or source the phone from another inspiration up to you. Let's match the style. It seems like the weight is something like semi bold. The line height is tighter than a default value, and that's a great design decision. On big headlines like this, you need a tighter line height. Remember what we learned about the gravity of font weights. Also, if you look closer, you'll see that letters stand closer to each other. This might be the default value for their particular typeface, but it's highly likely they decrease letter spacing. This again is a good idea. Have a big font like this looks best with a tighter space. We can decrease letter spacing from here. As for the body text, if you zoom in, you'll see that they're not using the same typeface as the headline, and that's probably a good idea because the same phone might not be the best choice for paragraph text. It's too symmetrical. The paragraph text looks more neutral and generic, sort of like Roboto might even be the same, so we can use that. 56. Chat App homepage design: Part 2: And we're back. I'm going to use rounded buttons as well. You can feel free to remix here if you want to and use rectangular buttons. To make buttons round, just increased corner radius until they are completely round. For the font, it looks like they're using smaller paragraph text, but a thicker style. Okay, that looks about right. The second button is what's called a ghost button. This sort of button combination is a great approach because remember what we talked about in visual hierarchy, you want to guide your audience visually from one element to another. If you have two buttons next to each other and use the same style on them, the audience won't be able to tell which one is the primary button that leads to the primary action of this site. To create this Ghost button, we need to remove the color fill and add a stroke to the shape. Then change the color of the stroke. Let's check the grid. The buttons aren't aligned with the grid, but that's not a big deal. Buttons and tax elements are flexible and they shrink and grow based on the tax inside, so we don't have to squeeze them into a grid. And sometimes it's better not to. But in this case, it's quite close and shrinking buttons little won't hurt, so I'll snap those bad boys to a grid. Let's move to our hero shot. It's quite an interesting collage. Do you notice one of the design tricks where you covered the overlapping trick? Let's create a similar art. We need to find and add a couple of similar photoshots like those. Alright, this should do. Some of these images work, but some don't you combine images, always remember the lesson about consistency. So combine images that are very similar in style. Like, these two are similar. They are not facing the camera or looking at it and they are proportional to each other, meaning the photos were taken from a similar distance. You don't want to match these two together. Looks like they have nothing to do with each other. The right one is looking into the camera, facing straight, and she's much closer to the camera, making her face bigger in size. Alright, these two look good. Free photo options are quite limited generally, and finding the matching style is a little more challenging, so keep that in mind. A Now, let's create that dotted background shape. Just draw a circle, choose ellipse from the shapes or just hit O. When you draw ellipse hold shaft to draw a perfect circle. Then just start duplicating the circles horizontally and vertically to create that sort of dotted grid. A Select them all. Right click and group selection or use a shortcut Control or Command G. When you position your dots behind the image, make sure to not have an odd overlap with an image. See how the dots are neatly sitting around the image and try to use equal spacing. You don't want to create an unnecessary tension by doing something like this. Now let's find some mockup screens for our product, just like they have it here and also something that we can later use down below right here. What we're going to do is find some free design on Figmas Community. You can do that from HignasHmepage, the dashboard, and there is a link, a tab for community. And I'm thinking to use sort of a chat or a team collaboration application as our product. Doesn't really matter. Anything that will fit our designs will do. You can search for keywords like chat or a chat app. Thank you. Can also be team chat or chat dashboard or webchat or desktop chat, something to get more web related results and not just mobile apps. And then you can just go through the different options, different community files here. They're free to use. You can use them to see what's inside the actual file. You can scroll down to the preview, and they have these pages right here and you can switch to This is actually showing the actual page on FICMAs file, and you can switch to, let's say, a design page in this case, then you can check the actual proper view of the design. I found this one previously, which is what I'm going to use. You can use the same or different. I have included this actually inside the assignment file on a hat App screen page right here. So you can grab it from there if you want to use the same. To use community files, you just need to click this opening Figma button. This will duplicate the file in your Figma account, and it's your file. You can edit it as you wish. To feature this mockup in our website design, we need to adopt the color palette. It wouldn't make sense for the website brand to be blue, but the product itself to be green. Since this is an editable file, it's simple to change colors. Just grab the color code from your design, select the parent frame. Then expand this section that says selection colors. What this does is that it reveals every single unique color that is present on this design. Find that green and paste your color code over it. Hit Enter, and that will update every single place where that green was used. This header right here is using a darker shade of that green, which means we need to create a darker shade of our blue, which is a simple thing to do. We can paste color here again. And from the HSB color model, we can just decrease the brightness. And as you can see, it's the same shade, but it's darker, and it looks like that effect that the original design was going for. Now we can copy this entire frame into our project file and take it from there. You can easily copy designs between different files, select the frame and use a very standard copy paste shortcut of Control C, Control V for paste. Go to your file, and then paste the design. I think these chat bubbles will be nice to use in our hero shot. Let's copy it in our document and see how are we going to use them. I think I'll grab a couple of smaller ones and sprinkle them around to create a sort of chat experience between these girls. I'll use yellow here because I'm gonna put it directly on the blue background, so blue wouldn't work. And also change the profile photos to the girls. A I came out quite nice, actually. I'm going to add that dashed line. It's enough like this. Too many elements can add to the noise. One thing I don't like, though, is the yellow button. It was nice and prominent before, but now that hero art has yellow in it, the button is fighting for attention and sort of trying to visually connect with the art. The shape doesn't help either. The button is rounded, and those message boxes are rounded, too, so way too much similarity. Changing the color to white should fix this issue. That's much better. Now, the art looks separate and the content on the left seems like its own thing. It was sort of merging before. 57. Chat App homepage design: Part 3: We're back. Finally, let's add the Na Bar, and we're done with our heroes action. Let's create a logo for our fake chat application, and let's give it some original name, something like chat app. We can use Poppins as our talk face and create that similar contrast of thin and thick, just like they have it on their logo. Remember this trick from the contrast lesson, combined thick and thin and bam. You have an interesting element. Let's add some navigation links and the button at the end. Here's another cool Pigma trip. Select all links and in the alignment panel, click tidy up. This will usually distribute objects equally between them. But we can go a step further and set exact margin between the elements right from here. Let's use 30 pixels because that's our default margin of the grid. We need a button. Let's create a button out of one of these links. When we put a button in the Navbar, it's usually best to use the same tile as the nag link. Looks better. Let's use the same 30 pixel margin from the top. I'm pressing out or option key here to see the distances between objects. And we're going to align everything in the navigation bar horizontally in the center. Always check your designs in 100% view because those are the real sizes and dimensions that are going to go on the actual side. Now for the middle section, I'm going to do it a little simpler, just with a headline paragraph and just one screen of our chat app that we already have. I'm going to use exactly their font color. It's what you'd call of black, black, but not as saturated and sharp as a usual black. I'm going to add that black to our palette. It's a good choice for our palette as well because it has some blue inside like a blue hue. You can see that inside the color map. Let's remove the letter spacing because this headline isn't as big and heavy anymore, so we don't need as much tight space. Let's do the same for the paragraph text. I think they're using light version here, but I'm not a fan of thinner paragraph phones because they are sometimes harder to read on lower definition screens. On phones, tablets, and retina display laptops, it's fine, but on desktop screens with less pixel density, they are not going to be as sharp. Do you notice the visual hierarchy they have created here? The paragraph is smaller, thinner and lighter color. I'll do the same with the color. We can just decrease the opacity of our te. And that's enough. 70% is good. I won't bother filling this one out with real text. Let's head to Google and generate some dummy text. There are websites that can do that for us. This is one website, for example. We can specify amount of text we want and it can generate it for us and then copy the text and paste it in our designs. Center and let's snap it to our grid. It's a little t. Let's give it a little more line spacing. That's about right. I'll skip the button and add the mockup of our imaginary chat app here. Now instead of copying this whole thing in our document, I'm actually going to export it as an image and place that image instead. We'll make it easier to work with and we won't overload our page with unnecessary elements. To export anything from Figma, select it and in the properties panel, go to Export and click plus You can pick different file for much. JPG is good for us. This year that says one x, lets you change the size of the export. If it says one x, then it will export in its exact dimensions. If it's two x, then it will double. If your designs are 200 pixels by 300 pixels, the export is going to be 400 by 600 pixels. What's this for is to make our assets looking nice and crisp on HD screens. More about this later, let's not get ahead of our cells, for now one x will do just fine. Let's place our mock up in our designs. As you can see here, they are using this browser bar on it and also a shadow behind the. Let's pass the browser bar, but add a similar shadow to our image. Shadows are under effect. Click plus icon. The first thing is usually the shadow. It added this small shadow. This doesn't look very nice. Click the icon to edit the shadow properties. Let's use our black as the base of our shadow and it has this little blue in it which will make it look more like part of our designs. When you add color with 100% opacity, you get this weird shadow. Never do this. This isn't really a shadow. Figs default 25% is generally the maximum opacity you'd want to use for your shadows. Blur is basically how the shadow spreads, how it feathers out. Play with it so you understand how it works. They're using a heavy blur and low opacity on their shadow. I quite like that and we'll do something similar. X and y is the offset of the shadow, meaning which way the shadow falls. X for horizontal offset and y for vertical. When they are on zero, it falls equally on all four sides. If we add horizontal offset, notice how shadow moves towards the right. If we add a vertical offset, it moves down. Or if you go negative values, then it moves up. Good design practice is to add positive vertical y offset because light most of the time comes from the top, be it outdoors in the sun or indoors the ceiling lights, and if the light comes from the top, then it will cast shadow pointing downwards. This just looks weird. It doesn't even look like a shadow. Often I see websites use no offset at all, and that's not very natural. That means light source is coming directly from the front, like someone is pointing a flash light at an object, not a very common scenario. Adding horizontal offset isn't very common. Some designers do it, but it's not my thing, and I don't think it's a wrong thing to do, but for elements that are part of the interface, like this image, the buttons, cards, and so on. Shadow with only the vertical offset looks the best. Keep x to zero and add some vertical offset only. That looks about right. I'm eyeballing here, not using any particular guidelines with shadows, just looking what looks the best, most natural and nearly unnoticeable. That usually is the best thing for shadows, that it doesn't feel like it's there. Otherwise, it creates extra shapes that our eyes need to digest. They're using rounded shapes on their mockup. It's quite nice. Rounded shapes are usually the nicest sin web design. They feel like finished object rather than unfinished. Of course, strict edges have their benefits as well. Again, no rules with the rounding the corners, but if we match it with the roundness of the shapes within the mockup itself, we'll achieve a more consistent look. And that's quite nice. Let's add those dotted patterns behind it. Using shapes like these dots or other shapes are a good idea. They add an extra level of dimension. All those other benefits we have learned in the overlapping trick because that's what this is overlapping. It doesn't have to be the dots. It can be circles, rectangles, triangles, or any other of shape. But obviously, it has to make sense. Then when we repeat these dots across our pages, we get the benefits of repetition trick. It creates this rhythm of the design just like a beat in a song and ties the whole design together. A. Okay, I'm going to pass the boxes here. I'm not going to do them and go to the next section right away. 58. Chat App homepage design: Part 4: And we're back with the final part four. This here is a call to action section. It's where you directly tell the audience to take some action, sort of summarizing the entire page. It usually has buttons on it or directly the sign up form. They're using the same purple, but with decreased opacity, let's do the same with our blue. It's quite nice. 10% looks quite good. Lock the layer so it doesn't get in the way. I'm actually going to shrink this headline here, so the word small jumps to the next line. It will look better. They're using a white button here, but I'm going to stick to the ghost button. I'm pressing an out or option key here to see the distances between objects. I like their stars rating and a small copy here. This is called social proof. Great idea to include something like this on call to action sections. Makes deciding easier for the users. Okay, we need a star icon. Let's go to flaticon.com and search for a star icon. We can download it for free from there. Icons here are free for personal use, but if you're going to use it somewhere, then you must credit the author or buy their subscription. We need SVG format, which is editable in Figma. We're going to be able to change color if we want to. On sites like Flat ICN, we typically have two file formats in which we can download an icon, PNG and SVG. Whenever possible, you should use the SVG file format for items like icons and Illustrations. Why? For two reasons. First, SVG is a vector based image. This essentially means you can scale the image infinitely. You can enlarge it 1,000 times and it will not lose its quality. It will remain perfectly crisp. The file size won't increase with a larger image either. So it's the ideal file format for web design, both for image loading and quality. PNG, on the other hand, is a pixel based format so you can't scale it up. Whatever the original image size is, that's what you're stuck with. That's why the PNG download option here offers different sizes, whereas SVG doesn't need to. The second reason why SVG is batter is due to its editing capabilities. An SBG icon can be edited inside Figma like a regular shape. This is useful because we often want to change colors to use our custom color palette for the project. PNG is not editable, so you're stuck with the color it came with. In this case, I want to change the color of the star and use the yellow color from our project. Unfortunately, SVIGi Download is a premium feature on flat icon. This is usually the case with large icon provider sites like this. However, we do have the option to edit the color directly on the site and download it in PNG with our custom color. You just need to register for a free account. Once you log in, you'll be able to edit the color, paste in the hex code of our custom color. And download the icon in PNG for free. Besides flat Con, we have other options from which we can download free icons. Sometimes even free SPG formats are available. I have linked such sites on the resources page so you can find them there. One such option is Google's Material icons. Look for the star. Enable this toggle to make it filled. Change the style to rounded and download in SVG. We can change the size and color and Figma, no need to do it here. You can also just copy it from here and then paste it in Figma using Control V on PC and Command V on Mac. Remember that tidy up trick? No, I can adjust that spacing from here. All right, looking sharp. Instead of a desk with computers, I'm actually going to use a photo here. Maybe photo of a team, office or a small business owner to represent what the headline says. This photo looks quite good, sort of like a startup with a team that works in different places, so they need a good communication platform. I'm just playing around here to see what works. We could put this image like a split section background like we've done in other assignments, but also I can stick with the same style because consistency will be rewarded and do something like this and at those dots behind the image. A That looks pretty good, actually. The footer and that's it. We're close to the finish line. Let's copy the logo and give it a blue collar. There is some microcopy underneath the logo. We can do the same. Their footer is divided into four columns. We can easily arrange a similar layout for us using our own layout grid. We have 12 columns in our grid. If we divide it into four, we're going to get three point blocks. Given the small links, three columns might be too much, so let's use two columns for each block. Splitting it into six blocks will even fit more in one line. That's the beauty of using 12 point grid. It divides into many flexible variations. I'm going to leave these two columns empty, having this gap between footer links and logo often looks very good. It creates this visual separation between the two, which makes sense because the logo is different than the footer links. All right, now let's fill out these links with some random text. In places like this, it's always best to use realistic example text rather than Loren Epsom dummy text, because depending on the text length, you might end up needing to rearrange the layout a little. Also, repeating the same text just looks ugly. Let's get the social icons and other links on the footer. We've already done a lot. Let's just add the copyright tax, and that's all. H. There, now, let's just fix those empty gaps. I'm using 180 pixels as a margin. There is no rule with this, really, it's based on how it looks, but the important part is to be consistent when you can. For example, I use 90 pixel margin on the mid section, so I'm going to try to reuse the same value with other margins. But sometimes it's too much or not enough. In such cases, I'll try to use multiples of the same value, either half it or double it, hence the 180 pixels. If that's not right, then I'll use a new margin. Sometimes we might need to be a little inconsistent as long as it feels right. Now, let's trim the excess space on the bottom. Don't forget to hold control or command while you do this, or it might distort the content inside. Once you're done, select the frame and press the play icon. We can now see the presentation of our design. Looking great. A quick note about the preview mode, sometimes you might have your preview looking like this, which is you're not seeing the whole frame. If this happens to you, that means that your screen on your computer is not as wide as the frame, and our frame size is 144 pixels, right? So if your screen is shorter, smaller than that, usually that happens with laptops. Then it's not going to show everything on the screen. But there is a solution to this just hover on the top here, the bar will appear and go to the options and then change from here, which is 100% now, change it to fit with. And once you do that, then it will fit the frame will fit your screen, no matter the size of your screen. Now, in rare occasions, another issue can happen, this might not help. And that is if you have selected something different from the prototype settings. So to go to the prototype settings, don't have any frame or any layer selected. Click on the canvas so that everything is diselected and then go to prototype. And from the prototype, make sure that none is selected from the device drop down. If there is like iPhone or a custom fit or something like that, it will have weird iPhone screen or something weird will be showing here in the preview mode. So make sure that none is selected. And when going to the preview, and if you have some other layers here, I have some other layers and frames on the page. So it might try to preview some other frame, make sure to select your desktop frame and then click the preview, and then it will preview the correct frame. And that's it. By choosing an excellent inspiration, we have designed and created a fabulous looking homepage. This is the power of good inspiration. Hope you have enjoyed the process. I'm very keen on seeing your submission. In the upcoming part of this course, we're going to build this exact page in Webflow. Stick around. 59. PART 3: WEB DEVELOPMENT (WEBFLOW): we're going to take a break from designed. For now. There are more lessons coming up on design and a full client project from start to finish. But we'll get to that. Now. Let's have some fun learning how to actually build websites in these part of the course. You're gonna learn how to develop websites using wreck flow, and we're going to do that by taking the home page that we just designed and building it inside wet flow, So let's go. 60. Web Basics: Webflow designer: You've already seen this before, but let's do a quick recap of what's what in iFlow. If this is in your initial screen, you might be on other pages. So just click back to the dashboard. I'll be working in the free account as well to make sure you get the same experience. There are a whole bunch of free and paid templates, but we're not in business for those, so we're going to select a blank site. This is called the designer. This is where all the magic happens in Webflow. Our page as we design, it's going to go on this white canvas, and we'll be able to interact with elements directly on this canvas. On the left toolbar we have our controls to go back to the dashboard, project settings or the editor. Underneath that, we have three important panels. First one is the elements panel. That's how we add new elements on the page. Then we have the pages panel. That's going to show all the pages within our website. From here, we can add new pages and manage their settings and so on. On a free plan, we only get two static pages, but we do get a bit more CMS pages. And then we have the navigators panel, which is sort of like the layers panel in Figma, but not exactly the same because the web works a little different than the design interface tools like Figma. You don't need to worry about other stuff on the left toolbar for now. We'll get to them when we need to. In the center, you have these different device views. This is where we make our website responsive and optimize it for different devices to have a modern website that looks great on any screen and any device. We're also able to resize the screen for each device like mobile, for example, and optimize to make sure it looks great on all sorts of mobile devices, not just one. As you resize it, you can see that in different widths, it shows what popular devices are sort of using that particular width. And to publish the site on Webflow, we can do that from here. For free, you can publish it on Webflow's domain. For a custom domain, we'll need to add a hosting plan. And on the right side, we have our styles panel. This is where we manipulate and style every single element on the page. You can recognize this. It's sort of similar to FigmasPperties panel on the same side. Just like Figma, it's addit whatever is currently selected. There are many similar properties like size, topography, font name, sizes, and so on and effects like blurring and shadows. There are more tabs on the site, but we don't have to worry about them for now. We'll go over it when we actually need to. And that's it. That's a brief intro of the Webflow design. 61. Web Basics: HTML and CSS: A when the first webpage ever went live in 1991, this is how it looked like. It's still live, if you want to check it out. This first webpage was made by the inventor of Worldwide Web, Tim Berners Lee in Cern which is a nuclear research laboratory in Switzerland, surprisingly not really related to computers. I've actually been to CERN. I was on this business trip from my job at a time, and I was taken to this exact room where the Worldwide worldwide web was created by Tim Berners Lee, and the room is completely unassuming. You wouldn't really think that anything creative came out of it. It just looks like a regular chemistry or, like, a physics lab of a regular high school. And I was told this story. Apparently, when Tim submitted his paper about Worldwide Web, his supervisor who wrote down on the paper when he was reviewing saying vague but interesting. I'm sure at the time, none of them had any idea what the websites and the Internet would end up looking. Today, the very first webpage was made using HTML, and until today, it's still what every website is made of. As we learn Webflow, we actually need to learn how HTML and CSS work. We're not going to learn how to code, but we will learn the logic behind because everything in Webflow is sort of based on that logic. HTML is simply the content of the webpage, like a headline, paragraph of text or image. And each piece of this content has a label to it, which tells the browser if this is the headline, a paragraph, a link or something else. They call this a tag. HTML on its own, it's not very pretty. It has a vertical layout. Everything is stacked one after another. You can't really overlap elements or create grids and column layouts. It's sort of like a text document where all the content flows in a vertical direction one after the other. Web design back then didn't really exist. There was not much designing involved, but then came CSS, and website started to have whole different. CSS is the style of the website. It's where we define how each of those HTM elements should look like. What size they should be, what font, what color, how they should be laid out on the page, if they should have any hover interactions and so on. A webpage with just HTML looks like a skeleton, and after applying CSS to it, it's like an entire person. In Webflow, we add HTM elements from the elements panel. And if we take a look at the codex board, we will see that two HTML elements have been added there too, H one tag for the headline and P tag for the paragraph. These are default unstyled HTML elements. If you check the CSS tab, you'll see it's empty. We haven't added any style to our elements yet. The style is added from the right on the Styles panel. We haven't written any code or written any CSS ourselves, but Webflow has done this for us. Now, CSS tab has some style information in it. It's basically an instruction that says, If an element has a name heading, make it red color and 58 pixels big. That's simple. 62. Web Basics: The Box model: Before we get on with building our page, first I want to explain the structure of a web page. Every web page is structured in a so called box model for the HTM, every element is in reality a box. No matter their final shape and content, they all start as a box. And all of those boxes actually sit inside other big boxes, all the way down to the final big box where everything else sits. And that's our web page. When we were designing our navigation bar in Figma, we simply dragged our links exactly where we wanted them to be placed. But Figma and other design tools use a different model. The layer model, you can think of it as paper shelves in Figma. Every new object sits on top of existing object, not above it, but right on top of it. It basically creates a new layer of space and is the king and only citizen of that space. If something else is directly underneath it, the lower guy won't be visible at all until we actually push it up in the layer panel. Exactly what happens when you place papers on top of each other. Now, web pages are more like drawer organizers. When a drawer is divided into boxes, which on their own can be divided into even smaller boxes in drawers, things don't usually go on top of each other. They go either below or next to each other. When we build our nap bar using HTML, we first are going to take an empty box and put our logo and link boxes in it. The bigger box is called parent and smaller boxes inside are called children. And those children boxes are each other's siblings, just the way you'd expect it. By default, they're going to come one after the other because that's how each animal works without CSS. Then we're going to apply a CSS style. So all these boxes are arranged horizontally. Then using other CSS properties and a couple more boxes, we can distribute them in exactly the way we want. Don't worry, you'll get the hang of this in no time. If you ever get stuck trying to figure out how to make something work, the solution is most likely another box. Webflow is kind enough to show us boundaries of our boxes. When you click on any element, it will show you the full box that this element occupies. As you can see, even though our headline is short, the box stretches on the entire page. That's the default behavior of most HTML boxes without any CSS applied to it. And by default, all of these boxes come one after another unless you put them inside another box. 63. Webflow: Element Hierarchy: When we build our page in Webflow, we're going to have lots of boxes. Many of the smaller boxes will sit inside other bigger boxes, and those bigger boxes will be sitting in even bigger boxes. Do not get lost in this jungle of boxes. Webflow has a Navigator panel, which you can find here. This Navigator is similar to Figma's Layers panel. Everything that we add to our page, we can find it here. Even invisible objects, elements in this panel are arranged with the box model logic. The first top level box that holds everything inside is called the body. Nothing goes next to it or outside of it, everything goes inside. It's the great, great, great grandfather of all the children boxes. That's why you get this light indentation to represent the hierarchy of elements and to show what sits inside what box we call this nesting. The heading and paragraph are nested inside the body. Reflow shows us this hierarchy with lines two. If we take an empty box and put our heading inside, the line will appear. This line is a helpful guide to easily identify the hierarchy of elements. Hierarchy is a big thing here, many of the properties pass down from the parent to the children. This is called inheritance. The child will inherit the properties from the parent, just like real life. For example, if I change the font color to red on the parent, any text element that I drop inside the parent will be read as well, all of them. Regardless of the type of text I drop it, headline and paragraph, bullet point or whatnot. That's until I override. We don't have to be exact copies of our parents. Right. If we decide to be different, then we can, we can directly change the text style on the child element. That's called overriding. Not all properties can be inherited. Mainly, this applies to textiles. Webflow can show us if there is any inheritance happening on any element. Do you see how some of the styles are highlighted in orange? It means that the style is being inherited and if you click on it, it will show you from where it's being inherited. For example, on the color, it's as de block, referring to that parent box we just edited. Later I explain what's a deblock. The style is highlighted in blue color instead. That means we have directly styled that property and it will override any styles from the parent. You don't need to understand this fully for now. You'll get a hang of it as we practiced and build our page. The second visual representation of the hierarchy of elements is visible on the bottom Navigator Bar. It shows that heading is inside block, which is inside the body. These are clickable and you can select any of the parents. But it doesn't show children or the siblings, only the parents all the way down to the body. For a complete picture, navigator panel is a better use. Same of course applies to the navigator panel. If we select an element in the panel just like Figma, we will be editing the exact element in Figma. When we move elements up and down in layers panel, the position of the element doesn't change, it just goes behind or in front of some other element. If they're overlapping, if they're not overlapping, then nothing really happens visually. But in Webflow, the position changes. Moving paragraph element in the navigator changes the order of high weights displayed on the canvas. We can also do this moving on the right on the canvas, you'll notice that Navigator panel updates accordingly. We can also drag elements inside boxes in the Navigator panel and move the entire boxes which will move all the trinle children elements with it. Okay, This web structure might feel a little confusing in the beginning, but don't worry quickly, You'll get used to it. 64. Webflow: Section, Container, Div Block: Alright, in this section, we're going to learn by doing instead of learning Webflow feature by feature, we're going to actually learn it by building our home page that we have already designed, and little by little, one step at a time, step by step ferociously. Remember, we're going to learn all the ins and outs of Webflow only as we need it. I'm not going to cover any feature until we actually come to a point where we actually need it to use it while we are doing and building our homepage. So what we're going to do is take that design that we have made, and then each section by section, we're going to go over it and kind of recreate and rebuild it inside Webflow. And let's start simple with our content on the left side on the hero section. Before you start building something in Webflow, first, you have to plan in your head what sort of layout is going to be needed. So what do we have here? We have a blue background. In figma, we use a rectangle for that. In Webflow, we don't have such things as rectangle. We have boxes instead. There are three types of empty boxes in Webflow. You can find them right here in the Elements panel. Elements panel is where Webflow keeps all the new elements we need. It's divided in need categories like typography, where you have a heading, paragraph, and all text related elements. So we have three empty boxes for our general use section, container, and a Dive block. A section is exactly what it says. It's an empty box where we can organize a section of our page, which is exactly how we have our designs organized, don't we? We have a hero section, then several sections below. Finally, the footer section. Those are all sections, and that's how we're going to organize inside Webflow as well. Container is where we put the content of our page. In our designs, it's everything we have put in the boundaries of our grid. The most popular box in HTML is a DV block, short for division block. It's an empty box and most useful most basic building blocks of a webpage. It's under basic category. Which one of these do we need first? Obviously, a section. So let's add a new section to our page. Section and DE block are identical elements. They work exactly in the same way. So everything I describe for a section right now applies to the DL block too. So a section or a D block is an empty box. There's nothing in it. This box doesn't actually have a height until we give it some height. Webflow is showing us a little bit of height temporarily so we can notice it and don't drive ourselves crazy looking for it. It's a spreche box, too. When you place other elements inside it, it will grow to match the height of its child element. Let's give it a color so we can better understand what happens to it. We can do that from background. The basic things inside, the Snile panel is very similar to Figmas properties panel, so very easily you can work with it. Now, if we enter the preview, the section disappears. Why is that? Because it's empty and has zero pixel height. It's invisible. Webflow just gives it a temporary height just inside the net designer, so to help us to see it. If we drag an image element inside, it's going to stretch from zero pixels to the exact height of that image element that we just put inside. Now the whole thing is visible in the preview mode as well because it's not zero pixel height anymore. If you put something smaller inside like a small tag, then it's going to shrink. But it didn't actually shrink. It was zero pixels. It just shrink only inside the designer because it had this temporary height. Hope you're getting a hang of it. I remember this strange behavior was a little confusing for me in the beginning. So I wanted to clarify from the start so you understand and you also understand the basic logic of how the structure is formed on the website. Give it a go yourself right now, and then we will continue styling our section. 65. Webflow: Size Settings: We're back. Now, let's give this div block the same blue color from our designs. To grab the exact blue color from Figma, select the color box or a background rectangle and then copy the code from the field color. If you can't select the background rectangle, don't forget to check. Maybe you have locked the layer because I know this is what I've done inside the tutorial, so you might have locked it as well. This is a hex code, which we can copy and use it on Webflow, and it's going to bring exactly the same identical color there as well. Inside Webflow, go to Styles panel and scroll down to find a property called backgrounds. There's the same field for the hex code so just paste your code in there. Now we need to give our div block a similar size as our rectangle Figma, and this is where things work a little different compared to Figma. The reason is that websites are responsive. They can grow and shrink based on screen sizes. In Figma, everything has a fixed position and fixed size regardless of the screen or content. To start with, we do have similar controls like we do it in Figma. You have width and height where you can put exact values as you would put in Figma. We can't drag and resize a rectangle from the canvas like we do in Figma. We have to input values in these boxes. We can put exact pixel values by grabbing them right from Figma. For some elements, this might be a fine thing to do, but for the background box, it isn't because it's not responsive. If my screen is wider than that value, then I get this white gap because I've made the blue box only 1,400 pixels wide, whereas my screen is wider than that. And if the screen is smaller, it's still no good because then the box overflows. You see those blue lines, those are the boundaries of the blue box, and they are going off the page. So often exact pixel values aren't any good in work flow. Okay, then what is a good option? If you press on this Px value here, it will show you all the units you can input in these fields. After pixels, we have a percentage. With percentages, we now enter responsive web. It's a responsive value and response to the size of the parent. If we put 50% width of our box, it's going to take 50% of its parent element. And what's the parent of this element? If we check that on the navigator, we can see that the body is the parent. The body of any website is responsive and its size by the browser width. This means 50% of the body is 50% of the browser. So if we shrink the browser width, and we can do that from here by dragging. We can see that our blue box automatically shrinks as the body shrinks and there is no horizontal scroll. VH and VW are important and very useful units. They stand for viewport height and viewport width. Viewport is same as the browser size. For example, as we drag this handle here, we can see the change in viewport width or the browser width shown directly in pixels. So that would be viewport width. Similarly, this is the viewport height. These units work in percentage, so 100 VW is 100% of viewport width, and 50 VH is 50% of the viewport height. Let's drop another box inside, so we can see this in practice better. I yellow box is sitting inside the blue box. If we use percentage values, the yellow box will resize relative to the blue box because it's the parent. So 50% and 100%. So 100% height covers 100% of the blue box height, which has its own value of 600 pixels. Now look what happens if we put 100 VH instead. It covers the entire visible screen. It even goes outside of the parents borders. The same thing applies to VW. 100% makes it stretch until the edges of the parent element. But 100 VW makes it stretch all the way to fill the entire width of the visible screen. To note, we usually use these values to their corresponding field, so VW in the width field and VH for the height field. Although that doesn't mean you cannot switch them around. Usually, there is no need, but there are some rare cases that you might want to do that. The last unit is auto, meaning auto sizing. This is default value and width and height. When the side is set to auto in the height, the size of the element will change based on how much content is inside. For example, let's set the height to auto on our blue box. It disappeared because it's empty and when it's empty and it's auto, that means it has zero pixel height. Let's put some elements inside. To add something new inside an existing element, have that element selected and Webflow will drop it inside when you click something from the new elements panel. If I have a section selected, it will drop inside, but if you don't want it inside any other element, then select body, so it will drop outside on the general canvas. If you can also drag elements directly on the canvas from the layers panel, not the layers panel, but the elements panel. But that's not usually what I do. I like the other way, but up to you which one you want to prefer if you want to drag, you drag, if you want to just click, click. And so as you add more elements inside the div block, it will stretch. If we set a specific pixel height, then the div block will abide to that height no matter how much things you stuff inside. The elements will just overflow from it just like your garbage bin when you're too lazy to take it out. As for the do on the width, the box will stretch to the edges of its parent. In this case, the full page because the parent element is the body. Finally, we have minimums and maximums. These rules work in conjunction with regular width and height. It's an extra rule to set floors and ceilings on our elements. For example, if we set the height to auto, the blue box will stretch based on the content inside. But if we set a maximum height, then it will stretch only until that point. Minimums and maximums are super useful in many different scenarios. For example, if we have a card element like this where we want to put some content, it can be information, form, pricing, whatever. We could set an exact height on it to match our content, just like the way we would do it in Figma. But because web is responsive, the size of the content can change from screen to screen, and then we're going to get something like this. A better way is to use minimum height instead of the exact height in this case. If we put minimum 400 pixels, we'll make sure that the box doesn't shrink because there is not enough content inside, and we also make sure it grows when content grows with it. Same goes for the width. Setting 400 pixels look good here, but if we shrink it, we get the overflow and it's going to stubbornly maintain as 400 pixels. A better option is to set 400 maximum width. This means it will not stretch more than 400 pixels no matter what, but it will shrink below that if there is a necessity. So let's see now what value and units do we need to enter to make that box look like our design? For the width, it's obvious, right? We're going to go with Auto because we want it to stretch from edge to edge. The hundred percent width would bring us the same result in this case. Often in web design, there are multiple ways to achieve the intended results. Sometimes they are equally good, but sometimes one might be slightly more superior. With practice and some failures, you'll soon learn which is better. In this case, Auto is better because it's default and it means no extra code. Here is a Webflow tip to return any property to its default value, hold out or option key, and click on the property. It will clear all the changes that you have made and return to the default values. It's a very handy shortcut. Another tip, if the property is in blue, it means you have changed it. When you're facing some sort of a big, trying to figure why something isn't acting in a way it should, you can easily scan this to identify what properties are applied and what could be contributing to the issue. When it's orange like this, it means we have changed the develop values, although not on this element directly, but on one of the parents. In this case, on the body element. In other words, it's being inherited from the body element. Again, this is a great way to identify where are some styles coming from. Okay, now for the height, based on what we have learned, we know that we cannot use an exact value like Figma because when screen expands or shrinks onto mobile, it will not adopt. So how can we make it adaptable? We have two solid options. First, we can keep it auto and let the content define its size. And second, we can use VH, the viewport height. Since we didn't put our content yet, let's try the second option, 100 VH, meaning 100% of a visible screen. This means no matter how much we shrink or expand our browser, the box will adapt instantly to match the visible screen. But if our browser is too small, then sometimes blue box might not be enough for our content, and content will overflow from the box. So why is this happening? Because the blue box has a defined height. It doesn't stretch with content, and that defined height is only as tall as the browser window. So how can we fix this? We know that to have the parent box stretched to accommodate its content, we need to use auto sizing, right? This way, we make sure the blue box grows with content, and the 100 VH value we can put as a minimum height. Now, the blue box will be at least same height as the browser, but not smaller than its content. That's a perfect arrangement for us. So to recap, we have pixel values to input exact fixed dimensions. We have percentage values to size and element relative to its parent. We have VH and VW to size elements relative to the browser size, and we have minimums and maximums to set floors and ceilings on elements. 66. Webflow: Padding & Margins: Let's continue with our design and add the content to the hero section. We need a heading, a paragraph and buttons. All of these we can add from Elements panel. Make sure that they are inside that blue section. Remember why we put them inside, right? Because web works on the box model. Everything's going to go inside something. Okay, now let's put our copy inside these text elements. Just double click the element on the canvas and start typing or copy paste from the design file. I'll explain in a bit why there is this new white gap on top of the blue box. New elements in Webflow are usually jammed one after another and stuck to the edges of their apparent. This is how HTML behaves by default. But that's not how we want things. We want to move them around and create spacing between them. So how do we do that? In Figma, that's easy. You just drag the element where you want it. But on web pages, that's not possible. These elements can actually be moved or dragged around wherever you want on the page. But CSS has a special trick for this. It's called padding and margins. We can find that under spacing category on the properties panel. Padding adds space inside the element and margin adds space outside of it. Let's take our button, for example. By default, Webflow has applied some padding to when you hover over the padding property, it highlights the space on the bottom so you can see it visually. Values in this case are set in pixels, nine pixels on top and bottom and 15 on the sides. You can increase or decrease either by dragging the handles or directly inputting the value like 100 pixels. Here's a protein. If you hold out or option key while you drag the handle, it will automatically apply the same value on the other side. So top and bottom together or left and right together. And if you hold shift, then it will apply same value to all four sides at the same time. Similarly on the margin, only difference is that space is being applied on the outside, so we can pull our elements wherever we want them to. And so this way, we can add extra space on either of the four sides of that element, which will then kind of push them from their original place. Just like in sizes, we have all other units besides pixels, although rarely we would use other units for padding and margin. Pixel units are usually the way to go. So that white space on top of the blue box is actually the margin from our heading. Just like the bottom, Webflow adds a default margins on many of the elements. If something is acting oddly, check the styles panel for default values. They usually hold the clues. In our case, let's apply margins and paddings to match our designs. We already know these values. Inside Fig must select the object and hold out or option key and move your mouse around to see distances between the selectan and other objects. For example, we can see that the content is 140 pixels from the left edge of the frame, and we have 209 pixels on the top. How do you use this information? We can apply the same padding to our blue box. Now, depending on the browser height or screen, this 290 pixel might not work at all. On a smaller browser height, these 290 pixels is too much. The web isn't static like Figma, and we need to think of values that will be responsive. So what do we want to achieve here? We want this content to appear more or less in the center, don't we? Regardless of the screen size, just like we did in our designs. If we use exact pixel values, it's going to look very different from screen to screen. On shorter browsers, the content is going to look like it's synching on the bottom, but on the taller browsers, it might be too little and the content might look like it's too much on the top. So instead, we can use VH viewport height unit. This will automatically calculate the padding, and if screen size shrinks or grows, the padding will shrink and grow with it. Sometimes it will need 20 VH, but sometimes something else. It depends on the content that we have, but in this case, something like that. Now, if we shrink the screen a little too much, you can see that content is being squeezed on the bottom. That's because we haven't added the bottom padding. When screen is large, it's floating on the top, and there is space on the bottom because we gave our blue box a value of 100 VH, stretching it to fill the entire visible screen. But when that visible screen is really short, then there is no space left on the bottom. Same thing we can do here, so we can add the same exact VH value to the bottom padding. This will make sure we have good spacing both on top and the bottom, no matter how we shrink or grow the browser. Okay, now let's add margins between the objects. And let's remove that extra 20 pixel margin that's on top of the heading because it's adding to the already existing padding that's on the hero section. This layout arrangement seems like we're on the right path. We check vertical responsiveness, but what happens if we check this on different widths? This 140 pixel left padding doesn't seem like a good idea anymore. It's pushing content too much to the right. We could fix this and set individual paddings for each screen size or maybe even use responsive unit for the padding like VW for the viewport width. But the most common way and the best way and best solution for this to use a container. In our designs, most of the elements are sitting inside the limits of our grid. This gives us an invisible container which is centered in the middle and all those elements are sitting inside. This is how most websites are laid out as well. It has a center layout and they place everything inside this layout unless it's background images or some unique elements. We can easily achieve this by adding a container from the elements panel. We're going to place the container inside the section and we will move rest of the elements inside that container. We do this by dragging them inside one by one. You can do this either on the navigator panel or the canvas. Same result, both works. My usual preference is to do it on the navigator because I can see better what's going on. We don't need the left padding from the section anymore, so we can get rid of that. If you check this on different screens, you'll see that our content is neatly centered right in the middle. Even on larger screens, and that's all due to the container. Let me give you an idea of what happens without the container. I'm just going to give the container a different background colors so you can clearly see its boundaries. If you place a bunch of paragraphs outside of the container, you'll see that they are stretching edge to edge. Even on the larger screens, this doesn't make a good layout. The text is stretched too wide and that makes for a bad reading experience. But as you move the paragraphs inside the container, you get them neatly centered. That's the power of a container and it's the most basic building block of any website. Weblos default container is in fact a good old deblock just like a section, but it has two predefined styles that makes it work like a container. First, auto margins on the sides. All this does is that it centers the container in the middle of the page. Auto margins work like a spring that pushes the element from the sides to keep it centered. From a technical point of view, it calculates the amount of empty space left by the element and fills that empty space with margins. If you remove any of these auto margins, then the container will lose that centering power and it will hug one of the edges depending on which auto margin you remove. This trick to apply auto margins is a good method to use when you need to center something. Webflow even has a small shortcut here for centering, which does just that applies auto margins on sides. But auto margins are not enough to center something. The element needs to have a width, and that's the second property that the container has. Maximum width in this case. This tells the Dv lock to not stretch beyond this width, but it allows to shrink making it nice and responsive. Without this width, we instantly lose that container quality and now this element stretches edge to edge just like most other elements. It still has auto margins on the sides, but now they are useless because auto margins fill the empty space left from the element. If there is no empty space, then there is no space they can occupy. This container width is editable. Depending on a website, we might want it narrower or wider. By the way, the Figma trick of increasing values in increments of ten works in Webflow two. Hold shift while pressing up or down arrows to increase or decrease these values in increments of ten. In our case, our container width is actually different because our container is our grid, which has a set width inside Figma and we can measure the exact width of our grid by drawing a rectangle over it and checking the final width of that rectangle. It's 1,160 pixels. We can apply this width to the container inside Webflow. Depending on the screen we are viewing this, the container will either be centered or hugging the edges. In my case, it's the latter. Why? Because 1,160 is more than the current canvas width, which is 992 pixels. There is no leftover space for on margins to kick in. Although on wider screens, the center layout is there. Fix the issue on screens that are narrower than our container, we need to manually add some space on the sides. Now, because we're already using auto margins for our container box, we can't really add extra margin values anymore, but we can do something else. We can add padding either on the container or on the parents section. This will push the content away from the edges. Whether you add padding to the container or the parents section doesn't matter that much. Both of these options are equally fine. I personally have a habit of adding padding to the parent, so let's do that. This gives us a centered layout that is responsive and nicely adjust to all screens. Except maybe on the smallest mobile screen, the padding value we set is too high, so we would adjust and use something smaller here. But we're not going to do that right now. I have an entire section on responsive design, and we're going to fix our web page on all of these smaller screens and devices. Leave them as they are for now, even if they look broken. Just work on the base desktop breakpoint. It's the one with the star icon on it. In fact, don't touch these larger breakpoints either. We don't need it and if you add it, you won't be able to get rid of it afterwards. We've covered spacing on the web. We have padding which adds spacing inside the element, margin that adds spacing outside of the element, and we've covered a container, which is a basic building block of a web page. It neatly centers the content of our page on larger displays. 67. Webflow: Web Typography: Now let's style the text. Font styles are applied from here, which you are quite familiar with. First thing we need to do is to choose font. But unlike Figma here, we have limited selection of fonts. Our typefaces, pop ins and Roboto aren't listed. This means we need to add these fonts from project settings. Project settings is a different place from the designer, and we can access font settings of this project from this link. Or from the Hamburger menu, go to the project settings and then go under the font tab. Webflow gives us three options to add phons. First, Google Phones, which lists all the Google phones and to add them, we have to select and then add them one by one. We cannot add all of them at the same time. Also, Adobe phones or typekit in a similar way. This, as I mentioned in the typography lesson needs a subscription to Adobe's Creative Cloud. Once you have that subscription, then you can connect this with your account on Webflow, and then you can pull fonts from there. As we can manually add custom phones just by uploading them. In our case, we need Google phones, so we're just going to find pop ins. And once you find them, you select it, and you'll be asked which variants you want to include. These numbers are font weights. CSS uses numerical values to represent different font weights instead of naming. And this is how it's commonly mapped. You're going to have to manually match each font weight with one of these numbers. To find this chart, you can just Google CSS font weights. Or you can also check your specific font inside Google fonts and see how the numbers and names map with each other. Let's check what other phone weights we are using. So we have 600, 500 and normal for pop ins, and we have normal and 500 for Roboto. We could, of course, add all the weight variation, but it's a good practice to not add to add them because Webflow has to then load them and sort of upload these fonts to the website, and this is going to add extra time to the page loading. Italics are separate versions for each weight, as you can see, we haven't used any italics in our design, but we should still edit for regular and bold weights. And then, it shows here what fonts and font styles we have added to our project. Now, the same thing for Roboto. Let's also include bold 700. It's an important weight for paragraph text, even if we haven't used it yet. In case if you still had the designer open, it's not going to show the new phones right away, so refresh the designer. And there now we have pop ins and Roboto inside. You'll see that the weights that we have added they are inside and enable, but those that we haven't added are disabled. Okay, so let's style our text. Sema build was our heading, regular for the paragraph and medium for the button. Now for the sizes and line heights. Phone size for our heading is 75 pixels. Webflow doesn't automatically adjust line height to defaults. It inherits values from the parent elements, so we have to end it manually. And now we can do the same thing for the paragraph and the button text. When line height is set to auto, you can find the actual pixel value by clicking inside the field, and that will reveal the current line height. Or you can just slightly edit the value by pressing up or down with your arrow key and that will switch it to the pixel values. Let's change the colors. This is quite straightforward. Just make sure to not confuse these two colors. One is phone color and down below is a background color. We want to change the color in the typography section, but the background color for the button. Webflow doesn't take percentage unit for letter spacing, but guess what? We can just do the math. The percentage is relative to the font size. So it's negative to percent of the font size which is 75 pixels, making the letter spacing negative 1.5 pixels. By the way, the same goes for the line height. Percentage value is relative to the font size. 100% line height would be exactly the same as the font size, and 200% would be twice the font size. You're also able to do the reverse math and convert line height from pixels to percentage. I hope you paid attention in your math class. And that's our typography controls. There are other things we can do with typography, but we will leave those for later. So to recap, adding fonts into Webflow projects happens from the project settings. We can easily add Google phones directly from the drop down. We have to choose specific font weights that we need. These font weights are represented in numbers which we can either look up online or find inside Figma under code Tab. Then we have line heights that we can grab the exact value of line heights again from the code tab. 68. Webflow: Buttons & Links: This video, we're going to cover buttons and links. You'll find two types of buttons in Elements panel. And you'll also find two types of links. This duality got me a little confused in the beginning and I had trouble to understand which one to use and where, let's clarify why there are two links and two buttons. Let's start with links. Link Block is a regular day block except it can be linked. You can put anything inside the link block and the whole thing will be clickable. The text link on the other hand is just that a text link. You can't put anything inside it. To link the links, we select the link and click on the setting stab. This is where we can update link settings. First one is URL, where we can type in the exact destination. Next, we have pages. This is where we can link to other pages in our website, and this is exactly the option we would use if these links weren't fake and we actually had other pages. Right now, it only shows one page, home, that's where we are. Next, we have a page section. This is when you link to a specific section on the same page or even on another page. Right now it's empty. There is one extra thing we need to do to be able to link to a section. We'll get to that at some point. And last two are email and phone links for email addresses and phone numbers. Email link will open up a default email client that user has set on their computer, for example, like Outlook or Gmail, and it will open the new mail window with email address and subject line prefilled with the values that we have put there. In my case, it opened up a GML window because that's what I have set as my default email client on my computer. The phone number is for mobile devices, so the person looking at the site on their mobile device can click a link directly to call without needing to copy and type in the digits. On a computer, this is mostly useless. You'll get the error message sometimes. Now for the buttons, we have two types, a regular button and a Form button. The form button can be style just like a regular button, but it's linked only to the form and submits the form when clicked. The regular button on the other hand works just like a text link. It has the same link settings, and just like a text link, we cannot place other elements inside. This means you can create buttons from text links. You can also create buttons from Link blocks, and if you want to create a button that has an icon inside or an extra line of text, then link blocks are exactly what you'll need to use. If you ever find yourself lost what each element does, use a more info pop up from the elements panel. Each element has a little question mark on top. Click on it to get a quick explanation what this element does. So back to our button, let's edit the button shape. Our button in Figma has a specific size. It's 168 pixels wide and 50 pixels high. We can use these exact values, but you'll see that using exact width is not a good idea. First, let's try to center the text inside our button. How do we do that? Vertical alignment is quite simple. We can simply use the text alignment option and center it. But for the horizontal alignment, we have to use padding so we can push the text around until it looks centered. Now, here's a reason why setting an exact width is a bad idea. If at some point we decide to change text and it's something longer, that button doesn't adjust and text has to overflow. A better way is to use the pedding value again. We can grab that padding value right from our designs. Spacing on the left and right is 48 pixels. We can use these values for our button pedding. Remove the width and add 48 pixel padding on both sides. This will make our button nonfix and it will adapt to the size of the text. And lastly, the rounded corners. This can be changed inside the border section under radios option. Just like we did in Figma, we can just increase this until button becomes rounded completely. So to recap, we have two buttons, regular and Form button. Form button can only be used inside a form, and regular button is used for linking to other pages, actions on the page, email, links, phone links, et cetera. We have two types of links, text links and link blocks. Link blocks are just like DIV blocks, empty boxes that can nest many other elements inside, even other DVblogs, but it can act just like a regular link. As for the text links, they can't nest anything inside and they work just like regular text. 69. Webflow: CSS Classes: Let's now add our second button. To save time on styling, we can duplicate our existing white button. You can right click and then duplicate or use a Control C, Control V, regular shortcut or Command C, Command V for the Mac. When you do this, two funny things will happen that you don't expect. First, instead of pasting it underneath like most other elements behave, it is placed next to it. This behavior is happening because of a default display style that is applied to buttons. We'll cover this in upcoming lesson. In this lesson, we're going to cover the second funny behavior. When we try to make any edits to our second button, everything is being applied to the original button. This is not a bug. On the contrary, it is probably the most powerful feature of CSS and one of the reasons why CSS was created in the first place. This feature is called class. We can have this button on 100 different places on our website, and by changing one instance, we can change every button with the same class. Inside Webflow, this class is managed from here, a place called selector. Selector means what it says. It selects a specific class. There are other things we can select besides classes like a tag, but more about that later when we need it. Blue square saying button is our class. If you select the original button, you'll see that it has the same class. This is why the same CSS properties apply to both. But if we remove this class from the button, then we're going to lose all the changes that we made to it and go back to the default settings or default properties. But don't worry, we can select the class back again, and instantly, all the properties will come back. When you are looking for an existing class, just start typing and Webflow will filter the search results. If the class already exists, then you'll see here and you can select it. If it doesn't exist, then you can create a new class yourself and name it whatever you want. Applying newly created class will do nothing to our button because that class has no CSS properties applied to them. On a newly created class, we can apply new styles, and it won't affect the original button. Classes are removable and can be applied to anything. For example, we take My pretty button class and apply to the original button. Classes can also be duplicated or renamed. You can do that from this tiny drop down. Just rename and hit Enter. Duplicating a class is a good way to save time. Our Ghost button has a lot of same properties as our primary button, so we can duplicate those properties and create a new class from it. And now we can name it whatever we want. We have two buttons with the same properties, but different classes. So when we edit one, the changes won't affect the other. Or any change we need to make to the element, we have to give it a class. We haven't been doing this so far because Webflow actually does it automatically for us. If you select any element that we have already edited, you'll see it has some sort of class applied to it. If you drop a new element, they don't. The selector is empty. The moment you style an element, Webflow will automatically generate a class name for us. You cannot style an element without having a class applied to it. When you look at the navigator, you'll see that elements are named according to their classes. Let's change the name of our div block that holds all our content. Our blue box in reality is a hero section that holds everything inside this section. So let's give it some respect and name it a more appropriate name like hero section. Alright, back to our Ghost button. Now that we have a different class, we can style it as we want. Ghost button is made of same material, but the background fill is transparent and instead it has borders. You can also do this by decreasing the opacity slider, same result. Has completely ghosted out of the page, but text is still there. It's invisible because it's the same color as our background. Let's change the text to white. And now let's add borders. This we can do directly under border section. It says zero pixels. If we increase it to one pixel, the border will show, and then we can change color to white. It looks complicated in the beginning, but it's quite simple. Style shows what sort of border we want to use, solid line, dashes or dots. And those squares show on which side are we adding the border. Right now, the middle square is selected, which means we are adding all four sides. If we select the top square, we can edit the top border only. Finally, we need to add some space between two buttons. What do you think we should use margins or padding? Trick question. We can't use padding. Padding only adds space inside the box. Measure the space in Figma. We use 30 pixel space, so we need to add 30 pixel left margin on the Ghost button or the 30 pixel right margin on the first button. All right, things are looking neat. So to recap in this lesson, we learned how to use CSS classes, which in Webflow is managed through the Styles panel. We learn how to create new classes, how Webflow automatically creates classes for us and how to duplicate classes, so we can reuse existing elements on our page. 70. Webflow: Images: This video, we're going to add our hero image to our page. We'll learn how to export images from Figma how to import them inside Webflow, and how to work with images in Webflow. First, let's export our hero shot from Figma. In Figma, we made this hero graphic with several different elements. We could export them as independent images, but that would be unnecessary work and quite tedious to recreate in Webflow. Instead, we're going to export it as a single image. This way will save time and make sure it looks exactly as we designed it. To export anything from Figma, select the element, and in the properties panel, click plus icon under Export section. And to export several different elements as one image, you have to group them first. Select everything, right click and press group selection or use the shortcut. Then select that newly created group and hit that plus icon under export settings. Let's go through these different export settings. Screen resolutions have improved significantly over the years. Tablets, smartphones, latest premium laptops like MacBook, they use high DPI screens, also known as retina display. High DPI means high dots per inch, and they usually have double the pixel density than common laptop and desktop screens. This makes things look much sharper and crispier, so you don't have those pixelated edges on smaller text or on the edges of the image. To make our images optimized for such screens, this is commonly called retina optimization. We need to double our actual image size. So from this drop down option, we would select two X. And we have several file formats. Ideal image format for the web is SVG because they are vector based, have smaller file sizes and can be enlarged infinitely without losing quality. But unfortunately, they don't work on images that have photography inside. Basically, anything that is pixel based. I won't go into explanation of what's the difference between pixel based and vector based images. In short, PNG and JPG file formats are pixel based and SVGs are vector based. Since we are using photography, we have to export either PNG or JPG. PNG and JPG or JPAC have two main differences between them. First is the size. JPEG images are usually smaller than PNG images or because of the higher compression, but JAC images can have transparent backgrounds. PNGs can. So in our case, either we have to export a PNG or a JPAC and include the blue background in it. If we don't include that blue background, it will automatically fill the space with white, and that's not going to work for our image. Ideally, we would go with JPAC because the file size is smaller and that really matters. Why? Because no one likes a slow website. And images with large file sizes is one way to slow down a website's loading time. But if we go with JPAC then we have to include a blue background, and that can have some issues. Sometimes colors on exported images don't match with web colors 100%. And we need that blue background to match 100% with the blue on the section in Webflow. If they don't not going to have a smooth transition, and the edges of the image will be visible. I've tested this already on this image, and sadly, it didn't match. White and black colors are easy. They always match, but other colors not as much. So we're left with only one option, which is PNG. Let's export. All right, let's import our PNG into Webflow. As with anything in Webflow, we add new elements from the Elements panel. Drop the image anywhere for now. We're going to structure the layout later. In order to upload an image, double click the image or click the settings gear here. It will open up the Assets panel. Assets panel is where Webflow saves all the images and documents that you upload to your website. Remember how we exported this image as two X the size? We can tell Webflow that this image is double the size and made for high DPI. This will shrink it down half the size, just like we have it on our designs. Whenever you upload a very large image file, Webflow will give you a warning sign here because large image files make your site load slow. Image file right now is over 1 megabyte, and that's quite large. For users with slower Internet, it might even take a few seconds for the image to load, and till then they'll be staring at an empty screen. Luckily, we can make this file size much smaller using Webflow'simage compression tool. Go to Access Panel, hover over the image and click the More Options Dropdown. Then click Compress. Get a couple of file formats you can convert into. AVF will do a pretty good job in most cases, and you can leave it at that. It reduces the file size better than the web P. However, depending on the image in rare cases, AVF might hurt the quality. So if you notice that quality is pretty off, then try with web P option. But you're going to have to redo the process, delete the image, upload it again, and then choose the new file format. Click Compress again. It will take some time and you'll get this notification that the image has been compressed and converted into a new file format. You can see how much the file size has been reduced. It went from over 1 megabyte to less than 70 kilobytes. This compression process, you're going to do with every single image unless they're already very small, like less than 100 kilobytes. But you don't have to do it one by one, once you have all your images in there, then you can expand the Assets panel and select multiple images to compress them all in one go. So for other images, we'll just wait until we're finished with the site and compress them all before publishing the site. That's it for now. We're going to arrange the image in the next lesson. So let's recap. To add images to Webflow, we have to first export them from Figma using export settings. Images that are made from several different objects need to be grouped first. Adding images in Webflow happens by first adding the image element to the canvas and then uploading an image through the Assets panel. To keep our website fast, we need to be mindful of our image file size. 71. Webflow: Display Property: Okay, so how do we bring that image on the right side? We can't just drag it like we do in Figma. We cannot align it to the right either. Remember what I told you before, if you're stuck and trying to figure out how to make things work in Webflow, the clue is probably another box. Let's take a look at our layout. We have a hero section. Inside, we have a container which holds all the content. In this container, we have elements that we want to lay out on the left and an image that we want to lay out on the right. So we have to somehow split this container in two halves, left half and right half and have them sit next to each other. We can do that using div block. We can put two div block inside this container and then put content accordingly. Beware Webflow will drop new elements inside your selection. After I added a new div block, it selected that new one, and second div block was dropped inside of it. Just drag it out from this navigator panel. Now, drag the image in one div block and everything else in the other div block. And let's name these day blocks accordingly, left and right. There. Now, the structure is on the right track. Now we have to figure out how to make them sit next to each other instead of on top of each other. There are several ways we can do this in one best way. The best and most accepted way to arrange this would be CSS feature called flexbox, which you can apply under display settings. Let's go through each of these display settings and see how they behave. By default, most elements come with display settings set to block. Block elements, they stretch from edge to edge, and nothing can be placed next to them. They will push the next element to the second line. They will do this even if we set a smaller width and there is space for other elements on that same line. Next, we have inline block. Inline block elements are as wide as content inside. They free up leftover space, which can be occupied by other elements. Remember that behavior when we duplicated the button in a past lesson, buttons in Webflow by default are set to inline block. They only occupy space of their content. So if you put two inline blocks together and there is space, they will sit next to each other. In here, if we set display to inline block, nothing happens because the content in this case, is a free flowing text which will make the box as wide as possible. But if we delete some of these texts, then we'll see that bounding box shrinks with it. However, on a block element one below it, that doesn't happen. Even if we delete the text, the bounding box still occupies the entire width of its parent. Now, I said that inline block elements free up a space for other elements next to it. So how come the second paragraph didn't jump above? Because second paragraph is set to block, and block elements are greedy and they want to occupy an entire floor just for themselves. But if we set the second paragraph to inline block as well, it still doesn't go up. Why? They want to, but there is not enough space for both of them. If we cut the text short on one of them, then there is going to be enough space, and the second block will move to the floor above. Also, this will happen if you manually shrink the width of one of them by applying a fixed width. Third display setting is inline, no block. Inline is how text behaves inside any element. It flows just like texts, one next to each other. It doesn't have width and size values. It will ignore them even if you put it. There is not much use for inline display outside of the text, so that's inline. Then we have display none, which hides the element. It's not just invisible, but it also doesn't affect the layout. It's not transparent. We're just telling the browser do not render it and completely ignore it. Although it doesn't disappear completely from our website, it's still in the navigation panel. If it was transparent, it would still occupy the space. You might wonder what use there might be for display none, but there are many and we'll get to them. That's display none. Then we have display grid. CSS grid does something that was not possible before. To have a table like arrangement where you can move elements as you like with a lot of flexibility with an ability to have a completely different layout between different devices. We won't be going through ins and outs of grid right now because we won't be needing it as much. Instead, we'll be using flex layout, which we'll cover in the next video. 72. Webflow: Flexbox: Continuing where we left off in this video, we will discuss flexbox and how to apply it to our hero section layout. Flexbox is a way to arrange and distribute content inside that box. The flex settings affect only the children of that D Block and not the deblock itself. So in our case, those paragraphs, the container itself is unaffected. The moment you select flex layout, the new options will be displayed. This is how we distribute children inside the flexbox. Let me demonstrate how flexbox can distribute its children element. We can align the items inside the flexbox using this align box. The controls are quite intuitive. It's a three by three grid representing the flexbox. We have three options for the top alignment, left, center, and right. We have three options for the bottom alignment, left, center, and right, and we have three options for the center alignment. The basic alignments are super simple because they are intuitive. The line box gives you a visual representation of what will happen. Not so intuitive options are hidden underneath these two drop downs. For the Y axis alignment, we have two more options, stretch and baseline. The stretch is exactly what it says. Stretches the flex children to fill up the entire vertical space of the flexbox. If you increase or decrease the height of the flexbox, the boxes will shrink and grow with it. This is actually the default alignment setting of flexbox. You can see this when I reset the aligned settings from here. It's set to left and stretch and clicking anywhere on that align box will remove the stretch setting and let you align items without the stretch. Baseline alignment is to do with a text. It's an invisible line on which characters are aligned. I don't think I've ever had a need for this alignment, so you can ignore it for the most part. Underneath the X axis drop down, we have two more options, space between and space around. These are distribution options in Figma. It distributes children evenly. First option, space between makes the first and last child flush with the edges of the flexbox. Well, in my case, it's not exactly flush because I have padding and margin applied to the elements. If I get rid of those, then it will be flush. The second option space around is slightly different. It still distributes children evenly, but it does so by adding even spacing on the sides of each child, including on the first and last child. The first option is a lot more useful and practical. This one, not so much. I rarely need to use it, so you can just focus on understanding the space between option. By the way, these X and Y drop downs are the actual controls of the flexbox. The line box is just a visual guide. X dropdown lets you control how you want to align and distribute children on X axis. That's a horizontal axis and same for the Y axis, which is the vertical axis. The align box locks to a different mode if you select stretch or space between options like right now because I have space around selected. The align box only allows me to change alignment on the Y axis. To return it back to normal, you can just return the X alignment back to one of the standard alignments. The same goes for the stretch. It only leaves you with horizontal alignment options in this case. Just remove the stretch by switching back to some other standard alignment and the align box will act normal again. By default, children are distributed in a horizontal direction, left to right, but we have an option to switch the direction to vertical as you'd expect, they work in the same way, just different direction. But one thing you'll notice that the alignment doesn't change on the Y axis. Top, center, and bottom all give us the same result. That's because there is no extra room inside the flexbox. The children are filling up the entire available height. The minimum height that I gave to the flexbox leaves no extra room. The children's heights put together is more than that. The flexbox actually ends up stretching with the children. But if I increase the height of the flexbox to something that leaves more empty space, then you'll see that the align box works just as expected. What I love about web design is that it's like a puzzle. Things often act srangely and you're trying to figure it out why and find a solution to your problem. Quite satisfying when you do solve the puzzle, but a big head scratcher when you are staring at the screen, trying to figure out what the hell is going on. All right, pay attention to one thing. With a vertical direction, the space between and stretch options now have switched places. Stretch is now under X alignment, and space between is under Y alignment. By the way, if you're ever confused on what each of these options mean, just hover over it and read the explanation text underneath. That will give you some idea. Also, another option is to find explanations in Webflows documentation. What I usually do is I Google Webflow help in the name of a setting. Usually the top result is going to be the page about that setting or a page that contains an explanation about that setting somewhere deep down, which you can just find by searching inside the page by Control F. By default, flax children will try to fit on a single line overflowing the flex parent if necessary. Luckily, flexbox has another setting that helps us manage such scenarios. It's called wrap and you can find it under this dropdown. Wrapping basically tells children to jump to the next line if there is not enough space. We have many different options here, but there is usually only one you're going to need based on your direction. Since we're using a horizontal direction and the items are distributed left to right, then we would need to choose one of the options from the left to right group. And the best way to tell which one you need is actually look at the icon rather than the name. The arrow icon gives you a better representation of what will happen to the children. In case of the first one, children will start from the top, left, and follow a Z pattern distributing down and right. You can see this action as I add more items to it. In case of the second option, they will start from the bottom and distribute up and right, like a reverse Z. The first option is obviously going to be more commonly used, but in specific cases, you might need to reverse the direction. Now, if we have a vertical direction, then we will be looking at top to bottom wrapping. But nothing happens. Why is that? Because there is no necessity for wrapping. Wrapping only works if there is a necessity to push elements to the next column or the next row. Since our flexbox doesn't have a fixed height, then it just keeps on expanding in height, so the necessity to wrap never arises. But if we give it some height beyond which it's not allowed to grow, then the children will start to wrap. Without wrapping, this would happen. They'll just overflow outside of the flexbox. To be honest, these wrapping options can be very confusing, so don't feel bad if you can't wrap your head around it. The best way to find the result you need is just to play around, select all of them, and one of the options should be. That's what I usually do. Inside the direction dropdown, with all the wrapping options, you'll see two options that don't say wrap, single row and single column. These two options simply reverse the direction of our flex children. Instead of left to right direction, we can switch to right to left. And the second option gives us the ability to reverse direction vertically. If you click on one of the boxes, you'll see in the Properties panel special options for the Flex Child. This gives us even more fine grain control over individual items inside the flexbox. But let's not worry about flexhild options for now. Flexbox can be a little handful to understand in one go. So don't worry if you feel a little confused or not understanding exactly or not following every single layout option that I have covered right now. Once you start building in and playing around with it, you'll get a hang of it. In one of the assignments, after this, I have put a flexbox game, which is sort of a puzzle game built inside Webflow by Webflow team, and it's a great flexbox exercise and a great way to practice flexbox and different alignment options. Let's go back to our hero section and see how we can use flexbox. In our case, it's pretty simple, actually. We just have two blocks, left and right. We can apply flex layout to the container. But remember, we make this container to be a standard container throughout our page, even for non flex items, so we don't want to mess with it. We can simply add, Yep, you guessed it, another box. Drop those left and right blocks inside and apply flex layout to that. It's in an opposite direction. We can of course reverse this using flexbox option, but we should instead arrange them correctly inside the navigator. Just drag one on top of the other. Now we have our flex option so we can align these blocks as we want. Horizontal direction is exactly what we want, so we keep it there, and then center alignment and pushing them to the edges is going to look just spot on. In Figma, we have content sitting a little higher. We can achieve this by adding a bottom margin on the left block. This will push the content up. Let's check this on a smaller screen. There are two things that need some styling. First, the left content is a little messy. Buttons got all screwed up. That's because there is not enough space on one line and the second button jumps below. We can easily fix this by giving the left block minimum width. Then it's not going to shrink to a point where this needs to happen. 400 pixels looks like a good idea. Now, the left block doesn't shrink beyond that point. And if there is not enough space, the image is going to take the hit. Second bit is that they are a bit too close to each other. We can add an extra margin to the left block so it pushes the image away. That looks quite good. Tablet and mobile screens are a little more messy, but we will take care of those in mobile optimization lessons. All right, this looks just the way we want it to be. Yes, the image has a little different dimensions compared to Figma design, but that's expected. We are making things responsive so it shrinks and adjusts to the screen sizes. So to recap, flexbox is what it says, flexible box. It can distribute children elements either in vertical or horizontal direction. Once you set display flex on an element, alignment and justification options show up. Nailing down the right options from here is a matter of trial and error. Just play around with all of the options until you find the right layout for you. 73. Webflow vs Figma Sizes: Many students had questions about differences between sizes in Webflow versus Figma and how does the canvas size in Webflow relates to the frame size in Figma. This is actually a very good topic and I decided to make a full lesson on it. There are several nuances here that you need to wrap your head around when transitioning from Figma to Webflow. Let's start with a concept called responsive design. A section later in this course dedicated to responsive design, and we'll dive deeper into that topic. But let's brush over it a little bit because without it, you may feel a bit confused when building your website. Any given website that we build will be viewed by users on many different devices and screens. So will visit your website on a MacBook air, some on Lenovo ThinkPad, some on a custom desktop PC, some on an iPhone, and on hundreds of other different devices. All of these devices have their own screen sizes and resolutions. A good website will have to consider the device of the user and adjust and respond to that device and its respective screen size to deliver the best possible version of the website. This is called responsive design, and this is exactly how we're going to build our website. Webflow makes it easy because it has responsive design technology baked into it. But the design we created in Figma is not responsive at all. Before we designed our page and Figma, we picked a particular frame size with 1,440 pixels and width. That frame is representative of a single screen resolution, a screen with exactly that size, estimated to be about 6% of all desktop screen resolutions used worldwide. Height is irrelevant here because unlike the width the height isn't fixed, we increase it as the content of the web page grows and on a real website that is represented as a page scroll. You might have two valid questions. How can we pick that particular frame size, which is not even that popular? Second question, you might ask, how come we didn't create a responsive design in FIGMA? Let me answer the second question first. Figma does have some responsive tag like auto layout, but this tag is nowhere close to actual responsive powers that web offers. Since we are the developers of our side, we might as well use the full power of responsive design and take care of that part right within Webflow. We would still have to do this in Webflow regardless if we did Figma or not, we might as well save time. Now, let's answer the first question, why 1,440 pixels. Desktop and laptop resolutions range anywhere 1000-4 thousand pixels in width. That's a pretty big range. You can see in this image how the screen sizes actually compared to one another. You can literally fit nine HD screens inside a four K resolution. For example, if you're working on a two k screen and decide to use a matching k frame size Figma, you'll have a lot of screen space where you can build your design. You can fit way more stuff on your screen than someone on a tiny netbook c. A small netbook basically covers a small portion of your two k frame. Easily end up putting way too many elements or details in your design that simply won't fit on a smaller screen. This will create a headache for you down the line when adjusting the responsiveness in Webflow. What's the good frame size then? Most screens beat laptop or desktop fall somewhere between this range. Two K and four K screens are quite rare and users on those screens don't usually use the browser in full screen mode because that would be the purpose of having a very large display where you can fit many things on your screen. Then we are designing for a range of approximately 1,000 to 2000 pixels, choosing a screen in the middle of this range is the best approach because the average size will be the easiest to adjust up for the larger displays and adjust down for smaller displays. Figma 1,400 pixel frame size is a good candidate for this purpose because it's quite in the middle. Your comfort as a designer matters too. So you may want to choose a frame size that matches your screen resolution. That way, when working Figma, you'll be able to preview your website as it would look like on your screen. So if your screen resolution is a good representative of an average anywhere 1280-1600, then feel free to use that for the frame size on your next project. You can find out your screen resolution just by Googling what's my screen resolution and checking one of the first websites. Or you can also see your screen width by entering the preview mode in Webflow and checking this number here. This is a width of the visible canvas. When your browser is in full width, then it will be same as your actual screen resolution. My screen, for example, is in fact 14 40 pixels in width. This is just a Lucky coincidence. But there is no huge need to match the frame size in Figma with Webflow canvas size. Whatever we did in Figma is a mockup of a single screen. In Webflow, we are building a fluid responsive website that will shrink and grow with different screen sizes. Together with that 14 40 Pixel version, we're also building 12 80, 1920, 320 pixel version, and everything in between. It's one website that shrinks and grows like an accordion. Don't try to match your Figma mockup with 100% accuracy. Only the identical canvas size can look 100% like your designs. Everything outside of that, we'll have to adjust to the reality of a particular screen. As you can notice the canvas or the visible screen width changes between preview mode and the designer. Inside the designer, my 14 40 is only 992 pixels now. That's natural because the designer mode has side panels so they occupy the available screen space. Webflow gives an ability to change this width, even turn it into my original screen width if I want to keep in mind that increasing canvas width doesn't provide fully realistic view, Webflow can't add more pixels to my laptop. Instead, it's zooming out and changing the scale to create an impression of a larger screen. That makes each element not true to its actual size. Although it's still a useful preview because you're able to see how elements interact with each other and detect and layout issues. It's like if you are looking at a 1,400 pixel screen but standing a bit far from it, everything besides that basically matches the reality. Shrinking on the other hand does provide true sizes because the scale remains at 100%. These icons here represent what's called device breakpoints. They actually aren't just for show. They can take custom rules, rules that are specific for each device breakpoint. But no need to worry about that for now. We will dig deeper into those later in the responsive section. For now, all you need to know is that you're working on the base desktop breakpoint, the one with a star icon on it. This is where you need to stay during this stage and check your designs within the desktop breakpoint range, which is 992 pixels and up. While in preview mode, you can resize the canvas down to 992 pixels and up to 1,900 pixels to see how it looks within that range and make sure there aren't any unexpected layout issues. All of that is our single desktop breakpoint and every change we make to 992 or 1,900 applies to both simultaneously. Our design needs to work well for both. You don't need to check the side on the smaller devices because we will do this in the next section. First, we will build everything in the desktop breakpoint and make it look good for all the different desktop screen sizes. In the responsive design section, we will go over our page one more time and make changes and adjustments to make everything look good for all the smaller screen sizes. Also, don't add these larger breakpoints. We don't really need them. The design that we created uses a container with a maximum width of 1,160 pixels, none of our content goes beyond that boundary except for background colors on sections. The actual element sizes between Figma and Webflow should match. As long as you're looking at 100% Zoom state in Figma, applying that same size in Webflow should give you more or less the same size. For example, a phone size of 75 pixels in Figma should look the same when applied in Webflow. Again, when looking at 100% Zoom state, and that's regardless of the frame size in Figma or Webflow, as long as the scale is 100% in both. The Webflow is canvas size will alter all other things. Don't expect the hero image to be the same size on 992 pixel screen compared to Figma because this canvas doesn't give enough space to fit the image in its original dimensions. Image rings because image has a special property to it applied that makes it shrink when there is not enough space. Font size, for example, won shrink, but the length of text will shrink instead when there is no space. That's it. Those are the important nuances of screen sizes between Figma and Webflow. If you still have doubts, let me know in the Q&A. 74. Webflow: Navbar (Chat App): In this video, we're going to add navigation bar to our page. Webflow has a default navigation bar element called navbar, which we can add from the elements panel, drag it to the top to bring it on top of the hero section. Navbar already comes with elements inside. Let's have a look exactly what's this navbar made of. So inside the parent navbar element, we have a container. This container is similar to what we did with our hero content centered in the middle with a maximum width, so elements are nicely wrapped inside it. Then inside that, we have three other elements, which again, are boxes. First one, the brand sits on the left. That's where we put the logo. The navigation is where these three navigation leaks are sitting. Like most other things, it's just a regular div block, but with some default styles already applied to it. We're able to change these dils if we want to. And third, we have menu button, but it's invisible. You can see here that there is a display none applied to this item, so it hides. Menu button is invisible only on the desktop. On other devices, it's visible, and you can see why. It's a Hamburger icon that drops down the hidden navigation links, which you're probably familiar with because that's what most of the websites have. Fitting navigation links on mobile devices is difficult. We use this hidden navigation menu and the Hamburger icon that contains those links. Navbar acts just like any other HTML element in Webflow, but it also has some extra options inside settings. There is an option to open and close the menu. Menu is basically what's hidden in mobile devices. In desktop version, this doesn't do anything because menu is visible at all times. There are three types of menus in here, drop down, which is the default, right side, and left side menu. I mainly use the default drop down option. Underneath, there are options for easing. This is relating to the animation. Easing is an animation that starts slow and then acceleratees. This is how most animations on the web are set. But more about this later in entire section dedicated to interactions and animations. I leave all these settings on default. Only thing that I use here is the open and closed menu, so I can visually style the menu. Another useful setting here can be the display options for the menu. With this slider, we can set on which devices should there be a drop down menu and on which devices to leave regular navigation links just like the desktop version. For example, if you move the slider to the right, this will disable it from the tablets. Meaning on tablets, we'll see the regular links, and on anything smaller, we will see the Hamburger menu. Now, let's dal the navbar to match our design. First, the background. That's quite simple. Just set it to blue from the background property. One thing you'll notice is the content inside the navbar stretches only until a certain point. That's because the content is sitting inside the container, and this is not the container we made. It's a default container from Webflow which is not as wide as ours. We don't want that container. Instead, we want to use the container that we already made, like the one where our hero content is sitting inside. So how can we use our container instead? Just like the way we reuse any other element by applying the same class. And you'll see how the container instantly changes the width. This is the class that we created and we gave it to this container that we styled before. And if we apply this to this navbar container, all those styles and properties will be carried to this navbar container. Just like what we did with buttons, if we decide to change the width of our default container in one place, it will instantly update in every other place just like magic. Next, we need to insert our logo. Just like we did with the hero image, we're going to export the logo and drop it as an image element. Unlike with our hero image, this time, we're going to select SVG. Why? Because we created our logo ourselves in Figma. It's a regular tax right now. If we export it in SPG, we will maintain its vector based qualities. It will be retina optimized right away. It will stretch infinitely without losing quality, and file size is going to be very small. In most cases, SVGs will be smaller than PNGs and JPEGs. All right, once you have the image exported, add a new image element and upload the logo like we did last time. I have brand elements selected, so when I click the image, it will automatically drop inside that brand box. But the logo is glued to the top. How do we fix this? There are many ways to make it a line in the center. Probably the simplest is to add a top margin to the image itself. Let's now style the navigation links. We're going to do that just like anything else. But first, what we're going to do is delete all other nab links and just keep one. We'll apply some style to it, so Webflow automatically creates a class. Now we can duplicate this nab link as many times as we want. And when we make a change to one of them, all of them will be updated instantly. Long live CSS. So we're going to apply the appropriate textiles, pretty straightforward. And apply spacing to match our designs. We can measure spacing Figma and ply the exact spaces in here too. The space on top Figma is 42 pixels, and on the side it's 30. In Webflow, we will use padding for this. We could use bargins but by default, it already has padding and it's quite nice this way. On the side, we will use 15 pixels for each side. This way, padding of two neighboring links will add up to a total of 30 pixel. By using padding, the entire link will grow so users will be able to click not just with the text, but with the entire box. You'll see that link is clickable even on the empty space because it's not an empty space, the entire thing is link itself. Finally, let's add that button. Although instead of using a button element, I'm just going to create a button from one of these nav links. Duplicate the class so we can make new changes without affecting other navigation links. Now, let's see what properties our button has in Figma. The textile is the same as the navigation links. The background is white, but with 20% opacity and the padding around the taxes, 12 pixel on top and bottom and 24 on the sides. Let's recreate all that in Webflow. Inside Webflow Color Picker, you can apply 20% opacity from this box named A for Alpha value. Not sure why Alpha and why not O for opacity. It's something to do with our RGBA color system, but who cares? We have different padding than our Nav links. And we have rounded corners which we can set in border section. There is no exact value here, increase it until it stops rounding. No problem if you go over it. All right. Inside Figma, we can see that it has 30 pixel margin on the top. And for the left margin, we're going to use 15 because it will add up with an existing 15 margin from that nav link next to it. Because of new spacing, logo is out of line, as you can see. We're going to have to align the logo in the middle with the nav menu. We're going to have to align it by eye. Finally, let's check the fluidity and responsiveness of our navbar. As you can see, they're being squeezed to the edges, but that's because we don't have any extra spacing. The hero section is fine because it has padding applied on the sides. So when browser window shrinks and container shrinks with it, the padding will stop it from being squeezed all the way to the edges. We can apply the similar padding to our navbar as well. And there now it's looking good. It's almost done. There is one small but important thing missing hover effects. None of the links or buttons react when I move mouse over them. We're going to learn how to add hover effects in the next lesson. Right, so to recap, we learn how to add a navigation bar, the anatomy of navbar, and what is it made of, the settings of an out bar and how it works on smaller devices. We learn how to add a logo inside an out bar and how to style links inside the navigation menu. 75. Webflow: Debugging Checklist: Alright, so what happens if you're facing some issue in Webflow? This is what this video is about. You don't actually have to watch this video right. Now, it's a tutorial in case you're facing an issue. Sometimes I'll be sending you to this video. When you post your issues in Q&A, I will be sending this video to you or telling you to kind of go back to this Webflow debugging checklist to go through the steps because it helps resolve many of the issues that you might be facing when you're building your website. No, you don't have to watch it. You can watch it right now if you want to or you can come back to it later when you're actually facing some issue that you're not able to figure it out. So I have this checklist here. It has a few steps, and I have created here some issues, which are common issues that my students face here and there, and they're not made up issues. They are very common. It happens. So I'm going to go through them and show you how to work this debugging checklist and how to go through different steps and how it's actually very, very helpful. So here is this weird space paragraph that is really, really large space in not able to figure out, like what is going on? Where is this space coming from? We click on it, nothing's happening there. So what do we do in this case? Let's see what our checklist tells us. Step one, remove the class from the suspect to see if the issue disappears. If it does, then skip to step five. Okay. So suspect in this case is probably a paragraph. It's with a paragraph. It's probably happening something on the paragraph. And we have a class here. Now, we can remove this Backspace on your keyboard, remove the class from it, and Hmm, the issue did disappear, right. Now undo to return the paragraph back to the element. Control Z on PC, Command C on Mac. That's undo. So the class is back. And now step five, skip to step five. Let's see what step five tells us. Once you identify the class that's causing the issue, put the class back on the element. We did that already and start resetting each style that is in blue color. You should be able to find a particular style that is causing the issue. Alright, let's see. Select the correct paragraph, correct class, and then we start resetting the classes that are highlighted in blue. Now, the way HTML, CSS and just web pages and websites work is that everything lives under a class. All the changes that we make lives under a class. That's why we have a class here. Once you delete it and remove that class from this paragraph, all those changes are gone. That's why removing a class is a nice way to test if something is causing an issue. So we can start by resetting reset there is a shortcut here. Option click in my case, I'll click in on the PC. That didn't do it. That didn't do it. When things don't do it, I undo, so I don't mess up and return things back to normal. Let's see, click No, that didn't do it. Option click, No that didn't do it. Bing. Look at that. Bingo. That's what we have. So what do we have here? Height. This is typography, so that means line height. 160 pixel. Oh, I know we meant 160%. There you go. Issue fixed. Look at that. My checklist is working. Now we have another issue here. This is left align. This is F align. Buttons are center aligned. That's not a good design. You want consistency in alignment. Either everything is center aligned or everything is left align. So we want these buttons to go left aligned. But this is not Figma. We can drag this here on the left. What do we do? Again, we start with the step one, which is button is a suspect. Let's remove from it the class that didn't do anything. Okay. Let's see what our checklist says about that. Remove the class from the suspect to see if the issue disappears. No, it didn't disappear. Alright, let's move to step two. Since removing the class on the suspect element didn't help, that means the issue is coming from some other element. Start by removing classes from the direct parent, then parents parent all the way up, including the body element until you remove the class that makes the issue disappear. Alright, let's see. So what's the parent of the button? We can check that and find that from the navigator. We have a button and the parent is left block copy. Okay, that's our parent. Another way you can shortcut to find parents is up arrow key. Click O. That's going to select right away the parent element. We can now remove the class. Nope, that didn't do it. So I'll return it. Again, key, and now we're going to select a grandparent, the parents parent. So this is the parent. The next parent is Zero flax, right? Up, i up. There you go. That's selected. Now we remove it from it. No, that didn't do it. Bummer. One more. Maybe this one will do it. Let's see. Bam. I did. What's up with this guy? Okay. If you find the buggy class, we did then skip to step five. Step five was exactly the same thing, what we already did start resetting and removing blue styles. No, that didn't do anything. Oh, I did. What happened? Let's see. A line center. So parent, in this case, alignment text alignment settings of the parent is actually affecting the children. Makes sense. A line left. Alright, that's issue. Big. Cool. Those are easy ones. Now let's go to a bit more difficult one. Another common issue I see with my students, we have the hero image, and it's just tiny, tiny, tiny. It's squeezed to very, very corner. So what do we do in this case? Again, we go through the step one, remove the class from the suspect. This one doesn't even have a class, so we can't remove it. So probably it's not coming from the image. Then we would go from the parent, remove it, from the parent, remove it, and so on. And once we go through that, we're going to find out that in this case, it's not working either. So we went through the step two, nothing happens. Then we go to the step three. If the issue isn't coming from any of the parents, then it might be coming from children or siblings. So we're going to have to repeat the process from step two, but we're going to have to do that on the children or with the sibling elements. Now, the way web works, and this is weird. It's not intuitive, but this is how it works. The web works as a document. Have you ever worked with the Word document? You know, when you move something in the Word document, like, just try to enlarge image just a little bit, and the entire like 20 pages of your document just, like, gets completely messed up. Yes. This is what web pages are. The original guy in Switzerland who invented websites, that guy used a document, created web page from it. So it works fundamentally. HTML works like a document. Everything is occupying space. Everything is pushing it around. It's not like Figma. Figma is peaceful. It works in layers. Everybody is getting along. Nobody is messing with each other. But documents documents are greedy and everything is just pushing each other out. They're like countries fighting for the territory. So in here, we would have to check what's going on with the siblings. So to find out the siblings, now we don't have a nice little shortcut to go through, so we have to go through the navigation. So we can collapse all of this here, click on the hero image again. A hero image doesn't have a sibling, fine. If the hero image doesn't have a sibling, then we move parent up, and we start with the parents sibling. So uncles, aunties, that's what we're working with. If this doesn't work, then we go with a grandparent, grandparents and siblings, and so on. We just keep on doing. And if the parent sibling doesn't work and we do it on the parents ingle and nothing changes, then we have to do it on the children. So nieces and nephews, no, cousins. We do it on the cousins. So what does the step tell us? So repeat this process on the children and siblings. So same process of removing classes. So this is the sibling of the parent element. Left block. We remove it. Bam, it fixed the issue. So since it fixed the issue, undo, we know something from the left block is coming and squeezing this guy to the corner. Now we start with our usual process of resetting all the blue styles. Reset, that kind of did it, but not really. Reset, no. Reset. Bam, that's the one. Okay. Minimum width 800 pixels. Oh, wow. Our canvas is 992 pixels, and this guy wants to occupy 800 of it. That's almost 90% of it. That's super greedy. So if we shrink this to 400, now image has the space to grow. Nice. And one final option, which is none of these steps are gonna work. There's this weird space coming from above. This thing doesn't even have a suspect because I'm clicking on it and nothing gets selected. It's not none of the elements are there. So if I have something selected here, I'm clicking on it, nothing is happening. Where is this coming from? So again, think Word document, right? In a Word document, everything is pushing each other and settings from one each other. They are messing with each other. That's how it works. No, not Webflow's fault, HTML's fault. That's what Webflow has to deal with. Figma, wigs, framer, all those things. They are layers of abstraction. They are creating on top of this HTML and CSS, ignoring that, and they're building a new layer of abstraction for you to intuitily understanding so you don't have to deal with the messy parts of real HTML and CSS. So yeah, in Webflow, you have to go through this weird learning curb, but it's foundational unchanging technology. HTML and CSS are never going anywhere. Webpages will be always on the document structure that's never going to change. So if you're ever going to learn coding or be coding, whatever, your knowledge from Webflow will be carried to other platforms. In places like Wix, Framer, Figma, all that knowledge is just part of that platform. You're not carrying that knowledge anywhere. All right. So what's happening here? When we don't know what's going on, then we start removing and go through the steps from the adjacent elements because it's a document, right? Everything is affecting, and usually it's going to be something adjacent. So, for example, what's the nearby element of this white space? Will this section, the demo section. Remove the class. Well, I just removed the background, but as you can see, based on this little border, nothing has changed. This white space is still independent. So that didn't do the job. Okay, put that back in. Now what's another adjacent element? It's this heading. Let's has on the heading, remove. Well, that didn't do it either. Hmm. So we are kind of running out of all the adjacent elements. What do we do now? Let's see. So when we went through all the steps, nothing's happening. If removing classes or resetting blue styles didn't help or even if there are no classes or blue styles then start resetting the styles in orange color. Uh huh. So we do, again, adjacent elements. We go through demosection. Do we have any orange colors? We don't go to the heading? Do you have any orange colors? We do. And look at this. Now, if I remove the class from here, the orange setting is not disappearing because it's not part of the class. Whatever is blue, blue, blue, they're connected. They're part of the same class. But orange settings and styles, they are coming from somewhere else that's inherited styles, a topic that we will cover in the upcoming lectures. When you click on it, it's going to tell you value comes from blah, blah, blah. It will tell you actually where it's coming from. And this value can't be reset. You can't click on it. There is no reset option because it's not part of this class. It's not part of this element or this class. We're not able to reset it from here. We would have to only reset it from the original element that is coming from. But what we can do, and it says, start resetting the styles, that in these terms, it also means putting them back to their default values. So what's the default value of a top margin? Webflow actually tells us that whatever is engraved, these are default values. Width, default value is auto, height, default value is auto. And you can click on this and you'll see it selected Auto. But minimum width is zero pixels, but maximum width is none. This is the default value of these elements or default behavior like display, default is block. So in this case, we know default is zero for margins and padding. So we can do zero here. Manually, we can reset. And, ma'am, it worked. So this was what was causing the issue. That's it. These are all the debugging steps. 80% of the time, this will be very, very helpful. Other times, hit me up in Q&A. Let me know. I'll help you out. 76. Webflow: Hover State: Our hero section looks great right now, but not very exciting to interact with. When we move our mouse over the elements, they don't really react to it. These are called mouse over or hover effects. In web design, remember this law. It's called Jacob's Law of user experience. The law says that users spend most of their time on other sites. What does that mean? This means that they expect for your side to work the same way as all the other sites they already know. If you try to be very original and make your site work in a different way than what users are used to, you're going to end up with a very original ghost website that everyone wants to leave instantly. So people have expectations for links and buttons to react when they move the mouse over it. Adding hover effects and Webflow is quite simple and very fun. This is managed under this drop down called states. After selecting the hover state from the drop down, any changes that you make to the styles will apply to the hover state of that class. And just like that, the button changes the opacity on hover. States now show a blue dot to indicate that a change has been made to the hover state. There are other states like press and focus, but I won't go into those until we need it. We haven't designed hover states in Figma. I don't do this in real client projects either. It's too much extra work that isn't really necessary. I come up with hover effect on the go during the Webflow building process. This way, I can also visualize how it's behaving. We can change almost every property on hover. A lot of fun animations can be created just from this. Although Webflow does have another way to build animations and interactions, and it's super amazing. But more about that later. For buttons, changing the background fiel is a good and simple way to add some simple hover effect, and changing the opacity of the background feel is easy way to do that. You can use that as your go to technique for a quick and simple effect. It's easier than putting a different color. Another simple way would be to add a shadow on hover. That's a common and fun animation, adds an extra layer of dimension. Now, with our ghost button here, we can't decrease the opacity. It's already transparent. But what we can do is to add thin layer of transparent white. Sort of like that button in the navbar, adding white background with ten, 20% opacity. With the button in the navbar, either we can play with opacity again or fill it with 100% white. When you fill it with white, we have to change the tax color too, because text is white and it doesn't show. Luckily, we can change any style on hover, so without a problem, we can turn text into blue. As for navigation links, we can do something similar like decrease opacity, change the color to something else, or we can do something even more interesting. We can add a border underneath. I don't mean underline, that's lame. I mean a border underneath the entire link box. We can do so under border settings. Select the box that indicates the bottom border. This should automatically select a solid line as a style if it doesn't make sure you have it selected and it's not set on X and change the color to white. This is a nice over effect and suitable for us because we are using a link as an entire box, not just a text. So it shows that this whole thing is clickable. We could bring this border closer to the text by decreasing the button padding, but I actually like it being spaced out like that. There is one strange thing that is happening on hover. Pay attention to how the content underneath shifts slightly every time we hover on links. That's certainly not nice. The reason this is happening is because Tupixel border adds to the available space dedicated to the Nav links. So it pushes all the content down. So how do we fix this behavior? We need to somehow make sure the height of the Nab link doesn't change on hover because of the border. And one way to do that is to add Tupixel border also on the regular state. We can make it transparent so it doesn't show. This way nav link box has a two pixel border either way, so it doesn't change sizes on hover. The only thing that changes is the color. That's a good solution. The hover effects right now transition quite abruptly from one stay to another. It's a very instant jerky jump. This instant jump might not be much, but it's too fast for us to register the change, so it doesn't feel very natural and smooth. Web designers in such cases, add a little transition effect, so there is a slight time delay in transition. We can add the transition style from here. Under a dropdown, you see there are many transition types. It's listing everything that can have a transition effect like an opacity of an element or a background color. Not every style can transition. For example, you see, font name isn't listed because font change can't be animated, but many other typography settings can. In our case, we want to transition a border color, which is an available option. There are two more values duration and easing. Duration is what it exactly says. How long does transition take in milliseconds. The default value of 200 milliseconds is pretty good for most hover effects, so you can leave it as this. As for the easing, it might look a little complicated, but they are quite simple. In reality, these are sort of different formulas on how fast they go or accelerate and how fast or slow they sort of decelerate when the transition is ending. Let's leave this to the default ease. Most of the time, it works perfectly fine. Now if you over the null links, you'll notice that border appears and disappears smoothly, and that's just so much nicer than that jerky transition that was before. One more thing to note, the transition effect has to be applied on the regular state, not on the hover state. That's just how CSS works. The same thing we can do for buttons and their background transitions. Often, instead of selecting specific transition type, I actually like to select all properties. This will apply same transition settings to any hover effect. It's just simpler way to do it. Instead of looking for a transition type, every time we want to apply some sort of different hover change. If one element has several properties that change on the hover like font color, background color, shadows, instead of adding three different transition types, you can just add one that kind of applies to all unless we want to transition different effects in different speeds, but those will be very rare occasions. The same transition effect on the other buttons, and there we have it. All buttons and links transition nice and smoothly. All right, so let's recap what we did in this video. We've added hover effects to the links and buttons on our hero section. The hover states are changed from the states in the Styles panel. We can change almost any style inside the hover state. And to make the state changes from regular to hover look nice and smooth, we can add transitions from effect settings. 77. Webflow: Middle Section (Chat App): Desktop version of the hero section is completely done. We haven't optimized it for mobile devices and tablets yet. But what we're going to do is actually we're first going to finish the entire page, and then we're going to do the responsiveness and mobile optimization. This is sort of my habit of doing it. Some web designers, what they're going to do is they will each section by section, each individual block that they are building, they're also doing mobile optimization at the same time. I like to finish the entire page first and then go to the mobile optimization and responsiveness. Why? Because what often happens for me is that I send desktop versions or whatever the page that I'm basically designing, I send it to the client for the review and they come back with revisions. So what happens, they will be like, even though we agreed on the design, sometimes, you know, there is animations involved, right? There's interactions involved, some horror effects. So different things are involved that haven't been part of the design phase, or they might just change their mind when they see the page in reality. So what happens is that they might come back with some different changes that I have to make, and I might completely remove part of the section or completely change the way it's laid out and so on. And now all that responsiveness and mobile optimization that I have put inside is sort of lost all the time. And this way, I know that I don't have to spend any extra time on mobile versions until we're sure and until my client has signed off on the designs and we know this is ready to go. Then at the final stage, I'll fix the mobile and then create the responsiveness of the page. And we'll use that process, finish the page first, and then go over it and go through the entire tablets and mobile versions and all that. Now it's time to build this middle section. We're just going to be much simpler. So what do we need first? We can have a look at our hero structure to get a clue. So it looks like we have two div block, one named hero section and another container that sits inside that hero section. If you remember, we made a container as a generic block to center our content. We even reuse this inside the navigation bar. It's a great idea to reuse this container again everywhere on our website. This way, we have a uniform layout. And if we ever decide to change the maximum width, make it wider or narrower, we can do so on an entire website in a couple of clicks. For the hero section, we haven't done anything standardized like that. Otherwise, we would reuse it here as well, but that's okay. We can create a generic section now, which we can reuse later like we did with container. So we're going to add a new section. We'll put another container inside. We'll apply container class to that container. And we're going to create a new class named section for that section block. And now let's add some style to this newly created section class. One thing we can borrow from the hero section is the side padding. Remember this side padding, we apply to the hero section, so the content doesn't go to the edges. We know this is going to be uniform across our website and between pages, just like our generic container. So we're going to apply the same padding to our generic section. Later, if we ever decide to change that padding, we can do so on the entire website just by changing one instance of that section. We can also add top and bottom pedding. This information we can find in Figma. We have used a 19 pixel spacing Figma to distance this headline from the hero section above, so we can reuse that same value here, and we can apply it as both top and bottom pedding. There, now we have a generic section layout with a generic container inside. We'll reuse this exact same structure on other similar sections on our page. Now we can put our elements inside and start styling them to make it look like our designs. We'll do that in the next video. 78. Webflow: HTML tags: Let's start by styling our headline. Any new text that we add to our page by default is set in Aerial font. Wouldn't it be nice if you could somehow give them a default style like make all headlines pop ins and all paragraph text roboto, so we don't have to style them every time we add a new headline. On a small one page like this, that's fine. Not much work. But what happens on a large website with 20 different pages and even more blog posts. We could of course use CSS classes, but there is even better way to go about this. Remember the selector field, you're already familiar with this. From here, we applied CSS classes to our elements. By applying a class to an object, we are basically saving the information on styles and properties. Later, we can apply the same class to another similar object. In the selector field, the OC, it says, select a class or tag. This tag is what will enable us to set default styles on our text. So what the heck is a tag? A tag is part of HTML, whereas class is part of CSS. The tags are exactly what we have been adding to our page. Div block is a tag named DIV and a heading is a tag named H one, and a paragraph is a tag named P. Inside HTML, this is how new elements are being added, tags. It starts by telling the type of the element it is DV, H one, P, et cetera, and right after it, if there is any CSS class applied to it, then the name of that CSS class. You see how it says class equals hero section. That's exactly the class we have created manually and name it that way. So how do tags help us with setting default styles? Well, just like we define a set of properties and styles of a class, we can do exactly the same for a generic HTML tag. For example, for the heading, instead of applying a class to it and then styling it, we can select all H one heading from here and then style it as we usually do. Now, every time we add a new heading, the default style will be applied to it without needing to use classes. And just like classes, we can make a change on every single instance at once. Besides H one, we have more heading tags. Just click on the settings of the heading and you'll see. We have all the way down to H six. The use of this different heading tags is basically the level. H one should be our highest level heading style. For a secondary heading, we can use H two and so on. If you look at our designs and Figma, we could definitely define different levels of headings from there. The heading on the hero section is the largest, so that can be the H one. The headline on the section afterwards can be H two and maybe those footer headings can be H three or H four. So if we wanted to define an H two tag, we would select it from here and again, go to the selector. This time, selector will show us all H two headings instead of H one because that's what we have selected. And we can style all H two tags across our website. Now, when we select H two tag on a headline, this star will be automatically applied. As a side note, unlike classes, tags don't keep being selected. So moment you are done editing and you exit the element, this tag selector will go away. So if you do this and come back to the heading to edit a little more, now any new edits will create a new class and it won't be applied to the tag. So every time you make a new dit to the tag, make sure to select it each time. Until today, I keep on forgetting about this. To be able to select the tag, the class field needs to be empty. Otherwise, as you can see, it doesn't show the option to edit the H two tag anymore. But there is another way to select and edit the tag itself, even if you have a class applied to the element. You can do that from here. This drop down here shows all higher level classes and tags that you can directly select and edit. Blue is for class and pink is for tags. For example, let's take our heading and make it red, but not the tag, but just this particular instance of the heading. As you can see, the default H one heading is unchanged because we apply the red color using a class, not using a tag. Now, if we want to edit our default H one style, of course, we can do that on the headline below, but we can also do that on the red one by selecting a higher level tag in the selector. Any changes that we make now is going to be applied to the default H one style as well, and you can see this happening in live. Another thing to point out, you'll notice the color style is scratched out. Why is it scratched out? It's basically Webflow telling us that the color property is being overridden by more specific selector. So classes are more specific, sort of like children elements, and tags are more like parent elements. So classes override tags, similar to children inheriting styles from the parent until we set a specific style on the child element. Same goes here. H one tag is a higher level selector, and it will act as a default style until a more specific class overrides that style. A good example of this hierarchy is a body tag. If you look inside the navigator, you can see that the body is the biggest box where everything else goes inside. Nothing goes next to the body or on top of it. While you have body selected, go to the selector and click on Body O pages. Now you can set some certain styles on this body tag that will be passed on to all the children elements. However, only for the inheritable properties like textiles, other properties like sizes, display, borders won't be inherited. You can see Webflow has already applied some default font styles. We can see that because it's highlighted in blue. What default styles can we set here? For example, we know that roboto is our main font on paragraphs and everything else besides headings. So why not set Roboto here? Also, we can set a default font size, color, and line height. This way, every new text we add to our website will begin with these settings and will have much less styling to do. Of course, we're not stuck with these values. H one and paragraph tags are more specific selectors, so they will override these settings. That's why the paragraph changed when we were editing, but the heading didn't, and classes are even more specific selectors, which will override all the other texts, be it heading or body tag. Now every new text element that we add to the page will be in roboto and in gray color unless having more specific styles. There are other tags we can style, but headings and body tag is the most common and most useful. So in our case, we have H one tag that we style just like our designs, and we have style the body tag according to our paragraph designs. After styling the body tag, you'll notice sometimes some tags will change where you don't expect. For example, our navigation links, they agree on size to match the 18 pixel we set for the body tag. And if we click on the font style, we can see that this value is being inherited from the body. Even though we have a enabling class applied to it. Why is this happening? Because originally when we style navigation links, we didn't have to change the phone size and line height. Whatever was set on the body by default was the same phone size we needed at the time. But now because we have changed the phone size on the body tag, we get this. Let's style these navigation links to whatever sizes they are supposed to be 14 pixel for the phone size and 16 pixel for the line height. And that's much better. So to recap, we have CSS classes and HTML texts. HTML tags are elements themselves like paragraphs, headings, images, et cetera. Just like classes, many HTML tags can be style to create a general default style for those types of elements like all H one headlines or all paragraphs styling tag is a pro habit. It saves a lot of time down the line, and it's efficient and creates a cleaner code. Highest level tag we can style is the body tag. If we set a font style on the body tag, then every other tax element across the website, not just a page will inherit that font from the body tag until we override it with other more specific tags or classes. 79. Webflow: Combo classes: So the middle section just has three elements, heading, paragraph, and one image. So we need the cording elements in Webflow. Now, let's put our content inside and see where does that take us. Next, let's export the image. This time, we can export JPEG instead of PNG because the background is white, so we won't get any color mismatches. We're going to do two Xs for retain optimization. Since we exported two X, we need to enable the high DPI option. Okay, it almost looks like our design. We need to center everything somehow. We could set text align to center on the container div block, but we can't do that on our generic container because it's going to center elements everywhere and mess up our content elsewhere, like on our hero section. We could, of course, duplicate this container class and create a new one with a center layout, but that sort of beats the purpose of having this default generic container that we're going to use across the website. Luckily, CSS has a super smart solution for this, the combo classes. Let me demonstrate. We've got a generic button here. Let's apply our existing button class from the hero section. Once we reach this section from the design, instead of white, we will need to use blue version. But instead of duplicating the button class, we're going to keep the same base class and add a combo class to it. There are two classes now in the selector button, which is the base class and blue, which is the combo class. Any changes we make to this new button from this point won't affect the original white button. But the beauty of the combo class is that every other property that we didn't touch is still being inherited from the base button class. This means if we at some point decide to change the style of our buttons like make them square or decrease padding or change the font style. All of those changes will be reflected on the blue button as well. And However, all those properties that we have applied to the Blue combo class won't be affected at all. In this case, the background and text colors. It's not really a crime if you don't use combo classes. Regular people visiting your website are not going to know difference if you're using combo classes or not. And frankly, they don't really care. But this is what pros do to save time, produce a cleaner code, and have a better control over the website. And of course, I want you to become a pro, create websites efficiently and make more money by saving time during the development. These combo classes fit the inheritance tree at the bottom of the hierarchy. They inherit styles from the base class who in turn inherit styles from the related tag. Related is an important word here because a paragraph won't inherit any stars from H one tag or heading tag, only from paragraph tag. And all of those tags inherit some styles from the body tag. And when we override styles, we're overriding from the bottom. More specific style wins. So the combo class can override everything above it, the base class, the related tag, and the body tag. Similarly, a base class can override everything above it, but it won't affect the combo class if that combo class is in charge of that specific type of style, like phone color or background color, and so on. That's exactly what CSN stands for, cascading style sheets, if you are dying to know. So the styles cascade from the top to the bottom, sort of like a waterfall. You can see how combo class has been added to the inheritance menu. And this menu gives us an ability to select any stage of this hierarchy and addi it exactly that stage, for example, the base class. By the way, this inheritance menu can also show what specific tag can control your element. The second pink boox says links. Why? Because buttons are regular links. We just tile them to make them look like buttons. So if we set some styles on links tag, then you will notice those styles on your buttons until you overwrite them. Okay, back to our container. We can add a combo class called center and then change the text alignment of the font. This should center all our content as we want it. From this point, if we ever need another container with center alignment, we can apply this combo class just like we would apply a regular base class. Webflow even displays combo classes that are linked to that base class, so you can choose an existing combo class. In Voila, we get a centered container. Couple of things we need to style in our section, the width of the paragraph and the spacing. We can grab the spacing from our design 30 pixel on top and 60 on the bottom. And of course, we can grab the width of the paragraph two, which is 566 pixels. But oops, this happens. I know you might be thinking here, how come it doesn't center? Didn't we set the center alignment on our container but have a closer look. The text itself is centered inside the box, but the box isn't why isn't the box in the middle? Because the paragraph text is set to display block, and text alignment option doesn't affect block level elements. It only affects actual text, inline block, and inline elements. So one way to center that entire paragraph block is to change the display to inline block. This might seem a little strange. It works on inline block, but doesn't work on a regular block, but that's okay. You'll get the hang of it. Another way to center it is by setting auto margins like we did with the container. Remember what auto margins do, they act like springs that fill any remaining space and push the box in the middle. Both of these are valid solutions, auto margin or inline block, but I'm leaning towards using auto margin because if I'm facing some sort of a bug and I'm trying to fix something and I forget what I've done here, I'm more likely to assume that the paragraph is set to default block rather than to inline block. And that's it. We're looking good. So to recap, we learned about combo classes and how they can save us a lot of time. Combo classes are on the bottom of the hierarchy tree, so they inherit styles from everything above them, but they can override any of those inherited styles, and their changes won't affect anything above their level. 80. Webflow: CTA section (Chat App): All right. We're going to build our call to action section in this video. What do we need here? Let's do a quick planning in our head. So we got image on the left, content on the side, pretty much same as our hero section. Let's start with the basics. We're going to add a new section and give it a class section that we created. Then we're going to put a container inside and give it a class container and then we'll take it from there. We need a background color for this section. It's actually the same blue, but we have it at 10% opacity. We'll do the same thing in weblo, but the question is, how are we going to edit our sections background without altering same sections on our page? Well, if you paid attention to the previous lesson, then you'll know that we can apply a combo class to the section without needing to duplicate. There. Now the change is only reflected on this new section. Since we have the similar layout as the hero section, maybe we can do the same thing. Let's have a look. We have a flexbox inside a container, and this flexbox has two blocks left and right that sit next to each other. Let's build this out in a similar way. So we've added a div block and applied the flexbox class to it and put another boxes inside that are glued to the edges. Why? Because if you check the properties of the flexbox, you'll see that it has space between applied. This pushes those children boxes to the side. So whatever we put inside them will be pushed as well. Okay, on the left, let's put the image. We need to export it first. We're going to need to find a way how to make this image stick on the left edge like we have it in our designs. But let's first put some content inside the right block. Okay, so what's happening here? The left and right boxes are flex children, so they have a flexibility to shrink and grow to make space for each other. So in this case, paragraph is pushing things and making the left block shrink. What we can do here is to apply a maximum width to the right block so it doesn't go wild. We can check the width Figma and put that as max width, which is 467 pixels. Now, do you wonder why not fixed width instead of maximum width? Because on smaller screens, we want it to shrink. We want to design responsively. Is that a word there is responsive. Well, both we want to design responsibly and responsively. So mostly, consider using max and mean sizes instead of exact sizes. I have to point out here because this block is a flex child, it would still shrink even if we gave it an exact width. This happens because that's what flexbox does. It rules their children as it wants. They don't get a lot of say. Let's give this block some margin on the left so it's not so close to the image. Okay, now what to do with our image? How do we push it onto the side? I know we can add a negative margin to the parentif block. Yeah, that's the thing. Negative margins. And there you go. But this has a small issue. On a wider screen, the negative margin that we have added is not going to be enough. To fix this issue, we can do two things. First, we can use VW units instead of pixel units. Remember what VW stands for? That's right. Volkswagen, but it also stands for viewport width. So when we put something like ten VW, it means the margin will be 10% of the browser's width. So as browser increases, this will increase too. It's still not enough. We could add a few extra points and crop the image on smaller screens. But there is one more thing we can do is that we can widen the image itself, which means we can export more of the image. When we made this graphic, we have actually cropped the image. So we can reveal more of it and export the wider version. This way we will have more flexibility. Move the image in the middle, so the entire thing is visible and frame is encropping it. Otherwise, if you export it, then it's going to clip the content based on the frame. And enlarge the image or basically reveal more of it. Then again, we go through the same export. Check and check again this high DPI option. Otherwise, the old width value is going to maintain and it's not going to update the width of your image. And now we have more flexibility on how much of the image we can clip from the page. By the way, this is not a hack. This is a valid way of doing things in web design. What matters at the end of the day is not the method, but the result. Alright, let's finish up the content. Remember what we did with a button when playing with the combo classes. We'll give this button a combo class of blue and style it. The same thing we can do with a ghost button. A Let's use our paragraph to add spacing. 30 pixel on top and 60 pixel bottom. And actually, it doesn't matter where you add your spacing. You could even use headline and buttons, but that would need me to edit two elements. By using a middle guy, I can add space on top and bottom. It's less work and less amount of classes. So what do we have here? There is a line, and then there is image of stars and text next to it. Based on this side by side layout, we know that we're going to need an extra div block just for those two. This time, we're going to export stars in SVG format because they don't have any photography inside. They are vector based, so perfect for SVG. As I mentioned before, SVGs usually don't need to be compressed. They are quite small already. Also, Spigs don't need to have high DPI option checked because they export from Figma in one size, so there is no need to shrink them. They will look perfectly crazy in their original one X size. And even if you enlarge them as much as you want. A Okay, so how do we put the stars and tags side by side? Every time you want to put something side by side, start with flexbox. There are other options, too, but flexbox will give you the most flexibility most of the time. This flexbox that we created in the hero section has a center alignment. In our case, we want it to have a top alignment like our design, but we can't change it here because that's going to mess up the original flexbox, and it's going to mess up all the other instances of the same flexbox. Okay, so we can create a combo class and name it whatever you want, and then change the alignment to the top. Two things still need to be fixed, the spacing between them and also it's still not nicely aligned on the top. The text is sitting a little too low, so let's take the paragraph and style it a bit. 20 pixel margin on the side, just like we have it in the design and some negative margin on the top to move it up and align it nicely with the stars. And also let's give it a maximum width so the text jumps and cuts where we want. Whoops, what happened here? Check the flexbox. Of course, it has justify a plight that pushes them to the size. Just switch it to left line, and that's it. Okay, now let's add that horizontal divider. Oh, wait, there is no such thing as a line Webflow. Lines in web are made of as usual div blocks. Line is just a div that has a one pixel height or something small like that. Add a background black with 15% opacity. Give it a width. And let's add top bottom margins to space out the content. Easy peasy. One thing you might have noticed that sometimes I name classes myself and sometimes I just let Webflow automatically create a class for me. The thing is we should always name our own classes. But in the beginning, that's okay. Right now, we're just practicing and we're learning Webflow, so we don't want to torture ourselves by new extra decisions that we have to make on how to name classes and all that. For now, we're just going to name important classes like flexbox or container or section, something that we're definitely going to use, and we need to know what we are naming them. And everything else like these small paragraphs or whatever, we can just let Webflow automatically decide for us. Okay, so to recap, actually, there is nothing to recap, as we haven't learned new concept in this video, but we've learned how to use what we already know in different ways, like adding a negative margin on the image to push it to the side or using a one pixel height div block to create a line and a little more practice with flexbox. 81. Webflow: Footer (Chat App): In the very last section of this page, the footer, layout is quite simple. We used our 12 point grid to divide the footer in six equal blocks. Each block is made of two columns and one block is reserved for the space between the logo and the footer links. The most obvious option here is to use flexbox. As usual, let's add the section and a container inside. Add another block and apply our usual flexbox class to it. Now let's add another div block inside, which we'll name as Footer column. I'm going to give it a temporary background and height just to see what we are doing. And just like in our designs, we're going to use six columns. These are going to be equal width columns, so the entire flexbox will be divided in six equal parts. We can do that using percentage points, 100% divided by six, gives us 16.666, and so on. Instead of doing the math on our own, we can actually have Webflow do the math for us, just like Figma. Inside the width fill, type 100% divided by six. If we duplicate this six times, you can see how it fills up the entire space. Let's add the margins on the side, just like we have in our designs. They are separated by 30 pixel space. So here we should add half of that on each side, 15 pixel left and right margin. This way, margins from adjacent columns will add up to 30 pixels. However, we shouldn't have margins on the first and last columns because these margins will add extra space to already existing padding that's part of the section div. This might not be that big of a deal, but it's a great habit to be consistent. We can do this easily by using combo classes. Just create a combo class first and remove the left margin and same thing on the last column. All right. Now, let's put the content in the corresponding columns. Oh instead of using paragraph for regular text, we have another option for text called textblock, which is what we're going to use for this tag line under the logo. Text Block is basically a regular div with text inside it. It works the same way as a paragraph element, but they have different purposes. You should use paragraph for multi line longer text and main content of the page and text blocks for everything else that is not a heading, paragraph, or a link. You can use these two interchangeably. The result is the same, but it's a good habit to use them purposefully because search engines and screen readers can identify how your content is structured on the page. Another way to create a text block is just by double clicking inside a regular div block and start typing. It will turn it into a text block. For the footer links, we are going to add regular link elements. Let's dial the link before duplicating that way duplicates will carry the class. The foam color already shows the gray color, but for some reason, it's still blue on the canvas. This is a little odd behavior that seems like a bug on Webflow side. It is correct that it's blue because the gray color from the body tag is being overridden by more specific link tag, which has a blue color by default. So in reality, the properties panel should be showing blue, not gray, but there might be one reason why that's not happening, which I'm not going to go into right now because it's not really adding value to this lesson. So to fix this, just select some other color and select the gray again. We don't need it to be underlined that we can remove by selecting non under text decoration. We need some hover effect for this link, otherwise, they're not going to look like links. We can simply turn it into blue collar on the hover state. That's a simple and effective option. We could add a Hard transition effect here just like we did with buttons, but it's not really necessary. It's not a lot of change, so let's keep it without a transition. Now let's duplicate. But oops, it puts them side by side. Why is that? Can you guess? Because display for links is set to inline. That means it flows like text, which it is. So they are going to go one next to each other. If we apply display block instead, we know what's going to happen. It will occupy an entire width and stack on top of each other. But this method has one little issue, not really an issue, more like not an ideal user experience. Since it's a link and it's a full width, that means it's a clickable even on the empty space. Unlike our navbar, where similar thing is happening, the links interact even on the empty space. But here, the border on the bottom is a good representation that the entire thing is a link. If we were just highlighting the text, then it would be odd on the navbar too. So how can we make them stack on top of each other without them stretching edge to edge? By using flexbox. We can give the parent flex layout and give it the vertical direction instead of horizontal. Then left line, make sure to give this left line. Otherwise, it will stretch edge to edge by default just like a block. And there now it's stack on top of each other and empty space isn't part of the link. Okay, let's style our headline. Instead of applying a class to these footer headlines, let's style one of the heading tags, S H three, maybe. It might be the right level, H two, we could use for something bigger. A mid level headline. Do you remember how to style the tags? We need to select a tag from the selector, and now we are able to style all the H three tags. Let's remove the top margin and add a 20 pixel bottom margin just like we have it in the designs. And there we go. Now all H three tags will be style like this by default. One thing you'll notice that columns don't align on top like we have in design, let's have a look at our flexbox headings. You see it says a line center. What we want is a line top instead or stretch. As usual, let's add a combo class to this flexbox before we make any changes to not mess up other instances. Stretch is better because empty columns will stretch too and will be visible. Let's finish up the links. Remove the background. And that's it. In this practice project, we're not going to link these pages because we don't have other pages, but we could connect the contacts link, for example, to link the email address, so it opens up a new email window and the user clicks on it. We just need to put the email address inside this field. We can skip the subject line. And we can do the similar thing for the phone link. And also for the office address, we could link a Google Maps URL. Check opening new window so that Google Maps doesn't open up right inside this window forcing the users to leave the site. And finally, let's add the copyright text on the bottom. We're going to use text block again instead of the paragraph element. I I've added the text block inside the container but outside of the flexbox. And we can add 180 pixel margin on top, just like our designs. In our designs, the copyright text is quite close to the bottom of the page, 30 pixel away from the bottom. But in Webflow, it's much higher because our section block has a 90 pixel padding. We need to change the 90 padding to the 30 pixels. But before we do that, we got to add a combo class. And there you go. We're done with our desktop version of our page. Let's go to the preview mode and check how it all looks. So to recap, we have built the footer using a flexbox layout. We have given footer columns percentage width so they shrink and expand equally, and we have left one of the columns empty to create space between the logo and the footer links. We have learned about a new element text block, how it's used for non paragraph text in more of a general use. This concludes the current section. In the upcoming section, we will learn how to make our page responsive, so it looks beautiful and user friendly on any device. 82. Intro to Responsive Web Design: The times of responsive design, the websites were shrink down on mobile devices. Many websites are still made like this until today. Just very recently, I was looking for some information about Piers payment system and got to their help article 0R the support article page, which looks like this. It's a shrink down version of their desktop site. Using this sort of website on a mobile phone is just super annoying. You have to zoom in and move around and you know the drill. Luckily, with Webflow, we can use the power of responsive design and serve our users different layouts and very specific responsive layouts for their specific phones and specific devices that they are looking at. This way, everybody's going to have an optimal experience with our website. In this section, we're going to do exactly that, make our homepage responsive and optimize it for different screen sizes. First, let's understand how Webflow works with responsiveness. Inside the designer, we can see the switches for different devices. First one is desktop. That's where we are. Then it's tablet, mobile landscape and mobile portrait. In technical words, we call these breakpoints or media queries. They work like checkpoints instructing browser to change styles of elements if a browser width is in certain size and pixels. For example, if we make a style change on a tablet view, then this change won't be affected on a desktop. This is basically adding an extra CSS rule that says, I browser windows is a certain size, then show black background instead. And if we decide to change the background color on the desktop version, this change won't take place on the tablet view because we are overriding the background color. This uses the same inheritance rule as everything else. Remember how combo classes carries all the style information from the base class. But moment we change a particular style on the combo class, then we are permanently overriding it. So no future changes on the base class will affect for the particular style. I say particular style because that's an important keyword here. Just like classes, same with breakpoints, we haven't touched any other style besides background color. So everything else will be inherited from the desktop version every time we make the change, like this border, for example. The changes that we make to different views only apply to styles. If you change the structure of the page or add new elements, that will be reflected everywhere. Why? Because these breakpoints are CSS feature, not part of HTML. In CSS, we style things. We can't change the skeleton of the page. We can only change the looks, although we have an ability to hide and show elements using CSS. So if we want something on tablet but we don't want it on desktop, we can just hide it. This image is hidden on desktop version, but it's still part of HTML and still inside the navigator, as you can see. Another thing to note about style changes, when you make a change on a tablet, all changes will cascade down to the smallest screen. In other words, mobile landscape and mobile portrait will inherit changes from the tablet and mobile portrait will inherit changes from mobile landscape. You can overwrite styles on smaller devices, but any changes on smaller devices won't affect to bigger devices. This uses the same inheritance hierarchy like classes. Mobile portrait inherits styles from mobile landscape, which in turn inherits its styles from tablet, which inherits styles from desktop. Each device breakpoint has a range to it. We can see this range using this Canvas recisor. The tablet expands to the maximum of 991 pixels and shrinks to 768 pixels. This means 992 pixels is where desktop begins, and 767 is where it turns into mobile. The changes that we make to each breakpoint applies to the range. That's why we have to check by resizing the canvas each view to make sure it responds well. By default, Webflow shows the most common sizes in each view. When you resize that slider, you'll see that Webflow shows common devices for that specific pixel width. This is a good way for us to see how many devices are being affected by our changes and to make sure that we achieve optimal designs and optimal versions for the most popular devices. One thing to note, we're not able to apply specific style or independent devices. When we apply styles on the mobile portrait, then that style is set for the entire range of all the widths and devices whose screen resolution falls in that range. There is one more thing I want to show you before we move on to optimizing. We can reset any style changes we make by clicking on the blue style and clicking Reset, just like we would do with classes. The resetting will remove overrides and inherit value from the first higher level size. It even says here, where will the style be inherited after resetting? In this case, hero section class for a tablet version. The icon in front shows that it's a tablet version. As a shortcut, hold out or option when clicking and it will reset right away. And for the tablet, it shows that it will revert to desktop version and you can see that with a small laptop icon. So to recap, we're able to change styles of our elements for four different sizes, desktop, tablet, mobile landscape, and mobile portrait. For each of these device types, we also have an ability to shrink and expand browser within. So we can clearly see how our web page will look like for any number of devices, for example, iPhone six or seven. Styles are being inherited from top to bottom, from bigger devices to the smaller ones, and not in opposite directions. So the changes on mobile are not going to affect tablet or desktop. But change on tablet will affect the mobile. All right, up next, we'll get down and optimize our page for these devices, starting from hero section. 83. Responsive: Hero Section - Tablet: Alright, so let's start with the hero section. We'll go one by one for each device and optimize the style. First, the tablet for you. What issues can we identify here? We have the image that is shrinking too much because of not enough space. The content on the left has a minimum width, if you remember, so that means images taking the hit. Then we have a navbar that needs fixing. We'll have to see if we can actually fit our regular links in here. If not, we'll keep the Hamburger menu and style it. The hero section is way too stretched for two reasons. First, because of 100 VH we have applied to that section, and second, because of that similar 20 VH padding. Let's see if we can fit the navigation links. So how do we disable that hamburger icon and show the navigation links? We can do that from navbar settings. Click anywhere on the navbar and go to SETI. As you can see, it says menu icon for tablet and below. If we move the slider towards the smartphones, that will disable this from the tablet view. As a general rule, for user experience, showing links is much better approach than not showing them. For obvious reasons, it's easier to find and navigate. Real estate on tablets and mobile devices is very important. The spacing on these devices have to be much smaller than what we would do on a desktop. So let's remove that large padding that is applied to the section. Instead of VH, this time, we're going to use regular pixels because it will give us more predictable look, say nine pixels. Alright, the overall spacing for the hero is pretty good and we don't have bloated spacing. That's good. So what to do with a hero image? It's still quite small in comparison. The left content is too large and it's pushing the image. On desktop, we had enough real estate to be able to use such large headline, but here we don't we can start shrinking the sizes in the left block. A So we did shrink the content, but the image is not growing. Why is that? Because we have minimum width settings applied to the left block, and even though content is shrinking, the box itself isn't. So let's change this minimum width. All right, that looks pretty good. Let's test the fluidity of this layout by resizing our canvas. Great. It flows really well on the entire page. So the tablet layout for hero section is done. All changes that we made has not been reflected back onto our desktop. It's still the way we left it. Now let's move to mobile views. 84. Responsive: Hero Section - Mobile 1: As I mentioned in a previous video, the style changes cascade down to smaller screens. So all the changes we made to the tablet is reflected on the mobile views as well. Usually, this is a good start and sometimes might even provide good results for mobiles. But often it's not enough, and we have to add extra tweaking on mobiles, too. I like to use same layout for mobile landscape and mobile portrait. I use mobile portrait as my guide when I plan in my head and try to use solutions for landscape view that are going to work on portrait view as well. It's just a good way to save time and keep things more efficient. So based on the portrait view on mobile, I know that nearly everything is going to be in vertical layout. Not much space for columns and side by side layouts. There's no way we are fitting hero image and content next to each other. We will need to find a vertical alignment solution. Luckily, we have flexbox to help us with this. The default direction of flexbox is horizontal, but we can change that direction anytime to the vertical. And alignment options update as well when we change the direction. And this direction change is not going to apply to the desktop version. There, it's still set to the horizontal. That's how awesome the flexbox is. We can change the layout without altering the HTML structure and setting the styles on specific devices. But before we make these changes, let's give our flexbox a combo class because we are using this default flexbox elsewhere, for example, on Footer, and we don't want to make all these changes to all the flexbox instances. And let's center align the content. Real landscape view isn't actually as tall. Think of it when you hold your phone in a landscape mode. You're not going to get the visible screen this tall. It's going to be more like this. It means vertical real estate is very important for us. So let's try to shrink spaces and try to fit as much as possible. For example, this padding for this section. We already shrink this on tablet view, but we should shrink it a little more. Same here for the paragraph margin. 40 pixels looks decent. Photo is a little too tall and most of it won't be visible on the single screen, and user will have to scroll through it. So let's set the maximum width on that image. I'm setting maximum width and not height because if you do height value, then this will happen. Changing height doesn't preserve the aspect ratio, but width value does. So on images best to use width to resize them. Alright, something interesting has happened here. The image doesn't shrink anymore on a smaller screen, and it goes off the page. This is called overflow when elements go outside of their parent box. You will come across with overflow objects often, especially on smaller screens. This overflowing can happen for many reasons and it affects entire page. For some reason, image refuses to shrink, so it creates an extra space on the entire page. So how come image doesn't shrink anymore? Because when we gave an image maximum width of 500 pixels, we gave it the permission to grow all the way to 500 pixel, so it does, ignoring the dimensions of its parent element. This sort of behavior is common with images. Some other elements, for example, a paragraph is not going to do this, but images they do because they have an exact width as part of the file. O has a width specified in the settings. So by default, image will always try to grow to its original file size. And when we set max width to 500, it stops on 500, but doesn't shrink beyond that as long as it's allowed. To avoid this sort of behavior, Webflow has an added default value for every image that you drop in a max width of 100%. This means that the image will take up maximum of 100% of its parent element. For this reason, it's best to leave this value untouched. This thing always gave me a lot of confusion and clueless errors on my screen. So now instead of styling the image itself, I prefer styling the parent of the image. This way, we can avoid a lot of strange behavior down the line. All right, so let's give a maximum width of 500 pixels to the parent element instead. Now this behaves exactly as we wanted to. It doesn't grow beyond 500 and it shrinks when it needs to. Alright, we can conclude the landscape view here. We still have this horizontal overflow, but this is from other part of the page, and we will take care of it when we get to it. We do need to style the Hamburger menu, but we'll do that in the end once we're done with all the views of the hero section. Up next, we'll do the mobile portrait view. Stick around. 85. Responsive: Hero Section - Mobile 2: Let's finish up with the portrait view. Almost everything is overflowing here, but we can fix all these with similar measure we used on previous views. First, let's make more space by shrinking padding even more to 30 pixels. Same on the navbar. On the navbar, the brand block has a default padding applied to it. Desktop and tablet doesn't have this, but mobiles do, so let's remove that padding. I actually forgot to notice this on the landscape view. It's there as well, so let's remove that from there. Now we just need to shrink the size of the content. First, if you have a look at the left block, you'll see it has a minimum width of 300 pixels on it, so it refuses to shrink beyond that point. Let's remove that minimum and set it to auto. And let's decrease the size of the headline font. The thing with the headline is that on the narrowest screen, we have to make it very small. Otherwise, we get one word per line, which is not idea. This super narrow screen is for old phones. The web usage of these screen sizes are very small. I've checked the statistics, and they don't even seem to make 1%. So most of the time I don't go out of my way to make it perfect for these screen sizes and sacrifice more common screen sizes. But there is a way to make it close to perfect for this entire range. Instead of pixels, we can use responsive units for the font. In this case, VW for the viewport width. If we give the fond about 14 VW, that should shrink and grow nicely with screen widths. Now for the buttons. With buttons, we can change the display setting. So instead of them sitting next to each other, they can go on top of each other. Remember which display setting does that display block, which is going to stretch them edge to edge. Then remove that left margin and add a top margin to create a separation, and that's it. Our hero section is sort of done. We will stayle the navigation bar in the next video. 86. Responsive: Nav Menu (Chat App): So far, we are rocking our responsive versions. In this video, we're going to style the navbar menu button or as school kids call it, the hamburger menu, you know, because the icon sort of looks like a hamburger. Right now, it looks quite horrific, not to worry. Styling this isn't a big deal. First, let's style the button itself. The menu icon that's inside can be changed. We're not stuck with it. If we want to get our own icon and add that instead, we can, we can just delete the icon and add an image element inside the menu button, which is a simple div and upload your own icon in SVG or PNG format. Although there is one benefit of just keeping this default icon because the color is editable from the font settings, and this makes it easier to change colors. We could also build our own menu icon from div block. Sometimes I do this if I'm building a super snazzy animation for my client. For now, let's stick with a default icon. First the color. We'll need this in white. We can change the phone color to white, and that's going to do the job. When styling this element, stick to styling the menu button element instead of the icon. Next, let's increase the size. It's way too tiny. We can do this again from the phone settings, and 30 pixels should be good. And let's shrink the padding a little. Padding is what controls how much of this is clickable and visible on the drop down. And lastly, let's align it with the logo. We want it to be centered, not floating in the air like it is now. Can we center it? We could go on and change the navbar display to flexbox and do all that. But a simpler option is to just add a top margin on the button and then pull it down. We got to size this by eye. You can see it better in portrait view, and 27 or something like that seems like a good choice. We don't need to add a Hover animation here because it displays only on mobiles where we don't use a mouse, so hover is pointless. Now let's style the inside of the menu. Styling blindly isn't nice, so we can open the menu and style it while open. We can do that from settings, select any navbar element and go to settings and then click Show next to the menu option. This will keep the menu open until we style it. There are two other menu type options, but I'm not a big fan of those. I like this default drop down version. It's easier to work with and needs less styling. Now let's understand the structure of the whole menu. This knob menu block is exactly the same block that holds all our links in the desktop view. On desktop, it doesn't have any background and is arranged horizontally. But if we make any changes to it on desktop, those changes will be carried down on the mobile view too. Same goes for any layout changes. So if one day you see mobile links, arranged oddly check if you've made any changes to the desktop version. And inside this Knob menu block, we have all the links including the button. So to style the whole menu first, we're going to style the nav menu, and then we will style the links inside. Let's give this a different background color. Our black color from the design looks pretty good. Let's add the same padding on the sides like our hero section. That way we will be consistent with our grid. Right now, the links are notched inside a little because they have their own padding, which we are going to remove once we style the links. Let's also add top and bottom padding, but make it 30 pixels instead of 60. Right now, we have stars that are being inherited from the desktop, like the underline on the hover and paddings. Let's fix that padding first. We don't need side paddings. And let's choose an equal top and bottom to maintain the nice separation between the links. 20 pixels look good. We don't need a hover effect because it's for mobile devices. How do we remove that from the hover state, which we can find here under states. Click X under the border style to disable the butto border. When you test this, you'll see that border still appears. That's because we have this border enabled not just no hover, but also on a regular state. So we need to remove it from a regular state as well to avoid this funny behavior. And there now we got no hover. Okay, now the button, first, let's get rid of the left margin. Next, let's change display to inline block. Right now it's set to block. That's why it's stretching like that. For some reason, the button aligns in the middle. That means some sort of property on the parent element is doing this. There are two properties that could align it to the center. First, the flexbox layout, but our near menu isn't flexbox, so that's not it. And second, is a regular text alignment, and that would make sense because inline block elements can be aligned using text alignment. But if we check the text alignment of the Nav menu, it's set to left. And this is deceptive because in reality, it's not set to left. If you change the property to something else and then put it back to the left alignment, this time it will do what it says. This looks like an issue from Webflow. I might be wrong, but it looks like there is a default central alignment on the Nav Menu block, and Webflow, for some reason, doesn't reflect this in the styles. Whenever you come across with something like this, just follow your logic, and if what you see doesn't make sense, then play with the styles, and sometimes you'll notice that they're just pretend. One thing to note, you have to apply the alignment to the parent, not the button itself. Text alignment of the button will just align the text inside the button. Alright, let's decrease the margin of this button to match the rest. The spacing we use between links is 20 pixels top plus 20 bottom, total of 40. So let's total this to 40 here. 20 from the last link and 20 for the top margin. And same for the bottom margin. The real space on the top is 30 pixels from the menu padding and 20 pixels from the Nav link padding to match this 50 pixel total, let's add bottom 20 on the button. In there, that's looking good. We can keep the hover effect here. We don't need it, but neither is doing any harm. And sometimes on buttons, it's quite nice when you press it and it sort of changes the state. Finally, let's add the same background color on the hamburger. Now, for this, it's important that we add that background color on the open state, because if we add a background on a generic state, then we'll get the background when menu is even closed. Changing styles for the open state is sort of like changing styles for the hover state. It has to show this green label, but the open state is not listed in the state's dropdown. Instead, open state needs to be enabled from the settings by opening our menu. Just opening the menu isn't enough. Make sure this green label is there. You might have the navigation menu open, but this open state label doesn't show up, which means whatever you're going to edit, it's not going to edit on the open state. You need to click the menu button one more time for the badge to update. Now you can see the open label appears. This means edits that we make now will be reflected only on the open state. Now we can change the background color, and also let's round the top corner so it looks more polished. But instead of rounding all four corners, we're just going to round the top two and have the bottom two flat. This way, they will kind of connect with the menu. To do so, we're going to need to select the individual corners option inside the borders and then select the top two and then put them something like six pixel. Let's test our results in the preview. And there, it's all looking great. It's also looking great on the portrait view. We don't need to change anything except for one small detail. On portrait, we have different page padding. On landscape, we have 60, but on portrait, we use 30. We don't even need to open the menu for this, select the Nab menu from the navigator and change padding 60-30 and done. So we have successfully styled the Hamburger menu for mobile devices. We changed the color and size of the icon using simply the font styles. We've played with paddings and margins of the menu button to align it nicely in the navbar. Then from the settings, we opened the menu and style the menu item, gave you the background we wanted and adjusted padding. We've made small changes to the Nav links and a Nav button as well, remove the hover from the links, and tweak the paddings. And we've learned how to change the style of the menu only when it's open. Hero section is all done here for all the device views. In the next videos, we'll continue with the rest of the page. 87. Responsive: Overflow: Now we're going to move down and optimize the next section of this page. And while we do that, we're going to learn a new concept called overflow. This section looks pretty good on tablet and doesn't need much editing. Only one thing I'm going to change here is the top and bottom padding of the section. As I mentioned before, we need a bit more tighter spacing on smaller devices, so 60 pixels should be good. On landscape, we have an overflow. When you get this sort of overflow on the page, find the element that is going beyond its parent margins, that's going to be the cause of the issue. Here it's obvious that the paragraph is causing this because it's outside of the boundaries of the container and even section. The reason it's not shrinking is because it has a fixed width. We made a mistake on the desktop, and instead of setting responsive value like maximum width, we gave it a fixed width. Now, because this is not an optimal setting neither on the desktop, let's just style this on the desktop version and let the styles then cascade all the way down. And before we move on, let's actually understand what is overflow? Is it a bug or is it a feature? Actually, overflow is a very handy feature. It has its own dedicated setting in the styles. Let me demonstrate how this works. We have a div block here. I've added to this div exact width and height. It's 900 pixels by 300 pixels. If we put more content into this div block, the content will overflow. Why? Because it has a defined height, 300. So it's not going to grow beyond that size. If we remove that height value, you'll see the box will grow with a content. But sometimes that's not what we want, and we want to keep the box at exact dimensions. If you check the overflow settings of this div block, you'll see that it's set to visible. This means that overflowing content will still be shown. If we set it to hidden, the content will be clipped, and it's not going to show no matter what we do, even if we try to scroll inside it. But for such cases, we have another option to make the content inside scroll. But this option isn't very good because it always shows a horizontal and vertical scroll bar, even if there is not enough content to scroll. For this, we have a better option, the last auto. This displays scroll bar only if there is something to scroll. Horizontal bar is gone, and if there is content overflowing vertically, then it will show the scroll bar. This is always a better option if you're creating a scrollable content. Just to note on your computer, you may or may not see this difference. This depends on the settings you have chosen inside your operating system, inside Mac or Windows. Another thing to note, the overflow settings are set on the parent element, not on the children. So in this case, we set it on this white div block. If we set it on the paragraph, that's not going to do anything. Besides scrolling content, another common use for overflow setting is when we want to clip content, and that's usually done with images. We never want to clip text probably. For example, if we have a section with an image and we want to clip that excess of that image, we can set the overflow hidden on the parent element, and that's going to clip the image. All right, let's finish up our mobile views. We still have this gap on the page, but that's caused by some other element on a different section. So we'll take care of it once we get there. Now, let's do something about this very narrow look. On hero section, we have changed the padding to 30 pixels, but we never did it for this section. So let's do that. And let's decrease the vertical padding as well to be more economical on spacing. I'm actually going to decrease this on landscape as well because vertical space is even more important on the landscape. And reset the value on portrait, if you have changed them at any point, it's better to reherit values than to repeat the styles because it just adds extra code, which we don't need. And finally, let's do something about the headlines, too big for the mobile. Now, remember, the heading isn't a class. We style the tag. So this is how we're going to style this. Select all H one headings from the selector dropdown and then change the styles. That will change all H one headings for mobile portraits, but won't affect other devices. All right, 35 pixels works quite well. Finally, what to do with that image. It's too small to be anything. There is one thing we can do. We can have image go off the side and clip the overflow using what we just learned. First, we have to increase the size of the image. When it comes to changing image sizes in response interviews, never use these settings. This changes the HTML settings of the image, and that's going to change the size everywhere on all devices. You could also drag the image to resize, but don't use that either. It changes that same width that's inside the settings. What we want to change instead is the CSS style of the image because CSS style gives us flexibility to have different sizes on different devices. To do that, select the image. You see this max width of 100%. That tells the image to do not grow bigger than its parent container. So that's why it's shrinking. Since this is a rare scenario where we want the image to actually grow beyond the container and even beyond the page, we're going to edit that exact setting and set it to something like 170%. And now it goes off the page and sits bigger, now we can see a bit more detail of the image. But we have image overflowing like this. So what do we do? We need to set overflow hidden on the parent element to clip the image. But we can't set that on the direct parent, which is the container because container doesn't go all the way to the edge. The section does. So we need to put that overflow star on the section, but let's add the combo class to it so it doesn't affect all the sections. And there we go now, the image is clipping right on the edge of the section. So we've learned important concept of overflow and how to use it for our benefit. Overflow visible is a default setting, so it will show any content that goes outside the borders of the parent element. Oflow hidden is going to eclip the content just like we did here, overflow scroll and Auto will let the content scroll inside the container. But the scroll option will display persistent scroll bar even when there is nothing to scroll. 88. Responsive: CTA Section (Chat App): To action section doesn't look bad right off the bat. We can make a couple of twigs to increase the size of the image a little. First, I think the headline is a little too big. It wasn't an issue on the above section where there was more space and smaller tags. But here, it gets hard to fit more than one word per line. This is a good rule of thumb to use. If you can fit at least two words per line, then the font size might be too big. If we are doing a full website, we would hit more limitations of this headline size, so I'd rather nip it in a butt. Remember, this headline isn't a class. It's a default H one tag, so that's what we're going to style. By default, the tag is not selected. We have to do that each time we are styling. So I'm just going to go with the 35 Pixel phone size that we used on the mobile screen and just make that as a default H one size for all responsive screens from tablet to mobile. However, the headline still ends up wrapped in exactly the same way on three lines. The thing is, as we shrink the phone size, the image pushes the content block and shrinks the space that is available for the headline. This sort of kills our effort to fit the headline on two lines. So I'm going to give a minimum width. 340 seems good. Let's check the fluidity. Nice. Moving on. Here we're going to do what we did with a hero section. Change the direction of the flexbox to vertical and the line to the left. Don't forget to create a new combo class first, or it's going to alter all flexbox across the page. The content block didn't align because it has a margin set on the left. Let's remove that margin. Let's see. The image is way too big on wider version. Let's set the maximum width on the image, but better yet on the left block itself, as I mentioned previously, anytime I can, I try to style the container of the image rather than the image itself, except for the case in the previous video where we directly had to style the image. Don't worry. You don't need to memorize every single rule and recommendation I give you. You learn by making these mistakes and adopting your own rules and habits, and Webflow is a great help with this learning procedure. You can see everything visually and you can see the styles that are enable and that might be causing the issue without needing to read the lines of code. Even for those people who want to learn how to code, I would still recommend learning with Webflow first because it just is such an incredible help and guide, and everything in Webflow works precisely in the same way as the regular code does. This left aligned layout doesn't really work on this page anymore because as you can see, we've done quite a bit center alignment on most of the page, and all of a sudden having this left align, and it destroys the consistent layout of this page. So a better approach would be to have this one a center layout, as well. And especially on mobile devices, center layout is quite familiar and quite common way to go about these layouts. Now, the image itself can be left as it is on the left line because the way we've kind of designed this image, it's just not going to work well and not going to look good if we just slap it in the middle of the page, but at least we can do the content to be center line. And that's going to make it look much more consistent with the rest of the page, even if the image is still left a line because that's image, then that's the idea of the image that's kind of clips and goes off the page. So how can we do this? How can we do a center alignment? Now, we have a couple of few options, but one way we can do this is because the reason why this is a div block and it's a block level. So usually we'll stretch edge to edge. And the reason it's not stretching all the way is because it has a max width applied to it. So what we can do is just remove this max width here, and it will stretch all the way edge to edge. And then what we can do also is give text alignment to center. And anything that is text and anything that is in line block like these buttons, they will all align in the center of it. For this divider, what we can change is now this divider is not inline block. That's why it's not centering because it's a block level. And in reality, the browser and the HTML sees this div block as it is already edge to edge. There is nothing to align in the middle because it's a block level. That's how block level behaves. But what option we have here is we can do this centering option. What this will do is it will apply auto margins on the sides. And these auto margins will fill up whatever remaining empty space that are, it will fill up with margins. And same here, same margin here, same margin here will obviously push this in the middle of the block. This is exactly how our containers work. They have auto margins on the sides, and that's why they maintain in the middle, even though they're not in line block. This guy here, this is already stretching edge to edge, but it's a flexbox. What we can do is just switch it to a vertical alignment, and just make sure that you have some sort of combat class or a unique class applied to this, and it's not this generic flexbox class that we are using everywhere. And then switch to vertical, and then simply just change the alignment in the center. And we can create a gap here. We can use this gap feature, which creates we can also obviously add a margin on top or margin on the bottom of the stars, that works fine as well, but this is a very handy little feature. We can use and give it some gap in between, and that looks fine. We can potentially shrink this space a little bit. Something like 60. And then increase a little bit of spacing here between this content, and it's very tight. So let's give this 30 on the top, 30 on the bottom. So it looks a bit better and spaced out. Alright, I think this now looks much better. Let's test the responsiveness. Pretty good. And one thing we can do now is, as you can see, our image is actually going cutting way too outside. Which we don't need to do. We did have to do this when we were doing on this desktop because we are trying to kind of grab trying to do it for the very large screens as well. But here we have more leeway. I think, so we can see that's the maximum. That is the maximum it will go. So we can based on this size, we can shrink this negative margin. Until here. So there is more of the image visible, and that kind of fills up a bit more of a space and looks a little bit better with the overall layout. Finally, the portrait version. Okay, here we need to remove the minimum width which is set on the right block. Good. The headline tax is pretty big for the portrait, so let's shrink that too. 27 pixels look right. That's it. All looking snazzy. We just got footer left, and we are done. 89. Responsive: Footer (Chat App): So what have we got here? This is a flexbox that has columns inside. The columns have this percentage width applied to them. Let's keep mobile views in mind when creating a solution here. We will need some sort of vertical alignment. We could go for vertical option from the flexbox, but that sets everything vertical, even when there is space on the sides. A better option is to use a wrap feature. We've discussed this option in flexbox video, but let me refresh your memory. By default, flexbox tries to fit all children in one single line, be it horizontal line or vertical line. But when we enable wrap option, then children will jump to the next line or wrap to the next line one by one as needed. Let's change the justify settings to the there is this empty column, which was nice on the desktop, but not needed for tablet and mobile views. We'd like columns to align to the left without extra spacing. We can remove this empty column because it's going to remove from the desktop as well. But what we can do is hide using styles. Let's give it a combo class so we don't mess with other columns and then from display options, select Hide. The display in non property hides the element and frees up the space it was occupying. What else? The columns have the left and right margins. So when they jump to the next line, it's going to create this extra space. Let's remove that left margin and only use right, but make sure to edit the column that has only a global class. The first and last column have a combo class applied to them. We used it to fix some margins on the desktop. That's pretty good. And let's add a bottom margin so the columns on the second line don't jam into the first line. On smaller sizes, you'll see that they don't really wrap properly, and instead, the columns squeeze themselves very tightly. That's because they have the percentage width applied to them, which is fine on the desktop, but becomes unnecessary in this sort of layout. So let's get rid of it. Now that column width is automatic, it grows with the content inside, and that makes the first column too wide. We got to give it a maximum width so it doesn't grow this much. And that's better. And the whole thing wraps nicely across all views. One last thing we should tweak is the spacing between the copyright and the links. I think 60 pixels will be much better. Let's have the final look at the whole thing. A And that concludes our entire page development. In the next section, we're going to go over finalizing our page, things like publishing, SEO, and so on. This doesn't mean that we're completely done with Webflow designer and the development process. There is still more to learn things like CMS and forms and interactions and animations that can make any website look so amazing and so fresh and so modern and so professional looking. But all of those concepts we're going to learn in other parts of this course. One part, we're going to learn them inside this big client project that we're going to do from start to finish so you get hands on experience on how to start everything with a client with things like project brief and wireframing and designs and then moving to Webflow and developing CMS and blog inside Webflow and then interactions and then finally delivering everything, publishing with a custom domain, all that stuff. And we also some parts I'm going to put inside the advanced part of this course because you don't need everything. You don't need to learn everything in one single go. So I put everything that is not essential skill and essential knowledge for you to start freelance inside the advanced part. So once you reach that final part of this course which is advanced, you already know everything that is essential and that can get you started with freelancing. And while you're freelance while you're looking for jobs, you can also continue with advanced parts and kind of hone your skills and get better 90. Going Live: SEO (Chat App): Webpage design and build is fully finished. Now we have last bits to finish up and then publish. First, we need to set the SEO settings. SEO stands for search engine optimization and its set of practices on how to make a page more appealing to search engines like Google, pink, and do dot go. SEO is a whole separate field, and we're not going to dive into the details in this course. However, there are some things that we absolutely have to take care of. For Stars, these are title and meta description of the page. These are what usually show up when your page appears on Google. This is title, and this is meta description. If you don't set this up, Google will fetch a random text from your page. Well, not entirely random. It has its own rules, but we want to be in control of this and choose what exactly we like to display. These we can change under page settings, which we can find inside Pages panel. Go to the page you want to edit. In this case, the homepage. All other pages we have for our side will appear here, and each of these pages have their own individual settings, which can be accessed from this gear icon. Let me collapse these settings so we can go through them. Under general or group, we just have a page name. This page name is what shows up in Webflow. It's an internal name, so you can name anything you'd like here. Under access control, we can manage who can enter this page and who cannot. This is useful when you need to password protect your page. For example, if it's an internal company page with sensitive data and only certain people have access to it. Under SEO settings, we have two values title tag and meta description. If we leave this title blank, then Webflow will use the page name by default. As you type in these fields, you'll see search result preview, which is a good way to nail down that awesome title and description. There are many different ways to name your pages. On homepages, it's common practice to put the name of your company or a product first, then followed by some sort of tag line. For example, Chat App, simple Team chat application. And inside the description fill, we're going to describe the page. So since this is a homepage, we'll describe the product itself. Google and other search engines will truncate description beyond certain character count, usually up to 155 characters. Open graph settings are similar to SEO, but this is information that shows up when sharing content on social networks like Facebook, Twitter, Link DIN, and Pinterest. For example, when you share a link to a car you just bought, Facebook can pull title description and even a photo from the open graph settings of that page. If these settings are empty, then Facebook will pull random information or sometimes no information at all. We can put custom title and description, but we can also check these options to make them same as SEO. As for the open graph image, for that, we need to insert a link to the image, which means we have to upload the image somewhere and then get the link. We can upload image right on Webflow in our assets and then get the URL from there, or just use already uploaded image and get the link for it. This is a URL of this image which is uploaded on Webflow servers. Copy this URL and paste it in the image field. Now, you can see a preview of how it might look like when the link to this page is shared on social networks. Two other settings are not related to SEO. The site search settings, which might seem like they are SEO and Google search related, but they're not. It's actually about search functionality within our website. You see we're able to add search component on our website. Where users can search the contents of our website. This is useful if we have content based website like Blog, ecommerce, something where search makes sense. On small websites like a company website or a portfolio side, it's not really needed. The last option is custom code. It's not going to show anything right now because you'll need to add a hosting plan to unlock this feature. It looks something like this. Custom code gives us an ability to add our own external code to the page. Usually, it's for third party applications that we want to connect to our web page or some sort of JavaScript plugins or anything that is usually external, things like trackers, analytics, and all those kind of stuff, anything that is outside of Webflow, usually, and we will be able to just insert the custom code here. All right, so there's one more thing we need to do before publishing the sign. We need to compress all our images. So go to Assets panel, expand the panel, then select all the images and click Compress. And do the compression for all of the images in one go. It's going to take some time, especially because there are multiple images. So you're going to have to either wait before you publish or you can publish it now, and once the compression is done, then republish the site again one more time. All right, all of our images now have been compressed and converted into AV format. You can double check. You can see in the file settings of an image, how it's been converted into AV format and how the file size has been decreased. And just make sure to go through your images. And just to double check that there are no any issues with the compression. I mentioned previously, AVV does a pretty big compression. The file size is reduced really heavily to really small size, which is great, but sometimes it can produce some sort of artifacts and a little bit of issues with images. Really depends on the image, what type of image it is. Just to make sure there aren't any of such things. And if you notice on some of the images that there are some issues with an image, then you can try a web P conversion and then do the one more time conversion for that specific image into web P. And that's it. Now our website is ready for publishing, which we're going to do in the next lesson. So to recap, each page on our site has SEO and other settings. We use title and meta description to control how our page shows up in search results on sites like Google. In addition to this, we can set open graph settings, which is sort of SEO, but social media networks like Facebook, Twitter, and so on. 91. Going Live: Publishing (Chat App): So let's finally publish our page. This is quite a simple task. Go to the publish and click Publish to select a domains. Give it a moment. And there. Our Pixel Perfect web page is live and operational like a harm. All the responsive optimization that we have done can be tested by resizing and shrinking the browser window. The buttons and links aren't operational right now because we haven't linked them to anything. We're not going to do this on this practice project, but we will do it with this big client project that we're going to work on. Initially, your website will be published on Webflow subdomain. In order to publish our website on a custom domain, we need to add a paid hosting plan, and then we're going to able to publish our website on our own domain. Webflow'sHsting plans are very decently priced. This website would just need the basic plan. CMS based website is the one that has a blog or other sort of dynamic content that needs to be managed through CMS, which is content management system. We'll be building a CMS based website in the upcoming project. I'm not going to demonstrate how to publish this to a custom domain for this project, but I will show it for the next one. On a free plan, we are able to change the subdomain of our website, go to publishing and edit this field to whatever you like, as long as it's not taken. Think click Save. And as you can see from the published button, this is now your new URL. One last thing that we need to change is this little icon. This is called a fabrican. Right now it's showing a Webflow, default favicu, but we can change this from project settings. There are two icons here. First is this fabrican that shows on a browser tab and the second is web Clip. The web clip is an icon that shows up on iPhone when you save your website on a homescreen. If you don't know what I'm talking about, Safari has this feature to sort of bookmark a website. You can add it to a home screen and it will be saved next to all of your apps, looking just like any other app. I never use this feature, but since we have an option, we should change this icon here. We'll need to create an icon in Figma, which is just a regular image file, and we need to create some sort of icon out of our logo. Just add a new frame with the size of 256 by 256. Painted blue and maybe give it rounded corners. Then copy the logo, delete everything but the letter C. Enlarge it exported in PNG, and that's going to be our web clip. As for the Fabricant, we just need to scale this down to 32 by 32. A regular resizing isn't going to do the job. It's not going to scale both rectangle and the text proportionally. Instead, we need to use the scale tool, which we can find under the move tool. Scale tool resizes grouped objects proportionally. So if there are text images rectangle, it's going to lock the proportions of all layers inside and then resize them all together. It's a very handy little tool. And exporting PNG again. And then upload each one to their dedicated place. The dimensions of these icons have to be exactly those 32 by 32 and 256 by 256. Wepplo won't let you upload any other size. Now publish again to see the changes take effect. Just a little side note for safari users, Safari doesn't update the favicon right away, even when you refresh it multiple times, it's going to keep the old favicon. It does this because it saves the favicon in cache and pulls it from there instead of reloading it and grabbing it from the source all the time. So if you need to update the fabrican and see in Safari, the latest version, what you need to do is you need to either clear the browsing history or empty the cache, and you can do that from here from history, clear history or I like to use if you have this developed tab then it's easier because it will just clear the cache instead of the browsing history, which has some other stuff in there. Empty cache, and now when you reload it should update, there you go to the latest favican. That's all our web page is live. It's looking great and it's sharp and it works well, it's fast and it's responsive and just amazing. Notice how fast and effortlessly the page loads. That's Webflow is one of the amazing benefits because their servers are blazing fast and they're just very well organized and optimized for the pages and websites that are built in Webflow. And we've also done a good job because we built it with a very nice clean code, and website is just working well and loads quite fast. So good job to us. Up next, we're going to learn about Webflows o feature called the Editor. Stick around. 92. Going Live: Editor: Have I ever mentioned how amazing Webflow is? This is how amazing it is. Besides the designer, it has another view called the editor, which you can access from here. Editor is a place for clients and collaborators to edit the content of the website, and they can do this right on the live site, literally on the live side. No ugly content management and text editors. You can just click on the content and start editing. This is so incredibly useful for clients that I can't even put in words. Your clients aren't usually tech savvy, and last thing they want to do is figure out content management systems work. And the last thing you want is your client emailing you every time they need some sort of small change in the headline to remove a coma or add a new word to it. This sort of requests will creep up on you after you have finalized and shipped your project to clients. Well, if you're getting paid hourly, that's fine, but if you're getting paid per project, then you're working for free. We cannot change any styles or layout from the editor that's inside the designer. Here it's just content be text, images, or links. You can change an image just by clicking on it and uploading a different one. You can also change a links destination URL or the text. The changes won't be reflected on the live site until you click the Publish button. After that, all the changes will go live instantly and it's that simple. And obviously, these changes will be reflected in the designer too, which we can switch to from here. In case we want to restrict access to some parts of the content from the editor, inside the designer, we can go to the elements setting panel and check collaborators can edit this element. And now the headline won't be editable inside the editor. Inside the project settings, we can add extra collaborators. This is independent from the main account, and it's going to give access to the content management of the site. This gives access to the editor to form submissions, page settings, creating new CMS items like blog posts and so on. So that's the editor quite simple, yet powerful. There is nothing that we actually need to do about it. I just wanted to show you around because I don't usually work with an editor because I work through the designer, but this is usually something that you sort of teach your clients and tell them, Okay, so this is the option and this is how you do. This is how you edit the pages and so on. Webflow actually has tutorials on the editor, so sometimes you can just send the video tutorial like that, or you can record your own video tutorial, up to you. And that concludes the third and big part of this course, which was about Webflow and development. In the next part, we're going to do a full clan project, stick around. 93. PART 4: CLIENT PROJECT FROM START TO FINISH: in this part of the course, we're going to design and build a full project like we were doing it for the client. I'll take you exactly through the same process that I go myself. We now have a new project. You'll practice exactly what's involved in the rial project and take each step from Project Brave tow, wire framing, gathering inspiration, design and then building and delivering the full enchilada to the client. We're going to use everything that we have learned so far. Plus, we're gonna learn much more concept that we haven't covered yet, especially in wet flow. For example, CMS, which is stands for content management system in its basically wept, flows powerhouse on how to make dynamic website and dynamic content. For example, blawg, where we can pull information from the database instead of just building a static page for every single article. We can just have the database with content inside this database like a headline, the sub her, the name off, the author and everything and then just design and build one template for the article page and then have the database pull the content for different pages as we as the poor page loads and as the user interacts with a Web site, the second big topic that we're going to cover his interactions. This is how you build interactive elements and objects inside workflow that can animate, move around, disappear things like pop art forms, drop Tom's animated buttons or scroll animations that something happens, hides, reveals or just changes form on a scroll and much mark. All right, so let's dive right in. 94. Good Design Process: Usually my website project starts by client emailing me a one paragraph of description of what they want. And usually it goes like, Oh, hey, Vacco. We would like website for our app on, but we don't have screens or content or anything else. Yet it's very difficult to create an entire website out off. No content, no project brief and no app screens or no brio, valuable information that I can use for the website that's realign. That's how things work usually, and you don't get a perfect project with all the content and photos and app screens or whatever ready for you to start designing. In the beginning, I didn't have ah, process on my plan was to just wing it and just get going with the project and see where it goes. This was a terrible idea for three reasons. First I would get stuck. I would be staring at the screen without having any idea what to do and what to design and thinking. I just had a creative block or something like that. But no wonder. How can you design something when there is nothing to be designed? The second problem was big for me cause I would spend a lot of time designing something and creating and at least getting to liking a page or maybe have a page. And I would send this result to my client to sort of agree on the creative direction and look and feel that I was going towards. And then often I would get a complete rejection and that there would be like, you know, no, we don't like this style. We want something more like this. This was very frustrating for me in the beginning, because I get a little kind of agitated Ted and I'll start telling myself All these guys don't know what they're talking about. They don't have a good design taste and just bullshitting myself. Just say Okay, fine. And just get back to work. And Crumpley Bork on a new look. The third problem was this. Start my work and get to some sort of final results with, you know, going through different iterations and finally agreeing on design. But often the dummy. The content was dummy content inside, so that tax was dummy content. No photos were sometimes really, because maybe I needed photo. So far, users for testimonials or reviews or photo self team members or something like that. And they're not to give my client toe homework, too, you know, provide me and write and gather all that content that I need it. But often client would come back with a different structure for their content. So, for example, if I designed a section with three columns, the client would come back with a copy for two or maybe five columns. But this sort of content is optimal. If we have three or four columns for two, it's just not very nice. And for five, it's just too much content to fit in one row. This was absolutely not my client's fault. It was mine because I'm gonna have a process. I didn't have a proper design or project process to go through now, which is winging it. But the moment I figured this one out and created a proper design process and in project process for me, things have changed dramatically. It's the project just moved smoother and nicer. Ah, faster, last situations to go through and this is funny. But designing actually became easier in the past. I was just trying to take the whole project in one go in, just like stuffing myself with a full frickin Brito in one go, and it was too much to handle. I was in guiding my clients through different steps that we had to go through in my plan was just, you know, going to the room, locked myself and then one week later emerged with this brilliantly well designed website and then just hope and pray that clients loved it. So here's a three step process that great designers go through before they even pain the first pixel. The first step is to define a project brief. It's a short description of goals and details of the project. The project Brave asks important questions like What is the goal of the website and who is it for? An answer to these questions will align both you and your client on the same page, making sure that everyone has had it towards the same direction. The second step is creating a mood board and getting your clients feedback on it. This is something we already know how to do, and we've done it to gather inspiration for ourselves. But if we share this boot bored with our clients than we can get more benefit from it By sharing a mood board with your client, you can nail down a taste and a look and feel off your project because there is many different styles that you can go with, right, you can go a bit more photography having for your website you can buy but go a bit more. Illustration heavy, a bit more colorful, less color for right. So there is many different avenues you can take with with your project and your designs. And often clients have very specific tastes. So you don't want to find out some information because they do have a hard time explaining themselves and they don't know you're the designer and you have access to all the inspiration in the world. You know, these websites like cripple our interests and lap I lend book and you go there and you find inspiration. You gather this and you work this so you have access to these sort of inspiration. But they don't that websites they don't see that might not be that much. They're busy with doing other things right, and by sharing this information to them, you can nail down and kind of meat on the same page off the look and feel, because if you don't that what you're doing is you have to go through reiterations until you get to their sort of taste and that just so much more work to do, right? Why would I go through different iterations to finally nail down the taste in Just general , look and feel off the site where we can just grab examples from other websites and other inspiration and show them OK, which one do you like this for this? The third step of this process is to create wire frames. Wire frames are sort of a rough sketch off the site. A skeleton. We don't worry about colorist or typography or any need a greedy of design. This is, for example, or wire frame off YouTube. It shows what goes where and what's the content. Very simple. Not much design going on that it looks like a child wrote, but wine framing has a huge benefit because you are able to discuss with your client. A very important part of that website wants the content because design always has to accommodate the content because design off our small to line paragraph is going to be very different from a design off a 5000 ward document, right? So you have to nail down the content. What sorts off photos for software does the buttons go and everything, And doing this during the design process going through the situations during the design process is just much more work and more wasteful because you have to worry about every single pixel on caller and shades off different colors and shadows and all that stuff, which is absolutely unimportant when discussing the content and when content changes and a structure changes, then you have to dump everything that you designed already waste your time and then start over from scratch. But during the wire framing, it's very simple because there's not much to design. You don't have to worry about making everything aligned or pixel perfect, right, and you don't get frustrated if Climb decides that they want to restructure the entire content off the page keeps everyone happy and on the same direction to the final goal. So the three stages of good design process our project brief would boarding and we're framing at the end of each stage. You have to share the results with your client and agree with them and sign that off, cause if you don't do that, then sort of bits the purpose you need to get the feedback off the client to make sure that you're not going to a wrong direction when you keep your clients in the loo. First of all, they feel like they're in control of the project and they love that idea. They want to know how things are going. Second always shows you you're you're a professional, that you have a project process going on, and they know they understand that they are. They are in the great hats. And once you finalize all those three steps, that's when you move to the design process and design results that you produce are going to be much more appreciated and like by our clients because they were part off the process. And this is exactly what we're going to do in the upcoming lessons. Stick around 95. Client Project: Project brief: Project should start with a project brief, but it often doesn't. A project brief or a design brief is sort of a plan of the project. It's sort of a guide and agreement between two parties that you're going to move into certain direction and you're going to get the certain result. There are different ways to go through and create project briefs, but I have sort of my own way because I don't find an official and kind of industry adopted ways to be very useful because they are very big, too much information in it and very not very sort of relevant to everyday businesses and everyday real life scenarios like freelancing on up work and sending some information to somebody across the continent and not very useful for small projects. Maybe useful for ginormous corporations, and that's how they define the project brief because it has to go through committees and board of directors on that sort of stuff. But when I'm working mainly with small startups and interpreneurs and smaller companies, They don't need any of that. Their primary concern is time and money and to get to that project and get through it as fast as possible. So for me, project brief is basically answers to certain questions that I need to know. And these are questions that I ask on the kickoff meeting, so I have an initial meeting with my clients, and we discuss something there, and I have some questions prepared. For them, I ask them these questions, and they give me answers, and then at the end of the meeting, I sort of draw a project brief out of this meeting, basically answering the same questions on the paper, send it to them so they can agree that I didn't misunderstand something, or maybe we had a miscommunication. The two most important questions that I ask is, what's the goal of the website, and who is it for? You can't really design a solution to a problem before you know what's the problem it's trying to solve. I need to know target audience and who's going to be using this website. A website for a young crowd in their 20s is going to look a little different than a website for corporate managers in their 40s and 50s. For our project, I already have prepared a design brief, and it's a template that I created from my own design brief that I use, and you can use it for your projects. Take it and save it. Here's what you can do with it. When you get to a meeting, a chat or e mail conversation with your client or an employer, keep this document by your side and ask these questions to them. You will later refine these questions and add more or remove some to make it work for you. Once you're done with a meeting, fill this out, you can do this during the meeting or later no difference. Then export it as PDF. And send it to your client to double check if they agree. This will do two things. First, this is going to be a big help actually for your client, because what often happens is that my clients don't know what they want. And this is something that you wouldn't expect, but they do know that they want a website. But often they don't know why exactly they want the website, what sort of website they want, and they have many different ideas, and this is very common with terpreners, because a lot of terpreners, they are in their head, and there's just million different ideas just buzzing in their head, and they're excited about everything. And they have trouble to structure their idea and structure their mind in a proper way. By going through these questions and answers and then reading them this later in the design brief format, you give them the ability to create clarity in their had. So both of you are the same page. The second thing that's going to happen is that you will appear more professional. This shows that you know what you're doing and I have a specific system in place. Because of this, clients will trust you and your designs more. They will have better experience at the end of the day because they will get what they actually wanted because they trust your designs now. And they will be happier with the results, meaning they will share it with their friends who are often interprenurs themselves, bringing you more clients and more work. All right, so I have already filled out this brief. Let's imagine that we already had a meeting with our client, and we have agreed on this brief. Our client is a start up that is building a team collaboration platform. The goal of the side is to sign up users for early access. This means the platform isn't ready yet, but the company wants to market already and generate interest. This is a common practice with start ups to have a website during their development process or whenever they are building their product, because that way they can generate some interest because they go around looking for investors or try to get PR and media exposure, so they always need a website often before they even have a product. The target audience of this website is other start ups and teams that have employees working from different locations. Client wants a modern website using photography instead of illustrations and with a clean, minimalistic look. The website is going to have a blog. This means we're going to build a CMS, and it's going to need to collect form submissions. That's it. That's how simple the project brief should be. It's called brief, isn't it, so make it short and sweet. 96. Client Project: Moodboard: Board is something I always did, but I wouldn't share it with a client. I kept it as semi internal design process. In the beginning, I thought of design as an artistic process where you lock yourself in the room and week later come up with amazing designs that completely wows your clients. But that's far from reality. Often your clients have certain websites and style in their mind. And if you just go without agreeing on this common ground and come up with something out of nowhere, chances are you're going to miss their expectations. And you might come up with something better. But if you're missing their expectations, then you are disappointing them. If you agree on a moodboard, then the designs that you create, chances are are going to look like what your clients expected. Keeping them happy and coming for more. You've already practiced creating a moodboard, so we're going to skip that part where you gather inspiration. Instead, we'll use a moodboard that I've already created for the team collaboration product. I've just removed and added a couple more shots. In the Figma file, you'll find this moodboard. If you want a little more challenge, you can use the moodboard that you have created in the same assignment, although I'd recommend using this one and following along. Let's imagine that we have already agreed this moodboard with the client. Let's take a look at these examples and we can start noticing sections and elements that we like. This, we're going to use as a hero section. I like how the green contrasts with the image in the background. I also like this card layouts, similar to this. From here, I really like this section, similar to what we've already done in the remix exercise. I also quite like this testimonial cards, and I love that blue color, so maybe we'll use that one. It's a nice, vibrant blue and looks great on a picture. Plus, it really fits the team collaboration theme. Companies, especially bigger ones like Blue. Blue is an excellent color because it demonstrates cleanness, transparency, and proper conduct. But of course, they have to be good blues because there are some that suck. Here, I like the split sections, and also I like how interface elements are incorporated with the photography brings more life to the photos. I've also added this footer shot. I like this dark style, so I'm going to do a dark footer like this. Sharing a Moodboard, using Figma is very easy. Figma is a great tool for collaborating, unlike other tools like sketch or photoshop who require the use of third party apps. Figma collaboration is integrated inside. Here is how. On top right corner, you have the share button. Make sure to enable public link access, otherwise they won't be able to see the file, and then click copying. Then just share this file with your clients. They won't be able to edit or do anything with it except commenting. But this is a good way to share the moodboard that you wanted to show to them. You can ask them to comment on certain things that they like and certain things they don't. Here's a little trick. Open a browser incognito window and paste your links there, you'll be able to make sure they can access the file and see what they can do with it. I hate it when I share something with someone and they tell me they can't see it. That's just bad user experience and makes me feel ashamed when that happens. As web designers, good user experience has to become the way of our lives. We should try our best to make sure that clients, teammates, and obviously users have a good experience with everything that we share or create. Because if not asked then who? By checking it inside the incognito browser, you are able to see it exactly the way they would see it. Because if you just paste it inside your regular browser where you are logged in inside Figma, then you're just seeing your own personal view. Okay, they can see the board, and from this menu, they can access other pages on the file. However, they cannot comment unless they sign in or sign up. And if they are signed in, they will get this sort of view. This looks just like a regular view. They can see all the pages and layers on the left. The commenting feature is very handy when you work with projects. To comment, we have to click on this ad show comment option. You'll see the mouse cursor changes to this little balloon. We can drop a comment anywhere on a page. So when you share a moodboard with your clients, instruct them on how to make comments and get their feedback on the examples. They can tell you what stars they like. Commenting on specific parts instead of the entire screenshots. Inside your view, you'll see these comments reflect instantly. Just enable the comment option, they will even show on the right side. There's no assignment following this video since you'll be using the same exact moodboard. You can find this in the same file where the project brief was. It's just on a different page. Up next, we're going to create wire frames. Stick around. 97. Why Wireframing?: before I had my design process may have down. I often struggled with coming up with designs. The problem was, I didn't have content to design. You can't really choose a correct typeface. If you don't know the tax that it's going to go with, you can design a benefit section. If you don't know what the benefits are, you can choose the right photo. If you don't know what's the tax next to it. You can design a team page if you don't know how many team members there are. A team page with 55 team members is going to look very different from a page that has only three team members with really long biography. It's at one point I started working with this amazing agency from Australia. Unlike me, they had a proper design process. The first app was to write down the content off a page before doing any designs. Working with them got me into the habit of writing the content first, and I realized how much I was torturing myself by trying to design a blank piece of page. Once you have the content, design decisions become obvious and they come to you easily. Now. Getting content from the client is not very straightforward. Most of the time, they don't have any experience on writing the copy off the page right there. Not copywriters. They're not designers. They didn't have much experience with this, so they don't know how to properly. And what's the best way to structure a page or a website, and they need our help for this. Many designers don't do this, and they pass the hot potato to the client, and obviously the client will come. Who is going to come back with a content that is not very optimal for a page, and final result off the design is not going to be as good, meaning. The client is not going to get the best results, and they're not going to return for more business to the designer. Lose lose situation for both of the sides. So am I suggesting that we should write content for our clients? Well, sort of. But not really. Here's where wire frames come in. Generating content for me is part of the wire framing stage. Here's what I do is I start creating wire frames. I start thinking about the structure of the content and trying to uproot the page in the best way possible, based on the goal off that particular page beat home page or some other lending page or whatever it is now is that put text blocks on the page, I start filling those tax blocks out with example text with something that I think might be useful for this particular section. I'm not really a cooperator, and English is not even my first language, but I still write down content as much as possible. If you're English isn't very good, don't worry about that. That's not a problem because you weren't hard for your English skills. You're hired for design. Just be up front with your client and explain them. Whatever you're putting, there is your example and suggestions to help them, and they should write their own content. And what it can also do is you don't have to write that copy. You can borrow and copy them from other websites. So during your inspiration phase, you probably went through different websites and found some examples that are from a similar start ups or similar businesses, right so you can grab the tax from there and copy and paste them that. But always make sure to explain that you're not writing content for them so that you're not judging you for that content in that you gather this example from other sites and maybe even competitors. And if you are a little into right and consider taking a copyright in course, so you can add that to your services. Clients will love you for taking that part off their hands. You'll make more money, win win. And after I'm done with wire framing, I shared with my client and ask them to rewrite the content and remove anything if they want to and filled it out in their own wards. Having a layout already with pre field content makes it easier for them. Teoh, right that copy. Because otherwise then it's very difficult for him to understand what I meant there and what would be the purpose off destruction, maybe, and this columns and what they should write in that. But if I give them examples, then they get the idea and they can easily come out with something off their own. I avoid using Lauren Gibson and dummy text like that as much as possible But sometimes we have to, and we cannot avoid it, because sometimes I have to create a page for or a website for a complicated financial services that I have no idea how to describe. So in that case is I'm going to use dummy tax or maybe somebody's biographies or testimonials or something like that. There is no point off me filling out with anything and wasting my time on its right. We'll use dummy text. Another big reason why to use wire frame is because of provisions, because revisions are part of any design process. And if the revisions are happening right in the during the design face, then you're gonna take much more time, because then you're thinking about colors and making everything pixel perfect and wasting a lot of time on something that you sort of already designed and sort of attached your ah, ego to it. Because thesis what often happens with designers because whatever work that we produce, we kind of feel attached to that work. But when you're doing wire frames, you're not attached to it. They're just, you know, ugly skeleton looking doodles, and we can change it battery easily. Revisions are easier is there and you know nobody's feelings get hurt. This is a wire frame off one of my client projects. As you can see, it's devoid of any design collars and is very rough. Has no images or icons. I was making these website for a scooter sharing app. Let's go through this quickly so you can understand why I've done. And what was my thought process. The navigation bar is pretty simple. I didn't even put a low going there. Just a taxing. It's a logo. Instead of a hero image, there is an image placeholder, and that's all. At that stage. I haven't decided what would be the hero, and it's not relevant to this either. Although I have decided on the layout, I wanted to have a hero on the right and content on the left. If I wanted a hero's a background that I would put it as a background stretching edge to hatch on the next section, I chose to have three column content to describe how the product works in three steps not much designed, but layout is clear, and I also made the decision that how it works was an important section to have right after the hero. I have filled the content out myself, sometimes reusing tax from the competitors sides. An important part is to give example tax to the client, so they click and start writing right away without much research up. Next up created a section with a small demonstration off the APP with some benefit. But let's on the side on this section of actually already had a pretty good idea of how would design the section. I wanted to showcase the app and show them the app in action. So I plan to have a video gift animation off the app being used a little more showcasing and benefits of the product, like free parking insurance and so on. Then I had a pricing and testimonial sections pretty straightforward, and finally we have call to Action Section, and the food or closing pages, especially home pages with cold to action section, is a good idea. You want to prompt users to do something after they are done getting to know off a product or service you don't want to let them hanging. Their clue is not knowing what to do next. You might lose them so After I was done with their fire frames, I shared it with a client and gave them explanation off each section and the thought process behind my decisions. And here's how the final design ended up looking. You can see how the layout and content is the same, but it's sort of like it has been colored in. So those are the reasons behind using wire frames in your design process. Use them before you get to design Thank me later. 98. Figma styles: We create wireframes, I'm going to teach you two features of Figma that we haven't covered yet. We're going to need them to create our wireframes. These are styles and components. In this video, we're going to cover styles. You know how in WPL, we can style classes and tags. We can do something similar in Figma as well. For example, let's take a heading and style it. Under these dots, we have option for textiles. If we click on that plus icon, this will create a new textile from the currently selected text. We can name it H one, similar to what we do in web flow when styling O H one texts. Now we can take any other text and apply H one style to it. In the property disanel, you'll see that a lot of te editing options are disabled, like the phone size, line height, and others are gone. But we still have things like fill color and text alignment. They don't become part of the textile, so they can always be edited. It's not going to affect the textile itself. It will be applied only to that instance. If this was Webflow, we wouldn't be able to do this. Everything would be editable and reflected on all instances with the same tag or class. Inside the interface designers like Figma, this behavior makes more sense. To edit a style, click on it and then go to the edit style. We have an option to edit the style from here. You can change whatever you like and you will see changes to the style, instantly reflect on all of the instances. This doesn't seem like much, but when you have several pages with multiple headlines on each page, then you'll realize how big this is. We also have an option to detach the style. That's going to let you edit all the text properties and any future changes to the original textile. It's not going to affect the second headline because it's now detached from that textile. If you want to delete the style, this is not very evident, but right click on it and you'll get a delete option. Textiles are not the only thing we have in FICma. Almost every other property in the panel can have these global styles. Fill, stroke, effects, even the grid. The second most useful is always the color styles. From the same place, you can add a new color style. Just like textiles, it can be applied to all other elements that have color property. It doesn't matter if it's text or rectangle. Just like textiles, color styles are big. I often end up changing color several times while designing a website. I'm very picky with colors and can change my mind easily. God bless the color styles. That's the styles in Figma. Applies to nearly everything, f, co, text, layout, g. Up next, we're going to cover components. Stick around. 99. Figma components: L et's create a button. Now, if we select this button and click this component on the toolbar, this will turn this button into a component. Which we can reuse across our file and drag them anytime from the assets tab. Components in Figma are the group of elements. With styles, we create this global connection for one particular style. But with components, we can create a global connection for several styles and for every single object inside that component. The original button is called the master component, and the one we just dragged is called the instance. The changes that we make to the master will be reflected on every single instance. But each instance individually can override the styles for themselves. However, the changes are not going to be reflected back on the master or any other instance. You know combo classes in weblo. Just like combo classes, new changes to the master will affect only the styles that have not been overridden. The first instance did change the color to the green just like the master did, but the other two below didn't. Why? Because on the two below, we have overridden the background fill of the button, but on the first one, we didn't touch it. It still inherits from the master component until we override it. In exactly like combo classes in we low, other styles that we didn't touch and didn't override will still be inherited from the master. For example, if we round the corners of the button. One big difference between classes in waffle and components in Figma is that classes don't have other elements inside. For example, if you create a class for a hero section and you put headlines, buttons, and images inside, those elements are not part of the class. But in Figma components, they are. If I delete an object from the master component, it will be deleted from everywhere. If I had a new object inside the master, that will reflect every other instance. There are things you cannot override on the instance. For example, whatever is the component made of. You can remove or add new layers inside the instance. I can drag this rectangle inside the instance, that doesn't let me. Either I can remove an existing layer from the component. When I press delete on any of the ingredients, it does disappear, but it actually is only hidden, and you can see that in the layers panel. The layer is still there, it's just hidden. If I want, I can show it from here. Another thing we cannot override is structural changes like sizes or the position of the layers inside the component. As you can see, when I select the rectangle, there are no resizing handles. I can't change that. However, we are able to change the size of the entire component. The resizing of the rectangle is not possible, but resizing of the whole component, we can do that. If I change the size of the master component, it's not going to cascade down to the blue button because it's overriding it. But that's only for the full component size. If I change the size of the rectangle itself, that blue button is now helpless and we have to obey. Neither I can change the position of the text inside the instance. There's no way for me to move it. Now, as for things that we can override, we can override the styles of each element, whatever they may be. We can override the size of the entire component, like I mentioned previously, and we can override the content. Again, if we override it, then whatever changes we make to the master component, it's not going to be reflected. As you can see, the other two buttons instantly updated their text, but the blue button didn't. We're also able to detach instances from their component. You can do that from here. Once detached, it stops being a component and they are completely free and independent layers. Another thing we can do with instances is to reset the changes we've made to them. This option here will reset every single change we've made to the instance and inherit everything from the master. We also have an option to reset only particular properties. If we select the rectangle and go to the reset option again, the dropdown highlights all the styles that have been overridden and we can reset them independently. For example, we can reset on the background fill, or we can reset all the override on the rectangle without touching any changes that have been made to the text inside the button. If you have a closer look at the player panel, you'll see that master component has this diamond icon with four squares, and the instance has this single diamond icon. To locate the master component, you can select any instance and click go to main component from the properties panel. This will work even if the component is on a different page, but won't work if it's in a different file. A components are part of individual files. To add a component, you can either drag them from an asset panel or you can just copy paste either a master or an instance. If you want to create a new component, for example, like a primary button and a secondary button. First, detach the instance and then click create new component. If you instead click create component on a live instance, then that's just going to create a new component within instance as part of it. This gets weird, so make sure to detach it first. That's all for now, you'll get a hang off components with practice, and we're going to start that practice by wire framing in upcoming videos. 100. Wireframe kit: Several ways we can create wireframes. There are like third party applications that create wireframes like balsamic mockups and whimsical that I've used in the past. Some designers just use pen and paper and sketch the wireframes like that. I do that, but only for my brainstorming process, I don't share it with my clients. The best tools for us is still Figma. That's what I use these days. It's just easier to create wire frames there and share it with the client, the collaboration part of it and the commenting makes it easy for them to give comments, and also can share the access to the file with our clients, and they can fill out the content right inside Figma. The best way to create wireframes inside Figma is by using wireframe kits, which are pre made, ready to use component libraries, and we can drag them right from the component spanel and then put them on the page and sort of start building the entire page like a lego structure. There are a lot of wireframe kits available online often for free. But I wasn't very happy with what I found. So I decided to create one for you, a simple and easy to use kit based on what I use myself. And you can make this wireframe kit your own and use it in your future projects for yourself. Here's how this kit works. From the asset panel, we're going to drag pre made components that we need. They are organized like this inside the asset panel. We have buttons. We have inputs like different types of form fields, and we have placeholders like an avatar, and we'll build our wire frame using these components. Besides these elements, I have also added icons. These are free material design icons by Google. They are Figma components too. You can drag them, change colors, and so on. The assets panel has the search option, which is very handy. This will search through all of the components that are in the file, including icons, since they are regular components too. I've also created text and color styles. For example, when we need a headline for our hero section, we'll add a new, the usual way we add text, and from the textiles, we'll select heading one or any other heading style. When we need a paragraph, we'll again add a new text and choose a paragraph style instead. I have also added color style, so we can instantly give something a color without us, you know, worrying and testing it out and coming up with different color versions. Primarily, we will use this black s and phrase. This is a nice neutral color palette that's great for wireframes. I like wire frames that look faded, deliberately looking like it's lacking color, like a coloring book. For clients to understand that this is not a design. Speaking of when you share wireframes with your clients, make sure you explain your process and explain what wire frames are. Often they're not going to know what wire frames are. I've had once a moment when one of my clients thought that these wire frames were final designs, and he wasn't very happy with it, if you can imagine. The master components and styles that I've created, you can see them on the wireframe kit page. If you want to make any edits and changes, you can addit these master instances from here. You can also build and add more components if you like it. Make this wireframe kit your own and have it as your go to template for your future projects. It will make your wire framing stage smooth and speedy. One note about icons. If searching from the assets panel doesn't give you any results, take a look at here to see what's available. The names of these icons might not be as intuitive. For example, this trashcan icon is named delete, and searching trash won't bring any results. Open that wireframe kit file and make sure that you have the copy of a file in your account. Now we're ready to start wireframing. We'll get to it in the upcoming video. Stick around. 101. Wireframes - Homepage Part 1: In this video, we're going to start creating wireframes for our Tam collaboration home page. Inside the wireframe kit file, create a new page by clicking the plus icon and name it wireframes. We're going to add a frame and the grid, the usual way we do it. Desktop frame and our usual 12 point grid. Now that we know how to create styles, let's save this great style for later use in this project because we can, so why now we'll save us time later. For us to come up with some ideas on what content and layout we should have. Let's have a look at our project brief and the Moodboard. Be project brief is where the goal and high level details of the project is, and I Moodboard, we have a look and feel, which we already agreed with our imaginary client. So the website is going to be prey standard, but the primary goal is to get early access signups. That's going to be our call to action. We know it's going to have a block, and we'll also need a place for people to subscribe to a newsletter. Now let's have a look at the Moodboard. S. From the brief, we know that the client wants a website that is more photography based rather than illustrations. So I think this background photo approach is something that's going to be liked by them and a good approach over for our target audience. We could find a photo that audience relates to, so they can see themselves in it and that's going to help us connect with the audience. Based on that, let's wireframe the hero section. We need a background photo, not a real photo, but just a placeholder. Find an image element and drag it onto the canvas. And then resize to fit it to the full screen. Take it around 800 pixels in height, that's usually a decent size for the hero section. Now we need a navigation bar, a logo on the left, and the links on the right. Pretty straightforward. Let's use heading four style for the logo. The link style for the links and secondary button for the call to action in the na bar. I'm going to resize the button to make it smaller because we'll use a regular size for regular buttons. Mm. So far so good. Now for the headline and the subhead. We're going to choose a heading one style and choose the black color from the wireframe kit. It's a good idea to stick to this neutral gray color palette when creating wireframes. I really like this palette, actually, I stole it from a wire frame tool that I used in the past. In addition to the blacks and gray, stick to one primary color from those options, or choose your own primary color if you'd like, but stick to one. If you want to change the primary color of buttons, changing the field color on the entire component won't work because it has mixed content. The rectangle is blue, but text is white, so you'll have to change the rectangle only. But the batter option is to change the master. That's why we use components. Select an instance, then click to go to main component and in there just choose a different color for the background of that rectangle. The same goes for the secondary button, change two colors, one for the border, and one for the text. In my case, I'm going to stick with this original primary color. All right, I already have content in my mind. I'm going to steal the headline from this one, instant collaboration for remote teams. As I mentioned before, we're not copywriters, so we don't need to be perfect with the content. Just anything we think works and will give an idea to our clients as little dummy text as possible. Or just ask Cad GPT to write content for you. That's a valid thing to do these days. I'm not worrying about distances here too much, but still making sure they're air line. Now we need to urge users to do something, which is our primary goal to get their e mails for early access. This is commonly referred to as call to action or short CTA. CTA is either a form or just a button. Let's see what our inspirations are doing in this case. Many of them are using a form with a single e mail field. I think that's what we should do as well. We could have a pop up form, but when it's small form, especial with a single field, it's a better practice because it's less threatening. It's right there, no trig very transparent, asks user for just an e mail and they see what's going on. There you go very simply and quickly, we have a wireframe for our hero section. Thanks to this wireframe key, didn't take as much effort, and we didn't have to waste time on choosing phones and colors. This is how you should work with wireframes, thinking about the layout and content and not worrying about the look and feel. In your real projects, when you share the wireframe to your clients, you can add comments to different sections and different elements on your page to show them your thought process. To do so, switch to the commenting mode, and by clicking anywhere on the frame, you can add new comments. Clients love seeing the thought process that you put behind your designs. Because when you build a website and design a website for a business, you're not just giving them something pretty to play with, you're giving them a solution to their problem. Often, you're giving solutions to several problems like generating sales or or traffic, creating online presence and good brand and some reputation. A website that looks fancy and modern, that is going to create a very specific image and reputation for that company. And you need to show that you have a deep understanding of their problems, and you have come up with some potential solutions. In other words, you need to sell them on your designs. You made the first sale by convincing them to hire you for your services. Now you're making another sale. You're not done there. You're making another sale to show them that these designs that you created they are great solutions to the problems that they face as a business. I don't mean to use some sort of sleazy sales pitch or techniques when you're explaining your designs. Just explain your self like a designer and how you thought about these elements that you created. For example, that single e mail field that I've put in the wireframes, I would explain this to the client, something like this. My suggestion is to use a single e mail field for the call to action and the subscription instead of asking first name, last name, and so on, because one single e mail field is Low commitment from the user side, it's less threatening, and because it's also visible, we're able to fit it because if we're asking for several different things, then we would have to put probably a pop up form because then we would occupy too much space. But by showing the field, an e mail field is visible, we're showing that we're transparent. This is the only thing we are asking at this step right now, and this low commitment exchange will increase the overall subscription rate. And that's it. Now, if we didn't do that, and if we didn't explain our thought process, the chances are they're just not going to know the reasoning behind one fill, because they are not designers. They haven't been building websites, and they think from the business owner's perspective and not from the user's perspective, right? So they're going to think, wait, I'd like to have more information about the users. I'd like to know their e mail address, phone number, Social Security number, credit card details, and so on. Now, because you haven't put all these fields in there, and you just put e mail address, they feel that you're being neglectful, or maybe you just didn't understand their business challenges and what they want from the business. So they're going to feel that you're just not getting them and not offering good solutions for their business. So it is our job as designers to educate our clients about topics like this. But you can't educate your clients if you don't educate yourself first. So as an external reading, I would recommend you to subscribe to blogs and newsletters that share information and latest research and anything new basically about design or user experience topics and things like that example, Nielsen Norman Group is one such place you could subscribe to, they often publish articles and research about user experience topics. Also, prototyper dot IO, which has this newsletter that includes it's not that their primary focus, but it also includes the top posts, blog posts, usually about topics of design and user experience and everything sort of web related. If you like books, I'd recommend reading Don't make me think by Steve Crook, which is a great book about web and mobile user experiences and usability. And another one, the design of everyday things by Don Norman. That's the same Norman guy from the Nielsen Norman Group. And it's not really about web design, but it's more about items and everyday things that we use in real life. But it's a good introduction to the journey of user experience and understanding. What you have to look for and basically sort of a philosophy behind designing things and objects and items, which includes web because people interact with it, and especially web because usually it's a bit more complicated and a bit more difficult to interact with for people than regular items that we use in real world like Fork. Okay. So back to our wireframes, but we're going to continue that in the next video. 102. Wireframes - Homepage Part 2: We're back continuing with our wireframe below the fold. Let's see which one of the inspirations could work for our next section. It would be a good idea to demonstrate the product by showing some screens. A section like this could work, have the screens on one side and the text next to it. We could steal some content from Slack. Using content from the competitors is a valid option. This is how your clients will try to get ideas anyways. But make sure to put a comment on it and telling where you grabbed the content from. You don't want them to think that you came up with this content and then at some point, find out that, you know, it was grabbed from the competitor because they're just going to think that you just stole it, right? Here, we can add learn more link to the other potential pages that will explain the specific features in more detail, like they've done it here. It's a good way to direct visitors on different pages of the website, and also it brings a little more detail to the text block. We already have a link in style. Just change the color to your primary color. We can also add a little arrow to this link. Inside the components, we can search for an icon and grab that and put it next to it. That's all for the section. Now, let's create rest of the sections in the body. I was thinking of split section like this. Content is the same style as to what we just did, so we can just copy that. For the graphic, we're just going to put the image holder for now. Agh for our clients, we will explain our vision about these images that we're going to create an augmented reality view, adding ws from the platform onto real photos. L et's say some content for simple task management. I'm going to write this on my own. Don't judge me. Mm. Let's have one more of the same layout with the photo. Let's just duplicate this. I'm holding on out option key here, so it duplicates when I drag the whole thing, but you should know that by now. I want to see a fi metric to reverse the layout of this section. Group the content first. Then select everything, and these two pink circles should appear in the middle. Just hold it and move the content on the other side. So simple, a baby could do it. Let's now add a testimonial section. I really like this one here. I'm going to recreate it nearly as is. From a marketing standpoint, having testimonials on product or service websites is a great idea. It increases trust in the brand and audience gets a better feel for the product by reading real people experiences. One great way to design testimonials is by adding five stars just like they've done here. People love to see how someone has rated the product. It's more powerful and simply saying five stars on the page instantly brings people positive feelings about the product because there is a strong association in people's brains linked to those five icons. It's a little psychological technique. You employers will appreciate your understanding of such things. And. So I have just tried to match it roughly to the inspiration, not using any specific colors or anything. In real designs, we'll use golden stars and the white car, but here we got to keep the gray car, so we don't want to worry about the shadows to make the white car visible on a white background. Now just group the whole thing and duplicate it in a similar way as our inspiration. And the last one to go off the frame. One thing to note here, we don't want this whole card visible. We want it clipped like it's in the inspiration. So how do we do that? The reason it's not clipping is because it's not part of the frame anymore. You can see that in the layers panel. When you move something off the frame a little, Figma looks at your cursor and decides if you want it on the frame or off the frame based on that. You see how that group gets clipped when the cursor moves inside the frame or becomes fully visible when moves outside of the frame. To move it back, just make sure your cursor is inside the frame. Then position with arrow keys or in a way that you don't move the cursor outside. Fantastic. We can keep the dam tax inside testimonials. Those are something our clients would need to ask their users and produce it that way. Let's add those slighter arrows just like in the design. F. Lastly, let's add footer and be done with it. As I often do in my projects, I'm going to copy the Footer content from our previous exercise, since we use the same 12 point grid and columns fit just right. This reusing different components between different projects comes from a bit from laziness, but works out really well at the end of the day. You start to master these common elements as you use it in different projects and start understanding benefits and limitations of the layout, and at some point you refine it until you have a near perfect personal template. Now, let's update the colors and textiles. M. M. Later in a design stage, I'm thinking to use a dark footer like this. Since we know from our project brief that we need a newsletter sign up form, we can add a similar e mail form right here in the footer. Mm hmm. Mm hm. Mm. Mm hm. M. M. H. M. M. M. M. And there that's our footer. All right. Wire frames for the homepages done. Next, we're going to wire frame the article page for the blog. 103. Wireframes - Post Page: This video, we're going to come up with wire frames for the block post page. Actually, after home page is done, wire frames for the block post is much simpler because the navigation bar is already done, the footer is done, we just need to come out with the middle. We haven't done any research for the inspiration for the block and the block post. Let's find some examples and see what we can do. We don't need to create a moodboard for this. Let's quickly look through some examples. You'll see that most of it is quite standard layout anyways. As you can see, most modern examples have a similar structure, the headline and post details on top, then the cover image and the body text. We can do the same layout as well. First, let's copy the Na Bar. Nabar in most cases, you want to have the same across the entire site. Now, the headline, it's a common practice to use narrow width for post content. We've touched this in the good design part. The thing is paragraphs that are too wide are very hard to read because you start losing line brakes. A common maximum width is about 700 to 800 pixels for the body text. So let's make the content framed to be 700. This includes the headline. Not that headline has an issue with breed ability, but since we're creating this content, to keep things. Let's include the headline in it as well. Underneath the headline, let's put the author of the post and the date, just like other examples. In many of these examples, I like how cover image goes beyond the content, beyond this frame that we created. So we can do the same thing and create maybe 900 pixels for the cover image. For the body, just insert some dummy text. It's nice to finish the post with the author and the details. We already have it in the top, but it's a common practice to put the author on the bottom as well and a bit bigger in this time. M. M. M. After the post page website, usually have a commenting feature at the end. Most of these websites, they use third party plug ins to manage the commenting, like Facebook and discuss. Using third party commenting plug ins is a great idea. Most users already have either Facebook or discuss, and they can start commenting without signing up and all that stuff. That's what I do on websites too. I use discuss plug in, which is a little better than Facebook because it gives the site manager more control over commenting and moderating. We'll also learn how to install this discuss plug in, which is going to be inside the advanced part of this course, but for now, we just need to put a wire frame that looks like a commenting feature. Mm hmm. Mm. Finally, let's copy the. M That's all. Let's have a look at the wire frame from the presentation mode. Select a frame and click the play button. Looking great, now we can share this with a client, and that's it. They will be able to enter the presentation mode themselves too from the filing that you have shared with them. But as another option, you can also share the prototype directly. When you share Figma links with your clients, it's a good idea to explain how things work, how to see the comments. You've included how to add their own comments, how to enter the presentation mode, and so on. Whenever you share anything with the clients, be it Figma links or web flow or anything, always guide them through the process and explain and tell them how to make things work. Don't expect them to figure everything out on their own, all these wire frames. Figma and mood boards and web flows and prototypes might be overwhelming for them. And if they haven't been dealt dealing with such design process, then everything is going to be new, all these new tools, and they might have a hard time figuring out on their own. So guide them through every step of the process, give them small explanations of how to do something, maybe screenshots, sometimes even little video tutorials you could do. And they're going to love you for this. 104. Wireframes - Blog Grid: Every blog needs a page where users can browse all the block posts in one place. That's what we're going to do in this video. Create wire frames for the blocks home page. My favorite design for the blog is a grade layout, something like in this example, but in our case, we're going to do a bit simpler. We don't need to look for inspiration. We actually have something in our moodboard that we can use. This sort of card layout would be perfect for our block page. Each block card would have a cover photo, a headline, a few lines from the post, and author details. So first, let's prepare the page. Let's duplicate the post page and work it from there. We can keep the navigation bar and the footer. The rest we can get rid of. And let's enable the grid. First, we can put a headline in a subhead. We can name it a blog or latest posts or something like that. Now let's create a block post card. Three cards in one row so be the best layout, I think. Mm hmm. Let's give it a color from our wire frame color palette. Next, we need a thumbnail image which we can drag from the assets tab. Then a headline and a few lines from the block post itself. Heading three style should be good for the headline. M. And for the text, I'm going to go with caption. Paragraph seems to be too big. One advice, keep with wireframe kit styles, you want to limit your design decisions at this stage as much as possible. The goal is to concentrate on the structure and content. That's looking decent enough. Now let's add the author and date in just like on the post page. M. M. M. M. Well, good. Just one last thing. Let's round the corners like we did with testimonial cards. Actually, we shouldn't be worrying about rounding the corners. That should be left for the design phase. But what the have, we've already done it on testimonial cards, so we might as well do it here. That's rounding the background rectangle. Now, how do we round the image place holder? If we do it the regular way, then that's going to round all four corners, but we don't want the bottom corners to be rounded. It looks odd. We have an option here to round independent corners. Eight on the top corners and zero on the bottom ones. Now let's group the whole thing and then duplicate it to create a grid. And there we go. I'm not putting individual content examples for each card, not really necessary at this stage. However, in the designs, we will, because when presenting designs, it's important to make the work look impressive and as close to reality as possible so that clients can envision the final result much better. One last thing we need to add is pagination. You know those page numbers at the end of the grid, so users can go to the next page. With Webflow, the best way to create pagination is to have next and previous buttons. So we're going to drag one of the buttons from the assets tack. Change the color to something more subtle. Keep in mind, changing the color on the entire component itself, it's not going to work. You have to select the background rectangle and change the color there. Mm hm. Shrink the height of the button, and that's it. Bring the footer up and cut the extra space of the frame. Mm. By the way, when shrinking the entire frame, sometimes it might resize the contents. That has to do with constrained settings of each element on the frame. I want to go into details right now, but if that happens, just hold control or command while resizing the frame, and it won't do that. All right. All the wire frames are done. We can share this with our client in two ways. Either we can share it from a presentation mode, which will open each page individually, and to go through pages, we can just click the left and right arrow. Another way to share is to share the file itself. With wireframes, I prefer sharing the file because they are wireframes, working progress sketches, so feels more suitable like that. The designs I like to share in a presentation mode, so it's closer to the final experience of a website. That's it for wireframes. Up next, we're going to get started with designs. Stick around. 105. TeamApp Homepage Design: Part 1: The moodboard, we've got the wireframe. We're ready to design our homepage. Let's create a new page and name it design and copy the wireframe in here because it's going to be easier for us to follow the wireframe instead of going back and forth between pages. Next to it, let's add a new frame and our usual 12 point grid. Okay, let's find the background photo for our hero section. I quite like this photo because it looks non stock, a bit more realistic, shows that she's working remotely, and she's happy because our team collaboration platform is just that good. The only problem is that she's centered, and we want to have a layout where we can put content on the left, and it's not overlapping with her face. If the photo is a good quality, then we are able to move her around and position her on the right side. I have included all the photos and assets in the project file. So if you want to reuse same photos, you can do that, and you can find that on the assets page. But if you want to go for your own interpretation, and I'll definitely recommend you to do that, find your own photos and use that one instead. Mm. Mm. Looks pretty good. There is a good amount of space, so we can put our content on the left. Now, let's choose typography. This time, let's try to find a typeface that can work both on headlines and paragraph, not for any specific reason, but just to practice. For this, we need to find something that is neutral because we're going to use it for a paragraph and something that has a lot of weight variations. We can narrow that down in Google using number of styles. Six styles in reality, means three different weights because each weight has an italic version with it. So that's not really enough. I'm going to go with at least eight styles. This one is actually called work Sans might be a good option. Cabin isn't bad either. Just a quick double check of the typeface manual. Remember, we always read the font manual or avoid embarrassing choices. Excellent. All safe in that description. And now let's go apply that font to our page. Instead of creating it from scratch, I'm going to copy it from the wireframe in here. No need to reinvent the wheel every time. I'm just playing around here mindlessly, to see what works the best. I think this will do. Since we're not using a heavier weight, then line height doesn't need to come closer. Last mass means less gravitation on full. Hope you've been paying attention to your physics class in school and the paragraph text. We need to add a dark overlay on the image, otherwise, content won't be visible much. Now, for the call to action form. I'm going to use the blue from this design. But I'm actually going to brighten it up a little to make it even more vibrant. They also have this yellow on their page, so let's copy that, too. Maybe we'll find a use for it. You're free to choose different colors if you'd like, up to you, how closely you want to follow along with me, pixel by pixel or maybe remix a little. It's fine either way. There is a learning value in both of the approaches. Uh huh. I'm just eyeing the margins and distances here, not really going by the grid, as you can see. Always trust your eyes over any design guidelines and rules. Blindly following them sometimes will render far from optimal results. Mm. I'm also trying to avoid that corner of the furniture. The objects in the photo and our interface elements sometimes can interact with each other. This can be good interaction, but sometimes it can create unnecessary tension. Alright, looking sweet so far. Let's put a navigation bar. A U h. Let's make margins 12 on the top and bottom and 20 on the sides. If you want to do a ghost button here, you can or even to make this flow as well. Feel free to remix. A let's add a logo too. Here's another simple and quick way to make a logo. Just write the name in small caps and add a dot at the end with some contrasting color. And there you've got a brand new logo. Mm hm. So far looking good. One thing I want to fix, though, is that dark overlay on the image. Right now we are using a full overlay, but the model doesn't actually have to be sitting under a dark overlay because we don't have any content in front of her. Now, how do we brighten her up, but keep other parts dark? We'll use a gradient fill instead of a solid fill, go to the fill that we created and switch that to a radial gradient. This time not linear. Why? Because with radio, we can create sort of a spotlight on her. Now we can position that spotlight exactly where we want it to be. This handle on the left decreases the radius of that circle. You can play with other handles too to achieve exact result you want. Okay, now back to 40% opacity. And there you go. Her face isn't dark anymore and looks better overall. This is a great way to utilize images that have too much detail and too much going on in them. You can create spotlights on your focal points and then darken the rest of the image. All right, let's pause here and continue the rest in the next video. 106. TeamApp Homepage Design: Part 2: And we're back. We're going to design this section now. We're going to need to find some mockups for the product so we can showcase it. Just like the last time, I'm going to search for resources and then import them inside Figma. I'm going to try different keywords like project or task or dashboard. I've already found this mockup, which I'm going to import inside Figma and then use that. If you'd like to use the same thing, you can check the assets page. I have put it there. But also if you want to find something of your own, you can do that, and you can go on Resources page where you can find different free mockups and templates or anything like that that you could include as the product showcase. This meeting screen seems pretty good. We can bring that in and let's use our own blue. A To select contents of a group, hold Control or command and select with your mouse, it will do a similar deep select like you do by clicking and holding the same key. In press shift in case you want to diselect any of the elements. Uh, Since this screen is quite wide, we can move it off the edge. That's also a pretty good trick. I'm going to add a shadow to it to make it more visible. Here's a tape of her shadows. Make them subtle like it doesn't draw any attention to it. If it draws attention, then it's too much. The edges of the screen don't have a good contrast with the background white. There is a nice streak designers use in this case. We can use off white background instead of a purely white one. Sort of like what they are using here. We can grab this exo off white color and apply on the entire frame as a background fill. There, that's a huge improvement. The edges of the screen are much more clear now. A h. Uh huh. Let's round the corners now. It's always a better idea to round the corner on interface elements like that. It feels more finished. Pointed corners feel like someone gave up halfway through. You know, it would be nice to do something like this, to pop some elements out of the mockup. It's going to add more dimension and will make the whole thing much more interesting. Mm Here's a cool Figma. You can copy properties move from one object to another one. Like the shadow we just created, select a property inside the panel, click on the edge here to select it properly. Then Control C to copy and then paste it on the desired element. Or you can also create the style out of it and save that style and then reuse it on other elements. A Looking good so far. Let's add the content. And all looking fine. Now let's create a section like this. Usually, the way we've done in other exercise, we have the photo on the edge, but these guys, they have it a little different. They have a gap on the edge and also in between the sections, so we can do the similar way. We want to find photos that have a bit of free space in it for us to place the interface elements like in the inspiration. A busy picture is not going to work. Also, what I often like to do is to look for photos from the same author. When you use photos with different style, it creates inconsistent look. It's an obvious tele that the photos are stock and weren't made as part of one photo shoot for that website. Photos from the same contributor will often have very similar look. It will have the same style, same filtering and overall similar fill to it. Using such photos creates an amazing consistency on the page. In our case, we are in luck, the contributor of our hero photo does have other photos that we could potentially use. I'm thinking of using this two because they are taken in the same scene on that leather couch. So this is even bigger consistency. It's going to feel like we made our own photo shoot for this website. And I'm going to take some elements from the mockup itself of the product and place them just like inside the inspiration. Just place them over the photo somewhere. H. It's looking pretty neat. We've lucked out on these photos. They're not just same style and scene, but also both models are smiling and looking at each other's direction. 107. TeamApp Homepage Design: Part 3: Now, for the testimonial section, let's actually copy the card from the wireframe and make edits on it. That should theoretically save us time. Let's find some profile photos for testimonials. Mm. One thing you should never do is share designs with your client that has repeated dummy photos like this. This doesn't look very nice and sort of ruins the impact your design can make when sharing it with a client. Even with the names, doesn't really take much time to come up with some random names, but the visual f w impressive, looks real and can be appreciated better. M. M. There are some plugins that you could use for Figma that can create dummy content. This one that I'm currently trying is called Content real, and it can actually do a pretty good job with creating dummy names. Inside that resources page, I have put a link where you can find all the available figma plugins. You can go through that and find some different plugs that's going to help you speed up your workflow. Similarly, what I like to do with dummy paragraphs is to use different text instead of just having the same exact thing repeated. You see the wireframes we didn't bother about that because it's wireframes. They are supposed to look blend. But it designs, we want things to look as real as possible. Mm hm. M. All right, looking swell. I'm going to do the same thing with a copy it from the wire frame and style it right there. Mm hmm. Mm. As I mentioned before, I want to use this dark style. Let's try using our dark blue. It's okay, but I'm going to desaturate it a little, so it has less blue in it. I'd like it to be a bit more subtle, more towards black or gray. Luckily, we know how to fine tune colors, don't we? You can refresh your memory by watching fine tuning lesson in the color section one more time. I've been teaching you a lot of concepts in this course, so it's natural for them to slip out of your mind. Going back to those lessons when you need it is a great way to solidify your knowledge. We can remove some of the blue from the color by decreasing the saturation. Change that rack down to H S B, which is hue, saturation, and brightness, that makes the second box to be saturation, and in the percentage value, just decrease it. It's still the same hue and this new color still fits well within our palette. Just playing around with colors and sizes here. I like footer links to be faded and small. And that's it. Let's have a look at it in the presentation mode. So our home page is done and looking pretty slick. We have two more pages left, the block grid and the blog post page, and we'll get to that in the upcoming videos. 108. Blog Post Design: Our homepage design is down. Now let's do the blog post page. This is what we have from the wireframes. Let's copy this frame into the design page so we can follow it easily. Our homepage has an off white background, but on the blog, I prefer to have it white. It's better for text readability, which is very important when it comes to blog posts. So let's copy paste and navbar directly from the homepage design. All we have to do is just change the colors. For the links, dark blue is good, and for the button, we can keep the same style as this. But instead of white colours for the text and background, we can use our primary blue color. For the author blog, we don't yet have the special style like caption. We can just apply the paragraph style first the detach it and then edit. 15 pixels look good and don't forget the color. Gray would be fine here, the one from the local styles. We should create a textile out of this. I should have created this already on the homepage. There were some small text elements like this, and if I had done it there, we would have less design decision to make here and all of them would be linked and easily editable and manageable in the future. Imagine if the client comes back and says they don't like the phone style, then you'll see the true benefit of using styles. There we have the caption style now, and let's apply that to the data as well. A For the image, let's grab some photo from splash or pexels. There is this circle inside, so what we can do is set that image as a fill of that circle. A just remove that icon from his face. For the cover photo, let's find something and then just like the aor image, edit as an image fill. Excellent. For the body, we're going to select the paragraph style and give it a dark blue colour. I'm not going for the gray color like the homepage because gray wouldn't be as good in readability. On the homepage, it was okay because the text was not as much. But here, it's a blog post, and people have to have a very good, enjoyable experience when reading it. And if they are squinting or if the screen is flickering or if they're not seeing the text font properly, then they're just not going to read such a big amount of text. And for this author blog, the same thing, replace the image, then change the font styles and colors. H. Mm hm. A comment box, leave it as is. No need to style this because we'll be using a plugin, which has its own style. Also, no point in recreating that style here, but sometimes I take a screenshot of a plugin and insert that instead. If it's important for my client to know how it looks already. And footer is PZ. We can copy and paste, but there is a better option. We can create a component out of it, because we're going to have this footer on three different pages. And this way, if we decide that we need to change some designs, we'll be easily able to change one instance, and then all the three will update at the same time. That's it. Our blog post page is done. We have one more page left, which is the block rate, and we're going to do it in the next video. Stick around. 109. Blog Grid Design: In this video, we're going to design the blogs homepage. It's going to be quite easy since a lot of it is done. We already have wireframes and blogPost page. We can reuse elements from these two pages. Let's start by duplicating the blog post page. Delete everything on it beside the headline and let's enable the grid. Now, just arrange the headline and the subhead. Now for the cards, I'm going to copy one from the wireframes and take it from there. If you remember in our inspiration, cards are white on a gray background. That way, card is visible. That's what I want to do here, too, so we're going to paint the background gray just like our homepage. Now we can change the card color to white. Next, let's put our post image as a thumbnail. All we need to do is put image as a fill of a rectangle. The icon from the image placeholder we can simply hide or delete. We're not going to kid it again. We need another level of headline style that we can use in this card. 22 in size and semi bold, I think it looks good. Also, we can enable the capitalization of the text. This will make the headline more title like. Let's have this as headline three style in case we need to tweak it in the future. Now for the paragraph text. For the author and date block. I'd like it to be smaller than what it is right now. It's a secondary information and shouldn't have same importance as the paragraph. So I'm going to detach the textile and change it to 12 pixels. A For that little separator, I'm going to use a light grave. Such dividers, I always prefer to be lighter than the text next to it. Let's detach avatar of the author from the component. And let's make it ten pixel smaller. A We can tidy up these elements using Figma's alignment feature, select them and then center horizontally. Or as Figma calls it align vertical centers. Just make sure you don't have the layers group or it's not going to work. We can also use this tidy up or distribute feature to distribute them evenly. And once you do that, the new field will open up. That's a distance between the objects. We can change it to something like ten and Figma will distribute the objects with ten pixels apart. It's very handy. I'm leaving this empty space between the paragraph and the author block for a reason. I'm taking into account the occasions when a headline stretches over three lines. That way, we'll make sure the card doesn't need to stretch and they are all the same height. Great. The block card is ready. Now we can duplicate them to create the grid. We should put individual dummy content in these cards. Presenting it like this to the client isn't cool. What we can do to save ourselves time is to go on some blog and grab content from there with images, paragraphs, and all that. For example, we can go to medium.com and find content there. To download images, you can either screenshot them or use this Chrome extension link in the resources. It scans the page for images and lets you download them easily. Okay With their names, I'm going to use the content real plugin. I can select all name layers. And by clicking the names option, it will automatically fill in with random names. Okay, let's do similar with aors. Let's just make sure the gender of names is correctly matching the photos. We don't want a girl named Arthur. M There. The whole thing is so much better now. Looks real and way more impressive than just repeated content. But we need to fix the spacing on aor blogs. Now, names have created different gaps. Very last step, the next button, which we can just duplicate from wireframes and change the color. U. Just like we do with secondary buttons, we can take the gray color and decrease opacity. That's a simple trick to create colors from the same palette. We didn't do this in wireframes, but it would be nice to add arrow to this button to represent the next action. I'm going to drag the icon right from the wireframe kit. H. There. That looks nice. Move the footer up and all done with a blog page. A All the designs for three pages are now ready. We would share this with client and get their feedback and make any necessary revisions. Designs, I like to share from the presentation mode, click Share prototype and send that link to the client. It will open right in the presentation mode, explain them how to navigate between the pages. Something that might be evident to us often isn't very evident to the clients. And this concludes the section. We've done a lot. We learned a very crucial skill, which is the design process. We went from project brief then to moodboard and then wireframing. And then finally, we did the designs, which wasn't very difficult because of all the baby steps that we took before it. Without those steps, designing would have been way more difficult. Your clients are not going to know how the web design process works, and they might expect and often they do that you just sit down and start building the website right away. And often they even prefer that because they will save time and money, and they will have a website up and running as soon as possible. But building websites without designs, it's going to bring terrible results, and usually it's going to cost more time and money because revisions on live website are just they take way more time than you would do revisions on the designs or even revisions compared to wireframes, which is just so easy to do, right? You just move things around. You don't think about anything. Now imagine everything that we do inside Webflow, build everything, all the structures, and then all of a sudden, we need to completely redesign something and create a new interaction or new layout. And the same thing applies to the design phase itself, because when you're designing, obviously, you can design without wireframes and without content. But when you have wireframes, when you have that skeleton and when you have content that you are designing, things are just much simpler. And any iteration that you have to make during the phase of structuring your page and structuring the website, so much easier on the wireframes. Why do that on the design phase? So make sure to educate your clients on your design process. They will love you for your professionalism and for your confidence in your process, even if they resisted in the beginning. Alright, next section is all about building this whole thing in Webflow. Stick around. 110. Webflow Development 2: all right, This is my favorite part building designs inside Wetklo in this section. We're going to build that home page design, and we're going to do this by already using everything we have learned in weap Low, but also some new concepts that we haven't covered yet. In the next section, we're going to learn interactions, Tool inside wept flow, and we're going to use it to create some interactions and animations to bring the entire page to life interactions. Make Website more exciting and impressive is going to be fun. And in the section after that we're going to build up log where we're going to learn CMS content management system by wet flow and how to turn any page into a dynamic page to pull information from the database and how to actually build a database inside, ah wept flow and how to structure it so we can create the nice blawg with different dynamic fields like author's name, headlines, photos to cover photos and all that. So, without further ado, let's dive in, stick around 111. Webflow 2: Background styles: I in this video, we're going to build a small part of the hero section, only the background image. And to do so we're going to learn a concept that we haven't touched yet in depth, the background styles. To start with, let's create a new project. Webflow plan only allows two unhosted projects, and if you already reached your limit, which you probably did, you can delete one of those previous projects prefer the first one, the simple one. We're going to name this Team App and choose a blank template. A as usual, we start with the section. We already use background styles to set a solid color background fill to our DVblocks. But that's only one small part of what we can do with background styles. Just like Figma, we can also give gradient background fills, image fills and color overlays. All that is accessible by clicking this plus icon under backgrounds. First is the background image. That's what we're going to be using in this case. We'll come back to this later. The next, we have linear gradient, which works in a similar way as FigmasGradient. To change the start and end colors, double click on these markers. You can set the angle of the gradient too. In Figma, we use this stick that can be manually moved around. But here we have to set the angle by turning this dial or just clicking these rotation controls or putting the exact degree in this field. The next we have radial gradient. In Figma, we are able to move the positioning manually by dragging the handle of that stick, but in Webflow, we can do that by changing the positioning on this map. In a similar way, we can change size of the gradient from these buttons. They have explanation on how size is determined, but who cares? Just switch them around to see what works for you. The last option is color overlay. This is mainly used to put a semi transparent color on top of images, like what we did in Figma, but instead of a gradient, just a solid fill. For this to work, we have to add an image as an extra layer and place it underneath the overlay. It works just like you would expect. Hide show, drag them around, delete. Alright, in our case, we need to add a background image. We need to export the image from our Figma file and then upload it here. Oh We have three size options. First one is custom that lets us give our image custom values. Tiling is enabled by default. We need to remove that from here. We want the image to spread and fill the entire space of the box. For that, we need to select cover. With cover, the image will resize and crops so it can fit the full space. In other words, it will cover the entire space. With a contain, the image will resize to make sure that all parts of the image is visible. So no matter how you change the screen dimensions or the size of the div block, the entire image will always be visible. This means often there will be empty gaps. So cover is the best in our case. Now, as you can see, the cover setting is very fluid. It adjusts both the size and the cropping to make the image cover the entire thing. If it needs to, it will stretch the entire image beyond its original size. When it comes to cropping, we have a control over on which side it crops that is control under positioning options. This positioning map is a great visual way to adjust and see which one works the best. The default positioning, which is top left isn't very good. The laptop that she's looking at is actually important to the story. Without the laptop in the frame, we don't know what she's doing. The image gets confusing. So given this fact, we need to choose a position where laptop shows at all times. Centering might be better. This will anchor the image through the center and crop any excess on all four sides. For now, it's good. When we put the content, we might need to adjust. But we're forgetting one more size, the widest. We have to check there, too. This might not be visible for you, but the photo is a little blurry here. Why? Because the image that we have exported is 1,440 pixels. That's the size of our design frame in Figma. So on larger screen sizes, it will stretch, and the photo will lose quality. Right now, the full width preview that I'm looking at is 1,920 pixels. This is significantly larger than the 1,440, so the photo stretches beyond its original size. To fix this issue, we need to export larger image from Figma, and we need to export something that is going to be large enough to cover most of the screen sizes. And that's usually 1,920 pixels. Are obviously larger resolutions than that, but we don't have to go too crazy because that's a very small minority. And even in those cases, people who use very large screen sizes, they don't use their browser full width on their screen size. So often they will still shrink it and they might still looking at it on the 1920 pixel size. Okay, to export larger size for our image, we can simply input the width we want in this size setting. Put 1920 followed by W for width. And that way we will export the photo in 1,920 pixel Y. When you do this, make sure that original image that you put here is at least 1,920 pixels wide. Otherwise, you're just stretching the image like Spandex, and that's the same thing what happens in Webflow, so it's pointless. The original image that I placed in Figma was big. I just shrank it down to positioning it perfectly in the frame. Now we can go back and upload it for our hero section. And that's all. We've learned how to use background styles inside Webflow, primarily the image setting and how to positioning it perfectly to make sure it stretches and shrinks shrinks very well on many different screen sizes. I have skipped a couple of other rarely used settings inside the background styles, but by now, you already know my teaching style. I don't like to clutter your brain with things until we actually need them. We're going to continue with our hero section in the next video, so stick around. 112. Webflow 2: Navbar (Team App): In this video, we're going to build the navbar. If you remember, navigation bar is a premade component in Webflow, which we can drag right on the cavas from here, and we can style it as we want it. Here's a hidden Webflow trick. Press Command or Control E. You'll get this quick find bar. Here we can search all the elements and find assets and much more. You can search navbar and drag it directly to the page or just hit Enter and we'll insert automatically. Okay, so what do we need to do with a navbar? First thing that I noticed is the container size. Navbar is using a default container width of 950 pixels or something like that. If you remember last time, we've used a different container, but what is the container size we want to use? That's quite simple to find out. We just need to measure the container Figma, which is exactly the full width of our grid. Draw rectangle over it and see what's the width of that rectangle. That's 1,160 pixels. Now what do we need to do in Webflow? We just need to take the container and give it a new max width size. Why are we giving it max width and not the regular width? Because regular width isn't responsive. We want it to shrink when screen shrinks, and a regular width will keep it at 1,160 pixels, no matter the screen size. The navbar is glued to the edges when we shrink the screen, so we need to add some padding to it. And there we have it. Next, we need to change the background. Our navbar in the design is transparent. That's easy to change. Select the entire navbar, not just the container and change the color to transparent. Okay, now let's add the logo. We need to export it from Figma first. We're going to export it as SVG file because for vector based images, it's the best file format. It's a small file size, and it never loses quality no matter how much you stretch it. To insert the logo inside the brand box, we need to first drop the image element. Did you see what I did here? Quick fine, then search for image. And because I had brand element selected, it dropped right inside when I hit Enter. Next, let's style the links. But first, we need to add the font to our project. We're using a Google phone called Kavin. It's not inside the list of fonts here, so we have to add the font from the project settings. We can access that page from this link here. I'll take you exactly to the right place. I think we're using most of the phone style, so let's add all of it. And done, now we can go back to the designer and start building or designing. If you kept the designer tab open, make sure to refresh it after you add font, so the font shows up in the dropdown. Now, the obvious way to apply a phone to something is by selecting the element and changing the font. But this is not utilizing the full power of HTML and CSS. If we apply a font style on something high level, then it will be inherited by all of the children. The highest element in the hierarchy is the body. We can access body from the navigator. Once you have body selected, go to the selector field and from the dropdown, select body. When you select the body tag, you'll see some of the phone styles are in blue. That means some styles have already been applied to it by default. We can change the phone to cabin here. Now, every new element, heading paragraph tags will all be cabined by default until we overwrite them. Why is this approach superior to changing fonts directly on each element? Well, first saves time. But, second, just by changing on the body tag, we can edit the font on the entire website with a couple of clicks. That's it. Now Navinks are inheriting font from the body tag. You can even click on this orange link, and it will tell you that it's inheriting the style from the body tag. Now let's style rest of the properties on the links. Change the color to white from here. The other links were in style, why is that? Because we don't have a style class applied to them by default. By changing the car on the first one, Webflow created a new style class automatically and called it a nav link. Now we can take that class and apply it on other two, so all the changes apply to all of them. We have five Nab links in the design and one of them is a button. Let's change the sizes of the links to match the size of the button. If we select one of them and check the spacing properties, you'll see that their sizes are determined by padding. If we change these padding values to match the button in our designs, then we'll get the matching size. The padding of the button in the designs is 12 vertically and 20 horizontally. Let's style the last link to turn it into a button. We just need to add a background and round the corners. But we cannot just style it right off the bat, can we? It has the same class as others, so it's going to edit all the links. What do we do? That combo class, of course. Go to the selector field and type a new name next to the Nab link. That's going to give it a combo class. CSS is case sensitive, so it doesn't matter if you use uppercase or lowercase. I prefer using lowercase to save time. Webflow capitalizes automatically. I suggest using lowercase. It's faster to type, and also you'll see difference between styles that were created automatically by Webflow and those that you created manually. All right, so what are the properties of our button? It had a white background with 20% opacity and four pixel rounded corners. This A for Alpha is how you can set the transparency on the color. Put 20, and there you go. The rounded corners have to be applied from here under border radius. Excellent, Let's fix the spacing now. Links in our designs are 30 pixel from that top edge. We can create this in Webflow in two ways, either by adding 30 pixel margin on top of the container or adding a 30 pixel padding to the navbar itself. The result is the same thing, but second one is better, why? Because container is a class that we are going to reuse elsewhere, so it's best to keep it intact. Navbar class, on the other hand, is going to be used only in the navbar so we can safely style it as we want. As you can see, logo isn't centered. It's barely noticeable if you don't see the boundaries of the container, but we can't ignore such details. We want our website to look pristine, a work of art. So how do we center the logo in the middle? Anytime you need to move or positioning something, always start by thinking margins and padding. These properties will cover majority of cases. We can just add a top margin on top of the logo, and that's it. I'm just measuring with an eye here. Our navigation links don't have any hover effects on them right now. This makes the navbar dead and not very fun to interact with. Last time we added an underlying border to the links. This time we can do something different, something simpler like change of color. Here's one of the simplest, quickest yet effective hover effect you can use on many different interactive elements. Change the opacity on hover. How do we apply the hover effect to elements from hover state, which can be accessed right here. Let's change the opacity to 80%. And there this simple effect works on the bottom too. Let's add a transition effect so the hover change is nice and smooth. This needs to be added on a regular state, not the hover state, but it will affect the hover. You'd expect that it's editable inside hover effect, but it's not. That's how CSS works in this case. There is probably logic behind it. Let's test the desktop responsiveness, not the mobiles. We'll do that in the end. And that's it. Navbar is looking good. We'll finish the hero section in the next video. Stick around. 113. Webflow 2: Hero content: And we're back to build the content of the hero section. For Stars, we need a container, right? And give it a container class which we already created last time inside the Napbar. Alright, let's put our content inside the container. We've got a heading, a paragraph, and a form. We'll style the heading and the paragraph in this video, but we'll do the form in the next so we can cover forms more in depth as we haven't touched them yet. We need some space on the sides, just like we did with the napbar. We can add the padding to the hero box. But wait a second. This doesn't look right. The Nab bar now has moved even tighter inside. That's because we have a padding on the Nab bar. And navigation bar is sitting inside the hero block, so there's double the amount of padding, making a total of 120 pixels. So let's remove the padding from the navigation bar because we don't need it anymore. The one from the hero will take care of it. You can easily reset any of the stars by clicking here. I usually use shortcut, which is Option plus click. I think it should be Aclick for the Windows. Let's style the heading. Size is 55 and the weight is regular. This is the same with other instances of a headline everywhere in our design. So it's going to be a good idea to style this headline as an H one tag and not just a class. Remember what's the difference between a class and a tag? The tag is a basic HTML element. It's how you tell browser that something is a headline, a paragraph or a DO block. If we style an H one tag directly, we will be able to control all H one tags on our website without applying any classes to. Style tech, make sure no class is selected. So the selector field needs to be empty. Sometimes you'll forget and we'll style a headline directly. That will automatically create a new class. So any changes will apply only to that class. To fix this, just remove the class and start over. And select all H one headings from the dropdown. Now you're styling the H one tag. That's exactly what we want. We need the line height value. And since we never change the default line height of this headline, the field right now says Auto. WAP doesn't take that as a value, so it's not going to work for us. But if you click into the field, the placeholder tags will show you that default line height in pixels, which is about 67 pixels. If you want to stick to using percentage units instead of pixel units for the line height, then you can just do the math. The percentage value is relative to the phone size. For example, 100% line height means same as phone size. For a 50 pixel phone, that's 50 pixel linehight 200% line height would be 100 pixels, basically the double of the phone size. In our case, we can take 67 and divide it by 55 or phone size, multiply by 100, so we can get the percentage value and that's about 122%. I generally prefer using percentages because it has one big benefit. When you change your phone size on smaller screens, you don't need to change the line height because it's percentage value and it will calculate it based on the new phone size. Whereas pixel unit is going to maintain that height as you change the phone size. So you'll end up with some strange line height situations. Notice how the bounding box stays unchanged. That's because line height is a fixed pixel value. Whereas during the percentage height, the bounding box grows and shrinks consistently with the phone size. All right, I'm not going to set this to white color, do you know why? Because most of our headlines are not going to be white. They're going to be that dark blue color. So instead, let's set that dark blue color here, and then we will find another way to change this particular one to white. I'm going to enter the color styles edit mode so I can copy the color code. Otherwise, it doesn't show right off the bat, as we've set this color as a style. I'd also like to save this blue color somehow, so I don't have to look for the hex code every time I need it. Enter variables. You probably notice this little purple dot that appears every time you hover on some styles. This thing lets you save different values which you can reuse and control them from one place. For example, click on that dot, then click on the plus icon to create a new variable and just name that variable, dark blue or navy or whatever you like. This color now has turned into a variable which we can reuse elsewhere, for example, on a button. You just need to click that dot again, and now you can see the dark blue variable is available in the dropdown, which we can apply to the background of this button. If you think this works just like styles infigma, you're right. It's exactly the same concept with a different name and some other small differences, but the idea behind it is the same. For example, when you edit your variable, it will update all instances across your side. That's the same behavior as Figma. You can also unlink the value from the variable and then edit the color independently. Figma shows all its styles on the panel here when no element is selected, but Webflow has a dedicated panel for variables, where you can manage all variables in one place. Edit them, delete them, add new ones. This shows all the different types of variables you can add. When you delete a variable in places where it was used, you'll get this message. From here, you can either restore the variable or unlink it. And that's about it. It's a simple yet useful feature. All right, moving on. The H one tag is ready. If we add a new headline, now we will carry the headline styles. So how about that white color for the hero headline? That one we can simply add a new class to it and then style it into white. I like to add a class name white, in this case, if the color is only thing I'm changing. That way, the class is clear what it does, and I can reuse this class every time I need a white headline or any other white text for that matter. Whenever you're trying to apply a new color to something that already has a variable applied to it, you need to first unlink the color from the variable and then you'll be able to put the custom color. This option appears when you click on it, not from this pencil icon. By the way, many common color names work inside this fill, so you can just type them out like white or black, pink, and so on. One more thing I'd like to change is the top margin. There is a default top margin of 20 pixels on H one tags. That's going to add extra space to our spacing between sections. So let's just get rid of it. If we ever need it, we can always add it to the particular headline. As for the paragraph, we're not going to style the tag. We're going to style the class instead because the paragraph in the hero section is different compared to either paragraph or elsewhere on the page. Astly, let's position the hero content properly in the middle. That's as simple as adding a margin on top, but we don't want to add a margin on the container. We're going to reuse that container class across our page, and we already have it in the Navbar. So adding a margin on top will alter all the instances of this container. There are two ways we can go about this. We could add a combo class to the container and then at the margin. This way, our base container will be intact, but a little better option is to add an extra box and put the content inside. Then we can style that box as we want. I prefer this option because it's a little cleaner and offers more flexibility down the line. Add a new D block and just drag the elements inside. You might find it easier to do this from the navigator. Let's name this dip block something like hero content and add a similar margin that we have in the designs. Let's give it a max width so it's contained nicely in our designs. See, using the separate Dibblock already gave us more flexibility of what we can do with it. Excellent. Let's check the responsiveness. Perfect. Now it's all looking sharp. We just have a form left, which we're going to do up next. 114. Webflow 2: Forms: And we're back in this video, we're going to learn the basics of forms inside weblog. Inside Elements panel, there is a special section dedicated to the forms and form elements. First step is always to add a form block, which comes with some elements already. We can remove any of this as we like, and we can add more elements inside the form block. Let's have a look. What is this form block made of? There are three groups inside form, which holds everything that we currently see. Like the field and submit button, then we have a success message that is hidden at first and only shows up once the form is successfully submitted. And the error message that only shows up when there was some sort of errors when user was trying to submit the form. If we want to add new elements to the form, we can drag things like dropdowns and chatbox inside the form. Each form field has their own settings. If you click this gear icon or double click on the form field, it will show the setting for this input field. First item in the settings is the name of the field. This name is internal. It's just what we see inside the database. Users are not going to see the name. The label of the field is outside. It's not in the settings. It's just a regular text block that is sitting on top of the field itself, which we can edit and style just like we would with any text block. But if we want more minimalistic look where the label is inside the field and not outside of it, like we have it in our designs, then we can add this under a placeholder field. And then we can get rid of the label. The next setting is text type. This means what sort of text is accepted inside this field. Right now it's set to email, so it will only allow emails and anything else will give an error. If you want to collect names and regular text, then we will set this to plane, then it will accept any sort of information. You also have password, phone and number options. Underneath, we have an option to make the field required and maybe autofocus. Autofocus means that the field will be selected right off the bat as page loads. For a dropdown select field, click Settings to edit the list of choices that's inside the dropdown. You can edit the choices, delete them, add more, reorder them, basically everything you'd expect. We don't need a dropdown for our form, so we can get rid of it. All right, let's style our form. In our designs, we made the form to be horizontal, the field and the button next to each other. Here they are aligned on top of each other. So how can we align them next to each other? Well, the form block isn't any different than all the other elements on this page. We can give it classes and style them from the Styles panel. The flexbox is an obvious choice when it comes to horizontal alignment. Make sure to select the form element instead of a form block element because we are trying to align field and the button. The form block holds form, success and error messages inside. So it's going to align these three elements. This is what's going to happen. So one more time, select the element named form and then give it a display flex. Now we can style the field and the button independently. Our field is 56 pixels height, has rounded corners and has a text inside that is 16 pixels with a gray color. And Now, to make that placeholder text inside the field different color, you'll see that changing the color doesn't do anything to it. That's because this text color changes the color of the text that user actually types inside. You can check this inside the preview mode. But that's not what we want to change. That was fine as it was. To style the placeholder field, go into the states of the field and select placeholder. Now we can change the color of the placeholder text. Excellent. Now for the button. Let's give it a class name button. The text inside the Form button can be edited from the settings just like other form elements. This is a little different from other buttons where we can edit text directly by clicking through it. A I want you to pay attention to something here. You see how the button is a little taller than a field. But the button actually doesn't have a height and has a padding that is only nine pixels. So why is it so tall? That's because of the settings that are given to the parent flex box. You see here it says stretch. That means the flex children will feel the height of the flexbox until otherwise instructed. If you change that, then the height will change with it. But you might wonder how come the field has a different height. That has to do with a default margin that is applied to the field. That extra ten pixel margin is stretching the flexbox. So the button has now more space to fill. If we remove that margin from the field, then button will shrink and match the size of the field. But let's keep that margin for now. Sometimes when we have multiple fields, we need that margin. We can fix this issue by simply giving the button a fixed height. I want you to have a closer look at this behavior because often you will come across with such irregularities inside Webflow or generally when you're kind of designing and developing a website, because all the elements and all the setting sort of interact with each other and they change the structure of the website. So a margin here might be changing some other behavior on a very different element, right, just like what happened in this example. Ever something like this would happen to me in the beginning, I would always think like, Oh, is this a bug? Why isn't working like this? I always thought it was something with weblo. Then I would go around on forum searching for this bug with a button or a form or something. And then at some point, I get to the answer, and then answer would be quite simple. That's why I want you to learn how to look for the clues when you get stuck about something and think of it as a puzzle. You always think that there is a solution. The answer is somewhere there. It's not that the tool is broken or it's a bug or something isn't working properly, but there is some sort of puzzle that needs to be solved. As I remember, and it's always often it's frustrating if you are dealing with a tool and you're trying to build something and just not going your way and it's not working out, and you might feel frustration and you might get discouraged and you might not enjoy the process anymore. So I want you to kind of take a breath and look at it in a way that it's a puzzle and there is a clue, and you just need to get to the answer. So check each element and see what style can be interact with something else. And you'll get to the answer, and you're going to feel very good about it. Alright, let's have a look at the form in the preview mode. All looks good, but the button could use a hover effect. I'm not sure why this text is so light here. Could be because we played around with the placeholder text and made the opacity a bit lighter. Regardless, just reapply this gray color here and I will fix the issue. A simple her state will do a little change of the color. And that's it. Another thing we can change is the success and error messages. To do so, first, we need to show the states, which we can do from the form settings. Select the form block and go to the settings panel. Here we can switch between normal success and error states. Once you have success state enabled, then you can interact with it and change them as you like. We can even drag other elements inside or change the background, style the text, or whatnot. Instead of this success message, we can also redirect the users to a different thank you page, which we can do by adding a redirect URL in this field. But in our case, we're going to keep the success message. Same for the error message, change the state to show it and then style it as you like. I'm pretty fine with this default error message and its style, so let's keep it as it is. And that's it for the form for now. Once we publish our site, we will test the form on the live website and see how we can manage the form submissions. 115. Webflow 2: Mockup section 1: And we're back in this video, we're going to do a small part of the following section, just the content. Remember what we did in the previous website, we've created a generic section block. We gave it some default paddings, and that was it. Just like we did with the container element, having such generic section gives us a nice control over the website layout. So let's drop a new section, give it a class. Give it some padding both vertically and horizontally. We need 60 pixels on the sides on the Now bar, so let's repeat that. For the vertical padding, let's use 80 because in our designs, we're often using 160 pixel spacing between sections and 80 pixels on top and bottom will add up to 160. I don't have a strict rule on what sort of padding to use. Depending on the website, this can change, and most of the time, I'm just eyeing the thing. And now let's drop another container inside and apply the existing class container. In the designs, we have off white, a little blue, grayish kind of background color on the page. We've done that so we could have better contrast on white cards that we put on the page. Let's apply that background to the generic section. The headline is already in the right style because we've styled the H one tag previously. We haven't done that for the paragraph, so let's do the same, meaning let's style a paragraph tag. So all our generic paragraph texts are style without adding any classes to it. To do this, first select the paragraph, then go to the selector field and select all paragraphs. All right, now let's just dal it as usual, 18 pixels in size, 26 pixels in line height, and grab the color code from there. Excellent. Now for the Learn More link, there are two elements here, text and the arrow icon. There is a way to actually insert an arrow as a text like a symbol, but I'm planning to animate this arrow in the future, and in that case, we'll need an arrow to be a separate object. So we have a text and an image element. Let's at a text link. Just like with heading and paragraph, we are also able to style the Links tag. So instead of this generic blue, we're going to change it to our own blue. And all the links now will have that particular color. Now if we hyperlink text anywhere else, it will inherit the color from that link tag. But we cannot change too much on Links tag, like text size, for example, because links live in other places like paragraphs, buttons, and so on. So if we style it and if we give it all links to be 16 pixels, then if we link something inside the headline or inside a caption or a different type of text, then all of them are going to become 16, for example like this. So everything else that we need to style with a link, let's style the class and not the tag. To remove the underline from the link, just go to the text declaration and press on none. Okay, now we need an arrow, which is just an image element. Let's export the arrow image from Figma and insert it here. Export as SVG, that's best for such images. Sometimes exports from Figma are going to end up in a zip compressed folder. You're going to have to extract it first. On my Mac, I'm just going to double click and that's going to extract it. I think on Windows, it's right click and then extract here. There is a four pixel space before the arrow. It's not exactly align with the tax, so let's add a negative margin on top. Minus two pixels seems enough. Okay, that's all good, but there is one issue. If you check in the preview, you'll see that text is a link. You can see this cursor changing from a pointer arrow into a hand, but the arrow icon is not part of that link. It's a separate object. This is not the best arrangement. Ideally, we want the arrow to be clickable and part of the link two. There is a very simple solution for this. We just need to place both of these elements inside a link block. To refresh your memory, we have two link elements inside the panel. One is a regular text link, and another one is a link block. A link block is like a div block, but it's a link. So anything we put inside will be part of that one link. So we add the link block and then drag those elements inside that block. But we can actually drag the link element inside because that's not allowed. Instead, we need to add a regular text block. As you can see, the moment we put text inside the link block, it becomes blue. That's because that link block is part of that old links tag that we just styled. Let's add that class to that text. The underline is supposed to disappear, but it doesn't. We have to remove the underline from the link block itself. I took a very weird route to demonstrate this implementation of the link. But the reason I did this way is because it would have been a natural way for you to think, and it's going to be natural way for you to go through this process because when you want to add a new link, you're going to go, Okay, let me add a text link, right? And then you're going to have to add maybe an icon to the button or whatever it is, and you're going to think, A, how do I do that? Now This icon isn't clickable. And you might get stuck because you know you need to figure it out. So that's why I wanted to take that sort of mistaken route so then we can understand exactly how to come back and redo everything in a way that we actually want to because you will come across to these sort of scenarios when you want to build something, you go with the natural way that you assume it's going to work and then it doesn't and you get stuck, and you kind of go back and then reduce some things a little. This sort of trial and error and going through the bumpy roads of learning this is going to be the best way for you to understand this concept. Ever you're doing this on your own and building website on your own, there is one place you can always go to and find answers, and that's webloFum in their community. They're excellent community, people respond there. Even weblo has people who work for that community and for the forum, and they give answers there as well. But also other Webflow designers like me and everyone else, they are kind of contributing and answering questions. So if you are stuck somewhere, Google it and look on Webflow forms because often other people and other web designers had the same question as you, so you might find answers there already. If not, ask yourself and you will definitely get somebody helping you out and guiding you through and giving you answers. And you will find the link to the Webflow forum inside the resources page. So go check it out. All right. Lastly, we need to place these two elements side by side. We have two options. One is to use a flexbox, but second and easier option is to change the display property of the text. Right now it's block. Block means it will stretch and occupy the entire line of the parent. That's why ARR is forced to jump to the second line. But if we change it to inline block or inline, then arrow will come back up. The arrow is an image element, and image elements by default are already set to inline block, so that's why we don't need to change it. Let's add the space on top of this Learn More link. All right now, if we check the privy mode, the arrow is going to be part of the Link two. And that's exactly what we need. Finally, we need to give this content a maximum width so it's not stretching through the entire container. We're not going to touch the container, of course, we'll drop another div block and move all the content inside that. Let's give it a maximum width of 464 pixels, which is just like in our designs. And there you go. That's much better. That's all for now. We'll add the image in the next video. Stick around. 116. Webflow 2: Mockup section 2: And we're back. In this video, we're going to add the image to this section. As usual, we need to export the image, group the whole thing first, and give it a name. We can't directly export these essays. If we do Figma will export the cropped image. You can see that in the preview, but we don't want an already cropped image. We want it to be cropped by the page boundaries itself, more like part hidden away. Drag a copy of this whole group somewhere else on the page. This will reveal the entire graphic. And now we can export it. We need PNG and two X for tina resolutions. Let's add an image element inside this container and then upload our image. A Select high DPI since we're using two x. All right. Now what do we do? We've already done a very similar thing in the previous website, so a lot of things are going to be quite the same. We need the image to go on the right. As usual, Flexbox is a great option for this. That's what we used last time as well. To create a Flexbox, we need an extra Dao block where we're going to place content and image inside. Let's create a new class. And change the display to flex. Let's set the alignment to center. And while we're at it, let's set the justified to space between. Why? Because we want content to be glued on the left and image to be glued on the right edge. It's not going to change anything at this stage because there is really no space inside the flexbox. And the way space between setting works is sort of like a spring. It inserts a spring in between that pushes elements to the sides. But with zero space, there is nothing to be pushed. If we make image small, then it will work. It's going to be pressed against the edge of the flexbox. If you remember last time, we used a special trick to move image to the edge and beyond it, we use negative margin. So we're going to do the same thing here. Now, you'll see that at the beginning, the negative margin doesn't move the image, but then at some point, it starts moving. To be honest, I'm not 100% sure why this is happening. It definitely has to do with the fact that image is so large and it's going beyond the boundaries of the parent. This is why I always advise to never style images directly. Drop them inside a div blog and style that instead. You're going to get more predictable and proper behavior because Flaxbox does weird things to images, and it's just best to have them inside their own dedicated Dvlock and then it's going to behave properly and you'll understand what's happening and you're not going to have to deal with some weird behavior when the margin isn't moving, and then at some point, it starts moving, and on. But this time, I have used just the image so we can learn from our mistakes. One last thing we need to fix here is this overflowing issue. To fix this, we need to tell the section to clip elements if they overflow beyond the borders. It's simple. We just need to set overflow to hidden. Don't forget, overflow setting is set on the parent, not on the image itself. Let's create a combo class named overflow hidden. We don't want to mess with our default section and then apply this overflow setting. Excellent. Let's double check the preview and responsiveness. And we're done with this section? 117. Webflow 2: Photo sections: In this video, we're going to build this section. The layout is very similar to previous section that we already did, so why not just duplicate it and take it from there. Select the entire section and just do the copy paste Control C, Control V. I'll drop one after the other. The order of the content is reversed. We can change that by dragging the image element on top, and this will place image first. This image has a negative margin applied to it, but this time we don't need it. To remove that, we need to remove the class because we can't make any edit to the margin itself, that's going to affect the previous image. And now let's replace it with our own image. This time, we're going to explore the JPAG because we don't have transparent background, and JPAG is always better option than PNG in terms of file size. But still, we're going to compress it in our image compressor. Let's replace the content. Oh there we go. Remove the overflow combo class from the section. We don't need that anymore. Okay, we need some spacing between the two. Let's add the margin to the image. Okay, so what's going on here? The content was pushed to the right and off the page. The image is supposed to shrink, but it doesn't another reason why it's best to drop images inside a Dibblog, especially when dealing with a flexbox. I think we've learned our lesson by now, so let's wrap it inside Dibblock. When I say wrap something inside the DiVlog, it basically means to place it inside a Diblog. Create a new class and give it a 60 pixel margin there. This time, image is shrinking properly. Actually, it's not the image but the image wrapper is shrinking properly, and image element obeys the boundaries of its parent. The next section is very simple. Duplicate this new section, change the order inside the flag box. Although, in this case, we need the margin on the other side, create a compa class for the image wrapper element. Apply zero on the right and 60 on the left, and replace the content. Excellent. These sections are looking great. In the next video, we're going to build the testimonial section. That's going to be fun. Stick around. 118. Webflow 2: Slider Component: All right, so now we need to build the testimonial section. We've decided to use this sort of slider, sometimes called carousel or slider or carousel slider. To build that in Webflow, we need to use a very handy component called logically a slider. In this video, we're going to get to know to the slider component, and then we'll finish up the testimonial section in later video. Let's start with the usual section, container, so on. Then at a heading. Now let's add a slider, which we can find just searching inside a quickfinder. Or in the elements panel under Advanced section. This is a slider, a premade component which has a lot of freedom to be customized, but it does have its limitations sometimes. As almost with everything in Webflow, premade components aren't the only way to create such layouts or components. We could build our own slider from scratch, but it's a bit more work, and this premade slider does a damn good job for most of the time. Slider takes up a full width of its parent container. So if we move it right on the body outside of our container and the section, then it will stretch edge to edge. Let's see what it's made of. There are four elements inside. First is mask. This is where our slides go. Right now, there are two default slides inside. Of course, we're not limited to two. Then we have left and right arrows, which are link blocks with an arrow icons inside. And the last we have the slider navigation. These are the white dots that you see in the middle. They are clickable and will take you to the corresponding slide. The slide itself is just a good old Dvbloc. Nothing particularly special about them. They can be styled as any other develoc and we can drop any other element inside them. Let's change the background of each slide so we can see better what's going on. Let's check that in the preview mode. Two slides, red and blue arrows and the navigation dots switch between these slides. Basically, what's happening is that there are two DV blocks sitting next to each other, horizontally and controls move between these dive blocks with some animation. That's all. There are multiple ways we can switch between the slides inside the designer by using Controls. Or from the slider settings, which has its own arrows or from this drop down where we can select exactly the slide we want. That's how we switch between the slides so we can edit them individually. We have two options to add slides. First, we can add a new slide from the settings panel by pressing Ed slide. To be able to see the slider settings, you have to have some element of the slider selected. As you can see, now we have three slides. This has added a new slide DV Block inside the navigator too. The second option is to duplicate the slide element, either by right click and duplicate or the usual Control C Control V. Deleting slides happens in a similar way. Select a slide either on the canvas or in the navigator and hit Delete key. Since the slide is just a regular DVlock, we can add other elements inside like text, images, buttons, and so on. We have just added this into the first slide. The second blue slide is going to be empty. We can add similar or different content in the blue slide, too. So that's the slider. In the next video, we're going to turn that ugly slider into pretty carusel made of testimonial cards. 119. Webflow 2: Testimonial slider: So that's the slider component, but that flow slider looks very different from our designs. Arrows are different, their placement is different. There are no navigation dots, and we are seeing multiple cards at once. W on this slider element, we only see one slide at a time. But not to worry, we can actually style the slider in a way to make it look exactly like our designs. First, let's add a space between the slider and the headline. Just like anything else, we can style the entire slider element, which again is a good old dV block with a bunch of other elements inside. Select the slider element, give it a class, and the top margin of 120 pixels. Let's get rid of this gray background. It's part of the slider element too. Go to the background settings and change it to transparent. And let's change the color of the arrow so we can see them. The icons here are text base. So if we change the text color, it's going to update the color of the icons. Y we don't need those navigation dots, so let's get rid of it. But deleting doesn't work. Weblo thinks we don't need the slider and deletes the whole thing with it. So there is another way to remove something. Select display none, and it's gone from the spacetime continuum. Floating somewhere in a different dimension. Next, we need to build a testimonial card. This should be quite straightforward. We're going to drop a new DV block inside one of the slides and build all the necessary parts. Give it a class of testimonial card, a white background and the same dimensions as in our designs. And round the corners. Now we're going to add a box shadow just like in Figma. To see the settings of the shadow, make sure to select a correct object that has a shadow applied to it. If you're using a shadow style like I am here, you can unlink it from the style so you're able to see exactly what's going on inside. These are all the values. We need to recreate the shadow inside Webflow. There is an extra value inside weblo the size, but you can ignore that one. As you can see, the card isn't fully visible, the slider is clipping it. That's because slider has some default height to it. Yes, it does say height auto, which means it should expand based on its content, but it doesn't another case of default values not being true, type by hand auto one more time and hit Enter. That Okay, now for the content inside the card, we have stars and the paragraph. We'll need to export the star icons from Figma, export all five stars as one, group them if it's not a single group for you and export as SVG. We need to apply padding to the card. We have 40 pixels on all sides, except the top, which has 60 pixels. We need distance from the stars, which is 30 pixels. A little negative margin to align the stars better. And we need the author block. Export these avatars as two X P and G. Let's add a new Dive block and organize author details inside. First the image, then the two text blocks. Givech text block some class and style, the same way as Figma. Now we need to move the text on the side of the avatar. How can we do that? Of course, we could take the usual path of using a flexbox, but we would need an extra box for that, and it takes more clicks. A simpler option is to use float. Under position, we have drop down for float and clear. Open that up. There are three options, none, left and right float. The icons sort of show what it does. Select left float. This will position the image to the left of the text. And that's all. We need to adjust some spacing now next to the image. Then between image and the paragraph, which is 70 pixels. And finally, we need to add a little margin on top of the author name in order to center the text with the avatar. Now let's duplicate this first slide and see where we stand. I as you can see, we're only seeing one slide at a time, but we want them to display all next to each other as they fit and slide between visible and invisible parts. The reason we're seeing one slide at a time is to do with the width settings of the slide element. It is set to auto, which means it's going to stretch 100% of its parent container. If we give it a fixed width, then it will shrink accordingly. So let's give it the same width as our testimonial card. If you notice the slide box has shrink now, it's as wide as the card. And now let's duplicate it. Delete the others and duplicate the one with a correct width. And there you go. Now they're aligning just like we want. Let's add margin on the right to create the separation. Okay, let's check the preview mode to see where we stand. Have four slides and they slide exactly the way we want them to, except for one thing. In our design, the page shows as many cards there are as possible and the rest go off the page. But here, they don't. They only show inside the slider component. So how can we change that? If you select a mask element, another D block where all the slides are nested, you'll notice that inside overflow settings, it's set to hidden. This means all the slides that go off the boundaries of the mask, they are clipped. Actually, everything that goes beyond gets clipped. Even the shadows on the cards, if you look closer. To show them, we simply need to change this to visible, and there you go. Now all the cards are visible. But there is one issue. They don't clip when the page ends, they expand the boundaries of the page. But we already know how to fix this, don't we? We just need to apply the same overflow hidden style to the section, just like we did with the image of the dashboard. We even have a class for this. We don't need to change anything, apply the same class as we already applied in one of the sections. Excellent. Let's populate the cards with our content, and then we'll just have to take care of the arrows, and that's it. A There is just one thing we need to fix with the cards. Right now, we have content that is all equal height. But what if we have testimonials with different lengths? The card doesn't expand because it has a fixed height. So let's change the height back to auto. So it expands based on the content. In a real project, you should try to control the length of testimonials. This one is fine, but when the difference between long and short cut is really big, then it doesn't look very nice. Testimonials can be truncated, meaning you can cut them short. But if your client doesn't want them to be cut, then perhaps a different layout is needed. Something that stacks vertically. One such option could be masonry grid. One thing that I don't like is how slides move. Several of them slide with each click, but I'd much rather prefer if sliding moved one slide at a time. This is simple to fix. The amount of sliding is controlled by the width of the mask element. If we change the width of the mask to match the width of each slide, then we will get a movement that's one slide at a time. Okay, always looking good. The final thing that we need to take care of are the arrows. For that, we need to learn a new concept, which we're going to do in the next video. Stick around. 120. Webflow 2: Positioning: Welcome back. In this video, we're going to take care of the arrows on our slider. In order to put them on the bottom right corner of our slider, like we have in the designs, we need to learn a new concept. This concept is called position. Position is a CSS style that gives us a tremendous amount of control on our objects. This style can be changed from here. We have five different position values, static, relative, absolute, fixed, and sticky. Let's go through each one. I've organized five cards here, and one by one, we'll apply to them different position settings to see what happens to them. Static or also called auto is a default position of almost all objects. Elements that are static behave the way we already are familiar with it, like a Word document flowing from one after the other. Things get a bit more interesting from relative. Relative object is position relative to itself. I know this says nothing to you. Let me demonstrate. I'm going to apply relative to this box, and nothing happens. Very uneventful. But one thing did happen, the position settings now have a few more controls. We get these similar controls like we have with spacing. We can adjust those values and the box is going to move. We're basically giving the box top margin of 100 pixels. It works in a quite similar way with one exception, and you'll see this exception when I show you what happens when you edit margin instead of this relative positioning. You see the margin has altered the flow of the page. The height of the parent container was increased because that margin needs to fit into that space. But when you use relative positioning, the flow of document is not touched at all. You can move the object anywhere you like, but in the flow of the document, it's only going to occupy that its original slot. This is a power of relative position. We have completely moved it out of its own place, but the cards that are nested inside a flexbox haven't moved at all. They act like the card is still there. Now, as for absolute position, Absolutely position object is removed from the flow of the document, and it sits on a new layer, sort of like objects inside Figma. In Figma, all elements are sort of absolutely positioned. They all exist on their own layer. Absolute positioning is often what we use when we need to overlap elements or put them on top of each other. Now, an important senting for absolute positioning is here. It tells us what is this object positioned relative to we have the same field for the relative element, but that one always says itself because that's what relative does. It's always position relative to itself and that can be altered. But the absolute element, it can be relative to any of its parent elements. In the beginning, you'll see that it's usually relative to the body element, which means relative to the entire page. For example, if we set the left position value to zero, it's going to be position zero pixels from the left edge of the body. Right now, it's not exactly on the edge because this has margin on the sides. If we give it 100 pixel left position, it's going to move 100 pixels from the edge. And if we give it a zero pixel top margin, then it's going to move all the way to the top of the page. And that pink container is going to look like the box isn't really there. But if we check the navigator, we'll see that the absolute box is still part of the container. As I said, upsold element can be relative to any of its parents if we choose to do so. Now, to choose the parent, there is a little trick we have to do. We have to change the position of that parent to anything but static. For example, if we want the R to be positioned relative to the pink container, then we have to change the position of the container to something but static. Usually we change it to relative because that's the easiest way that doesn't alter the flow of document. The instant you change the parent elements position, the obsolte position box jumps back to the pink container and positions itself around that container. If you check the settings now, you'll see that it says relative to parent container. Since we have zero pixel from top, it is positioned on the top left corner. And as we change this value, it will move relative to the parent container. Now, if we instead want it to be positioned relative to some other parent container, for example, the grandparent container, we will need to change the position from static to something else on that grandparent container. But there is one important rule. It's going to position itself relative to the very first parent element that doesn't have a static position. So right now, nothing happened when we change the position of the grandparent container because the pink parent container still has a non static position, so the box will continue to be relative to that in. And if we change the position of the parent containers to static, then this will happen. Now as it shows here, this is relative to the grandparent container. Webflow has some useful position presets right here for an absolute element. This is a very handy quick way to change the positions. Left top corner, right top corner, top four, bottom four, and so on. You can see that as you change values below update with it, it's easier to align things visually like that instead of needing to calculate on how many pixels should you put on all four sides. Up next is fixed position. Fixed elements are positioned relative to the viewport, meaning to the visible part of the page at any given point. If we choose one of the presets, it will be fixed accordingly. As you can see, the fixed element is exactly that, fixed. It's sort of like an absolute object yanked outside of the document flow, not affecting other elements, sitting on a whole new layer, and unlike absolute object, it's fixed relative to the visible screen. No matter where you scroll it, it will remain fixed. This position is often used for navigation bars. You know how many websites have Navbar that is always fixed on top of the page as you scroll. That's using fixed position. Finally, we have sticky position, which is a little tricky. What sticky does is that it sort of acts as a fixed element, but only within its parent container, easier to show than explain. So right now, nothing happens. It just acts like a regular static element because two conditions need to be met for it to work. First, parent needs to be tall enough so there is space for it to scroll inside. Otherwise, there is no point. So let's make the container a bit taller. Second condition, we need to put some custom value usually in the top position. For example, we can put zero. And now you'll see that it works. What happens is that it's fixed on the screen while we are scrolling through the parent container. Once the sticky element hits the bottom of the parent container, it doesn't scroll past it. What top value does is that it tells from what point to stick. In this case, it sticks the moment sticky element is zero pixels from the viewport. If we put something like 30 pixels, then it's going to stick the moment it's 30 pixels from the top edge of the screen. For the things that grow horizontally and need to stick horizontally, then instead of top position, we would use left or right position value. I'm not going to demonstrate this one because we would need that very, very rarely. These are all the positions, static, which is the default for almost all elements, and it flows naturally with a document, relative, which is sort of like static, but it can be moved from its place without altering the document flow and moving any nearby elements, absolute, which is the wild positioning of the group, it gets yanked out of the document flow and is positioned relative to the first parent that doesn't have a static position. Fixed, which is just like the absolute, but it's relative to the viewport, getting fixed to the visible screen, mainly used for navigation bars and sticky, which is sort of like fixed, but on stero it's fixing only within the boundaries of its parent container. Alright, that's the general idea of positioning. In the next video, we'll take this knowledge and apply it to the arrows on our testimonial slider. Stick around. 121. Webflow 2: Slider arrows: All right. Welcome back. In this video, we will finally take care of those arrows on the slider. In the previous video, we have learned an important technique that will be useful in order to properly position these arrows. For starters, we're going to replace the arrow icons with our own icons. We can do that simply by deleting existing icon and inserting image element in their place. Just drag an image element inside the arrow block and insert the arrow image which we're going to export from Pigma. And the same goes for the right arrow. A now we're going to need position feature to place these arrows on the bottom. If you have a look at the position settings, it's already set to obsolte by default, unlike the usual static position, and that explains why the arrows are sitting on top of the slider. That's what obsolte positioning does. It yanks the element out of the page flow. They live on a different dimension like layers and figma. This is exactly what we need Obsolte position with a bottom right placement. Once you press on bottom right position, the arrow will be placed on the bottom right corner of the slider element. Now, why the slider element? Because it's the first parent that doesn't have a static position. Remember the trick absolute element is relative to first non static parent. If there is no such parent, then it will be relative to the body. In that case, it would jump on the bottom of the page. So if you see it doesn't work the way you expect it, check the parent and make sure it's set to relative. Let's check the design to see the distances. Arrows are 60 pixel below the slider. Now, here's an interesting part. We need to add 60 pixels in one of these position values, but which one? Let's try all of them and see what happens. None of the actually work. Why? The arrow is positioned like this on the bottom right. This means that zero pixels from the right and zero pixels from the bottom. The position values tell us exactly like this. If we add 60 pixels on the bottom, then it's going to move 60 pixels upwards from the bottom edge. For it to move outside of the slider, then we have to go negative values. Actually, it works more like this. It calculates distance between bottom of the slider and the bottom of the arrow block. So often we have to compensate for the height of the element. By the way, make sure you type PX next to 60. By default, as you can see, it says percentage. So the field is set to percentage value. And if you just type 60, it will think you mean 60%. Now let's apply the same class to the second arrow, so we don't have to do all these changes again. Let's move the left arrow towards the left. We can do that by putting some value in the right position. But before we do that, let's give the left arrow a combo class. Otherwise, the changes will be applied to both of them. Again, we are putting value in the right because we are telling you to move away this amount from the right edge. Excellent. Let's check the preview and see how it works. There is just one issue. If you take a closer look at the arrow blocks, you'll see that they are sort of overlapping. The boxes are a little too wide, and in the preview, the entire box is clickable. So user is able to interact with the empty space too. A little bit of interaction with empty space is good, so user doesn't have to be so precise at aiming the arrow, but too much makes it odd. Plus, overlapping will cause some issues as these are links. To fix this, we need to change the width of the arrow blocks. Let's give it some size. I think 40 pixels is good. I have styled the right arrow, which has the base class. That way, both of the arrows were updated at the same time because of the linked base class. There is one more thing we can do with arrows. We can hide them on each end. We can do that from the slider settings. This is actually a better user experience. That way user knows which way they can slide and see when the testimonials have reached the end. And we have just one last section left. The footer. We'll do that up next. Stick around. 122. Webflow 2: Footer (Team App): On back. In this video, we're going to build the final section of the homepage, which is the footer. We're not going to build it from scratch. We're going to use weblo's amazing copy paste feature. Basically, we're going to copy the entire footer from our previous chat app project and paste it in the current project. This is a handy feature. It lets you reuse components across your projects, and also it lets you copy different elements or components from other people's Webflow projects. For instance, Webflow has a library of showcase projects where other weblo designers can showcase the projects they've made. Often, if the author allows it, you can clone the project and copy any components from there. You can either copy entire page or copy bits and pieces. You'll find people sharing here things like UI kits or wireframe kits. You know, that wireframe kit that we used in Figma, yeah, interfaces like that can be found here as well. You will have to make kits your own and then copy paste any elements and components as you like. All right, so let's see how this copy paste works. Once you have a project within your account, open both of the projects in the designer, select the element you want to copy. In our case, footer section with everything that's inside, hit Control C or Command C, and then go to the current project and select where you want to paste it. In our case, we have to select body, so it paste right there and not inside some other section. Then hit Control B, and there you go. Now the entire footer has been duplicated in our current project. We can edit everything about this footer without affecting the previous original project. The styles have been carried with it, and new classes have been created. When you copy classes that have the same name, then weblo is going to rename this conflicting class, just like it says in this message. For example, the class name section we already have in our current project. So Webflow gave a different name to our duplicate section. Another thing, you'll notice that once you paste the footer, it doesn't look the same as the original because some of the styles are being inherited. For example, the text phone wasn't carried. It's showing our website font for this project, which is cabin. The phone wasn't carried because it is inheriting from the body. In reality, this is exactly what we want. We don't want the front from that project. We want the font to be what's inside our project. All right, now let's style this footer and make it look like our designs. Let's start with the duplicate classes, section and container, and switch them to our existing classes. Any extra classes that we don't need, we actually can get rid of and clean up inside our website. We can do that from here. Click clean up and Webflow will show us all the classes we are not currently using on our page and just remove all of them. And if we're not using, that means we don't need them. Next, let's create a combo class for the footer section and change the background color. Also, let's change the spacing on the footer section because it's a little different from the usual section. I Now, let's edit the Potter links. The color is white with 60% opacity. And we also have to change the Her color to a different blue. And Excellent. Now the logo, which is pretty easy. Next footer headlines. This one is a little more interesting. It doesn't have a class like Footer links. That's because in the previous project, we didn't have a class for these footer headlines. We styled in H three tag instead. So when we copied the footer, Webflow just applied H three tag from the current project. We're going to do the same in style that H three tag. We can, of course, create a new class or change the tack to something like h2h4 or whatever, but styling H three seems pretty good. There's an extra space on top of the headline, as you can see. Let's get rid of that space. All right, so far so good. We have to fix the margin on the testimonial section. You see how the arrow is too close to the footer. That's because the arrow is absolute element. It ignored the Atypil margin that's on the section and goes on top of it. Don't forget to create a new combo class, or you will change all other sections too. It already has one combo class to it, but it's okay. We can have multiple combo classes. Let's compensate for that extra padding. And finally, just update the content. That's all done, and we have one thing left the email form. We're going to do that in the next video. 123. Webflow 2: Footer form: In this video, we have one last thing to do to finish the footer is the email form. This title here that's a subscribed to our newsletter is not a link, it's just a headline, but same style as other foot or links. We need to change this into a regular text and remove that Hor effect. This is how we'll do that. Add a regular text block and give it the same foot or link class. Now, it's not a link anymore, but the Hover effect is still there. To get rid of that, we will duplicate a class and name it something like subscribe text. Now we can go to the Hover effect and get rid of it. Excellent. Now let's create the newsletter form. Let's start by copying the email form we already have above and go from there. And Naturally spacing is going to be an issue here, especially when we shrink, so we're going to have to make some layout adjustments. The content here is flex box organized in columns. For starters, we can get rid of the width that we have applied to the footer columns. That is making them equal width, regardless of the content inside, which in this case isn't really going to work. There is also an extra empty column which previously we used to have an equal space between the logo and the links. This time we're going to have to lose it. And that's an extra improvement. Now, let's change the width of the first column with the logo inside. It's stretching way too much. Excellent. That might be enough. Now let's dial the form. Now, this form is using classes from the above, hero section form, so we need to duplicate every time we're changing something inside, so don't forget that. Let's start with the background color of the field. There seems to be some default style on the field border, so let's change the border to transparent or zero pixels. Remember, the text inside the field is the placeholder text, which can be style from the state's drop down. I now the button is a little more fun. We've decided to have a button that's arrow and it's on top of the field, not outside of it, so we got to pay for our creativity. Luckily, we have already learned how to use position, so we can make such arrangement. We'll need to do a few things in order to make this work. First, let's turn our button into an arrow. This is fairly straightforward. We are going to put the arrow as a background image of the button. In regular buttons, we could directly insert the arrow inside, but when it comes to form buttons, they work a little differently. Here's what we need to do. Get rid of the text and the weighting message that's inside the settings of the button, but put something like one single letter. Cannot leave it completely empty because Webflow will insert some default text otherwise. Now, remove the existing class and create a new class, something like arrow button. We can easily make the letter disappear by turning the text to transparent color. That's all. Now it won't be visible. Problem solved. Next, export the arrow from FCMa and add it as a background image of the button. We got to change a few settings here. Remove tiling and position image right in the center. Next, remove the blue background by changing it to transparent. We need to match the height of the button to the height of the field. It's not matching right now because the field has an extra margin on the bottom by default. Change that to zero, and the button should match the height exactly. If it doesn't, then check the settings of the form. It's a flex box and something might be up in there, or just change the button height manually just like the field that should do the job. Next, we're going to set button to absolute position. And align it to the right. The moment you do this, the button might disappear. Now why is that? Because position is relative to the body. We need the position to be relative to its direct parent element, which is the form. Remember the trick, if we change the position of the parent to relative or something else, then the button will position itself relative to the parent. And that will fix our issue. Now, let's give it a test in the preview. Always working fine except one thing for a very long email, the text is going to mix with the arrow. Fixing this is very easy. We just need to add extra padding to the field element. That way, text will stop going underneath the arrow. No, it's perfect. And we also need to change the success message to enable the success state, select Form block, and in the settings, click Success tab. Make sure you've selected the form block and not the field. Selecting just the field will show different options in the settings. Now, the box grows wider compared to the form field and alters the entire structure of the footer. Not a good idea. To fix this, we can give our entire form block a fixed width, the same size as we have in designs, which is 267 pixels. This will keep the field, the success and error messages all the same size. Now let's dial the rest. The text size is too big compared to other footer content. We should match the font size. And maybe last padding. And we also need to update the content. As for error message, it seems fine as this. All right, check the responsiveness and see how it all looks inside the preview mode. Our homepage is done, and in the next section, we're going to learn how to use WFlows interaction tool, so we can create some animations for our page and bring it to life. Stick around. 124. Interactions: Breathing Life Into Your Website: On the right hand side, where all the panels are, there is one dedicated for interactions. So what are interactions? Simply put, it's when user interacts with some object on our page, and by doing so, something else happens to this or another object. By using interactions, we can have mouse interact with one element. This is called a trigger and animate another object even if it's completely unrelated. This is called an action. Every interaction starts with the trigger. First, we have to select an element that we want to interact with and then select the type of the trigger. For example, interaction can trigger on mouse click or mouse hover and other options. There are also page triggers, which means we don't have to interact with any particular element, but an animation can be triggered by page related actions. For example, when page loads, each trigger type has its own set of options. For example, mouse hover can be triggered either on hover or hover out. One is when mouse moves on the object and another when it moves away from it. And finally, you have actions or in other words, animation. In the dropdown, you'll see there are several presets like fade, light, and so on. And the first option is the costume animation, and this is where the magic happens. Here, we can specify which element gets animated and we can create entire set of actions that are timed. And we get this timeline of animation with a granular control over each action. So that's a quick and rough overview of interactions. Don't be alarmed if you didn't catch everything. We'll learn this slowly by doing, and in the next video, we'll start with some simple interactions. Stick around. 125. Interactions: Card interaction 1: In this video, we're going to animate these cards right here. It would look really cool if these cards instead of just being static and just fixed on the photo, if we animated them. I'm thinking something like sliding in from the bottom. In order to animate these cards, we need to change our existing layout a little. The cards are part of the background image right now, and as it is currently that can be animated. We will need these cards as independent images, so let's go to Figma and export them. These cards have a shadow on them. They're not really doing much, so let's just get rid of it. If we really want a shadow, we can always edit inside Webflow. We're going to export them in PNG. I've tested this with SVG Export, but it came out to be a larger file than PNG. Sometimes that might happen, so you might end up with an SVG that is large in size, so just pay attention to it. Also, we need to export the background photo independently. A So let's see what sort of layout we have and how we can change this layout. So there is our flexbox, which has two div blocks inside, image and content wrapper. Inside the image wrapper, we have our current image. Here's what we could do. We can put all three of our images inside the image wrapper or use obsolute positioning for the cards. That way they will be stacked on top of the background image. I Let's replace the current photo. All right. Now, let's give this image a same class and then apply absolute positioning and go from there. Remember the important adjustment with absolute elements, they need a parent with a relative position. As you can see here, right now, it says it's relative to the body. We need to be relative to the image wrapper. That way, we'll position them exactly where we want. So let's change the image wrappers position to relative. By the way, the second card hasn't disappeared. It's underneath the first one. They are in exact the same position because we are using the same class. Now we can position cards on top right corner and then move them from there. We can simply look up the values inside Figma. How much are they separated from the edges and use exactly those values. When inputting these values, don't forget to add PX at the end. Otherwise, it's going to use percentage value, and that's going to send cards somewhere else. But for some reason, our values from Figma just don't work in Webflow. Why is that? The difference comes from the fact that in Webflow, I'm working on a smaller canvas size, which is 992 pixels in width, whereas my frame size in Figma is 1,440 pixels. To solve this responsiveness issue, we need to use responsive units like percentage, something like 10% on both sides. Let's position the second card in its dedicated place so we can better see what we're working with. To do so first, add a combo class to it and then change only the top position value. The right position value is better to be managed by the base class, since both of those cards will always be at the same distance from the right. Now, the position for the second card is not very consistent between the screens. Why is that? Because the cards don't have a responsive size. They have a fixed size regardless of the screen. On a smaller screen, the top card covers almost the entire half of the background image, but on the larger screen, it covers only fraction of that. So we need to make the card sizes responsive too. We can do this easily by giving cards a percentage width. Percentage sizes are relative to the parent element, which in this case is the image column. The size of the main image is relative to the image column two. So when the image column shrinks, all the images inside will shrink with it. To match our designs closely, I'm just going to temporarily switch out the main image back to the one we had before with cards on it, and I'll use it as a guide to size the cards and their positions precisely. You don't have to do this, but it's just convenient for me right now. Let's check the responsiveness. Nice. Now, all cards ring proportionally with the main image. And now let's do the same thing with the second graphic. A duplicate the card class instead of creating another combo class, it's going to have a different position on the left anyways. This time, we don't need to change the relative position because the image wrapper is the same class as above, and it is inheriting the same relative positioning. Excellent. Layouts are ready. Now let's create interactions. 126. Interactions: Card interaction 2: Alright, our cards are all set up and ready to be animated. Let's start with this one, actually. The calendar card might be easier. So first step, you're going to first select the calendar card and then go to the interactions panel. Make sure to have this selected. Otherwise, we're not going to be setting up the interactions on the card, and you might be setting up on something else. Here, Webflow has two versions of interaction panel. There is one with GSAP and one is classic interactions. In this case, you want to select SAP interactions. From the triggers, we have now click hover, scroll, and so on. In this case, what we're going to do is we're going to animate this card that when user scrolls in the page, this card animates and kind of slides in and appears. That's a scroll trigger. Let's select scroll, name this slide in. And what we can do for this card is slide in from the left. So let's call this slide in left. So here's what we have now. We have trigger and we have actions. Shows exactly what is happening. Trigger scroll calendar card. This is our trigger. And now we have action. In this dropdown, we're going to have a bunch of different presets that Webflow just created that has some values already applied to it, some different animations with Lotti and spline. And one, which is the first one, a custom animation, which is going to blank animation from scratch, and this is what we're going to select, so we can easily learn how to create animations. So select the first one. And now we're going to get to this animation view with a timeline here and some properties we can change. The first thing we want to go over is the properties. So in our case, we want this to be on the left and come in from the left to the right. This is defined by these two different columns and two. Every animation always has a from place where it begins. What's its original state? And then where does it end? Does it grow? Start invisible, then it appears from from two. This is what this represents. Now, in our case, we want this to end here exactly as we designed it. So we don't actually want to change anything on the two. We want to change something on the from. So select from and click this again and this will disable two. When you don't change anything in the two, Webflow assumes that what you're ending up with is your initial state that you designed it. So what do we want to change here? We have a few options that are already here. We can add more properties that we can change and animate. In this case, what we want to change is opacity because we want this to appear. We want this to be invisible and then appear. Another property that we want to change is its position on the X axis. We want it to be moving from left to right, and that's X axis. We don't need Y, and we don't need scale. So positive values gives us moving from the right. We need basically negative values. Negative let's say 50 pixels. You don't want it too far, it will start from the negative 50 pixels and then return to its zero pixel original position. And for the opacity, we want it to start 0% invisible and to go to 100%, which is obviously what it's going to do on its own. We don't have to specify this. Now, this is a scroll interaction that we're not going for because this is scrolling on the movement, and it's not like appearing in one go. And as you can see, this timeline position is moving as well. Be scroll interaction has two types of interactions. One is that it triggers. Once you scroll into something, it triggers and it plays another one it scrubs. And what we need to do is we need to go back to our trigger. This is our trigger. We were here right now. This was actions. This is where we were custom animation. And we're going to go back to the scroll trigger, click on it, and we're going to get few options here to change the settings of the trigger. Every trigger will have different set of options that we can change, for example, click will have its own options, Mouse over, hover will have its own options, and so on. Scroll has different options here. Two types of controls the scroll has. One is scrub on scroll, and this is what's selected by default. This is scrub on scroll. Scrub means scrub the timeline. This is a jargon language that is from animation. So timeline is scrubbing. This thing that's like going through the timeline, that's called scrubbing. That's why it's called scrub on Scroll. So this is what's happening. So it's animates is scrolling. That's not what we want. What we want is the second one, which is trigger actions. And what this does is once the trigger is met, it plays the animation in one go. And once you change this to the trigger, you're going to get this play button here. And as you can see, this is exactly the animation that we want. Now, another option, let's go back to the trigger settings. Another option that we need to change is where does it actually start? This is the start. Where does the scroll trigger? Does it trigger when this card appears here? Does it trigger when it appears in the middle? Does it trigger when it appears somewhere here? And this is where we can define where exactly the trigger happens. We have two options here, which are element and viewport. And when these two align, that's when the trigger happens. So in this case, what we have is top of the element right here, meets bottom of the viewport. Viewport is same as the screen, visible screen of the page, bottom of the viewport. Once these two meet, that's when you trigger the scroll animation. As you can see, we have closed using these markers. I usually have disabled, but for this video, it's actually quite nice. I can show exactly where this trigger happens. And this trigger will happen right here in the very, very, very beginning of when we can actually let's go and let me show it to you in the real page. We're scrolling in, right, and pay attention right now, it's invisible. And the moment they emit, it appears. That's not how we want it, right? We want it to appear somewhere when we are halfway through the screen. So what we're going to change here is, for example, if you change the top to bottom, as you can see, the trigger now changes to the bottom, change it to the center. I will change to the center, but let's keep this top. And now we'll change the viewport. If we change it to the top, it will trigger here. So when this meets here, that's too far, a good place would be center. So right here, when card is somewhere right here in the page, this is when it's going to trigger. These fields also can take values like 20% 80% of the screen, and these simple words like top center, bottom. Alright, this is perfect placement. Let's give it a test. When you are testing, your scroll animations, scroll out of the place and then go into the preview, and then start over. You can pay attention. Here's the start, here is the scroller start. Once these two are going to meet, that's when the trigger happens. That's pretty good. Now, if you want to play this again, you need to reset the preview mode one more time, come back, and we'll play again. Alright, that's pretty good. Actually, I'm going to disable these markers. It's distracting. Now, another thing, it's not very smooth the animation. And to change anything about the animation, we go back to the actions, and this is our animation, custom animation, we go here. Now, how do we change and make this animation a bit more smooth? And that happens through easing and duration. Right now, easing is set to linear, and we have few different options here, but what I'm going to do is we're going to click on this one, and I'm going to show you here better how this easing animation works. Every animation has time and progress. This is time. This is progress. Time why progress. Linear means that as the time goes by, same amount of progress elapses in the animation. So Bam Bam bum, bum, bum, bum, bum bum at the same rate. That's why linear doesn't make a very nice and interesting animation. You can preview this from here the box moves in a constant rate. That's not what we want. We have another option which is easing. Easing means it starts slow. Let's switch this to extreme so you can see it better. Starts very slow. So this is time, right? Very little progress is made in the beginning. It's no, no, no progress, and then halfway through, it flips and then accelerates, and all the progress is made after this. Can preview this. See, slow and then accelerates. That's easing. Then we have ease out. Let's switch to extreme to make it a bit more prominent. What happens with ease out is that it starts super fast. So a lot of progress happens very, very fast, and then slows down and it has a very smooth landing. Let's see. So starts very fast and then has a very nice soft landing. For animations that appear and stay and just land on one place, usually ease out is what we want. So we're going to keep this at ease out and extreme or any other options we'll do as well. Which also can be selected from this dropdown is out, powerful. Plate. Now, it's a little too fast. So default duration that Webflow has, it makes it a little too fast. This is in seconds, can be switched to milliseconds, 1 second, two second, or half a second or any of the decimal points you can do. Let's try 1 second. There you go. Now that is smooth. Excellent. Let's give it a shot. Perfect. That's what we want. All right. Now, same thing for the event cards. Let's exit this from here. Again, we're going to select one of the event cards, and we will click again, Scroll trigger. And this time, let's make this slide in from the bottom. Trigger scroll event car. This is what we want. Let's change the settings of the scroll settings. Now, here's an important part and one thing I want you to make sure that you have same as I do, which is a target of every target every target of the interaction inside Webflow will have different ways you can target it. You can target the class, you can target the element directly. You can target a page and some other options. So in this case, it automatically because our card has a class applied to it, it is targeting automatically by default, it's going to select a class. And here, we are able to select which class we want. And if you disable this, you can see, you'll be able to select any of the classes that you already have created inside your site. And now, once I change this to arrow, for example, this being selected doesn't matter. Now we are animating arrow. We're not animating the card anymore. Now, what you need to pay attention to here, once you have an event card, that you need to make sure that this class and this class are they share the base class because if you set the trigger on this guy, let's see, scroll. You'll see that Webflow added both the base class and the combo class, which means only this card will animate. We want this animation and interaction to be applied on both of them. So this is where you have to make sure. Classes, if your cards have different classes applied to them or if they have a combo class, then make sure that you're selecting the base class. And if you accidentally selected one of the cards that has a combo class applied to it, just remove that from. And hit enter or just exit it. And that's now correct trigger selected. But let me go back because I mess things up here. All right. So we have correct trigger, scroll, event car. This is what you want. If you have some other base classes to it, you got to remove that. From the settings, again, we want top of the element meets center of the viewport, and that's when it triggers, and we don't want scrub on scroll. We want trigger actions. Close, and now we're going to add an action. Animate. I'm actually going to disable these markers. I know they just get in the. And in this case, what do we want to animate, right? We want again to animate opacity. We don't want to disable, so I select from disable two. Two is already defined. This is the final position. We want to animate opacity, and we don't want to animate X axis anymore. We want to animate YXs. We don't need scale. So we want it to move vertically. That's what YXs does. So from the bottom, and let's see it's either positive values or negative values. So it's positive values. So 50 pixel from the bottom, 0% opacity, which means it's invisible, and then it appears. This is exactly what we want. Now, duration, 1 second, try to match your durations and easing everywhere. It's nicer when same kind of animations animate at same rate. And we had ease out power for selected. Let's give it a test. Nice. That's working all good. Sometimes just one thing to note, sometimes what will happen is your animation will start somewhere in the middle of it. If you are playing around with animator with a interaction panel, it might start from like 0.5 seconds or something like that, and it will start in the middle or somewhere later. You don't want that. So just in case you have some value here, just reset it or set it to zero. And right, let's go inside preview mode and give it a test. Perfect. One more time. Excellent. Excellent. And that's our animations. These interactions were so simple to set up, but it brought a lot of life to the page. Now page feels a bit more live, a bit more friendly and interactive. 127. Interactions: Arrow interaction: In this video, we're going to animate this arrow icon on the hover. So whenever we hover on the link block, the arrow icon move slightly to the right. Very simple animation. First things first, we need correct classes. So let's rename this to something a bit more memorable like arrow icon. That's our arrow icon, and the parent is our ink block. We can leave that as link block. That works for us. So what is our trigger element? Our trigger element is the entire link block. So whenever I hover on here or here, the arrow needs to animate. So entire thing is the trigger. So while you have Link block selected, go to the interactions panel, and we will select trigger on what hover. Let's name this link hover. And by default, it will select correct trigger, which is Link block, the class. It's selecting correct one because we had the inkblock selected before we added a new trigger. But if you don't do this, then obviously you can just change the target from here. If you have a element or something else selected, change it to the class, and from here, you can just find your class Link block and apply to it. Now when you do this, make sure that you have one class link block as a base class, and that is the same class applied to all the other link blocks because we want to reuse this interaction everywhere. So if you have a base class or some other duplicate class here or something else, just check that, make sure that other elements, other link blocks have the same thing. And if you accidentally selected one with that combo classes, just remove that extra combo class. All right. So what's the type here? Type is mouse, Enter. All right. This is what we want in this case. And now we need to set up an action. I like the first one, the custom animation. Here we are defining what is our target of our animation. We had a target of a trigger, what gets interacted with. Now, what gets affected and what gets animated. Right now, it says target is the trigger element. In this case, Link block. That is not what we want to animate. We want to animate the arrow icon. So select on this and go to the dropdown so we can change the target of our animation. We have several different options and two main options that we're going to usually use to target specific elements. One is to target the element. Element means that you're targeting a very, very unique specific element. In this case, only this arrow and not the other arrows below. Since we want to reuse this interaction, a better approach is targeted using a class because they also have shared arrow icon class. And this way, we can have one interaction controlling all of the link blocks. So we will select class. Now, in this case, we don't want this. We don't want the link block. We're not targeting that, so remove that and apply arrow icon or whatever class you named your icon. That's good. So just double check target, arrow icon. Whenever it precedes with a.in front, that means it's a CSS class. That's how you write CSS classes inside code. Dot something. Alright. Now, what do we animate? We want it to move on the hover, right? So in this case, we don't want from to be defined because from is as is. We want to define two. This is what happens on the animation. So if you have from selected, just click on it to Diselected so it kind of graze out and we're not touching it. And if you have two diselected, you can apply it like this. Now we can edit some of the properties. So we can animate the arrow. Opacity, we don't need that, move Y, we don't need that, scale, we don't need that. What we need is move on the X axis. So let's say something like eight pixels. It moves eight pixels, and positive values means that they move to the right. Negative values would mean that they move left. We need positive in this case. Let's see, as you can see, it does move and animates. Now let's test this inside preview. Pretty good. It animates a little too slow, when we can change that have duration. Let's try 0.2. That's pretty good. But obviously, as you can see, it gets stuck, right? It stays in one place. We want this to move right on the hover and on the hover out when the mouse leaves for it to return to its original place. So let's go back. We're going to now set up a new trigger. This trigger was hover on basically mouse on, and we can set a new trigger, another hover, again on the link block. If in your case, you had something accidentally selected on the canvas and it change your class, just select your correct class. And in this case, we'll change the type from mouse enter to mouse leave. Trigger each mouse leaf. This is exactly what we want. And from the control, we can actually change this and tell it to reverse, which places the animation backward from its current position. And reverse means reverse of these actions. Whatever we set up, we obviously have just one action here. So this action will just reverse backwards. Let's give it a test. Nice. All working fine. Now let's see other ones. And as you can see, instantly, the other ones are working as well, and they're working and we didn't have to apply the interaction on the other ones because we are using classes. Just to go through some troubleshooting instead in case you have some mistakes and it's not working for you in case the other links aren't working for you, check this first of all, enable your stylus panel, and check that you have arrow icon here, arrow I can here applied, right? This is SAM This is same. And this is same here. This little bolt icon does show you that this thing is part of some sort of an interaction, either a trigger or either gets affected by an interaction. Also, our panel does show us that. So if you scroll a little bit, it shows all the elements that are being either triggered or are part of some sort of an interaction. Also, we have a panel here that will show you all the interactions that we have on this page. So make sure that this is an arrow icon. All of them share the same class, and all the links Link Block share the same class. Is Link block for me, as well. Link block here as well. That's why it's working. And then within the interactions, you have to make sure that hover shows that it's classes being selected, Link blog, class, Link blog, hover leave, class, Link block. And inside the animation, again, target, class arrow Icon. This is what we want. Now, there is one little issue that we need to fix because on smaller screens, you won't be able to see it. If you pay attention, when I hover on this one, the other one animates too. That's because we are targeting a class. So we are telling that whenever I'm hovering here on the learn more, animate class named oicon and this is a class named No Icon. This is a class name Hero icon, and this one as well. So all three are animating. But that's not what we want. What we want is only animate the one that is inside the trigger element. And we have this option. So it's inside the actions. Nos inside the trigger because this is an issue with the arocon. So it's whatever is being animated. So inside the actions. Arrow icon. Here we have an option to filter. And we have few options here within direct hob, either of this would work within. And from this dropdown, we want within trigger element. It might have by default selected class or something else, but we need within trigger element. So now, this is telling us that animate arrow icon that is inside the trigger element, not every single arrow icon. Now, let's play this again, expand the screen so we can see a couple of them together. And as you can see now when I hover on this one, the other one doesn't animate. And all done. All right, so those are the basics of interactions. There is infinite possibilities of what can be done with interactions in Webflow. You can go and I'll advise to do that to go to the showcase and you'll see some people make very crazy animations and interactions, and we'll give you good ideas on what can be done inside Webflow and give you some sort of inspiration for future projects. Interactions in the beginning might look a little daunting, but in reality, once you get over that little hurdle, you'll see how simple they can be and how much fun and how many different options you have to creating something very interactive, something very beautiful and fun. And you'll be able to create complex interactions with just a few cliques, something that would take you probably months of Javascript practice in order to achieve that without Web more videos about interactions in the advanced part of this course, something for you to deepen your knowledge and kind of gain a bit more practice. Although what we have already learned is quite sufficient for you to start working on real projects. In the next section, we're going to take care of the mobile version of our website homepage in this case. And then in the section after that, we're going to learn all about CMS and how to add blog to our website. 128. Responsive: Navbar (Team App): All right. In this video, we're going to start optimizing the mobile version of our home page, starting with the navigation bar. In the previous project, we made the nap bar fully visible on the tablet. Let's see if we can do the same here. To show the nablns on the tablet, select Nab bar, and go to the settings panel. Here you'll find options for menu icon. When the slider dot is on the tablet, it means the hamburger menu will show on the tablet and all smaller devices. If we move it down, then tablet will be disabled. That's excellent. No need to change anything. All fits very well. Love it when things just work out easily like that. Let's see what needs to be done for the Na bar on mobile landscape. It just colors and some spacing. In the previous project, the drop down was stretching edge to edge, but here it's not. That's because we have a little different arrangement for the N bar. It's sitting inside that hero section, which has padding, and the drop down only stretches as far as the Nap bar itself. We could potentially make a stretch if we wanted to perhaps by using negative margins. But personally, I'm quite fine with it not stretching edge to edge. So let's leave it as it is. To change the color of the menu button, we just need to change the text color of the block. It's font paste icons, so the font color will change it. The same goes for the size. We just need to increase the font size and it will grow. I think we used 30 pixels previously. And let's adjust the padding for the whole clickable button. It's a little too big, ideally would make it same size as the buttons and links on the bar, which are 44 pixels in height, I believe, so if the text is like 30 pixel, then seven pixel padding should make it 44. Now, let's style the open state of the menu in order to show the menu while we're styling, select any element on the NAB bar, and then in the setting stab click Open Menu. Now menu items are clickable and we can select them and style them. The background color is coming from this NAV menu block. So let's select it and change the background to I'd say that our dark blue color that we use on the footer. And same for the background on the menu button. When you make changes to the open state of the menu button, make sure the selector field shows this green open class. That's how we style the open state. Sometimes the menu might be open, but this open state class isn't there, so any changes won't be reflected as you want it. Just refresh the canvas and open the menu again. Let's give it some proper padding. Can you notice why the button is stretching to the edges? It's because the display is set to block, and block elements take up full available width. We need to change it to display inline block, just like default buttons. Now that's about right. But we need to align it on the left. We've had this similar challenge in the previous project. Inline blocks act sort of like text. So if the parent container has left center or right alignment, it's going to abod that alignment. In this case, parent is not menu, but it says that it's left align in reality, it's not. This happens sometimes. So just go back and forth and just apply left alignment manually so the change is reflected. And also, let's add some left and top margins to align the button properly. All right, that's better. Finally, I'll make corners of the backgrounds rounded. It will give a bit nicer look. We don't need it on all four sides. For the menu button, we need it on top corners. Click this option to add it individual corners. For the NaF menu, we want it all corners besides the top right corner. That way button and menu will connect nicely, like a single object. That's perfect. Now, let's just see how it looks in the preview mode. One last thing, you see the logo here has a little bit of padding. This padding isn't there on tablet and desktop versions. Webflow is inserting it on mobile versions. We don't need that padding because we have our own, so just get rid of it. All right. Moving on to the portrait version. There's actually nothing that needs to be adjusted for the bar. The paddings need to be fixed, but that's part of the hero section. So we're going to do that in the next video. 129. Responsive: Hero section: And we're back in this video, we're going to adapt hero section to the different devices. There isn't a lot that needs to be done, so it should be quick. Let's shrink the height of the hero section on the tablet. It's too tall in this case. Something like 680 pixel should be good. And we need to adjust the margin of the content so it's centered again. Hundred and 30 pixel looks good. Moving on to mobile landscape. At first, it looks like there's nothing that needs fixing here, but we can forget that we're not seeing the true mobile landscape here. This is too tall. To visualize this properly, the best is to check it on an actual mobile, but we can shrink the height of the browser to give us a rough idea of what we are working with. This is something how it will look like. Nothing is visible here. Vertical spacing is crucial on mobile landscape, so we need to make our content snug and tighter. First, let's cut down on section padding. And remove the fixed height of the hero section. We want it to be automatic in this case, so to be only as tall as the content. Okay. Similarly, let's cut down on horizontal padding. On smaller devices, space is scarce. I'd say 30 pixel padding on the sides instead of 60. Next, we should shrink the phone size a little or default H one size is 55. That can be a little too big for mobiles. I'd go with 35 or 40. Remember that heading style is coming from the H one tag. To addit H one tag on all mobile landscape, first, remove whatever class is applied, and then from the dropdown, select all H one headings. You should get that same landscape icon on the left. That's important. This way, we know that we are affecting all H one for mobile landscape and down and not tablet or desktop. Once down, we can put that white class back. One last thing for the landscape view. The content and background image are interacting now much more. In the above versions, content is on a blurry plane area, but here it's covering the model's face. This makes text difficult to read. First, let's move that word to the next line. But that's not enough. So we're going to add a dark overlay on the background image. 30% seems enough. And that's done for a landscape view. So portrait needs a couple more things. First, let's change the direction of the form to vertical so that field is on top of the button. This is quite easy because we have set this form as a flex box. So all we need to do is just switch the direction. Make sure you're selecting the correct element. There is form and form block. Second, we need to fix the hero background. This is where that custom positioning comes in handy because none of the preset alignment work for us. I think 55% does a better job. Okay, let's check the fluidity. Whoops, the field isn't stretching all the way because it has a max width. So let's remove it in this case and set it to none. That will make it as wide as the parent. Keep in mind that any style changes that we make on this versions only affect downwards and not upwards in the hierarchy. So this field is only going to be reflected on the mobile portrait and not on landscape, tablet, or desktop. All done for the hero section, let's give it a go in the preview mode, making sure everything is looking nice and working properly. Excellent. We'll continue with following sections in the upcoming videos. 130. Responsive: Mockup Section: And moving ahead with the next section. For the tablet, it's quite easy. We just need to move that image more towards the left. When you click on it, you'll see that it has a negative margin. That's what makes it move out of the page so much. Let's decrease the negative margin. I think this looks quite good. -350 pixels. Check the fluidity, and that's it. Now for the mobile landscape, let's start by section padding. We've made horizontal padding smaller on the hero section. It's 30 pixels. We've never matched that with the rest of the sections. We can't make the change on this section directly because it has a coboclass applied to it. If we shrink the space, it's only going to apply to this compo class and none of the other sections. So what we can do is either select another section that doesn't have a compo class like the next one, for example, or we can get rid of the compo class for a moment. Style that section, and then put the coo class back in. But that's more complicated. So let's just style this section below. And of course, that has applied the padding on the above section too. Similarly, we can change the value that is more appropriate and decrease it to something like -260 pixels. Again, check the fluidity. One more thing I'd like to fix here is the vertical padding on the section. On landscape mode, vertical space is very limited. If you can imagine that you're seeing this on an actual mobile landscape, you'll understand that you'll have some gaps where you're not really seeing much content. One thing to note about mobile landscape view, it's not just mobile landscape, but also some tablets in flets or whatever they are called because you'll see in the viewer, it shows different sizes for different devices. So it's not just mobile landscape in reality, but we call it mobile landscape just to make things easier. Okay, so we have 80 pixel vertical padding on our default sections. I'll shrink this to like 60 pixels, just like we did previously select a section that doesn't have a convo class and style that one. Okay, moving on to the mobile portrait. The image on this section isn't even visible. So what we're going to do is change the direction of the flex box to vertical. There's another direction we can change. We can reverse the order inside flex box, and having image first makes more sense. And now we can style the image. One issue is that image is too small, so we should increase the size. Increasing the size of the image has some dos and don'ts. We can't change the width from the image settings. These are global image settings. So if we change the size here, it's going to affect on every single screen size. See now image is gone from the desktop. So the ideal place is to style it from the styles panel. In here, there's another don't. Don't style the height. When you style the height, it doesn't preserve aspect ratio and you get a spaghetti image. The width values are the best option, but here too, some things will behave oddly. Depending on the situation, either fixed width or minimum width works the best. For example, regular width value doesn't change the size. But the minimum width does a pretty good job. Not that this is a bug or some sort of a glitch, there's usually an answer to such mysterious behaviors. In this case, width doesn't do much because there's a maximum width of 100%, which is telling it to be only as wide as the parent container. It's basically overriding the width, but minimum width ignores that because it comes before the maximum width. Don't worry if you're not catching all this. I don't usually worry too much about the reasoning. I just play with values and see which one works. All right. I'd say 380 pixel looks good. Now we need to fix the negative margin, maybe align the edge of the image with the content. Okay. Something like -90 pixels. And let's add some margin on the bottom. Perfect. Let's check the fluidity, and we're good to go. I don't worry too much about the screen sizes, less than 320 pixel wide. That's just such a rare occearnce especially for our target audience who are modern teams. I don't think any of them own Nokia in 95. Besides that, fluidity looks great. We'll continue with the rest in the next video. Stick around. 131. Responsive: Body: Picking up where we left off, we're going to tackle the responsive versions of these two sections from the body. We have to make some space in this section. There is not enough space for everything to fit. For starters, we can shrink the space between the image and the content, say 60-30 pixels. Next, we can let these images go off the page. In reality, just like the mock up above. There's no reason why we can't do that. We just need to set a negative margin. That actually looks pretty cool. Okay, that's still not enough. The image is too small, and that's because content is taking up way too much space and pushing the image to shrink. What we can do here is to set maximum width of the content so it doesn't grow beyond certain point. First, let's rename this class to a content wrapper so we know what we're working with. This class is shared between all three content blocks. Now we can give the content wrapper a maximum width of something like 50% That should create a more balanced look. Actually, on the desktop version, the content is growing a little large too. I haven't noticed this before, but this image is a bit too small on the narrow desktop screens. It's fine on the larger screens, but it would be nice if we increased on the narrower desktop screens, like my 992 pixel canvas here. Now we can set 50% maximum width on the desktop because for larger screens that will be wider than what we currently have. I'll just increase the current max width in pixels to something like 410 pixels. That now gives the image a little more room to grow. 50% max with, in this case is clearly not enough. Let's increase it a little so we can fit the content properly. I would just move the image a little to the right so the more of the girl is visible. Now, moving on to the mobile portrait. The layout here is already vertical. Why? Because we're using the same flex box container as above. And when we style it above, the same vertical layout was applied to it. We just need to reverse the order. We also need to get rid of the maximum width on content wrappers. Since we want content to fill the full width, this time, select none from the dropdown, we just need to adjust the image. Here, I'll decrease the negative margin to something like -30 pixels and add a little bit of space underneath so it's not glued to the headline and zero pixels on the right side of it. That's all the fluidity is, looking pretty good. Let's now apply similar adjustments to the second section, starting from tablet, as we haven't touched any of it. First, the image wrapper, we need same margins as above, but opposite directions. As you can see, there is this overflow because of the image that is going off the page. So we need to apply that combo class we already have for the overflow section. That's all mobile landscape is doing great on its own. Now for the mobile portrait, we need exactly the same spacing as the image above. The same style wasn't carried on this one because this image wrapper has a combo class applied to it. And left right margins are overridden by that combo class. But not the bottom margin, that one was carried to this element as well. There you go. The mobile portrait looks great. Check the responsiveness. Check the preview mode for animations and all that. Make sure everything is looking good and working fine. In the next video, we'll move on to the testimonial section. 132. Responsive: Testimonial & Footer: The testimonial section is relatively simple. For the tablet, it's good as it is. Just drink that space between the headline and the slide. Half of that should be good. Mobile landscape is pretty good as well. Now on portrait mode, we need to change the width of the testimonial cards. Obviously, we'll be able to fit only one card at a time. The width is being set by the slide element. If we change that from pixel value to 100%, then it will be as wide as the parent container. So basically stretching from edge to edge. But what would be nice is to show user that there are more testimonials, and it's not just one lonely testimonial that is sitting here. So if we change the width to 90%, then that should bring a little part of the next card in the visible screen. That's great, but the content is a little too narrow, so let's make some more space for it by shrinking margins and paddings. First, we can half the margin on the right, so more of the card shows from the next, which means we can increase the width of the slide more than 90% to maybe 95%. Now for the padding, a And that's all. Up next, the footer. The footer, if you remember, we didn't create from scratch. We copied it from our previous project. The best part about reusing your components across different projects is this. They are already optimized. All those responsive changes we have made to the first project, they're going to be carried with the component when you copy them to a different project. No need to do it again. Such a timesaver. Although we do have to make a couple of adjustments because we did change the layout of the footer. Like this spacing issue, for example, probably in previous project, we had a little different plan for this, but here, if you check the desktop version, columns are distributed equally from edge to edge. This is a pretty good layout for the tablet as well. So let's reset the style so it's inheriting from the desktop version. Now on the mobile landscape, perhaps we could change the justification back to left. The columns are a little too scattered apart. We can go an extra step and try to align the company column with the subscribe column below. We just need to shrink the width of the logo column. And that alignment makes it look nicer. Inside the mobile portrait, let's return that first column width to the original size because there is space and that tag line looks better on two lines. The subscribe column is now buried on the bottom of the footer. That's not really the best arrangement. It would be better if we brought it to the top because nobody's going to bother scrolling all the way down for it. Now, here's how awesome Flexbox is. Flexhil has their own set of settings. There are some sizing settings that each child can override the general flexbox sizing settings, and also we can override alignment and order. So if we change the order of our last column, we can actually make it first. But we don't want it exactly first. We'd prefer it came after the logo column. But not to worry, we can do that, too. We just need to give the logo column the same order style, and it will pop back on top. When you do this, make sure you have a combo class applied. Otherwise, this change will apply to every single foot or column, and that won't give expected results. I haven't applied anything because we already had combo classes on both of these first and last columns. All right, let's check the responsiveness. Okay, we have this overflow issue with the email field. The fixed width of 267 pixels is too much on that tiny screen. So instead of fixed, we can change to maximum width of 267 and change fixed value to 100%, so it stretches when it has space. A Excellent. Oh, looking good now. That's it. The homepage is done, and it's going to look great, no matter the device or the screen size. In the next section, we're going to build a blog, which is done by a super powerful web low CMS, and we're going to learn all about it. It's going to be fun. Stick around. 133. Blog & CMS: Going From Static to Dynamic Website: So far, we've been building a static website as opposed to a dynamic website. This probably doesn't really tell you much. Let me explain. Let's say we have an article page for our blog. When we need a new blog post, we can simply duplicate this page and change the content, no problem. Now, what if at some point we decide that we want to make some layout changes to this article page template? Well, no problem. We can copy those changes to the second article page. And when you have 100 article pages, then you're ready to give up your web design career. This is static content. Each page is independent from one another and content of that blog post exists only on that particular page. Enter dynamic content. This time, content doesn't live inside each page, They now live in the database, neatly organized, sort of like in a spreadsheet. And then anywhere on the website, we can reference any of these database items and pull them to display on the page. This database is called CMS, short for Content Management System. I know very sexy name with dynamic content. We have only one article page template, a master page. Within this master page, we can reference those database items each time any article page loads. Webflow will pull appropriate content for each item. Now if we make any changes to this master page, it will instantly reflect on every other page, even if we have 5,000 of those. That's the power of Webflow, CMS, and dynamic content. We're going to learn all about it in this section. How to create CMS items, How to create master pages, how to reference the CMS and so on. Stick around. 134. Blog & CMS: Webflow CMS: Before we start designing and building our Master Blog post page, we have to first create a database for our blog. That happens from Webflow CMS, which we can access right here. There is a link to video tutorials by Webflow. They have this place on the website called Webflow University. There is great content there, and they cover every aspect of Webflow. I'll definitely recommend to get familiar with it. They have both videos and written articles. So the CMS or the content database of our website is broken down in what's called collections. Imagine a collection as an independent spreadsheet. Let's say if we had a very large website like EU Demi, we would have one spreadsheet for all the courses, one spreadsheet for all the blog posts, one spreadsheet for all the help and support pages, and so on. Let's create our first collection and see what happens. In our project, we need a collection for blog posts. That's where we will keep our blog posts with the headlines, images, tags, et cetera. Here we have some options to name the collection, some settings, an important part creating fields that will be part of this collection. Again, think of this as a spreadsheet. When you create a new one, it's empty, so you have to add new columns, right? And you'll title these columns like headline, body tags, Ral to the image, et cetera. That's basically what this is, and each row is part of one group that makes a particular blog post. Webflow here has collection templates. It's to help us get started on some common collections that we might create. Needless to say, first one is Blog post, probably the most common collection for everyone. Once you click on it, Webflow will create new collection with some needed items to get us started. Let's go through each one and edit them as we need for our blog. First, we have collection name. This isn't a big deal, what you name. It's internal and not visible to the public. Webflow named it blog post, which we can keep. Next is collection URL. This is how the URL of each block post will be structured, just like it's showing in the example below, is the word that comes right after the domain. Here I prefer using the word blog. It's much more specific than the word post. It's a bit more common to use blog rather than a post. And now the important stuff. This is what each of our blog posts are made of. Each field is a type of content. There are many different types of content. For example, there is plain text, there is rich text, worry about that later. There is image, there is a color, there's a switch to turn something on or off. Let's actually look at our blogpost and see what sort of fills we need. So first, we have a headline, right? That in Webflow is same as the name of the blog post. Well, it's not exactly the same, but we can turn it into a headline and making the name and headline the same thing. Help text underneath is for us and for the team members who are going to create new block posts. No need to put in here anything. The title headline says it all. Then we have an author and a date. We'll worry about the author later. For the date, we actually don't need to add any extra field. Every new block post that we create is going to come with a creation date. That's why it's not included inside this list of fields. Moving on to the next, we have a main image of a block post. Webflow has already included such field. We can move it on top after the headline to follow the order. The order doesn't really matter. It's just for us. Next in our blog, we have body of the post. Grablo has included a field for that too. This field has true extra options, minimum and maximum characters. That's if we need to add some sort of limitation to the content of our blog. I would say no need. And finally, again, we have an author which this time has a little more information on it. We'll worry about the author later. We're going to create a separate collection for authors. Post summary isn't really on our blog page, but we will need it on our blog homepage where we show all of our blog posts in cards. On post summary, it's a good idea to limit the number of characters. Cards have a very strict layout, so we don't want a summary to be way too long. In our designs, we have used a summary that is maximum three lines. That is about 140 characters long. Now as for the thumbnail image, that's something that goes on the block card. We can have that as an independent field or we can just reuse the same main image. We'll make it easier to create new blog posts, less things to upload. Feature and color, we don't really need them in this case, so let's get rid of them. And there you go. We have four fields that is going to make up each of our block posts. On the right hand side, we have editor preview that shows all these four fields that we have in our collection. This form is what we will fill out each time we want to create a new blog post. Okay, click Create collection to finish this step. And that's all. Our blog post database is now ready. So to recap, we have this ability to add a database to our website. In other words, a CMS, a content management system. Within this database, we have an ability to create many different collections. Collections are sort of spreadsheets that will hold all the content that is part of it. For example, blog post. That's a collection and all blogposts going into one spreadsheet. Each blog post is made of certain content like headline, main image, and body of the post. These are called collection fields, and we have full control over this, what we add and what we remove. In the next video, we're going to add new block posts to our CMS. Tick around. 135. Blog & CMS: CMS Items: Our database for Block post is ready. Now we can start building and adding new blogposts. To go back to the Block Post collection, click on the CMS and then Block Post. Make sure you don't click on the gear icon, that's going to take you to the place to edit the settings. This is one place to add new blogposts, but this can also be done from the editor. We can add new block posts from this blue button. Webflow actually has this option to generate some dummy content for us. Give it a few seconds and you'll get this. If you click on one of these, you will open up the blog post. Here we can see all those fields we created previously. This time, all filled with some dummy content that Webflow generated for us. There's a headline and there is a main image. We have a post body and the post summary. All of that is editable even after we publish and make our post live. Let's create a new blogpost from scratch so we can understand how each of these fields work. We can use content from our designs. So let's go ahead and fill out each of these fields. When you enter the headline, it will automatically be used as the URL. If you want to have something different for the URL, no problem. You can edit this URL right here. I keep headlines and URLs always the same. Just makes more sense that way. Then we have the main image. And I'm going to upload this image right here. Now, the post body is a special kind of film. It's called rich text. We can put headlines in the text, subheads, images, videos, quotes, bullets, and that sort of stuff. We have different types of headlines. We have images. We don't need individual fils for all this stuff. One rich text fild can take care of all the content like that. And within this rich text field, we have a lot of freedom to style text in different ways or add YouTube videos right between the text. This event has some layout controls to display the video in many different positions. Although this isn't really how the final result will look like, the final result depends on how we style this block and more about that later. Lastly, we have a post summary field, which is this. Click Create and will be added to the database. The status has this message staged for publishing. It means next time we publish our website, all those blog posts that are pending will go live. But in our case, they actually won't go anywhere because we have only created a database. We haven't created a blog page that is going to pull this content from the database. We shall do that in the next video. 136. Blog & CMS: Collection page: So we've created a database for our blog, and that's all cool. But where on our website is that visible? Where are those blog posts besides it being tucked away somewhere inside Webflow? Well, right now, nowhere, but in upcoming videos, we're going to bring them to light. The moment we create a new collection inside CMS, a new page is automatically created under Pages Panel. On the top, there are static pages. That's where our homepages and any other page that we create that is not part of the CMS. On the bottom, we have this page called CMS collection pages. These are master pages that can be populated by dynamic content from the database. Right now, we have one page, blog post template. I call it a MasterPage Webflow calls it a template. I somehow prefer Master Page kind of makes more sense. Each CMS collection gets one such page. Right now it's completely blank, just like any other new page we create. But this page is going to turn into our blog post page from our designs. It works the same way as any other static page with only one difference. We can bind elements to the database items. Let me demonstrate. For example, we have a headline on our blog post, right? Let's add a headline. If we write text ourselves inside this headline, then this content is going to be static, just like any other page. But because this is a CMS page, we have an extra option under the settings of this headline, a purple dot next to the text field. When you click it, you'll see something familiar. Some of the fields from the collection settings. Headline post summer in some dates. Since this is a headline, we can select the headline. Voila. Now this headline element isn't static anymore, it's dynamic, and it's pulling content from the database. Let me add the other two fields, the image and the post body. Just like we did for the headline, for the image, we have to add an image element. We cannot populate a headline element with an image or a DVblog with a headline. The field types and element types have to match. Well, not exactly match, but be compatible. For example, headline field inside our CMS is plain text, which is compatible with any sort of text element, be it headline, text block or paragraph. Okay, so the same thing we're going to do with image, click Image settings, then that purple dot. Here we only have one option, main image because that's the only field in our database that is compatible with the image element, which makes sense. Moment I select the main image field, it will bind and pull the content from the database. Let me just shrink this a bit. Let's add last CMS item, post body. This field in CMS is a rich text field. We never had to use rich text elements so far, and now I can bind this rich text element to the post body field in our database. And there you go. It instantly gets populated with the content that is inside the CMS. Now, this headline image and text is part of the same blog post. Which one shows here it doesn't really matter. Once we publish this page, all those logposts will go live and each one of them will pull their own headline, their own image, and their own text. On the top toolbar, we have this option to go through different blogposts and see how they look like. Right now, it's all quite ugly, but we're going to style and build our page as we usually do. Dynamic content doesn't affect the way we do the designing of the page. So to recap, for each collection that we create inside CMS database, Webflow automatically creates a page for it. This page, unlike other pages, is a dynamic page. It has an ability to bind with fields in the database and pull content from there. Only compatible filds and elements can be bound together, for example, image fields with image elements or plain text fields with any type of text element like headline, text blog, link, et cetera. In the next video, we're going to start building and styling this blog post page. 137. Blog & CMS: Navbar & headline: A in this video, we're going to start building our blog post page. To access this page, you go to the pages panel, and on the bottom, you have this page with a purple icon. That's the one. I've previously added all this content here, but I'm going to completely get rid of it and start from scratch. So based on our designs, first thing we need is a navigation bar. We're not going to build it from scratch, obviously. We will copy it from our homepage and take it from there. So switch back to the homepage, select the entire Navbar element. Make sure you're selecting the whole thing and not just the container, click Control C, then go back to the block page and paste it there. I when you paste an object, click on the canvas first or you'll get this error message. Webflow needs to know where exactly are you pasting your element. There we go. Well, nothing's visible right now because our navbar is white. So let's just style the elements inside our Navbar just like in our designs. Starting with links, right now, they are white, so we need to have them dark. To do so, we need to apply a combo class first and then style it. Otherwise, it's going to change the original two on the homepage. And then apply the combo class to the rest of the links. Same for the Nav button, we need an extra combo class. The button's background is our primary blue with 15% opacity. Lastly, the logo, which we need to export from FIGMA. It's glued to the edges. On our homepage, Navbar is sitting inside the hero section, which has padding. That's why it's not glued to the edges there. But here it's outside of that section. We could put it inside the section here, too, but a better option is to just create a combo class for the Nabbar and add padding directly on it. And that's all, the navigation bar is ready. Moving on to the rest of the block page, we have a headline, image, the content. As usual, we're going to start with a section and a container. The section is gray. That's what we are using on the homepage. But for the block post, we've decided to go with plain white. The thing with block post is that you want maximum readability. It's a lengthy content, and if the contrast isn't enough or there is some sort of decreased readability for some other reason is really going to hurt us. Making a white section is simple, just a new combat class, and that's all. Make sure to use some other name, preferably something specific to the base class like white section. That says a lot more than just white, and we make sure it doesn't conflict with any other class. I Alright. Now, let's add a headline. We already know what to do with this headline, right? We're going to bind it to the CMS item. Excellent. The boundaries of our block post in the designs is a little different. We're using a more narrow layout with a maximum width of 700 pixels. And the maximum width of our generic container here is 1160 pixels. That means we need to create a different container for our blog post. So let's give it a combo class or maybe even duplicate the class and give it a maximum width of 700 pixels. Alright, that's looking good. Next, we have author and date segment, but we're going to do that in the next video. 138. Blog & CMS: Author block: In this video, we're going to build that author and date row below the headline. I think the simplest approach would be to use a flexbox for this. Let's add a new MTD block and give it a class author and date. Then let's add an image. Next, we need a name for the author. Add a regular text blog. Give it a new class. Style it just like Figma. I We need to change the flexbox alignment property to something like center. Next, we have this divider. We could use a line bracket for this or just style a diblock with width and a background color. But I think line bracket is easier. I think that's what we are doing in Side fix M anyways. We just need a different color for it. And then the date, let's just reuse the same author textblog and even keep the same class. The date is the published date of this particular blog post. We can already bind this to the CMS. We didn't have to create the date field because every CMS item comes with it. We even have three different date options here. In this case, published on is what we need, but as you can see, it disappears. That's because we haven't published our website or any of the blog posts yet, so that date field is empty. Let's use a different date field, maybe created on or updated on, and later we can switch it back to publish. Or keep it that way. Update is a pretty decent date indicator, too. With dates, we even have an ability to change the date format. This will matter based on where our target audience lives. And lastly, let's add a margin on top of the whole thing to separate it from the headline. All right, all that's looking great. Now, here's the thing. This author that we just created, this is a static content. When we publish our blog posts, all of them will have the same author, but that's not right, is it? For an independent blogger, sure, it's always the same author, but for a company website, there is always going to be more than one person creating blogs for the website. We need this author information to be dynamic as well, but we haven't created CMS fields for this, so we cannot bind it to the database yet. We're going to do that in the next video. A 139. Blog & CMS: Reference field: As we previously discussed, author elements right now are static, same author image and name for every single blog post, even if there were 5,000 block posts. We need to change authors into dynamic content. That way we will have multiple authors and choose one for each block post. There are two ways we can turn author into dynamic content. One is to add an avatar and author name as fields to our existing blog post collection, something like this. Then each time we create a new blog post, we would have an ability to upload author image, name, or any other author related info. Then we would bind those fields on our page and done. But this means for new blog posts, we will have to enter author information, upload an image, put their name. If you want their bio or other information, then all that too, and repeat the same process for the next post, even if the author is the same. Luckily, there is another option. We can create a separate collection for aors. Just like we did with the blog post, we can create a CMS database for ars where we would save all the aors with their profile, photos, names, bios, contact info, any other information. And then we can pull all that information from the database into our blog posts. Alright, so let's create a new collection for the authors. Click here to create a new collection. Webflow actually has a template for authors as well, but we're not going to use the template this time, and we will add fields from scratch so you can better understand how this works. So for starters, we need a name. Anything works here, this is internal. Although it will automatically prefill the URL with the same name, but we can change this. URL is public, and it does matter what we put there. I like using a singular form for the URL because then it would go something like authors John Smith, and that sort of makes more sense than authors in plural. For the fields, what do we need? Obviously the name which is already there. Then we have an avatar or in other words, profile photo. And also on the bottom of our blogpost, the author segment also has some little biography. Let's add these fields. When we add new field, we have to choose what type of field it is, the field and information will be affected by this. In this case, we're going to create a field for the avatar, so obviously that's going to be an image type. We can make this field required. So anytime we're adding a new author, we make sure that there is always a profile photo uploaded. Next, author bio, pretty straightforward. Again, a plain text. We have an option for single or multiple line field. You can see how the field changes in the preview mode with multiple line, and this depends on the company, but we could put maximum character count for the bio. It is a good idea. This way, we're not going to have an author with a biography that is two pages long and another one that is one sentence. And create collection. That's it. If we need to edit or add more fields to this collection, no problem. We can always do that later. Finally, let's have Webflow add some dummy items to this collection. It might need a little refresh sometimes to show up. I Alright, our collection is ready. Let's connect it to our elements on our page. Except we can do that right now. There is no option for Avatar and author name. Why? Because this is a completely independent collection that has nothing to do with block posts yet. So we need to create some sort of link between these two collections, and that happens through reference fields. It's just another type of a field inside the collection. Let's go back to the blog post collection. Click the setting icon, and we're going to add a new field. And choose a reference type. Now, what this type of element does is that we can pull information from a different database, in our case, the author collection. And from a dropdown, select an appropriate collection, which is authors. Make it required and save and save the collection too. Now, let's go into one of the blog posts, and you'll see that we have a new field which is an author dropdown. And this dropdown is looking into the database of aors and pulling information from that database. So we don't need to upload author information every time we create a new blog post. Let's go through all the blog posts and pick an author for each one. Now when we go back to our Master page for the blog post, we will have more options in the binding settings. There is a whole new section with filds from the author collection. Again, these fields are shown only for compatible elements. Avatar isn't here, but Avatar is definitely available for the image element. Select author name here and avatar for the image. Now, as we switch between different blog posts, the authors update accordingly. There is one issue with the avatar, though, but we're going to take care of that in the next video. 140. Blog & CMS: Object Fit: We left off here where the avatar isn't looking at its best. That's because we haven't styled the image in a way that it looks same no matter what type of photo we upload. Right now, it changes the shape based on the image itself. The image that we had before from Figma was already oval and right size. That's why no styling was required. Without proper styling, then we would have to upload already cropped and oval images. And leaving that up to content creators and clients is a bad idea. First, it adds extra work. Second, we would have to teach them how to do an oval crop and just leaves a lot of room for error. The best thing is to style our image placeholder in a way that it looks great, no matter the image that's inserted in. First, let's make it oval. We do this by rounding corners of the border. Then we need it to be the same width and height. We can either apply this value inside image settings or in the Styles panel. All right, the shape is good, but if you notice the image inside is stretched, and it's the case for all the images that don't have equal dimensions. Meaning if the width and height of the original image file isn't the same size. So how do we fix this? CSS and Webflow has a handy property for this called object fit. In Webflow is shortened to simply fit. All we need to do here is to apply cover under this fit property. These settings are quite similar to what you see inside background styles. Cover here works exactly how it works inside background images. The image covers the entire space of this element and the excess amount is simply cropped. This even has the same position settings just like background styles in case you need to change the position. But in our case, we need it centered. Now we have the best solution, which is going to work with all image forms and shapes. Content creators are free to upload anything they wish. And that's all done with a header of our blog post. Stick around for the rest. 141. Blog & CMS: Main image: In this video, we're going to add the main image and again, bind it with a CMS field. Although this image is wider in our designs, it's wider than the container for the content. It's 900 pixels instead of 700. This means we can't put this image inside the same container as a headline. We need a different container for it. So we're going to add a new container, give it a new class, and move the image inside there. I there now that's about right. In our designs, there is a certain height to the image, which makes it look more pleasing. And right now it's just growing and shrinking based on the original image. That's going to create a layout that is not uniform and in some cases, very odd looking. For example, if we upload a big vertical image, that's going to fill too much of the page pushing the text down. This is, again, the same problem we faced with the author avatar. Just like the last time, we can solve this issue using object fit property. First, we need to give this image the width and height that we desire. For height, it's 450 pixels. A but what do we do for the width? We can't give it 900 pixels because it's not always 900. When screen shrinks, we need it to shrink. Now, technically, we can do that because image already has a default setting of 100% maximum width, so it will still shrink. But I prefer to use a relative value and give it 100% width. This will make the image as wide as the parent, which in this case, is our modified block container. As it happened with avatars, we'll get this deformed image because we are changing the aspect ratio of the original image, which we're going to easily fix by changing fit to cover. Perfect. This is now uniform for any type of whatever the form or shape of the image or the size, and it's going to be the same position and dimensions, and it's just going to look great. Lastly, just add a top margin to the image to match the design. That's it. Up next, we'll work on the body. Stick around. 142. Blog & CMS: Rich Text: Up next, we need to add the post body. Adding this is relatively simple. We just need to drag a rich text element. Why rich text? Because that's the field type inside CMS. We need to add this inside a different container. The image container is wider than the rest, so we need the same container that we created above for the header and drop rich text inside that. All right, that's better. And let's add a bottom margin to the image element to create a separation. Bind the CMS field like you do with anything else. Now, here's a fun part. We need to make some style changes to our rich text element. For example, match the text color to what we have in designs. We decided to go with a darker color in the design, and also we need some spacing between different paragraphs and different textiles. Let's start with the color. The obvious way would be to give it a class and change the font color. This does style some of the text, but not all of it, especially not the main one, the paragraph. The paragraph has its own style, and it's being overridden by the paragraphs HTML tag, something that we styled early on on our homepage. Since rich text is just a parent element, a paragraph, which is a child element, can overwrite any of the styles from the rich text. This means we need to style the paragraph directly, but right now we have no access to it. Once it's connected to the CMS, we can select individual elements inside. We can disconnect it from CMS from here, but this then deletes all the dummy content it had inside it. So we're just going to keep this one connected and add another static rich text so we can style it as we like. First thing we need to do when styling a rich text is that we need to apply a class to it. This is important and you'll see why in a bit. Let's start with a paragraph. If we style a paragraph like we usually do, you'll see that this will only apply the red color to this particular paragraph. And no other paragraph inside this bridge text block. In order for us to style all paragraphs inside the ridge text block, we need to go about this like we usually do when we need to style all paragraphs across the side using text. Click outside of the field so you can select individual elements again. Then select one of the paragraphs, remove any class if there is any and inside the selector, select all paragraphs tagged. Underneath the selector, you'll get this little message with plus icon, net selector inside of and the name of your Rich text class, whatever you named it. If you're not getting this message, then it means that you didn't have a class applied to the Rich text block itself. Without the class on the parent Rich text blog, you'll get this message instead. So make sure to first give the Rich Text sum class, any unique class doesn't matter what you name it. Once the class is there, selecting a tag will give you an option to nest the tag inside your Rich text class. This applies on not just paragraphs, but every type of element inside the Rich Text bit, headings, quotes, list items, and so on. You can make a note on this video at this point if you want to come back to it later. So here are the steps. First, make sure the Rich text has a class. Second, select paragraph inside your rich text. You can select a paragraph while you're inside the field like this. Click out from the rich text and then select a paragraph like this or just select it from the navigator. Any paragraph will do. Third, from the selector, select the pink all paragraph tag. Without selecting this, you'll be just dying an individual paragraph. Lastly, click this plus icon to nest this tag inside the parent rich text class. This is how it should look. With an arrow saying when nested inside of in your class name, without nesting, instead of all paragraphs inside the rich text, you will be styling all paragraphs across the side. That's not what we want. This step is easy to forget. It happens to me until this day. And now you can style away. Now every single paragraph type can be styled in one go. Even other type of texts will inherit the paragraph style unless you have some more specific style applied to them. I know rich text are a little confusing, but you'll get a hang of it after a few times. If you remove the class from the rich text, you can see that all the new styles disappear. So essentially, this works just like a regular class styling, but with extra granular control for individual types of content inside it. The remaining red color for other texts is coming from the main class on the rich text, so we can edit that there. You can see now that all these changes are being applied to our dynamic rich text too, because it has the same class on it. If it didn't have the same class, then it would remain unaffected. So in case your connected Rich text doesn't update with the new styles, check maybe doesn't have a class or has a different class applied to it. There are more types of text content inside that we need to style. To style them, we need to repeat the same process. For example, this is a quote type of text. It's a nice element inside blocks when you want to quote someone. So we can style them differently, make it italic that's more suitable for quotes. Bigger line height, a little more space around. We can't even style the border. We can style images too. For instance, the spacing is a little too tight around images. Just keep one thing in mind. The image is inside another thing called figure. Better to add spacing on that one. It includes caption inside too. We can style bullet points, too. They are really small right now. I'll keep it same size as the paragraph text. A We got to style H three headings because right now they're white. I guess we have style them white somewhere on the homepage. All right, we don't have to change everything. Let's see how the real content looks like. Maybe add a bit more spacing for g two headings. Did you see what I've done here? I made a mistake and forgot to nest the tag inside the Rich Text class. So when I made the style changes, I've actually styled all H two headings across the side. That's not what I want. So I'm going to reset the style, nest the tag by clicking this plus icon and then style from scratch. Get rid of the static rich text, and that's it. If you need to come back and change the style, just add a new rich text and apply your class to it. So that's rich text. Maybe a little tricky to understand in the beginning, but with a little bit of practice, you'll get a hang of it. Unlike regular paragraphs or headlines or textbooks, rich text can take many sort of content types inside, obviously, all the different headlines that we have, we can put them inside. We can put images, we have videos. We can quote, we can put bullet points and numbers and all that stuff. And inside Webflow, styling rich text elements have their own specific instructions that we just went through. Basically, the way it goes is step one is that you have to give the Rich text a class. So it has a very specific class, right? Have to style that particular rich text first, right? So you're not able to basically say that every single rich text on this page in paragraph within all those rich text fill blocks are going to have this sort of specific style. Instead, what you are doing is you're saying that a rich text that has this particular style, let's say, super nice rich text. The paragraphs in those classes will always be like this. That's what you're doing in reality. And in the second step, you select the appropriate tag. So when you're, for example, want to style paragraph, you select all paragraphs, right? And then in step three, you select this nesting option. Basically, you're saying that I'm not styling all paragraphs across the website. I am styling paragraphs that are nested within this class, right? You're saying, Okay, this is the class. And if I'm applying this class to a rich text, then every time that happens, all paragraphs inside will be like this. So that's the rich text fields, how to style and how to work with them. The example that I gave was inside the CMS and inside the blog post. Usually the this is a place where we use Rich text inside like a blog or article. So most of the time we are using it inside the CMS. However, that doesn't mean that we cannot use it in other regular static pages. The whole styling, everything works exactly the same, and you can add that to a regular page and style them with exactly the same instruction. So the instructions on how to style ich text has nothing to do with a CMS. It's just the way Rich Text works. 143. Blog & CMS: Author Block Bottom: And continuing where we left off, now we need to add the bottom author block. That's pretty simple. Let's start by new DV Block, which we are going to turn into flexbox and add some spacing on top. Now for the author's profile image, let's just copy the one from above so we have less changes to make. Now we need some text blocks, but we're going to put them inside another day block so they are neatly grouped on the right side of the photo. Connect the text to CMS. And then just style each one individually. And we're going to match all the styles just like we have it inside the designs. And there you have it all nice and style. We can check how it looks for different block posts by changing the block post on the top. And that's it for this blog. 144. Webflow Components: In this video, we're going to add a footer to the page. Nothing's easier than that. We can copy the footer from the homepage and paste it right here. It's ready, nothing to change and it's already responsive. But there is even a better way to do this. Now imagine we have a website and it has a lot of pages, especially a lot of static pages. On each of these page, we're going to have same navigation bar and same footer, usually, right? And sometimes we'll have some sections like a call to action section maybe repeated as well. So we'll have, let's say, 20 or ten pages on all of these pages, same component like footer repeats over and over again. Now, when we want to edit this, right? We want to edit the footer, we would have to go edit one of the footers, right, then take that footer, copy it, and then replace it on every other single page. Now, when it comes to styles, we can easily take care of that, right? We already learned we have CSS styles, we have HTML tags. We can just go in one place and change one instance, and across the entire side, everything will be updated. But how about content? How about the entire skeleton and structure of footer? Let's say we decide one column has to go, or we have to replace the text of maybe just a little headline it's fixing and changing something. In figma, we have something that solves that problem, the components. We can create a component, and then any other instance of that component can be updated everywhere, right, until it's overridden, obviously. We have something similar in Webflow as well. Next to elements tab, there's a tab for components. Webflow components work like components in FIGMa. Remember those? How making any change to the master component, even on the content is going to update every other instance of that component. Components in Webflow work in a similar way. We can create a component out of anything and then reuse it across the website. We're going to create a component from the footer. I'm going to delete this one and create a component from the one on the homepage. To create a component, just right click on the element. In this case, the entire section that holds all the footer stuff and click Create component. Give it a name and create. It's going to turn green. This means it's a component now. You'll see a different indicator inside the navigator too with the name of that component. Now let's go back to the block post. If you go to Components panel, you'll see now there's a footer component in there. You can track this component on the page or the navigator, make sure to drop it inside the body element. And there, the entire footer is here. We have two ways we can make changes to components. First, we can edit the master component. That means any change will be applied to all of the instances of that component across the site. Let me drag another instance here so we can see the changes in real time. To edit the master component selected and click Edit component. You can also right click and do the same. Any changes you make here will be applied everywhere. It doesn't matter on which page you're editing the component. If you click on dit component, then it's always affecting the master component. You can move items around and pay attention to what happens to the one above, as you can see the switches have been made there too, or you can change the text. All changes have been updated through other instances as well. It doesn't matter on which page you're editing the component. If you click on dit component, then it's always affecting the master. To exit the edit mode, click back on the top. Or click anywhere else on the Canvas or press Escape. Now let's see the homepage. There. The change was instantly reflected on this instance as well. To edit it again, just repeat the process. Now, let's say on certain pages we want different content, but we don't want to change the master component, just different content on the block page. We can make such changes using component properties. Enter the edit mode of the component, then select the element you want to edit like this adding. And in the settings panel next to text, click this little icon and create property. I Now, that lets us overwrite the default text of this heading. To override the text, first, you need to exit the components edit mode. Remember, whenever you're in the edit mode, you're editing the master component. When you click back to instance and you normally select the component, then you're working with the instance. Is it confusing? Yes, but you'll get your head around it after some practice. As you can see, the text element is now selectable. And if we double click on it, we are able to edit the text. Make make sure you're double clicking that heading the text element and not accidentally double clicking the component itself because then you're going to enter the edit mode, so double click this element. Now we can rewrite and overwrite the default text. This will not touch the master component. It will only change this particular instance. You can repeat the same process for any other text. Edit component, head property. Back to instance and start typing. Or maybe you want to hide this email form on certain pages. Hitting delete key isn't going to work. What you need to do is select the element, the whole footer column in this case, then go to the settings of that element. Here you'll see an option for visibility. Click Create. This will open up an option to hide or show this element on this particular instance. If we select hidden, you'll see it's gone from this instance, but it's still there on the other one. These are called component properties, and depending on an element you select, you'll get different options. But let's say we want these elements to return to the original form and resume pulling values from the master component. We can do this by resetting those properties from this panel. When you have a component instance selected and you're not in the edit mode, this panel will display all the properties that are part of this component, and properties that we are using and overriding will be in blue, sort of like it is in the stars panel. Click on the blue text and you'll get an option to reset it to the default property value. And resetting the visibility of the email form will bring back that hidden column. One thing you'll notice in the settings panel is that all those properties that we created are still there. And if you try to edit text on your master component, you'll see that it doesn't allow you to do so. That's because the properties that we created still exist and are still connected. While the property exists, editing of the property happens from the property settings, the same place where you created the property. So if you need to change the content on the default property, you can do so here. You get rid of these properties while in the edit mode, go to the settings of the property and click Disconnect. Now, we don't have any properties anymore, and all instances will be uneditable and identical to the master component. Sometimes we want to make big changes to one of the instances like changing the order of the columns. In that case, we need to completely unlink the instance from the component. This can be done by right, click the instance and then unlink instance. This is now completely independent from the component. So to recap, components are reusable and connected, super useful for repeated sections and blocks, such as navigation bars and footers. You can create a component out of anything. You have an ability to make certain changes on instances like updating the text or hiding certain elements. And for our page, it's nearly done. We just need to optimize the responsive versions, but this time it's quite simple. Most of it is ready. Stick around. 145. Blog & CMS: Responsive Post: And we're back for some responsive design. There is very little that needs to be done, so we can take care of it in one video. The navbar needs some editing for the landscape mode. First, let's fix the margins. Our default section has 30 pixel side padding, but navbar, in this case, has a 60 pixel one. That's because this is a little different navbar from our homepage. So just decrease the padding to 30 pixel and you're good. The menu icon needs a different color. It's white, so we can't see it right now. Before we change the color, we have to make sure to apply a combo class to the menu button, or it's going to affect the one on the homepage. That's looking good. Let's check the preview mode. So here we have a little conflict between the background and the link colors and the menu button color. The links are here. They haven't disappeared. They're just dark colored for the same reason as the menu button. We just changed them previously when we were designing our navigation bar. And since they have to maintain to be dark, then in this case, we can only change the background of this drop down menu. So changing it to a very light gray, going to be just fine. All right, NABA is looking good on all screens. Now let's check the header with the main image. The tablet is quite fine. The landscape mode looks good at first sight, but think again, this is going to be narrow. So the image that is so tall is going to occupy too much visible screen. This image is going to work best when it's landscape mode as well, especially because that's what content creators will upload. Something like 250 pixel height should bring it to proper dimensions. Similarly, for the portrait mode, we will need to shrink it a little more. 150 pixels look good. I'll also shrink spacing around the image, both on landscape and portrait. There is something fun we can do with the main image. On the desktop, we have this non traditional layout where main image is sticking out of the main container, but on smaller screens, that's not happening because the section padding is pushing everything in one place. But there is a way around it. If we give the main image some amount of negative margin, it will cancel out the padding from the section. So the tablet section has a 60 pixel padding. So we can give the image negative 60 pixels margin, and that's going to cancel the padding and go edge to edge, making it look more interesting. But instead of applying the negative margin directly on the main image, we will wrap the image in a div block and apply negative margins to that. This will cascade down to the mobile too, but we need to adjust. On mobile section, padding is 30 pixels, so we need to adjust it to negative 30 pixels as well. And and that will be exactly edge to edge. Now, let's check rest of the page. Rich text doesn't need any adjustments. It's responsive already and looking good on all screens. On the portrait, we can even trim a little bit of space on the right and bring the content closer to it. That's all footer needs nothing. It's the same footer from the homepage and it's already optimized. This page is now fully ready and looking stunning. In the upcoming videos, we're going to create the blog homepage. 146. Blog & CMS: Blog Homepage: Now, one last page our blog needs is this blog homepage that grid that we have designed. Blog Homepage is going to be a combination of static page with dynamic content, unlike the blog post page, which is fully dynamic page. What we're going to do is create a regular static page and then insert CMS items inside. So to get started, create a new page. We will name it blog and make sure the URL slug is blog. Starting with navbar, it's exactly the same as the one on our blog post page, so we can copy that one. But instead of copying, it's better to create a component out of it. Right, click on the navbar and select Create component. Name it navbar and we good. Now we can drag that right on our block page. Next, we need the usual section and container. We have a little issue with navbar background color here because we need it to be gray. We could drag it inside a section, but then we would need to change paddings and all that stuff. We could create a combo class and give it a gray background, but that means we'll need to unlink it from the component, which is not a problem, but it's nice for it to be linked. The best option is to wrap the navbar inside another div block and give that div block a background color. All of these options are appropriate and valid, but this one was the best because I didn't have to alter any of the default elements or the symbols. Now, let's add a headline and subhead, pretty straightforward. And nothing needs to be tweaked in this case. Now for the fun part, first, we're going to design a static card, then we will figure it out how to turn it into a dynamic item that pulls content from CMS. Let's add a new DO block and give it a class of block grid. That's where we'll keep all the block cards with a top margin of 60 pixels. Next, we need a new deblock named block card. Et's make this white background. Give the rounded corners and some width. For now, let's give this card a fixed width. We're not going to use a fixed width in the end because we're going to arrange this in a three column layout. But for now, let's do it so we can see properly what we are designing. It disappears when we give it a width, it's empty. That's why. No worries. Next, we need a thumbnail. This needs a height. The exact height from the designs will do. We can add some random image for now so we can see what's going on. And we're going to change the fit setting to cover so the image doesn't look distorted. There's just one thing the block card has rounded corners, but this thumbnail doesn't. It's going outside of the corners with its pointy edges. This happens because by default, overflow is visible on any div block. But if we change overflow to hidden on the block card, then that will clip anything that's going outside the boundaries, hence rounding the corners on the thumbnail. Next, we need content, which we're going to wrap in a div block. Give it a padding of 20 pixels. Et's style the heading in paragraph. For the heading, we can create one of the tags, maybe H two or H three. Remember how to style heading tags, change the tag from the settings, then go to the selector, and on the wrap down, you'll get an ability to select that particular tag and apply all the recording styles from the designs, 22 pixels and semi bold and so on. And one last thing remove top margin from it. Now for the author and date block, we'll need a new do block for this. We already have exactly the same block on the post page, so I'm going to try to reuse the same class here. It will need tweaking, though. Let's check the classes that we have used there. If we apply these classes, we should get the same results. Copying would be an easier option, but it doesn't work with dynamic items since they are linked. All right, now let's tweak this out by using combo classes. Avatar is 30 pixel in size instead of 40. Text is 12 pixels. And it has different spacing on the side, so let's adjust that too. And finally, the top margin. One thing I'd like to add to this card is a hover effect. One thing we can do is we can add a background shadow on it on the hover. That would be nice interaction. We already know how to create the shadow, right? On the cards, we've done it on the testimonial cards, and we can do exactly the same here and we can just reuse the same values for the shadow. Let's add a transition effect, so it's not that abrupt and jerky. There is one more hover effect we can add. We could make the card move a little. This with a shadow will create an effect of card being lifted in the air. Very simple to do in the hover state, and a transform effect. And on the vertical axis, move about two pixels. We need negative two pixels to lift it up. Positive values will move it down. We don't have to add the transition effect because we have added one for all properties, so that's taking care of the transition for the move as well. That's why I like using all properties transition instead of individual one for each attribute. Excellent. The card is ready, but we're not going to connect it to the CMS just yet. We'll do that in the next video. Right now, let's just finish up the page. We need to add the footer, which is easy since we just need to drag a footer component on the page. And done, super easy. Now let's link to this block page so people can access this block page through the navbar or through the footer. Then select the link and go to setting Spanel. Connected to the block page, which now shows up in a drop down. And same thing in the footer. And let's not forget the homepage navbar because the navigation bar there isn't connected to the component. And that's all. Now, the block page can be accessed from anywhere on the site. Alright, Unext we'll connect the grid to the CMS. Stick around. 147. Collection List: There are two ways to pull items from CMS. One is by using collection pages. That's what we've done with the blog post. Every new collection we create is going to have a collection page automatically created for them, which we can access from here. But what if we want to pull CMS content elsewhere? For example, on static pages like the homepage or on the blog page where we have all those block cards. Enter collection list. Collection list is an element that can be dragged from the elements panel on any page and anywhere on the page. When you drag a collection list on the page, you get a bunch of empty purple boxes. Nothing to see here just yet. First, we need to connect it to a particular collection. In our case, blog posts. Now we get this. The boxes are still empty, but each box is corresponding to the block post in our database. Collection list by default displays all items in that particular database. We have a control over how many to show at a time, but we'll discuss that later. We also get these layout controls. Our block grid has three columns, so we can easily switch it to that. Now our block cards will be displayed in a three column grid just like we intended. Well, not yet. They're still empty. If you check the preview mode, they disappear. To start binding elements to the CMS, first, we need to drag elements inside one of these purple boxes. Once we do that, then each element inside will gain dynamic qualities and we'll have option to connect to specific CMS field. In this case, we need to drag the whole blockcard in one of the boxes. Doesn't matter which one. There's no way to select the entire blockcard from the canvas, so make sure to select it from the navigator. Then while it's selected, click and drag it in one of the purple boxes. If that's tricky, you can do that from the navigator panel altogether and drag it inside the collection item. Alright, I'm sure you have questions on what just happened, why the block cards have multiplied. The thing is collection list works sort of like a collection page. One means all acting as one organism like some kind of hive mind. Once we bind elements with the CMS fields, then appropriate content will be pulled. So let's connect elements to their appropriate fields. See the moment you connected to the CMS field, the headline of each card updates instantly based on which particular block post they are connected to. Until we make these connections, then all elements are normal, static elements, and each item will be exactly the same thing. So far, so good. And let's change the date to a shorter format. We need to make some changes to the spacing. First, let's remove that fixed width from the block card. It's going to get in the way and mess things up. We don't want a fixed card, we want it fluid to stretch and shrink according to the width of the page. There's already some spacing applied on the collection item by default. We can add it there instead of adding new spacing properties to the block card. It has ten pixel padding on the sides. In our designs, gap between each card is 30 pixels, so it's 15 pixels on sides. And also the bottom margin or padding. Doesn't really matter, either one works. Now, let's take care of that odd distribution of the cards. This happens when the heights of each item are different, so they are laid out messily, breaking our tidy grid. We can fix this easily with a flexbox. So we need to apply flexbox to the first parent that holds those collection items. This is collection list. Make sure you don't select collection list wrapper. That's a grandparent with all that stuff inside. First, you'll get all the items squeezed in a single row. All we need to do here is to enable wrapping. Then we get exactly the layout that we are aiming for. There is just one thing. These cards aren't actually clickable. How do we actually access the block pages that they represent? For that, we need a link element that is going to connect to the block page. Right now, none of the elements are links, so none of the settings has an option to bind URL to the CMS link. So we need to turn one of these into a link element. This can be a headline, for example, that can be a link or a thumbnail image or both or we can turn the entire card into a link. How do we do that by using the link Block element? So we would have to put the whole card inside the Link block. All of these are very valid options. Different website deal with this differently. In this current layout that we have, I like to have the whole card clickable. If we had different links to leading different places, for example, author's name leading to an author's page, or if there was a link to a category, then we wouldn't be able to put the whole thing inside the Link block because you can't nest links inside other links. But in this case, we can. So let's go with it. Just add a link block element inside the collection item. When you get the settings, you will have this purple page icon. This allows linking to a collection page. Choose that and select current blog post. Now that link will go to that block Post page. Lastly, let's move the whole card inside this inkblock. We actually don't need that extra Diveblog. We can apply the block card class to the link block itself and get rid of the extra div block. Because this is now a link block, all the text inside the card is underlined. That's just a regular behavior of links. We can get rid of that underline from text decoration settings. Select none. Let's have a look in preview and test the link. There is one thing that bugs me a little different heights of the cards. To be honest, it's fine like that, but equal heights would make it look nicer. That's what we have in designs, don't we? All the cards are the same height regardless of their content, and that makes the grid a little more neat. To do the same, we just need to stretch the cards to fill up the empty space. The collection item, since it's a flex child, it's already stretching, but the block card isn't if we give a blockcard 100% height, that is going to fill up the empty space. Remember, you just need to style one of the blockcards and all of them will be styled the same. That's all looking nice, except one thing. The author and date block are on different positions everywhere. In our designs, we have them glued to the bottom, which creates much nicer layout. How can we make that happen? First, if you have a look at the parent element, which is card content, then you'll see that it's not stretching all the way to the bottom. So first, we definitely need to make that stretch. This time, 100% height isn't going to work because that means 100% of the parent's height. Block card is the parent, which is taller because there is the image inside, too. So if we give it 100%, it's not just going to fill the empty space, but it's going to go beyond the borders. So how else can we make it fill the space? Here's one way we can make the parent the block card, a flexbox with a vertical alignment. And then under flex child settings, we can change sizing to stretch for the card content. Now for the second step, we need to somehow glue the author block on the bottom. One obvious option is to again turn the content block into a flexbox with vertical alignment. And change justify settings to space between. That is going to push the objects to the edges. Now, the author block is glued to the bottom on every card, which is lovely, but that makes post summary spaced out evenly as well. We don't want that. We want post summary to be grouped together with a headline. This is easy to fix. We just need to wrap the headline and the post summary inside a div block, and that's all. When I say wrap something, it means to add a new div block and put the elements inside. Wrap like a gift box. And that's all. Let's check the preview. All working great. There's one another thing we need to do. We need to add a pagination. Pagination means to distribute these block cards on different pages. We don't want every single card loading on this page. When we have more than 20, 30 block cards, then it's going to slow down the page. That's why we need pagination. We'll do that in the next lesson. Stick around. 148. Blog & CMS: Pagination: In this video, we're going to add the pagination. Without splitting blockcards on different pages, every single blockcard would load. And when we have a lot up log post, that would make the page load very slowly and wouldn't be optimal. For 20 cards, that's right. But for 50, 60, and more, that is going to slow down the page considerably. Creating a pagination on collection list is as easy as ticking a box in the setting spanel. So here we decide how many items should there be displayed per page? We want a number that is suitable for our three column grid, something that is dividable by three, like nine, 12, et cetera. Ten isn't good because then you'll have empty slots. The ideal number is something that can be divided both into three and two column layouts. 12 is the best option. So besides pagination, there are some other settings for collection lists. Let's quickly have a look at them. Filters are cool and very handy. For example, we could filter post by author or post created this month. Or we could add extra fields for such filtering in our collection fields. Then those fields will show up here and we would be able to filter items based on them. So for example, one way you can do is category filter. So every time we create a blog post, we would choose a category of the blog, right? So we would say, maybe this is about cooking, maybe this is Spanish cuisine, Italian cuisine, French cooking, whatever. And then we would have dedicated pages for each category, right? So all the blog posts about French cooking, all the blog posts about Chinese food. And on each of these page, then we would create this filter. So show only those that are categorized and have a category of French and those that have a category of Chinese food and so on. Similar options apply to sorting. We can sort the order of posts by many different criteria and rules. And again, we can create separate pages for different sort orders and then include those links on top so users can navigate there. There is one last setting, limiting number of items shown. This is similar to pagination, although it limits number of items altogether and adds no extra pages to display other items. A practical example of this would be similar block post suggestions underneath an actual block post. To do this, we would add another dynamic list underneath. We would populate it with blog posts and then limit items to two or three. So it only shows a few post suggestions. That's how simple and powerful these collection list settings can be. Once you enable pagination, you get these next and previous buttons to move between the pages. So styling is quite easy. Just select the button. Give it a background color. Change the tax color. Add some more spacing. Add some hover effect. Always add hover effects to buttons and links. It's important for users to understand what's an interactive object and what's not, and hover effect is the best way to do that. I was recently reading a biography of Steve Jobs, and I read this line when he was saying that Technology has to make you feel like that you can dominate them. And this is so freaking true. That's why simple minimalistic technology and products are always better than complicated products that have a bunch of buttons and dials on them. So whenever you build your websites and design your websites, never forget usability and never forget how the user is going to interact with it. So make sure if there's a button, make sure the button has a hover effect or some sort of interaction with it so we can understand that this thing is clickable. Right? Or if there is a link, does the link change the color? Is there some sort of indicator that this is the link and you can click on this and it's going to take us somewhere and so on. It's not that difficult, but it does take some paying attention and not being lazy because a lot of web designers are quite lazy because if they weren't wouldn't have so many bad websites that drives us crazy sometimes. Anyway, back to pagination. So back to styling our button. We can apply the same class to the previous button. The class name doesn't make sense. Maybe I should use pagination button. That's a little better. When you select some element of the pagination, you'll get this extra option in the settings. This will show the page count, which is sometimes a useful thing to display. We could style this as well if you want it, but I think this is enough. That's it. Our block ad is done. We just need to make it responsive and we'll do that in the next video. Stick around. 149. Blog & CMS: Responsive Blog Page: Now let's make our block page responsive. The desktop is doing well. The cards shrink to a reasonable size, so we can still keep three columns. On the tablets, it's a different story. It's too much for three, so we got to go with two columns. We can change the layout from these settings. That's going to affect desktop version two. It's global, not device specific. But it's quite simple. These items are inside a flexbox with wrapping enabled. This means cards will jump to the next line when there is no space. If we give the collection item a 50% width, that will instantly organize everything in two columns. Easy as that, they will stretch and shrink to occupy according space. Now, for the landscape, it's a little tricky. On wider sizes, it's perfect. But when you shrink to the smaller size, then two columns is too much. One option is to create a single column layout, so we would need to set the width to 100%. Single column isn't bad in this case, but do you know what would be the perfect layout? If we could have two column layout and then some specific width for it to turn into single column. For example, if we set minimum width of collection item to 300 pixels, this way, cards will shrink until 300 pixel, and then they will wrap to the second line, creating one column layout. But this is an idea. On the big screen, we get this gap. Ideally, we want it to switch to 100% width the moment they go single column. Luckily, there is an advanced trick for this. We can set such specific rules under flex child settings underneath the more options. Remove the minimum width settings before you start editing this part. There are three fields with grow, shrink and basis value. The combination of these three values renders different results. I won't dive deep into the logic of how they all work, but I'll explain the one variant that we need right now. Inside the basis, we can set a value like 300 pixels. Then in the shrink field, we can specify to not shrink beyond this value. The value for this needs to be zero. If it's one and above, then it means it can shrink beyond that value. So with shrink set to zero, it doesn't shrink beyond that, and the cards wrap to the next line. It's like setting a minimum. Now, because grow is set to zero, it neither grows beyond 300 pixel nor shrinks. 00 basically means don't grow, don't shrink. Just keep it at 300 pixels. But if we set grow to one, then we will allow it to grow beyond 300 pixels to occupy any available space. And this gives us an absolutely perfect layout where it's two full column, and when it gets too small, then it turns into a single full width column. If you didn't wrap your head around this fully, don't worry. It's a tricky concept. Just know that such granular control is an option when you need it. Then randomly, you can play with different values until you get the desired result. That's what I do most of the time anyways. Finally, let's see the portrait mode. Because of the flex child settings that we have set in the landscape mode, portrait is automatically in a single column mode, although with one issue. Since we don't allow it to shrink below 300 pixels, it goes beyond page borders. Now, because we are using flex child settings, we are not able to edit with settings here because flex child settings ignores these values. So we turn the flex child back to its default value, which is the shrink if needed, and then we will be able to change the width 100%. There is one last thing we can fix. Having padding on the sides creates this little misalignment from the edges of our page. You know where all our content is aligned. This is being a little nitpicky, but I like things as exact as possible. You should try your best to develop this habit, too. Obsessing about details is a good quality for a web designer. So how do we fix this little misalignment? We can't have a special combo class for those cards that are on edges. They are one, remember, Hive Mind. But it's quite simple. We can add a negative margin to the parent that holds all those items. -15 pixel on both sides and done. You get cards aligned now exactly on edges. And that's it. Really, that's it. Our website is fully done. It's responsive. It looks beautiful. It's fast and powerful. People pay good bucks for this. In the next section, we'll give finishing touches and we'll publish the website. 150. Going Live: SEO & Publish: Let's start by SCO and some other finishing touches. We need to fill out SEO details for all of our pages, starting with homepage. We've already done this before, so it should be pretty straightforward, except for the dynamic blog post page. That's a little different. Don't forget the open graph settings. That's for all those social networks, Facebook, Twitter, and stuff. Or the image, it needs an URL. We can choose an image from the Assets panel and get a URL from it. I'm going to go with this image. Then just grab the URL and then paste it into the field. Same thing for the blog page. I don't have any specific rules on what you should put on SEO as long as it's not empty. The rest depends on the business and what message the clients want to send. Now a fun part, SEO for the dynamic page. You'll notice an extra link on a dynamic page, these purple links to add a field. So the name of the blog post can be static, right? The name has to be same as the headline of the blog post page. We can add that headline like this. There you have it. The name of the blog page. And if you click these arrows, you can easily go through different posts. We can add anything else in front or after this dynamic field. And inside the meta description, we can add a post summary text. That's another reason why post summary is such a handy field to have. And for the open graph image, we can directly select the image from the CMS. How great is that? So each post will feature their own main image. That's all for the SEO. There are some links we need to connect in the Navbar and footer. For example, the logo, it's a good practice to link it to the homepage. It's what people expect. As for other links, we don't have pages for them, so we got to leave them as is, except for the blog which we have already connected. Let's not forget the footer. We need to link that logo to the home page as well. If you don't see the link settings, maybe you just have a logo without a link block. Only link elements can be connected to other pages. So if you are missing it, just add a new link blog and just drop your image inside. Don't even have to add a class to the link, edit the settings directly. Excellent. This is a good time to check all the links in a preview mode and see how all that looks in different screens. I love the result. It's a handsome, fast and solid website. Let's now take care of the image compression. This is an important step because all of our images are pretty huge in file size, and that will make the sites lower. Go to assets, expand the panel, select all assets, and hit compress. Some of the images won't be selected for compression, and that's fine because some of them are in SVG format and they don't need compression. We want to keep them in SIG. Give it some time and you'll get a notification when all the images have been compressed. Now, these were images on our static pages, but we also have a whole bunch of images inside the CMS. There are images both inside the authors and blog post collection. We can do the compression right from here, and this will compress all the images in one go inside the entire CMS in both of these collections. This will take a bit more time since there are a lot more images, but we don't have to wait here. We can just continue with the remaining steps. Alright, before we hit publish, let's go to project settings. We need to upload a favican just like the way we did last time. Remember how we did this, we had to create a favican and web clip icons in Figma. The favicon and web clip need to be created in precise sizes, 32 by 32 for the favicon, and 256 by 256 for the webclip. So let's draw a frame that is exactly 256 by 256. Then give it some color. So corner radius. Create a little icon from the logo, and that will do. O for the fabrican we need exactly 32 by 32, but we can't just resize the frame as it is because the text inside won't scale properly. However, the scale tool is made exactly for such resizing purposes. We can input our desired dimensions and everything will be scaled down proportionally. That's it. Now export them in PNG in one X and upload them under side settings. Make sure that the dimensions are correct, or it will throw an error. And that's all done. Now we can hit publish on the Webflow domain. And that's our snazzy little website. Let's check everything out, make sure it's working properly. Up next, we're going to test forms and see how form submissions are managed on weblo. Stick around. 151. Going Live: Form submissions: Y. Now let's give our forms a test. We have made a pretty simple form this time, just an email address. We can go pretty crazy with forms on Webflow, but be it single filled or multi step t filled form, they all work the same. Submission went quite well. This is a default behavior. The submission happens right on the page. When you refresh the page, then this message is gone and we can submit the form again. We're not limited to this version. We can also redirect users to a different page after the submission, like to a thank you page or a confirmation page, whatever. All we have to do for that is build that page on Webflow and add the URL in the form settings. We can send submissions automatically by email. We can provide an email address of a person who is going to receive submissions. Usually your client's email address, and they will get an email like this. I love that Webflow also takes care of this, and I don't have to get a plugin or install some third party application to manage the notifications and all that stuff. We're also able to customize these email notifications when our site has a hosting plan. Okay, now, let's see what happened to our form submission. Go to project settings and click on the Form Stab. That's where you'll see the submission. There is a lot we can do with these submissions. We can delete. We can export it into CSV. Another thing we can do is integrate form submissions with other apps. For example, to email marketing tools like Mailchimp, new submissions can be sent to these email marketing platforms where your clients can do their thing with it and blast new email newsletters and promotional material and all that stuff. And that's all there is to form submissions. 152. Intro to Freelancing: Have gone through some heavy learning so far. Great job. By now, you have a pretty good hands on experience with Figma and Webflow. You can take on a real project and go from wire framing to designing and then building the whole enchilata in Webflow. That doesn't mean that you know how to do everything. I don't know how to do everything either, especially when web technologies change constantly. You keep on learning. When a client asks me to do something that I've never done, I go online and I usually look for video tutorials if such exists. If not, then I ask on forums. And sometimes, most of the times, actually, somebody has already asked something similar and I can already find an answer on some other forum or on the WebflowsFm actually, which is a great community. I already mentioned this, do sign up and go on Webflos and every time you have a doubt, always go to Webflos Community and find answers there because there is every time you get stuck, answers are usually. I go and build a solution for the client. That's a web designers daily workflow. You never stop learning. But the important part is that you have enough foundation to take on real projects. And that's what we're going to focus on this part of the course. Getting work. Concepts that you learn can apply to full time work as well, but mainly we'll be focusing on freelancing. You're going to learn about pricing strategies, proposals, freelancing platforms, and other places and other ways to find work. And we're going to hook you up with an awesome portfolio website. So let's get going. 153. Portfolio website: Have a company with two of my friends, and we did a lot of hiring back in the days. And what most a lot of candidates would do is they would undersell themselves. They would come and they would say, You know what? Oh, I'm just a beginner. I don't have much experience, ya dah dah, but, you know, I'm a quick learner. But my conclusion as your potential employer is that you suck. How do I know that? You just told me so. Getting started in any new profession is tough, because people do want to hire pros. They don't want beginners, they want pros. That's the truth. But here's a big mistake a lot of people make. They think being a pro is someone with years of experience, not at all. A pro is someone who takes their work seriously, a someone who looks like they can get **** done and someone who wants to deliver great service to their clients or employers. So how do you make yourself look like a pro? For starters, you have to show what you can do. And in the web design, that's done with a portfolio. You've already designed and built two projects in this course, and that's already something to show for. But my recommendation would be to do one more project from design to building outside of this course. That's going to give you three portfolio pieces, and that's enough for you to go out there and start applying for jobs. And more importantly, doing another independent project is going to give you practice and experience outside of this guided course. But portfolio pieces are not enough to look like a true pro. We need a portfolio website because what do you think? Wouldn't a pro web designer have their own personal website? But you'd be surprised a big chunk of web designers, they actually don't have their portfolio on platforms like B hands or dribble, and that's what they share with their potential clients, sending the link to their profile with all the portfolio work uploaded. I never do that. First, that doesn't make me look like a pro. As a freelance web designer, you're essentially a business who provides a service to your clients, right? And no good business would ever do something like that. It's like being a professional photographer with portfolio only on Instagram. I want to be a pro photographer who has his own photo studio, not just Instagram profile. And second, I'm sending them to a place with other good designers. That's just a bad idea. I'm helping them to find someone else. I'm showcasing my work next to world's best design work. And even if I was the best candidate available for them, I don't look so good anymore. My work doesn't look as impressive next to the world's best work. And third, I'm losing an opportunity to make a persuasive pitch to them with my website, right? I can showcase them my design process. I can write a very persuasive and convincing content and a copy right to convince them that, you know, they should hire me. I could impress them with my website itself, and I can prompt them to take action so they can get in touch or, you know, submit a form or. Not saying that you shouldn't have profiles on those platforms. Sometimes you can even find work through there, but it's not a place to direct your potential clients too. Plus, you're a web designer. You never thought of making a website for yourself. That just doesn't look serious. It's like being a car mechanic who never owned a car. Portfolio website can do a lot of selling and pitching for you. And I had clients hire me just because they like my website. Not even thinking or looking at the portfolio my portfolio pieces, they just really like the website itself. So knowing from the personal experience how much a good portfolio website can help, I have designed and built an awesome portfolio website for you. This portfolio template comes with a caveat. Nowadays, there are a lot of my students who are freelancing on platforms like Upwork and fiber. Many of these students will be using the same portfolio site in the course projects. If you plan on freelancing on such platforms, too, then I wouldn't recommend using this portfolio template. There is a high chance that the same client would receive bids from two of my students who are using the same work in their profile. This applies to course projects, too. Outside freelancing marketplaces, it's fine. The world is big, but marketplaces are more like small villages. In that case, a better approach would be to create your own portfolio site and a couple of independent concept projects. That's also going to be a good practice for you. Or you can buy a paid portfolio site template on Webflos Marketplace. There are free templates, too, but of course, paid ones have better designs, more options, and less chances than many other freelancers on the marketplace using the same template. Okay, so if these conditions work for you, then in the next video, I'm going to show you how to install this website for yourself, how to add your own content, and how to make some customizations to make it more personal. 154. Portfolio website tour: I show you how to install a website and move it to your Webflow account, let me give you a tour of the website and show you what's and show you what's the design thinking behind all that. Some of the content you'll see on a page is a placeholder text like this headline. And in the next video where I show you how to install this site in your Webflow icon, you're going to replace the generic content with your personal info. The website is quite simple, the way portfolio websites are supposed to be. We have only two pages, a homepage and CMS pages for each project. The content of the website is in a first person narrative. This is sort of style that I love for portfolio websites. If I'm looking at someone's portfolio, I'm interested in the person behind it, so I want to see a friendly interaction so I can sense the personality of the person. Also want to see a clear information of what you do, what is your speciality? What is this website about? Clear direct language. Can I work with you? Are you available for work? How can I work with you? What are the steps and so on? Also, very direct showcase of the portfolio. Some portfolio websites have it on a separate page, and that's just too much work. I have to find a link, click that link, wait for the page to load again to finally see your work. So I like showing portfolio pieces on the homepage instantly after the hero section. No looking right in your face. How you display your portfolio pieces is important too. A lot of portfolio sites that I've seen they have very confusing creative but often confusing way of showcasing past work. Often they use just thumbnails, no titles, no description. You have to get to a conclusion on your own. Not cool, making me work. Here, as you can see, everything is super clear. We have a title. If we are not sure what this is, there is a smaller title saying latest work, no way to get confused about that. A description of the project, which is super important because many designers don't do that on the homepage. Clients might not even visit the project page. They want to get information right from here. And it's important to tell them what sort of project this is. Did you design it? Was it an individual work, teamwork? What was your role? What's the website for and so on? They want to know this essential information to understand what the heck are they looking at. I've added some tags as well to give scannable information on type of projects like Webflow development, concept project, saying that it's a concept in a tag is a subtle way to be honest about the fact that it was a concept project. Concept project means that it wasn't real paid project that you did for some existing business or a product. But you did it either for practice or for this course or for any other reason. You want to avoid awkward disappointment later when your client asks you something about that chat app company you worked for. And, of course, pretty mockups of the project. How you show the screens of the project is important, too. What I do section is exactly what it says. This is a place to give a more detailed description of services you provide and pitch a little more. Here's a pro copywriting tip. If you want to write persuasive copy, make it about them. Talk about how you're going to solve their problems and improve their lives, not how much you web design and the chicken case ideas are your passion. Lastly, very obvious section. If they want to work with you, what's their next step? Now let's check out the project page. Project pages are quite straightforward, some description of the project and a large screenshot. There are many different ways to demonstrate your portfolio work, but this is a style that I use on my own website, and I like it the most. Some designers like to do a case study, so they will have a large presentation of the project and quite a bit of explanation of the process, goals, challenges. Basically a short story on how the project came to fruition. This is an excellent approach and shows all the work you have put in it and shows your potential clients the behind the scenes of your process. The reason why I don't do this case study is simple. It's a lot of work. The amount of advantage isn't that big, mainly because who our target audience is. As freelance web designers, our clients, 90% of the time are non designer entrepreneurs. A good portfolio of side with simple screenshots of your password is enough information for them. They're not going to dive deep inside the case study anyways. They will appreciate that it's there and they will think even more highly of you, but the amount of work we have to put into create the case study for each portfolio is too much. Maybe in the beginning we'll have enough enthusiasts, but later we won't, and we're just not going to keep our website updated because of that. That's where we're going to screw ourselves over in the future, because updating the portfolio is going to be so much work that we'll just not do it and we will end up with an old portfolio pieces, and that's the worst outcome. Your designs will in pro and generally web design trends change, so your older designs will look dated and not modern. But if it's very simple to update, you'll be more encouraged to keep it fresh. So the project prey just needs a paragraph of description and a screenshot, which you can export right from Figma, it's so easy. The linking to the live website is optional. It's very helpful for clients looking at the project. They can see the website in action and play with it and see all the work you've done, not just screenshot, but interactions and all that stuff. Although I have a rule on this, only linked to live websites that you're proud of. Real client websites are living organisms, and when you're done with a project, the client might change things on the website. They might add new section, change things on their own, hire someone else for any new updates and so on. So at some point, your precious designs might end up looking horrendous, and you don't want to showcase a website that has been butchered overt. Even if you are the one doing butchering. Well, that's it. Minimalistic, beautiful, and strong personal website to demonstrate your work and show potential clients your professionalism and web design skills. 155. Installing portfolio website: In this video, I'm going to show you how to install the portfolio website in your own Webflow account. So you can make it your own, change things, edit content, even customize style, and publish as your personal website. I've created a showcase of this project right here. This is a place where Webflow designers can share their projects with others. Go to this link to access the page, the links in the resources of this video. Once you're on that page, you'll see this clone button that lets you clone the entire project into your own account. Click on that. There is a warning message saying that we can create a new project in our account because we hit the limit. Under the free plan, you can only have two unhosted sites in Webflow. So since you have already built two projects, the chat app and TeamMp websites, then you'll face this issue. You have three options. Upgrade to a paid plan, create a separate account, or delete one of the existing projects. All right, once you solve that limit issue, then you'll be able to create a new site. That's it. Now you have your version of this website. You already know how to do everything you need to do here, but let me show you things that you should edit. First, the name. The logo is just the tag, so just put your name in there as you wish, if you want first and last name or just first or just last name, whatever you prefer. There's also the name in the headline. Don't forget to change that. There is the name in the footer as well in the copyright text, put your first and last name there. Lastly, there are names in the SEO fields. Two places homepage and the project template. Then there are email links in two places. There is one in the Navbar and one in the Footer. Both Navbar and footer are components as you'd expect, so it's synced on the project page too. These are email links, so you need to put your email address inside the link. So when people click on it, new email is pre filled with your address. A Don't forget to change both text and the link setting. That's it for the personal info. The rest is content which you can update as you wish. Or don't feel free to keep it as it is, but giving it more personal twist would be a better idea. You can give this website your own personal colors if you like. Updating is very easy. All colors are global. That means you can update the global color, and all the instances of that color will be updated instantly. Click on Edit and just choose a different color on the map or paste the color code. A Same thing you can do on the highlight color. Whatever color you use for the backgrounds, don't forget to update project thumbnails accordingly. They are independent images, so they don't automatically update with a global color. I've prepared Figma file for these thumbnails so you can easily update and export new ones later on that. Let me show you how I made this highlight effect so you know how to reuse it if you decide to. The highlighted text is inside a DV block, which has heading element inside and a regular DV block as a highlight. Highlight has absolute positioning. That's why it's stacked behind the text. If you feel like highlighting some other text element, just copy this entire highlight box and edit the text inside. Because of these highlights, this headline isn't one fluid text. It's a bunch of independent inline elements sitting next to each other. So to move the order, you need to drag elements around or change the order in the navigator. Keep in mind, highlighted text can span on two lines. So try highlighting maximum two consecutive words like web designer or have multiple highlight boxes next to each other if you really need longer highlight. The link highlights work a little different. Actually much simpler than headlines. It's just a box shadow. And if you need to apply that style anywhere else, just select a class named yellow link. And the highlighted text will be added with its hover effect. As you probably notice, the page has really cool interactions like those highlights on page load, and that scroll line moving like a snake up and down. Let me show you where these things are. If you go to Interactions panel, you'll see there are three interactions on page load. There are quite simple interactions. First one controls those highlights. Second one is for the content sliding, and third is for the scroll line in the loop. Probably won't need to edit any of this except one highlight because if you add any highlight elements, you'll need to add it to the interaction too. For example, this new highlighted box doesn't animate. The best thing is to just add text inside the existing highlight boxes. But if you really must add new ones, then here is what you need to do, so the new text animates as well. The highlight animation is very simple. The box just scales from 0% to 100%. That's all. The initial state is set to zero vertical scale. And then it changes to one, which means 100%. So it just grows 0-100% in its original size. And the same thing is done for each highlight independently. That's why first one runs and then the second one. So to animate the third one, select it on the canvas and under initial states, when this plus icon appears, click on it and select scale and put zero under X value. But before you do that, disable this lock because this is preserving aspect ratio and we don't want that. We want it to shrink and grow horizontally only. Now we need to add a final state, which is to grow it back to one, and we're going to add that at the end. Why? Because we want it to animate one after another, not at the same time. Again, disable the lock and put one under X value. Play the animation to see how it's working. Working good, we just need to match the easing to others. I'm using out quad and 0.6 seconds. So check the preview. I'm perfect. As for other interactions, probably you won't be needing to change anything, but if you do, all the settings are visible for you to see how they are set up and what needs to be changed. To find these interactions, you need to select a correct element. So the interaction appears in the panel. Interactions that are triggered by page load appear all the time, no matter what element you have selected, but those that have an element trigger, you have to select the exact trigger element. To find these interactions, you can see them in the navigator. All the trigger elements have this lightning icon next to it. That means there is an interaction on that element. For example, button wrapper. That's where that hover interaction for the button is set up. All right, the last important thing you'll need to know is how to manage projects. They are CMS items, so you can easily manage them inside CMS. I'll add a new project so you can see what's what. Name, description, pretty straightforward. There are two images you'll need to generate for new projects, a thumbnail for the homepage and the full screen of the project. The full screen is simple. In figma, go to the design of your page and export the entire frame. Then just upload it to the corresponding field, but make sure to compress the image, or it's going to be a very large file. As for the thumbnail, go to this Figma file that I have shared with you, link in the resources. There is a page called assets, and that's where you can create your thumbnails. By the way, you'll see here there is a favican and a web clip. Use this so you can generate your own and update them in the settings of your project. Drag the image inside. And position it as you like. And the same thing for the back group. Then export the thumbnail and upload it in CMS. Then you have a live site URL. If you leave this empty, Link won't appear, so you can leave it empty without a problem. Make sure to enable this toggle. This is for the project to show up on the homepage. I've added this so you have an option to disable or enable any project on the homepage. If you're wondering how I've done this, it's filters. So I created this toggle and on the homepage, then I created the filter for the collection list saying that display those that have toggle enabled. Pretty easy. Then you have these three tags that show up under the title. And that's it. Once you save, go to the homepage, you can see the new project is going to appear on top of the others. And it links to the project page, which is ready as well. That's all you need to do to add more projects. By the way, these projects on the homepage are a collection list. Remember those? Content is linked to the CMS fields. Also, the collection list has a sort order applied to it. I've set it to the newest to oldest based on last time the CMS item was updated. If you want to change this sort order to something else, you can do so here, like oldest to newest maybe. Well, that's all the important things you need to know about this site. If you get stuck, let me know and I'll help you out. 156. Finding work online: To work and where to find it. There are many ways for a freelancing web designer to find work. The very first and obvious option, which is online platforms like freelancer.com and obviously org.com, or locally in the city where you live and networking with people in the industry, networking with the startups, going to the tech conferences, making friends with other successful web designers who can send work towards your way because what often happens with web designers is that they get fully booked because, you know, one designer can only do one website at a time, right? You cannot do ten, 20 websites simultaneously. So good designers very easily get book, and what happens then they send work to their friends or some other people that they would recommend to their clients and so on. Also, LinkedIn and regular job boards like Supercruter, there are more than enough ways to find work. And if you Google this, you'll find more and more options. The question is, which one of these options is the perfect place for you to look work? Things like your current skill, your personality, or your experience, where you live, the city that you live. All those things will determine which one of these options is going to be the perfect fit for you at this stage. I can tell you which one is going to work the best for you. No one can, but the best approach is to just pick one at a time and just go through the list. In this video, I'm going to talk about the online platforms and finding work on online platforms. I'll give you a general overview of the biggest ones. There are many of these. There is Upwork, there is fiber, there is freelancer.com. People per hour, top tile, and so on. The list is endless. And if you Google it, you're going to find more and more. And every year, obviously, more and more of these platforms will pop up. Competition changes as some of them fall out of their top place, and other one will replace them or new ones come up. First, Upwork. This is where I found my success. I found enough work on Upwork to be busy full time. Upwork is huge. It's a public company, meaning it's trading on stock exchange. I think it's the first freelancing platform to go public. Jobs are plentiful here, which means competition is rampant. I have a dedicated video on Upwork and how to be successful on it, so we will cover it in detail there. I'll teach you some strategies on how to be successful and some common mistakes to avoid. Then we have Fiber, which is slightly different on Upwork clients post jobs and freelancers bid, but on Fiber, freelancers post services and clients buy them directly. For example, this freelancer here says he will design a responsive Webflow website for $200. And he offers three different packages, basic, standard, and premium. I quite like this service based approach on fiber. I've actually done my first freelancing on fiber. This was a while ago. I did resume designs for five bucks. Back then on fiber, that's the price you could only charge five bucks and offer some upgrades. But as a base price for every service that was listed there was five bucks, hence the name fiber. They've changed their approach since then and now you can price your services whatever you want. I've often hired freelancers on fiber to do quick and small jobs of translation, video editing and things like that. As a client, it's great to just buy a service that is like a complete finished product. No negotiations and all that. By, send details, wait a couple of days for results, and done. You even set specific delivery dates which you have to meet after you have all the info and assets from the client. So if I were to create a web design service here, here is probably what I would do personally. I'd say, I'll build a website for a specific type of business. For example, a website for freelancers or a portfolio website or accountants, et cetera. I'll create many such gigs. That's what it's called here, the then I'll create a couple of templates or just use templates from Webflow marketplace. There are a lot of beautiful templates sold on Webflow, and there are even pretty great free templates. I would count the template cost in the total price, maybe use free templates for basic pricing, and then have paid templates under premium pricing. And then when people would buy my gig, I would have them choose which template they want and offer color, type or other customizations based on their brand. This way, clients know upfront what they are getting. No discussion on designs, and I don't have to design and build an entire website from scratch. I'm grossly simplifying the process here, of course. I could make an entire course just on this. Keep in mind that you'd be creating a complete ready made service for your clients. You'll need to put a lot of thought into it to create a really nice package, and we'll take some trial and error until you get it right. As a matter of fact, this is exactly what I was doing with resume designs. I was giving them about five resume templates to choose from. They would choose it, then I would fill in their details and done. No one ever had any complaint about the design because they knew what they were getting upfront. Then we have LinkedIn. This is not a typical freelancing platform like Upwork or fiber. It works quite differently. On LinkedIn, clients don't usually post small freelance jobs and wait for bids. Instead, it's more about positioning yourself and getting discovered or reaching out to people directly. There are a few different ways to work here. First, you can use the job section and search for roles like web designer or have LinkedIn itself recommend jobs based on your profile. Some of these are freelance or contract roles, but many are full time positions, which is definitely something I'd recommend beginners to consider. As a beginner, you want to open up your options as much as possible and not limit yourself to freelancing. If you live in a big developed city, your options are going to be better because jobs here lean towards local hires. But there are remote options, too, and you can explore them country by country. Although note that even the remote positions will often want a local hire that is based in the same country. So if you are based in a developed country, then this will narrow your options a bit. But it's still not to be discounted. Many of my students found remote jobs outside of their countries. The upside of looking for a more permanent position compared to freelancing is that you only need to get lucky once. So even needle in the haystack strategy is worth trying. If you are based in U, then this countrywide limit expense for you a bit. For European companies, contracting across the entire EU is easy and common practice. So many positions will allow applicants from the entire EU. But this is not the main advantage of LinkedTI. The real opportunity comes from outreach. Many freelancers on LinkedTIN search for business owners, founders, startups, or specific niches like dentists, salons or agencies, and approach them with their services. Or they fish for posts by others who are looking for a web designer or a website development, and then they message those people directly. Many of my students mention LinkedIn as their source of work, so it's definitely worth exploring. If I were starting today, I would definitely use LinkedIn alongside at least one freelancing platform. These three definitely offer the most opportunities and should be the first line of approach for you, but there are some other platforms worth mentioning. People per hour is sort of a mix between fiber and Upwork. Clients can find freelancers directly by searching for specific skills and then reviewing profiles of freelancers and getting in touch directly. Also, they can post project just like Upwork and freelancer and get proposals from freelancers. And just like Fiber, you can post services here. They call it offers on Fiber it's called the gig. I have used PeoplePerHour both as a freelancer and as a client. I did some resume designs here back in those days, and I've hired web designers and web developers several times in here. Top tell is a freelancing site that has quite a different approach than others. This site is going to be a bit early for you in your career, but I'm still going to throw in here so you know what's out there. Top tell has a very rigorous selection process for freelancers. They do interviews, challenges, portfolio reviews before they accept you on the platform. They want a top talent in there, hence the name top ten. As they claim, only 3% of applicants are selected. So consider Toptal once you have excelled in your skills. This, of course, means that clients who look for freelancers on this site are looking for a premium service and they are not afraid to pay accordingly. So as you can see, even on online platforms, there are places to find high paid work. Overall, possibilities are endless online, but competition is fierce as well, because there are a lot of web designers out there. It's the entire world competing for the services. But don't get discouraged. In reality, most of the web designers and most of the talent that is applying for jobs that are on these platforms, they are terrible. Are not even mediocre. They are below mediocre. Clients actually struggle finding good talent as well. Often my clients, when they come to me and I'm busy and I'm maybe fully booked and I don't have any capacity to take new projects, they ask me, Okay, then do you know anybody else that you could recommend because we went on this site and we couldn't find anybody because there's just so much competition and there's just so much kind of noise going on out there. That finding the talent for them is a bit difficult. And the thing with this platform is that because anybody can join and it's open to the world and world is freaking big, you have so many people join in without even having any skill at all. Like, people will claim that they are web designers and they will do anything even before they took a web design course, right? If you can imagine, any kid or anybody comes here and they think, you know, I'm going to make a lot of money online, and they start like, Well, do web design. I just installed a square space site for somebody or I just learned how to install a WordPress theme. And now I'm a web designer or a web developer, right? And for someone like you who has put so much work into it, and let's be honest, this course was quite huge. So if you put work and if you are working on it if you are taking this seriously, then you will be unstoppable. And if you provide good service and you deliver good service and with polish and process that you have already set, having a great website, showing portfolios, and some other tips and tricks that I'm going to teach you later on in this part of the course, you're going to be miles ahead of the competition who are just messing around there, not knowing what they are doing in reality, and they're just random people around the world. 157. Finding work: Studios: Finding work online is not the only place. We have a lot of jobs available locally as well. In one such place would be studios. So this would be marketing agencies, digital agencies, creative agencies, design studios. I don't know. There is many different names that they have. Basically, these are companies that do web design and digital work for their clients. Whoever may be individual or company clients, right? So if they are advertisement agencies, e.g. the marketing agencies, they are being hired by some big company that they need a landing page or website. So this sort of studios then they hire, they do have in-house staff, right? Obviously, they do have in-house designers and in-house developers and all that. But what happens is many middle, medium, medium-sized agencies like that and studios. They have a small amount of staff in-house and they have like an army of Florida freelancers. They do most of their work. So that's how they work. My biggest work engagement was actually with such studio and we worked for a long time and they're sent a ton of work for me and I've learned a great deal from them. And that doesn't mean that they have to be local studios that can be from different countries, different cities, and even different continents. I myself work with the studio that was in Australia and really, really far from where I live, which is in Europe and Portugal. Now how you can approach the studios will depend case-by-case, but here are some strategies on how to approach them. I have a friend who's an illustrator and he has this approach. Whereas once I asked him, you know, how do you get your clients? Because he doesn't work on Florida freelancing platforms. And he told me that he just spams them. So he has this email list of different potential clients like a agencies, companies, advertisement agencies are publishing books or magazines because those are the type of clients that he works with. And every time he needs work, every once in a while he will blast email using some email software. And basically, he will inquire for work saying like, Oh, do you guys need an illustrator or something like that? And I'm not sure exactly what's the tax users and how he approaches, but I know he inquires and asks if they need an illustrator. And what happens is more of sometimes at the exact time, one of these companies will need an illustrator for at that exact time. So they come back to him saying that, oh yeah, we actually do need an illustrator. He gets hired. And it's a great approach because this saves the other, the other guy's time. So they don't have to post a job on freelancing platforms or wherever, go through different people's portfolios and interview them higher than all that. It's really easy when somebody already came to you at the exact right time. Every design studio will have their own style of design that they do on websites right there we'll have specific approaches with the designs. They might be a bit more illustration based designs might be more photography, might be more type base and layout based design. So when you approach this, where you decide to approach this design studios go through there examples of work and most of them obviously will have their portfolio work on their website, go through them and understand and kinda nailed down what sort of style they use in their approach, those that you match the style or refine your portfolio in a way that you are bridging that gap between your work and their portfolio to make it match as much as possible. Because we knew that apply to the studios. They're going to see if they have less than are dozens and hundreds of different candidates they are looking for. Obviously there are going to be leaning towards and picking somebody who really matches their style. Because they know that they will, you will easily plug-in into their design, into their workflow. So they don't have to train you if you are like an illustrator and they are more into like photography based websites, now, they would have to retrain you on how to do photography or they might, they will need to completely change and alter your design style. So bridge that gap between there and your portfolio and you will increase your chances of being hired by them. When I was managing company, we had this back and see posted online and we had a whole bunch of candidates obviously applying for it. But one of these guys, one of the candidates showed up at our doorsteps. It's just showed up in our office and I had a printed resume and CV of his. And he just handed this. He said I'm gonna like Ohio. I was applying for this job ad and I just wanted to hand it to my CV personally. And I was like, I was very surprised but very impressed as well to see these guys kinda confidence and audacity to kinda show up and come and apply for the job at in-person. And when I had to go through 200 different job applications, one person really stood out obviously because you showed up. No one else did and no one else did anything differently. And funny enough, I would probably dump his application if he hadn't showed up because he's CV and he's application wasn't strong enough and he's experienced wasn't good enough for what we're looking for. But because you showed up, your amino memorable and I kinda like that confidence and he's sort of proactive attitude and he got the interview, he actually skip the interview part and got to the final phase, final selection phase for the three other finalists. And he got that only because he showed up. Sometimes all it takes is just show up and hand in your printed portfolio because not many people are doing that. People who hire, they're busy and they appreciate any extra step that the candidate will take. No one can get you closer to the job opportunity. The people inside those studios using LinkedIn and Facebook, you can definitely find people who work inside those studios and then connect with them directly or using other social networking sites, probably like Facebook, Instagram, Twitter, and direct messaging them. I, myself have never done this, but I know a lot of freelancers, they do things like that. They connect with people inside you, even those who are actually hiring the managers or the founders of the studios. If you're that kind of person and if you can easily connect with strangers, give it a shot. I'm not that kind of person and it doesn't work for me, but maybe it's good for you. So just throwing it out there as an idea 158. Finding work: Networking: Other obvious but often overlooked option of finding work is networking. In every big city, there are swarms of entrepreneurs and startups that are hustling and trying to make their business work and they all need a website. You are in a very good market. Every business be small or large or international or local, even individual professionals like you and me, photographers, coaches, Cmi organizers, they all need a website. Where do you network? Start with meet up. Met up, if you've never used it, is a place where people organize different events surrounding a specific theme or a topic. For example, this group, Lisbon UX organizes different design related meet ups and events in my city. Interpreters, startups, other designers, they are quite valuable connections for you, and they often go to meetups like this because they run their own sort of meetups and organize their own talks and workshops and different sort of events that attract right crowd that could be useful for you as connections. I once got a gig out of an event like that. I once attended a workshop on how to wireframe my website. Really, I actually attended workshop on that. Not that I needed to learn, but I thought, you know what? It's going to be fun. And what do you know? I got a gig out of it. Even if you meet Right crowd in mitaps, you'll realize that many of them don't have good enough budget to pay you well for website projects. It's good when you're starting and you're sacrificing some pay for the experience and network, but in a later stage, it's not the best option. A better place to find bigger fish is conferences, tech or other startup related conferences. Startups often go to places like this to exhibit their product or find investors or find customers for their company. Of these conferences are paid, so it's more suitable on a later stage once you get your freelancing going and you can afford a little for the marketing. Many cities will have startup incubators and you can check that if your city has such incubators, because these places they kind of put a lot of startups together, and then they are always organizing different events and demonstrations and things like that, and a lot of jobs and freelancing work can be found within this ecosystem and environment. And a lot of people who are web designers, designers or developers, these are crowd and good connections for you to develop and grow. And if you hate networking, then don't do it. Put your time and effort in something more suitable for you and your personality. I myself, I don't like networking. I'd rather chew on glass than go and talk to people. It's always best to put your efforts in something that clicks with you. I have one rule for you. Don't do anything that will make you hate web design. You liking and enjoying web design is crucial to your success. A better factor of making you profitable and successful than any talent or fancy university education. And your enjoyment of web design depends on a lot of things around it, because just like any other job, there is much more involved than just sitting down and designing, right? There is looking for clients and negotiating, sending proposals, and all the meetings and all that stuff. So make as many of those things enjoyable, too. 159. Finding work conclusion: These are some of the many options you have at your disposal to find freelance work. I wanted to show you all these options because sometimes freelancers forget that there are more places to find work than just Upwork. I haven't covered all of them and I couldn't possibly do that. Jobs often come from unexpected places, but here's what you should do. Expose yourself to as many opportunities as possible. Knock on as many doors as possible, like anything else in life, you have to try your luck as many times as possible as Wayne Gretzky put it, you miss 100% of the shots you don't take. Alright, up next we'll dive deep into Upwork, stick around 160. Upwork overview: The years of working on Upwork as a freelancer and hiring other freelancers, I have accumulated some interesting tips and tricks that I used for myself to be successful on Upwork, and I want to share these tips with you so you don't have to waste years of trial and error and trying to find out how to make things work on Upwork. So I've put all these tips in different videos and sort of compiled them in different themes. But before we get to those tips, let me give you a quick tour of Upwork. This is how upwork works. A client posts a job that they want to get done, like a website design and build for a startup. They give details, sometimes a predefined budget and sometimes without a defined budget as an hourly rate. The freelancers bid on the job, sending proposals with prices, then client responds to proposals and starts a conversation with freelancers that they like. Often they might do interviews over the call. Finally, they make their choice and award the job to one person. The contract and billing is all managed through the platform. If you are working on an hourly rate, then you are going to track time through their application. All time is automatically logged and the client is automatically billed for it and the client's payment method is automatically charged. This is great because you don't have to worry about billing, money transfers, and all that. Upwork is free to use, but it takes commissions from what you make. For example, let's say you bill a client total of $5,000. Upwork will keep 10%. Searching for jobs is pretty straightforward. You can search jobs by keywords, skills or some other filters. Searching correctly is going to be important to find the right jobs. Keywords for you are going to be website design, web design, web flow, lending page, web page, responsive website, and so on. Don't forget lending pages. Those are in high demand, and they are simpler than websites. In terms of design and development, lending pages are all the same web pages we've been doing so far. It's just a single page instead of an entire website. Keywords aren't the only way to search. Often, they're not the best way because it returns everything that mentions your keyword anywhere in the job posting. Skill search can be a bit more targeted in such cases. You can do that from Advanced search. Select a skill from the drop down and search, but one skill at a time, otherwise, it's going to look for jobs that match all the skills that you have selected. These are skills that lien selected when they were creating the job, so it can be a bit more precise than just keywords in the description. This is how the usual job posting looks like. This one is an hourly rate project. It shows right here. Job descriptions on Upwork are most of the time quite bad. Often not a lot of detailed information is provided about the project. Employees could use some training on how to post proper job descriptions to attract the right crowd. To apply for the job, you have to submit a proposal. This is how proposal submission form looks like. You select your rates that you propose for this job. The billing type is set by the client itself. So if it's hourly billing, then you can only propose hourly rates. For flat rates, then you have to only propose flat rate. Cover letter is a message that you write to the client. This is where you try to make that pitch and convince them to hire you, basically. The rest, like your portfolio, your reviews and all that, they can check directly on your profile. I have an experience of posting job ads on Upwork, and that gave me an advantage that other freelancers didn't have. I knew something they didn't. And so you will. This is what a client says after they post a job. A list of proposals from freelancers. This is most important page where the decision making by the client happens. This is where they filter out freelancers that they don't want to work with and choose the ones they do. I have several great tips on how to be successful on this page and stand out from the crowd, but later on. The client can see your proposed rate here, in this case, hourly, since that's what I set as the project billing. They can see your lifetime earnings on upwork, your job titles, and badges, which we'll discuss in more detail, and a few lines from the cover letter. When client clicks on one of these, they get to a proposal view, which is basically the same as the freelancers profile plus the cover letter. Now, all other details of your profile and the cover letter will matter. Client can check reviews and ratings from the past job, how much you made on those jobs. They can see your portfolio. These are screenshots you can upload under your portfolio section. They can see your skills. Keep these skills genuine and focus on your domain. Don't put things like Microsoft Word. It doesn't make you look like a better web designer, and they can see your employment history outside of upwork if you add any. If you do have employment history, it's a good idea to add them here. Prior experience counts too, and it can help build your credibility. Although, whatever you put, it has to look good. Your summer job at KFC isn't going to add anything. And that's it. That's general overview of Upwork. 161. Tips 1-3: Getting your profile approved: You can get work on Upwork, first, you have to get approved. This is sort of bad news in the beginning, but once you get approved, then it's a good news because that means that Upwork is trying to keep the marketplace nice and tight. So it's not overcrowded, overcrowded with freelancers, because then if there's too many freelancers, the competition is too much, and the prices will be driven down. And basically, it's not going to be a big benefit for freelancers who are working on upwork neither for the clients because then they just have to go through so many different freelancers and too much competition. When you open an account as a freelance on Upwork, you submit your application, and they have to review it within a few days, and they either approve or reject. If you get rejected, don't freak because you can reapply and there is no limit on how many times you can reapply to Upwork, and you'll just improve your profile and then apply again. And if it doesn't work and then again and again experience with this application process is not much to talk about. I made it. It was accepted, end of story. But there is this article which I'm going to link in the resources, and I want you to read that article because there is great tips, and I want you to read that article before you apply to Apwork. And here are some tips that I'm shamelessly stealing from that article. Upwork wants to create a balance on the marketplace between number of jobs posted and then freelancers bidding on that job. So when this balance kind of disturbs, and let's say somebody posts a logo design and you have 1,000 freelancers bidding on that job, then things to get out of hand. So whenever that balance is disturbed, the upwork closes the gate on new applications. Are applying for that particular skill. So for example, if it's let's say logo designers, right, and Pork has way too many logo designers, but not enough jobs that are being posted in that category, then they're going to sort of temporarily close the gate on new applications and new freelancers who are coming within that category. So until that kind of balance comes back up. One way to avoid this happening to you during your application process is to show upwork that your skills sort of stretch between many different categories. As a web designer, you automatically fall under multiple categories. First, under family of development, you have web and mobile design plus web development, and under the family of design and creative, you have graphics and design category. And maybe even other for things like user experience and user interface design since they're not listed there. In case you have other skills and you plan on doing other jobs, maybe like logo or brand design, then you can include that, too. But don't stretch yourself artificially because upwork from time to time, they do check the skill level, so they might do some interviews where they can check if you know and if you're capable in these categories. Besides choosing categories, upwork also asks you for specific skills that you have. List as many skills as possible, and Upwork has this huge database of skills where you search and then it autofills and gives you the option which you have to select. For example, in terms of web design, these are skills you could easily go for. Things like web design, obviously, responsive design, Figma, web flow, lending pages, and so on. I only choose genuine skills that are relevant to the job. Don't put Microsoft Word because that's not relevant to your category of work. I'll let you read rest of the tapes from this article itself. There are four, so check them out. Okay, back to my own content and not stealing other people's advice. Do not upload portfolio work from this course. Here is why. Since there are a lot of students in this course, and a lot of you will probably go on Upwork to apply, you'll end up applying with the same portfolio pieces if you use those that we have already built in this and design in this course. And for the off chance where it's the same person reviewing your application on Upwork, then for them to see two different applicants applying with the same exact portfolio, that's going to raise red flags for both of them. 162. Tips 1-3: Getting your profile approved: What's the first thing your client says on your profile or your proposal? Your profile photo. They'll make a big decision just by looking at your profile photo. We all do that. Let's play a game. Rad 1-10 how competent this guy looks like. No need to analyze just a first feeling 1-10, how likely he's to get the job done. I'm definitely giving him a ten. He's smiling, he's dressed well, the background is pleasant. Photo looks professional. Now, how about this guy? I'll say three. I haven't checked anything else on his profile, but blood already looks like he wants to scan me of my money. That's how powerful photos can be. You don't have to look handsome or pretty because it's not a beauty contest, but you have to look trustworthy and competent. Get a really nice head shot and don't try to save time and go on Facebook profile and grab it something from there because most likely on your Facebook profile, you have photos that you're either looking cool, looking handsome, or looking pretty. And that's not the criteria to use when getting a nice hat shot, a nice profile photo on upwork because clients are not looking for you to be, you know, handsome or pretty or looking like a cool guy. That's not what they're looking for. They're looking for a competent person. So you have to find a photo where you look trustworthy and competent, so something where you're looking directly into the camera, where you're smiling and preferably on a plain background. Now, it doesn't have to be catch up in the studio, obviously, you can be on a background of a sky, right? You can be on a background of something plain, something that is not attracting attention and detracting attention from your face. If you only had 1 hour to prepare your profile on Apwork, spend 45 minutes on the profile photo and 15 minutes on the rest. That's how important the profile photo is. And, come on, it's so easy. We do have phones today. Yeah, you probably have a really good smartphone that takes amazing photos. Just find a really nice place, dress well, get a haircut, maybe trim your beard and get a nice headshot. Upwork has an identity verification process. It's simple. You need to upload your government ID and complete a video call with them. Once verified, you'll get this blue badge. This is an excellent way to increase trust in your profile with very little effort. Title is what's shown under your name. Web designer is a dissent title, but it's a little boring. That's what most people do, so nothing you will stand down with. Adding some extra punch is going to go a long way, for example, expert web designer or web design P, fast and efficient web designer. It tells a little more about you, even though it's a self proclaimed title, it still stands out. Imagine there are two proposals. One says web designer, and the other one says expert web designer. You'd be drawn a little more towards the expert. Even better approach is to mention final results, for example, stunning website design and build, top notch websites, hassle free web design. To take it a step farther, you could even mix and match these styles like expert web designer, stunning powerful websites or web design pro, top notch service. These are proposals for one of the jobs that I posted, and it was a lending page job. Now, how many of these job titles match what I posted? Only one. And even he has the most important keyword hidden deep inside the title. I'm looking for someone who creates lending pages. How can I tell if you are the right person if there is no mention of lending pages in your title? Yes, web, Wordpress, and PHP developers can all build lending pages. But how do I know that? I asked for a lending page. You give me Wordpress as an answer. What the hell is Wordpress anyways? I'm not a developer or web designer. If I was, I would build my own lending page. Not familiar with your technology and lingo. I'm probably an interpreter who needs a page for something. And even if I was familiar with the technology and knew all the lingo, I would still want to find somebody who specializes in exactly what I'm asking. So if I'm asking that I need to get the lending page done, then I would definitely want to go for somebody who is in lending page expert or specializes only in lending pages. If I want Facebook marketing, right, maybe Facebook ads, I want somebody who is a Facebook ad marketer, not a general digital marketer. This is bananas. What are they thinking about? It's too easy to compete with most of the freelance Samson upwar. You can be the best damn web designer out there, but if it's socket selling, I'll never get to your portfolio. Upwork has this feature called specialized profiles. So you have a general profile like a web designer, and then you can have a specialized profile like Webflow designer or LandiPage designer. When you apply for jobs that are looking for Webflow designers, then you can use that specialized profile and apply with it. That's much more effective than just applying as a web designer and then needing to explain in the cover letter that you work in Webflow. They might never get to reading your cover letter. Another information that really sticks out from the profiles is the job success score badge. To get this badge on Upwork, you have to work with at least three different clients. So there's not a lot you can do about it. You just have to wait. But there is something you could do. You could bring outside projects to Upwork to get those minimum requirements as fast as possible. You can find people or businesses in your network who need a website and do a project for them. And you could give them a large discount or maybe even do the website for them for a very small symbolic price in exchange for doing it on Upwork, doing the whole process on Upwork, and then giving you feedback at the end. Kind of win win situation for both of them in the beginning works for you. You'll get some traction and you'll get these minimum requirements on Upwork, and plus, they'll get a website for a very cheap price. Batch can improve your hiring rate significantly, so it can be worth the trouble to go through this whole process if you are struggling to get clients in the beginning. In case you do consider going through this whole process, I have linked in the resources a page from Upwork on how they calculate this job success score. Do read that first so you can understand how it works. The formula is not shared fully because it's strag secret, so it's not guaranteed when are you going to get it. But they give a good guideline on how it works, so you can understand when to expect to get that badge. 163. Tips 10-12: Get the "best match" badge: Every job posting can get a huge amount of proposals. Here there are 15. That's already a lot, right? But it's actually on a smaller side. Clients can get more than that, usually 20 to 50 and sometimes even more than 50 proposals. Is the client going to go through each one? Not really. They'll keep their eyes on the very top. What does that mean? You got to find ways to end up on the top? Work puts best matches on the top and even adds this shiny best match badge on their proposal. That puts those freelancers miles ahead over everyone below. As a freelancer, you don't see if you got this badge or not, but potential clients do, and you should always aim for it. So how do you get that badge? No one really knows what's the algorithm behind this. Upwork doesn't really share that information, but after analyzing proposals that I usually receive, I've nailed down several key ingredients. When you create your profile, upwork will ask you to choose your experience level. This same question is asked to clients when they post the job. You can easily see that experience level that the client has chosen for the particular job. Apply to matching experience level. This is probably the most important factor in determining this batch. The job that I had posted, I was asking for expert level, and most proposals were from intermediate and entry level freelancers. What are they thinking about? It's a waste of everybody's time. There are enough jobs in each level, so apply to matching ones. If you don't like jobs in your experience level, then change your level in the profile. Easy as that. The second most important criteria seems to be the skills. When clients post the job, they are asked to select specific skills they're looking for in a freelancer. They are given the same database of skills as you have used in your profile, and you can see this information on the job post too. Apply to jobs with matching skills. For example, I don't have any of these skills selected in my profile. So if I apply to this job, I wouldn't get a good match score. So always check the skills that the client has selected for the job and make sure that you have those skills in your profile as well, and they match because that will definitely increase your chances of being the best match. Now, upwork only allows you to select maximum of ten skills. So there will be some related skills that you might have to leave out. But sometimes you'll see a job that uses exactly those skills that you had to leave out. What you could do in this case is to remove some and add those missing skills from the job and to create a match. This might be a little hack that Upwork might be aware of, so the algorithm might ignore last minute profile changes. But it's still worth a try. At least the client will see that you have the skills they were looking for. When client is selecting the desired experience level of a freelancer, it shows approximate price range to be expected. You want to match your bid to the upwork suggested range. If client selected expert and was fine to pay more than $50 an hour, Upwork isn't going to like it if you bid 30/hour. You're making both you and upwork lose on higher revenue. To find out what's the current price range for your level, you can almost post a job ad to get to the step and you'll see the most recent price ranges. Doesn't take anything to do this. You don't have to post the job in the end. It's just one of the steps in the job posting wizard. And you can do this from time to time to have most recent values. 164. Tips 13-14: Propose the right price: Here are some tips on pricing. A lot of freelancers think that clients pick lower prices. And if they bid low, they think they're going to look more attractive for the clients, sort of like a bargain. Freelancers who have this sort of mindset, they have this negative sort of taste and attitude towards upwork and these freelancing platforms, thinking because everybody's now competing for the price, and there's a lot of pricing, a lot of people competing with the price, so everybody's kind of bringing the prices down. But they couldn't be wrong. If that was true, then you wouldn't have some freelancers getting paid $500 per hour on Upwork. Websites are high value products. They're not like toilet paper that the cheapest gets the most sales. Businesses are going to use website for their own business so they can get more sales, right? It's going to represent their company, represent their business, and their brand, so they don't want cheap. They want standard, they want quality. And often they're more than happy to pay for it. Just like a lot of us who are happy to pay 1,000 bucks for iPhone, instead of paying 100 bucks for Alcatel. By bidding low, not only you make less money, but you also win less jobs. It sounds counterintuitive, but clients actually prefer higher prices. Why? Because pricing is one way to tell if something is quality or not. We know that it's not always true, and we do realize that, but often we can help ourselves, right? So we use pricing as one of the indicators to judge if something's going to be high quality or not. By bidding low, you're quietly whispering to your clients that you are lower quality. Look at this list of proposals. Lower you scroll more depressing the situation looks. Less qualified people, no rating, no previous jobs, worse presentation, and you get lower prices on the bottom, too. So being on the bottom doesn't look attractive at all. The less experienced talent is sorted on the bottom. So lower prices are associated with lower quality just by looking at this list. This list is a clear indicator to the client that they should be careful with low prices. In this case, lower prices look like a warning sign, not a bargain. As a client, when I'm hiring freelancers, I hate the question, what's your budget, because most of the time, I don't know what's my budget. I know that I want something done, but often I don't know how much is going to cost. I don't know what's the good value for it to pay. So asking that question kind of puts me into this confused state where I don't know how to answer. But when you post a job on Upwork, as a client, and if you choose a flat rate, Upwork is going to ask you what is your budget? And for somebody like me who doesn't know exactly what is their budget and doesn't like to answer the question, what we do is we try to pick the lowest number that comes to our mind. Last thing you want to do is to overpay for something. So if I don't know what something costs, I will go way, way lower on my estimates than it's actually going to cost because I really don't want to overpay. So I don't want to say, You know what? I'll pay 2000 for this job. And what if it costs just 300 bucks? Then I'm going to assume that freelancers are going to abuse me for me kind of putting this high budget. So now everybody is going to try to take advantage of that, and they will say, Oh, we'll do it for 2000, we'll do it maybe 1,500, and so on, where in reality, the job just cost $300. So to avoid overpaying, you'll see that clients often will pay way lower budget than what they are actually willing to pay. And at the end of the day, they'll be fine paying 203 times more of what they propose as the budget. So when you see a number on the budget, don't take it as 100% truth, that that's exactly the amount of money available they have. Sometimes it's true, right? So businesses will have exactly that amount of money available for that project. But often it's not true. It's just clients pulling numbers out of their heads. And when you see this budget, just ignore them and propose what is the project worth to you? Unless if you see inside the job description that they explicitly mean that that's their top budget and that's what they're going to pay. 165. Tips 15-16: Be the freelancer they can't resist: Successful freelance center is often not about the skills, but more about service that you provide to your clients. You can be the best then web designer, but if clients don't like working with you, if you're not delivering a high quality service, they're not going to come back for more. Because what happens with clients that are happy is that not just they come back for more and bring more work towards you, but they also bring other people. They refer their friends who are usually, businessmen and interpreters. Their friends are usually other businessmen and other interpreter. So they do have a really good access to bring more work towards you. Big chunk of my clients, they're actually referrals. Like, I work with one client. They're super satisfied because I deliver really high quality service, and then they are happy to recommend me to their friends. But if I didn't deliver a good service, even if I built a good website, but they were, you know, maybe I was neglectful, maybe I wasn't know, I basically think of a customer service. Maybe I just I wasn't very nice. Maybe I was just rude or maybe I wasn't responsive to their emails or their calls or something like that. Then they're not going to be confident to recommend me to their friends because whenever you're recommending something to your friend, you want to make sure that you're not going to, you know, screw them over, right, that whatever you're going to recommend to them, it's going to be good and beneficial for them. So they need to be 100% confident that whatever they are getting, whatever they're recommending is good for their friends. So here are some tips on how to be that freelancer to whom that clients keep coming back for more. Do you know what's the one criteria that clients will never overlook? They can overlook things like your portfolio, your previous experience, maybe even job reviews, but there is one thing they will never, never ignore, and that is trust. Do I trust this person? If the answer is not 100% hell yes, then you're not getting the job. No matter how amazing everything else looks like on your profile. If I don't trust you, then everything can be a lie. Everything you say can be a lie. Everything I see on the profile can be a lie. Everything you promise can be a lie, and I will never trust you with my money and my business. The best way to lose my trust as a client, try selling me something. If you are trying to sell me something, then you have an agenda, right? You have the secret agenda that you want to make the sell. And if I recognize that you have that agenda, then how do I know that everything that you say is true, how do I know that everything you're trying to do is to help me but not just to benefit yourself? The solution is very simple. Change your personal agenda from selling to helping. You might go, Wait a second, but my agenda is to sell my services, right? I'm doing business. I'm trying to make money. I'm not here to do charity or volunteer work. How do I change my agenda to just helping when I do need to sell? I know that's true, but nothing changes in reality. Nothing changes on the surface. You're still going to get paid. You're still going to make money. But everything changes deep down. The way you talk, the way you approach your clients, the way you connect with them, all those small thousands of micro decisions and micro interactions change when your agenda changes from selling to helping. And it's not going to go unnoticed. Your clients will trust you instantly, and that often matters more than your portfolio. One amazing, helpful thing you can provide to your clients is to relieve the pain that they're experiencing in this field. Imagine for a minute that you're a business owner that needs a website and you went to design studios and found out that, you know, you can't afford their astronomical prices for web design projects. So what you do, you go on freelancing platforms like Upwork to, you know, individual freelancer who's going to charge a bit less. Now, think about how much confusion and uncertainty you have to deal with if you're not interpreter who is from this field from this kind of web design industry or whatever. If you're just doing regular business, then you probably don't know any of this technology. You don't know where to build it. You don't know what's Wordpress or what's Webflow or HTML or CMS. You don't quite know how to judge who's a good freelancer, who's a good web designer, and who's a bad web designer. So you're dealing with a lot of uncertainty, and as you do more research, you'll find out instead of getting clarity, actually, you're getting a bit more confused. So as you can see, the clients have to worry about so many strange details and put their money at risk. So how can you help them? There are several ways we can help them, and one way is definitely to tell them and show them that we got the process, right? All the things that we're going to take care of for them and they don't have to worry about things like the technology, right? Where are we going to build this thing? Where are we going to launch this thing like Webflow, right? They don't have to worry about that we got that taken care of. We can also explain the process to them just like our design process that we have that we're going to go from project brief and then to the wireframing and then to the design and then finally building the whole thing in Webflow and developing. So we can explain that, you know, they will be involved and have control over each step of the process so they know what's going on, and they don't have to just commit a huge amount of money and then hope that everything's going to work out well because they will be involved in the whole process and they will have ability to kind of tweak the tweak the way in course to make sure that we are going to the right direction. And this way, now they can relax in our partnership because they see that we have it taken care of and we know the process, and we can guide this process. And that way, now they can relax and they don't have to risk a lot when working with us. Do that and you'll have them eating off your hands because other freelancers, most likely, they're not doing this, right? They're not taking them to this guided process, but you are. Other freelancers are there to take their money, but you're not. You got their back. 166. Tips 17-22: Write damn good cover letters: Jobs, you usually have to send cover letters with your proposals. These are just a small email or a message that you send to a client when you're kind of sending them a proposal. On apwork and freelancing platforms, there's usually a field that you fill out and you send that. On outside of the platforms, that's usually an email that you sent to them with your proposal. That's it. Freelancing didn't teach me how to write good cover letters. Hiring freelancers did. I've had as a client, I've had experience of receiving cover letters that were great because they were working well on me as a client, and there was a lot of pile of crap that I was receiving that made a lot of freelances completely unhirable. Here are some tips on writing damn good cover letters. A cover letter that puts me to sleep instantly is where the freelancer is talking about themselves. I post the job, describe my problem and the solution that I'm looking for, and you respond with how amazing you are. Nearly all of these freelancers are talking about themselves. I am this and I have that. I have this amount of experience, and I've done this in the past. Frankly, dear, I don't care. Tell me how you're going to solve my problem. Talk to me about the project. How can you help me? Show me that you're amazing. Don't brag about it. Okay, if you can talk about yourself, then what do you say? Very easy. Start giving ideas. Imagine they've already hired you and start brainstorming their project. How are you going to design it? What would be some fun things to do? Send links to example websites and say you could do these sort of interactions or this sort of hero section. Nobody does this. If I saw a proposal with ideas and examples, I'd be like, Thank you. Those are great ideas. You get me. That's what I want. Done, you're hired. What real examples? Here is an actual cover letter that I've sent on Appwor which got me a job right away without an interview. I start by linking example pages. I took lending page templates, not even my work and showed him as examples. I showed him what I was going to do. Now he can see with his own eyes and I made his life easier. Then I give him a quick rundown of the process, how I was going to do all that, told him it will look good and will convert effectively. That's his goal, isn't it? Now he knows I understand his goal. Then I ask some meaningful questions that shows that I'm not painting the picture pink, and I've considered the specifics of the project. Notice how I only start talking about myself after all of that in the very and where it says about me. There's a little more blah blah blah about me, but I've cropped it out because today I wouldn't even do that. I would just keep it without that paragraph. Here's another example of a good cover letter that I received on one of my job ads. This person has more than 50 K earnings on Upwork, and it shows why. He's straight to the point. He's helpful. He's even going to show me how to get visitors for my page. He understands my goals and asks me meaningful questions. The message is short and sweet, not wasting my time with bunch of canned fluff. Don't try to save time by sending template cover letters and can cover letters. I hate can letters. Screw them and screw people who send them to me. Saving your time, but wasting mine? No, thanks. Good clients notice can letters miles away, and they're not even going to bother reading them. Sometimes inside cover letters, you want to give examples of your past work, right? So a lot of freelancers, what they're going to do is they're going to refer to and link their portfolio work within the Apwork. But what you can do and because you have website, you can send them links to your website. Be portfolio pieces on AP Work they're not displayed in the most flattering way. However, on the website, they look very attractive because it's your website, it's your stuff, right? Everything is kind of organized nice. And you have a bit more content, and it's your opportunity to use it, you know, to show that you're actually not just upwork but you're kind of very professional, have your own website and kind of impress them with the whole presentation that you have. But only if you're going to publish that website on your personal custom domain, because my portfolio slash 123 dot webflo dot IO, doesn't look very professional, looks amateur, and I don't take anybody any freelancer seriously, who sends me their portfolio, which is on dot Webflow or something or dot wiggly or wix.com, because that doesn't look like you're taking your profession seriously. So Cf up 15 bucks per month for weblo's first month of subscription, and you're going to look miles ahead of other freelancers who are on Upwork. And you just need to pay for the first month. Once you start making money, it's just going to pay for itself. On the page where a client receives all proposals, they can already see a few beginning lines of a cover letter from the freelancer. Many freelancers start by something like dear sir Madam. Is that how people connect? Dear sir Madame? Sounds so impersonal and just plain weird. I often say this one. Dear hiring manager. What the hell? Hiring manager, whom? Hey, why are you calling me random names? And who talks like that? This one is actually Upwork's fault because in one of their blog posts, they advise to use that deer hiring manager, which was probably written by one of their employees who's never been a freelancer or a client because that's the stupidest advice I've ever heard. So be careful when reading advice from Upwork itself. So if you can say that, then what do you say? Well, let me solve a big mystery. What do you say when you greet somebody in your work environment? Do you say dear ser Madam or you say, Hi. Hello. Good morning. Hi there. Simple as that. Why complicate this? All of those are professional and polite, too. Don't be weird. Just be natural and friendly. That's all. Now, some of you probably come from the countries and cultures where use of words, sir is sort of required to be polite. This is, for example, a case in India. And when I when I work with freelancers from India, they always call me, sir. They go, Hi, sir, yes, sir. Thank you, sir. I get a little weirded out when they do that. Don't use sir with everybody around the world because it's not part of everybody's culture. For example, in North America, Britain and Australia, the word sir is used in very impersonal situations. For example, when you want grab a stranger's attention, like, Oh, excuse me, sir, you dropped something. But work environment in these countries is more friendly. There is no honorific status distance between people because of their age or job position. So never an employee would call their boss. Sir, even if that boss was Bill Gates, they would probably say something like Bill or Mr. Gates, but not, sir. So you're going to come across a little strange and impersonal if you use this with people who are not used to this sort of courtesy. Check where they're from and use, sir, only if it's expected in that country. 167. Tips 23-25: Don't get yourself suspended: Times freelancers get suspended or banned from ap work for doing something that is against their terms and conditions. I'm going to give you some tips to make sure that you don't find yourself in a very tricky situation with them. Trying to get paid outside of APPorg is against their terms and conditions. And if they suspect that you've been trying to do that, they will most likely bend your account. This reason is plain and simple. APOC makes money on transactions and payment transactions that happens between you and the client. And if you try to take those payments outside of the platform, then they don't make money, and you piss them off. You can find more information about this in their terms and conditions, and the clause is called circumvention, not circumcision, and you can find out more about it. This applies not just to current projects that you get from the client, but also all the subsequent projects that come from the same client. They have that 24 month non circumvention period. So the moment you start working with the clients, there is 24 hour period where you have to keep the relationship on Upwork from that client and get paid on Upwork. So there are sort of triggers in your communication that can raise that red flag. So because the messaging happens using Aforce messaging platform, right? So in this messaging, you discuss things like pioneer. This would be the red flag trigger words that instantly kind of trigger this suspension automatically. If you mentioned things like Payoneer, PayPal, bank transfers, iBans, anything that is kind of can be sort of associated that you are trying to get paid outside. And it doesn't matter even if the client is sort of initiating the discussion and they want you to get paid outside if you agreed to it or if you are the one, if you kind of mention something like yes or whatever, then you will get suspended even if they ask you for it. So make sure that if client asks you to, you know, Let's take this outside, say no, you want to keep things on Upwork. Now, most of the suspensions happen automatically. It's just if you mention something, then AI gets, you know, triggered and all that stuff. But sometimes maybe you mention PayPal not because you wanted to get paid outside, but maybe you are giving an example of a PayPal's website. Maybe you are trying to design a website that is for the banking or maybe you're designing some E wallet or something that is related to financing. But then it's okay because if you get automatically suspended, then you can appeal, and then a human being will take a look at your communication. And if they are convinced that you were not trying to get paid outside, but you were kind of discussing this that was part of the project, then it's going to be okay. And they will lift the ban. Now, naturally, if you are discussing this on Skype call or a video call that is not part of Upwork, right? You know, it's impossible for Upwork to find out, but I do have some good reasons for you to stay actually on Upwork. At the end of the day, upwork is a good thing. It enables so many freelancers to find work. We all want Upwork to make money and not go out of business. And if most of us move relationship out of upwork, one day, they'll just go out of business. Upwork, 10% isn't that big. UDumi, for example, takes at least 50% of what I make here. So upwork isn't that bad. Finally, not having to deal with billing is awesome. Your clients get charged automatically. You never have to deal with invoicing and chasing payments. That saves a lot of time and hassle. As a freelancer, sometimes there are cases where you do have to chase the clients to pay you on time. But with Upwork, it's nice because its credit card gets automatically charged. And if their credit card isn't working fine, then the client gets suspended on Upwork, so you know about it as well. That saves a lot of time and hassle. Don't put any skills on your profile that you don't have. Upwork sometimes does a random skill check of freelancers, and they do the sort of oral tests and they do an interview with a freelancer to make sure whatever they put under their skills is true. Once actually my account was frozen because of this skill check, they sort of initiated the skill check on my account, and I had an interview with a customer service person, and they were kind of quizzing me on HTML and CSS. And it was strange because I never put HTML and CSS as my skills, but I guess because I was under web design category, they assume that, you know, I'm supposed to know HTML and CSS, even though I never claimed that I knew that. Luckily, I was able to appeal and explain to them that I don't need HTML and CSS to do my job that I never claimed that I knew it, and they understood, and they unfroze my account. But if I had them in my skills, then I would have been totally screwed. Thing is because Upwork is such a big platform and there's so many people and so much money is moving there, sort of attracts bad actors as well, who are trying to game the system and opening fraudulent accounts and doing engaging in some different scam activities. So Upwork is very diligent about it and clamping down in many different accounts to make sure that people who are there, they claim who they are, and they claim or that they know skills and they can perform what they kind of promise to the clients. So make sure that whatever you put on Apork everything is true and authentic and you're not trying to sort of game the system because they don't have a big tolerance. So even if something is like, you know, shaky, just remove anything that is not 100% truth. 168. Tips 26-28: Don't get scammed: Work is large, very large, and there is a lot of money that is moving around and a lot of money that can be made. So when there is money, there's always bad actors that are trying to rip people off. Here are some tips on not to get scammed on Upwork. Never do free or trial work on Upwork. There is this scam going around where some ********* ask you to do trial work that you have to perform some free work before they can award you a job, so they have to test you on your skill or something like that. And what they do is they ask many different freelancers to do that free work, and then they kind of gather this free work, and then they use that free work for some other client and kind of get paid for it, then without themselves doing any job. Here's a video by one of the upwork freelancers who has recorded one such scam. The link is in the resources if you are interested. This is a repeated tip, but this time for different reason because not just because you can get banned by upwork, but also you could get scammed if you take things outside of upwork. If a new client who hasn't paid you yet and you hadn't had any work relationship asks you to take things outside of platform to save money or, you know, kind of get rid of the commission, then warning bells should go in your head instantly. Obviously, for the clients, it's safer to keep things on upwork because they have some guarantees from the upwork, right? If things go wrong, then at least work can kind of intervene and mediate the situation. So when they're asking you take things from outside, it might be shoddy, and if something looks shoddy, then it probably is. 169. Pricing: How much do you charge?: Welcome to the scary topic for most freelancers. Pricing. How much do you charge? Being confused about pricing in the beginning is right. I was quite confused when I started off as well. I remember my very first lending page project that I did, I charged $200. And it was quite a lot of work, actually. I was lending page design and build. I wrote the copy and content for the lending page. It was marketing Project two. I did Facebook ads, and I built I designed Facebook banners and advertisements as well and did everything for $200. Then I upgraded to hourly rate, and it was $20 per hour, and that was already a decent upgrade for me because at that rate, I was able to support myself fully by freelancing basically full time. Then I upgraded to $30 per hour, which was my rate for quite some time. Then I doubled to $60 per hour. And now I mainly charge flat rate and about on average, $5,000 for a design and build of a website. Upgrading $30-60 per hour was one of the most emotionally challenging things to do for me. I felt so guilty, especially when I had to tell my existing clients that I was going to double the rate that they were already working with me for some time. Rationally, I knew that it made sense, but emotionally I was sweating from anxiety. Later, then I realized that I was running two false beliefs in my head. First, I was projecting my own money issues onto clients. Instead of seeing it from their perspective, I was looking at it from my own, comparing it to my own money spending habits, feeling guilty because I myself would find it difficult to pay $60 per hour for any. Second, thinking that price that I charge is in direct correlation to the level of my skill. So if I charge double the amount, now I should be twice as skilled. And you might think, but isn't that true? Shouldn't higher price mean better skill? Actually, not at all. Here is the most important truth about pricing. How much you charge depends on who is buying. There is this amazing business coach for creative People. His name is Chris Doug, and I was once watching his lecture on pricing, and it just blew my mind. I realized how much I didn't know about my own pricing. Imagine a scenario two potential clients approach you. They both want a very similar website, same amount of pages, same functionality, something that is going to take same amount of time for you to design and develop. So obviously, you give them the same rate, but these clients couldn't be more different. First one is an independent accountant, a small guy. The second one is a large law firm that makes millions of dollars per year. What do you think? Is a website worth the same for them? Absolutely not. A new website might bring more business for both of these clients, but more business for the accounted might mean extra 100 bucks per month, and for the law firm, that might mean extra 100,000 per month. Same website, same amount of effort from you, but huge difference in value based on the client. So whatever rate you give these two clients, probably it's too expensive for the accountant and ridiculously cheap for the law firm. You'll end up losing both of the prospects. You might think, Well, at least law firm will be excited about getting such a cheap price, but they won't be. Paying $5,000 for a website that might bring them extra 1 million per year, seems unrealistic. It's too small of a number. They won't trust your work. But if you adjusted your prices based on who decline, let's say, hypothetically offering 2000 for the accountant and 20 K for the law firm, you might end up lending both of these jobs because prices would sound reasonable for either of them. Steve Jobs paid 100,000 for the next logo. Are logos worth 100 K? For him, it was. For a small startup, it wouldn't so how much a website costs depends on two things. First, who's paying? And second, what's the value that they expect to gain out of it? Expected value is an important factor to consider as well. Imagine the same scenario with a big law firm, but this time, they don't need a website to generate new business for themselves. They just need a website with a couple of pages and a contact information. That's a different story. They're not planning to gain a lot of value out of it, so 20 K might sound too much to pay. They're probably going to pay more than the independent accountant, but not as much as the 20 K. So to determine the right price to charge for the website, you have to first understand who is your client and then understand what's the value do they plan on gaining out of it? The value will depend on each project, and you can find out by asking several questions like, what's the goal of the website, and what do they hope to gain out of it? As for clients, we can divide them in four categories. A private client is somebody who is paying for the project from their own pocket. So this can be independent professionals like us, freelancers, consultants, or startups that don't have funding. These guys, I would say, they max out at $2,000, but if there is a lot of value to be gained from the website, then they can go higher. When it comes to hourly rates, it's a bit more confusing for the clients to understand if something is cheap or expensive because if you don't know how much something's going to take, you don't know if, for example, $50 per hour is expensive or cheap. It takes two, 3 hours, pretty cheap, but if it takes 100 and 200 hours, pretty expensive. What happens with hourly rates is that clients usually use their own experience and prehensive ideas about if something is cheap or expensive based on how much it costs per hour. And they use their own cultural kind of reference wherever they live, how much different services that they pay for and compare it to them. And my rule with hourly rates is that never go below $20 per hour because most of your clients, they will come from developed countries and in developed countries, anything below $20 per hour comes very close to minimum wage. And minimum wage is something that, you know, a janitor is going to get paid. You're offering highly skilled services and you shouldn't be paid at a minimum wage. And if you price yourself like a janitor, then you're going to look like a janitor, and you're going to scare away any decent clients because nobody wants their website to be built by a janitor. Have studios and agencies like creative studios, design agencies, IT companies, and all that. These are usually going to be small and medium sized agencies and studios, because large ones, most of the time they have their own full time staff and they don't engage and they don't have a need to engage freelancers. When working with agencies, usually hourly rate is the best way to go for two reasons. First, it's just simpler. You don't have to renegotiate every time on every new project. And second, because of the revisions and projects going a little kind of scope of the projects basically getting bigger and bigger, and you need to do a bit more work because what happens is when you design something and build something, you are going to have staff inside the agency give you feedback. Then you would have to do the revisions, and they're going to send it to the client, and then clients will have their own comments and their own their own changes that they want to make, and then you're going to have to then do another round of revisions. On a fixed rate, studio itself doesn't have to worry about these revisions, so they're going to pile all of it on if they are paying you per hour, now they're going to have to be a bit more mindful and a bit more cautious of how much revisions you are doing because that's coming out of the payment that they get from their final client. And usually when they work with the final clients, they don't work per hourly basis. Companies don't usually work on per hourly rate base, but they work per project. So they're going to charge a flat rate to the final client, and they need to make sure that whatever it costs doesn't go too much out of hand. And when they're paying you flat rate, then they don't care, and you can just, you know, work on it much as much as they want. In terms of hourly rate, it really depends on what type of clients they themselves work with. Typically, I would say they're going between $20 to $17 per hour. They're never going to go, I think, above $17 per hour, then in that case, for them, it's going to make sense to hire a full time employee and squeeze as much as possible from them, right? And also depends on country that they're located in, or maybe city even they're located in and if they are working with the local clients or online clients themselves. Because if they're working with the local clients, and you can probably easily find this out, then that means that you're going to be charging more, right? Because with the local clients, the prices are usually higher because you have a very limited number of agencies and studios in the city and you are meeting your clients, and things are a bit more sort of on a higher up level rather than online because, you know, big corporations, they're not going to hire an online agency. They're going to hire somebody who is local, somebody they can meet, and somebody they can sue if things sue if things go wrong. If you're negotiating with studios, don't be afraid to go lower than your usual rate because the constant flow of work and cutting down on non billable hours totally justifies the discount that you're going to give them. When working with direct final clients, you actually have to do proposals, right? You have to send proposals or contracts and negotiate and interviews and things like that. But when working with studio, you just do that once, right? And then every single new project that comes your way, you don't have to go through all this process of negotiating and interviewing or all that stuff because the agency in the studio is doing that with the final client themselves. So you get the project that is already ready to go and ready to build. Then you have small and medium sized businesses. Usually, these are medium sized businesses that are making money or startups that have funding. These guys would usually go probably from 2000 and up until maxing out maybe a 1015000. And finally, you have large companies with a lot of employees that make a lot of money, and these guys probably start at 15 K and up. But you don't have to worry about these guys because they don't really work with freelancers. They like to hire companies and studios, especially local ones. So now no need to worry about them because I've never worked with them, and I don't know freelancers who end up working with large companies. Let's recap. So we price based on who our client is, more valuable the website for them, more we charge for it. To understand who our clients are, we need to find out more about them. Where are they paid? What do they hope to gain out of the website? Do they need a website for themselves or they are an agency? And then propose the price accordingly. 170. Pricing: Hourly vs Fixed Rate: Let's compare hourly versus fixed rates. Both of these have their own benefits and drawbacks. The good thing about charging hourly rate is that it's very simple. You don't really have to twist your brain on calculating how much you should price a certain project. Just give a rate and be done with it. No need to negotiate every time you have more work from the same client. No need to worry about revisions getting out of hand. More revisions means more money. Meetings and communication can take a lot of time. Some clients might want Skype meetings regularly, but if you bill them for that as well, and you should, then they will make sure that not to waste your time. And if they do, at least you'll get paid for it. The drawbacks of hourly rate is that it says nothing for most clients. For example, $100 per hour. Is that expensive or is that cheap? Who knows? If you're done in 3 hours, then it's cheap, but if you need 80 hours, then it's expensive. Also clients will have an emotional reaction to certain hourly rates. They will find certain rates too expensive, even if the final price is the same. They might be fine paying five k for the website, but if you tell them 100 bucks an hour, they might freak out. It's harder for clients to decide because hourly rate makes it uncertain how much will be the final bill. As you get more efficient and fast at your job, you make less per project. Benefits of fixed rate is that it's easier to sell. Clients see a clear number and they feel safer with it. As you get more efficient, you make more money. So it gives you a chance to make a lot more money per hour without looking too expensive. No limit on how high you can charge, whereas an hourly rate, there are mental limits. For example, 300 bucks per hour is going to be a mental limit for most clients. The bad thing about fixed rate is that revisions can get out of hand if not clearly defined. For example, two free revisions, and after that, applying a certain hourly rate. And when your client asks for a third revision, then you'll start charging them. This sometimes can be uncomfortable to talk about. It's quite uncomfortable for me, but I learned my lesson when I ended up earning a minimum wage on one of the projects because of endless revisions. Another drawback, calculating is a pain. You'll need to put extra work in calculating to clearly define exactly how long it will take you to finish the project and make sure to put a profitable price on it. It involves a lot of guesswork, and until you learn all your lessons the hard way, you end up losing some money. So which one should you choose? Just like with amounts, it's a good idea to go case by case and client by cline. For example, with studios and agencies, its best approach would be probably going with hourly rates. And when it comes to final liens, then probably going with fixed rates and flat rates. Because fixed rates are a little trickier to navigate in the beginning, it's okay to go for hourly rates for everyone. I myself have a mixed bag of burritos. I started off with flat rate, but then soon after I realized I was losing money because I wasn't setting estimates properly, and I was losing money on revisions. Then I switched to hourly rate, which was great, and I kept for a long time with hourly rate because it was simple for me. I love the simplicity of and then right now I have sort of both. With my long term clients, I do hourly rate, and then with new ones, I do fixed rate. But with long term clients, I do hourly because I do a lot of different type of work like UI design, for example, for mobile apps, and those sport projects can get monstrously big and they're weird and it's impossible to sort of put a flat rate on it. So I just, you know, use hourly because it makes it simple and makes it easy to one final criteria to consider is to choose whatever you feel comfortable with. Because at the end of the day, it's your work and you have to do this every day, and it's important to make every aspect as many aspects of your work enjoyable as possible. And if something gives you anxiety like it did for me, then it's okay to sacrifice some money for peace of mind and comfort. 171. Proposal Template: Fixed Rate: Side of freelancing platforms, how you send proposals, it's all up to you. You can email them, send them a message, tell them over the phone or send them a Raven. It's all up to you. You're the boss. Some options are better than the others. If you want to look serious and impress your clients, then sending a proper well designed proposal document is the right approach. This is what pro freelancers do. To help you seal more deals, I have created a very solid proposal template for you. It's a Figma file, the link you can find in the resources. As you can notice, it's designed in the same theme as the portfolio website. It's going to help you set your personal brand, make you look more professional, like someone who has thought about the smallest details. You will instantly stand out from the competition, and standing out is what you need if your clients have multiple freelancers to choose from. Let me take you through the content and explain why I put what I put and what are the things you'll need to edit when generating a proposal. Header is pretty straightforward. Edit the logo, put whatever you want in the headline. You can even mention their company name like Google website proposal. It's a nice personalized touch and your details and the details of your client. Overview is a place where you show your understanding of the project that you know what you're going to be doing. You tell them your objective and explain what's the final deliverable. Inserted a little spill on how their website will be hosted on amazing Webflow servers, making it secure and super fast. This is a good place to pitch a little on how good the final result is going to be to create an excitement. Not you don't sell how amazing you are. They want a website, not to go on a date with you. Then we have a price breakdown. This is a flat rate pricing. I've created a template for hourly rate projects, too. It has different price table and some other content is different, too, which I will explain after this. The price breakdown shows different parts of your job. If you have more items, you can just duplicate the rows and add more or remove as you wish. I like breaking down design and development in separate items. There are two different phases, and with some projects, you can even do only one of them. For example, if they already have designs, then you can just do the Webflow development. I've also added some extra things that are included in the price. It increases the value they are getting out of the price, like responsive development and training session. That way, the price list looks much more valuable and full of benefits than just a single value of $2,500. It feels like there is a lot more that they are getting. About these particular values, I'm just throwing numbers here, doesn't mean that's what you should charge. You can charge less or way above this value. That all depends at the category of clients you'll work with as we discussed in the pricing class. I'll just give you one advice on values. Use round values. Don't do 999. That's just going to look stupid. Your clients are aware of the fact that you are the one putting these prices, that there isn't any complex pricing equation that you are using, so round them up or you're going to look silly. Underneath the price table, there is a line saying that Webflow hosting isn't included. Transparency is key in such relationships. Don't forget in quotes to mention important things, especially costs. Next, we have a timeline. This is something clients really want to know. So breaking down as much as you can, clients are making a big risk with their money and time. They want to be in control of their project. So they want to know exactly how things are going to progress, makes them feel at peace, and they will trust you more. These are rough estimates. Projects never go exactly with the predicted timeline. It doesn't just depend on you, how quick clients give you their feedback on each phase, how many iterations you go through, and how quick they provide necessary content is going to significantly impact the project timeline. Often some other tasks will creep up during the project. They might ask you for small things which will add up in the end. If you're working on an hourly rate, then that's not a problem. But on flat rate project, you'll soon end up losing money if you don't set the record straight on what's going to happen if there is extra work which is outside of the main scope, even if they are just extra meetings that are taking your time. I myself had to learn this the hard way. I had a client who wanted to meet almost every day. I think he was just getting a kick out of talking and brainstorming. But for me, it was just taking too much time and I wasn't being paid for it. If you set an hourly rate for any extra work, then everyone will be clear. The last part is terms. I have listed some important points to have clarity on the way things will work and avoid any future disagreements. These terms aren't probably legally binding terms. Their purpose is clarity, so everyone is on the same page. For example, it has a payment structure. When working with strangers outside of the platform, you should take some payment upfront. At 25% usually is a good idea. This is my structure, but you can feel free to change it as you wish. And obviously, you can change any of these terms or add your own. The final format can be in PDF or you can even share a link to the prototype view, like I'm showing right now, but I think PDF is a better option. You already know how to export. Just go to the Properties panel, Export, choose PDF, and that's all. I want to give you one rule when it comes to sending proposals outside of platforms. Do not surprise them. So when you send a proposal and they get the value, and that value, if that is maybe too much for them or it's expensive, it's going to surprise them and shock them a little and, you know, kind of disappoint them. And because you put it inside the document and you sort of sent it already as something written and something definite, then they don't have a way to oppose or negotiate and you yourself don't have a way to sort of give arguments and benefits of the price and tell them and explain them why is it good for them to go with you and so on, right? Neither you have an ability to maybe negotiate and perhaps give them a discount because maybe sometimes you have that put inside the price as a buffer, right? So you put a little bit as a buffer to make sure that you can negotiate it down if they want if they ask you for the discount, or sometimes you can even bring the price down by maybe removing number of revisions or doing something a bit less or, you know, there is many different ways you kind of can move things around to decrease the price if they really can't afford that value that you gave them. So the right approach is to do the discussion of the price during the meeting. Like, you don't have to finally agree on it, but what you can do, an important thing is to give some sort of ballpark range. So they're not surprised when you give them a final value. And what you can do during the meeting is this is, for example, what I do. I have a meeting like it's a skype meeting or a face to face meeting. And when we go on the meeting, I ask a lot of questions about the project, and I already have some sort of pre value in my head that I'm willing to go with. I sort of have this range, which is like a minimum that I'm willing to work for and like an ideal price that I want to get out of it. Once I ask the questions, I understand that if the website is just like a one or two pages or if the website is maybe a big website with, you know, 25 different pages or a blog or something like that. And I kind of come up with a range which is maybe something like minimum $4000-6 thousand, and then I give them that range. And if they have some sort of objections to it, we'll discuss it, and I'm able to give benefits and tell them, you know, why this is a good option for them and why the price is actually worth it. And if they don't, for example, sometimes it can be that I give them a value, and they were expecting something less than 1,000. Now I know that we were just a bad match and, you know, I'm not going to do a website work for a large website, less than 1,000. So I don't have to bother about creating the proposal and sending emails, everything. We instantly understand we're really in a different different game here, and we're not a good match, so I save a lot of time. But if we are still in this right phase, then we can negotiate if we need to. But if the price also sounds nice, then once I'm done with the meeting, then I prepare the proposal, and probably I would put something like $5,000 for the website, and now they're expecting that price and they're not surprised, and we have a deal. 172. Proposal Template: Fixed Rate: As for the hourly rate proposal, Same ten played in most part. The first difference is in the price table, of course, much simpler, just one rate. Sometimes you might want to have different rates for different tasks. Then you can add an extra raw and put a different rate for that service. I once did that with my first Webflow client. At the time, I didn't have a lot of experience in developing and Webflow. I just had done two practice projects, but I had solid design experience, and I knew I wouldn't be very fast in Webflow. So I gave a discounted rate for the development phase to be fair with my client. I've added a paragraph here to explain how things will work, for example, saying that you will bill them every two weeks for the time logged during that period. That's up to you and your client how you arrange it. If you want, you can bill once a week or once a month. I've made a few changes under terms too, like payment structure and the cancellation policy. Don't use these terms as a legal advice. I'm not a lawyer, and neither I have created these terms based on any legal framework. It's for you and your client to have clear understanding on some important things. We'll talk about contracts in the later video. When working with hourly rates and outside of platforms, you will have to use a time tracker tool. The one that I use is Top Tracker. I've tried many, and this one seems to be the best, especially since it's completely free. At least for now it is. It has a desktop app. Once I open it, all my ongoing projects are there, then I select the project and start tracking. Simple as that. I track everything about the project. Doesn't have to be just design and development, meetings, communications, and so on. That's all part of the project. I put the link to Top tracker in the resources under productivity section, more freelancing tools to be found there. For example, WAV, that's what I use for invoicing, again, are also online proposal tools. For example, Bonsai here has a proposal feature. I don't use these online proposal tools because Figma, I can design my proposal as I wish, making it fit my brand and overall have more flexibility. But with these tools, I have to stick to their templates. In case you want to give them a try, here they are. And that's your proposal template. Use it, adopt it as you wish. I've put things here that I use myself and what I've learned throughout the years of making some mistakes with clients and getting into some misunderstandings. You can use my experience as your starting round. 173. Freelance Contract: Be surprising, but I actually don't do contracts with my clients. I can't be bothered with it. It makes things too serious. And even if things go wrong, I'm probably never going to seek any legal action. So there is really no point for me. Because of that, I make sure things don't go wrong. Here are a few precautions that I take to make sure project goes smoothly, and I end up getting paid. This mainly applies working outside of platform. On the platforms like Upwork, the contract is taken care of there. It's in their interest that you get paid. And if something goes wrong, then they're going to mediate and decide who is right or wrong. Regardless if you're working with a contract or not working with a contract, here are some precautions to take to make sure things don't go wrong. First, you have to make sure that you're clear with your client and then no surprises come up anytime in the project. For this, I use my proposal document and make sure everything is stated there that could potentially come up in the future. And if some disagreement comes up, then we can always go back to the proposal and see what's saying there. When working with clients across the continent, it's often easier to break a contract, but not as easy to break and screw up a human to human relationship. So when I work with clients and usually I do work with clients abroad and across continents, I try to have face to face on Skype mainly because having a face to face interaction with people and having this face to face relationship established creates a different sort of bond between clients and me. And breaking this relationship is much more difficult if they've already seen me and if we had some interaction over the call versus if I was just some guy with a profile picture and a username or just an email address. Plus, I can gain a lot of information on my clients by seeing them and talking to them. I use my bullshit sensors that Mother Nature gave it to me, and I can sense if there is anything dodgy and fishy about them. With new clients, I always invoice them step by step throughout the project. I don't wait for the entire project to be done with and then finally send the entire value and then, hope that they're going to pay. If I'm working with complete strangers that I haven't worked with and it's outside of the platform, then I'm going to ask for 25% upfront payment. This way, I can balance the risk between me and the client because if I ask them 100% upfront payment, then they are taking the full risk. And I don't want to put my clients in that situation, neither they will be willing to do, or if I'm charging at the end of the project, 100%, then I'm taking the full risk. By asking only 25% upfront, yes, they are taking small risk actually themselves, but at least I have 75% remaining payments to motivate me to do the rest of the job. With existing clients that I've already worked with and I trust and they have already paid me for previous projects and I've always paid on time, then I can relax and I can easily invoice them at the end of the project, 100%. But that's what I do. That doesn't mean that that's what you should do, as well, judge for yourself and see the relationship that you have with your clients. I also I often like to be trustful of my clients, and kind of when I see that we have a good relationship, I do like to show them that I trust them and that I'm not suspicious of them, because that sort if I trust them, then they know that they can trust me. Sort of it's a mutual thing. If you trust them, then they feel this obligation that they have to trust you back and just creates a very good relationship. But if I'm always suspicious about them, then, you know, relationship is going to be a bit more cold. When you have a bad experience, adjust your strategy. When someone violates your trust and they don't pay you on time, then make sure to change your strategy, no excuses no second chances and ask for upfront payments. I only had a payment issue once. I was working with the startup. I did the website for them, and they were waiting for an investment to come in and they couldn't pay me on time, and I had to chase them, and it was unclear when they're going to pay me. I had to call them and email them all that stuff. They did end up paying me eventually and delay wasn't that big but after that moment, once they violated my trust, that's it for me. And then after the moment, everything that I had to do about the website, I was just billing them upfront. They were saying, you know, Oh, can you edit this? I was like, Sure, here is the upfront payment. You pay me, I do the job. If you don't pay me, I don't touch it at all. If someone shows you that they're not trustworthy, believe them and take according measures. If you would feel safer to sign contracts or maybe your client is asking for one directly, then you can generate a contract on Bonsai. Bonsai is this freelancer solution which has invoicing proposals and things like that, and they also have this contract that you can generate for specific design or web design work. It's a really nice, customizable contract. All the highlighted parts are what you edit and put your information in. Rest you can keep intact because it's been generated by their lawyers. Editing highlighted parts are very easy and they give you an option and ask you straightforward questions. So you can answer those questions, and it will easily kind of autofill in a language that is suitable for contracts. They've done a great job. So if you need it, just sign up with Bonsai and generate a contract there. 174. Selling Webflow to Clients: Your clients will have an experience with Webflow, and they will want the website directly built inside it and they will be looking for Webflow designers specifically. But for others, they might not be even familiar with Webflow, so you will have to sort of convince them to use Webflow as the platform. These clients can be split in two types. Those who don't have any requirement where you're going to build the website. And second, those who have some sort of preference towards particular platform, usually that being WordPress. Selling Webflow to those who don't have a particular requirement or preference where you're going to build it really doesn't need that much convincing. Most of my clients are like that, and they usually just trust my expertise on where I'm going to build the website. The only thing that might need a bit of convincing is the hosting costs of Webflow. But one thing is important to note is that hosting costs money on other options as well. Even if it's Board press, WordPress itself is free, but the hosting is paid. So the website has to live somewhere. Usually will be around at least $5 per month. Now, where actually the pricing on private hosting really comes down and makes it really cheap per website is when you're hosting multiple websites because regular private hosting providers, they also give you the price that I gave you right now was only for one website hosting, but with a very small kind of price increase, I think, two, $3 per month increase, now they give you a different plan which lets you host unlimited amount of websites. And that's where the prices really come down per website. But the issue is that regular clients can't really use this benefit because regular clients usually have one business and they need one website, right? So they're never going to benefit out of hosting 100 different websites on one single plan because they don't need 100 different websites. They just have one website, right? And I mean website because, of course, we can have even on Webflow, we can have one website. We will pay only one plan, but we have, it can have thousand pages. That's a different story. I'm talking about different websites on different web addresses and things like that, right? So that's the big kind of money saver on private hosting. Now, for example, if I was a Wordpress developer, what I could do is have my own account, right on one hosting plan, and then every website that I build for all of my clients, I would host them there, right? So per website now, you know, the price would come down very, very cheap, right, because I just have one account, one hosting plan, and then every website is going there. And then what I can do is I can charge to my clients annual hosting costs or management fees for each website, and then I would pocket the difference. And that's what obviously a lot of web developers do. But that then ends up as a similar price to the client at the end of the day. So for the client, they don't really have a lot of options because no web developer is going to pass up on that very good opportunity to make extra money and offer completely free hosting, right, because they would still have to pay for it and all that stuff. So why would they offer it for free? Now, for other important benefits on Webflow, you get what's called a managed hosting. Managed hosting means that they do a lot in the background for you, things that you or your client never has to worry about like automated backups, security, malware scanning, and removal, server site, software updates, performance improvements, and much more that I don't understand and I don't care about as long as it's taken care of. Security maintenance is a big issue with servers. I once had a Wordpress site, which I self hosted on a chip server. One day, some malware got in and turned my site upside down. The site was going on and off constantly. The malware was using all my server bandwidth. I couldn't figure out how to remove the damn thing. It was my personal site, so I just decided to take the whole thing down and cancel the hosting. And if that's not enough for the difference, then this is. A typical cheapest hosting plans usually give you a server space in one single location, a computer called a server where your website lives. If I'm in Australia and the server is in the US, then a website content needs to travel through cables all the way from US to Australia. This makes a side load like a snail, but Webflow hosting comes with what's called CDN Content Delivery Network. With Webflow, your site loads from the nearest server to the user. So if a user is in Japan, the website will load from a nearby server in Tokyo, not from California. Of course, Webflow isn't the only hosting to offer that, but moment you add CDN feature on regular servers, pricing starts to rise and come quite close to Webflow pricing. And if that's not enough, Webflow has one more trick up their sleeve. This is a benefit that regular managed servers don't have. You see, regular servers need to be ready for anything. Users may install WordPress, Juma, Drupal, or even all three of these systems and run them all at once. This poses no problems for the server, but it does mean that it cannot be fully optimized to run just one particular system really well. Webflow servers need to run only one system, Webflow. So it's highly fine tuned to run only Webflow. Now, of course, there are comparable hosting providers that match all Webflow benefits that specialize in single platform are managed and include Cdian features, but they end up more expensive than Webflow. For example, WP Engine, a popular provider of specialized WordPress hosting that has all the same similar features that Webflow offers starts at $35 per month. So there you have it. When compared to one website versus one website hosting, the prices come very similar or sometimes even more expensive on the other side. If you are using the very same features that kind of Webflow offers. And at the end of the day, if a website cannot bring more value to your client than $20 per month, then what's the point of that website anyways? Second type of clients will have preferences to specific platform, usually Wordpress. Now, before you make the case and try to convince them to use Webflow, you have to understand what is the reasoning behind them. How did they came to the conclusion that they need to use WordPress as their platform? Because sometimes there is a specific feature or a requirement that they have your clients might have that Webflow is not able to meet. For example, if the team has been using some WordPress plugin in for the past website probably because they had a website on the Wordpress, and they were using some specific plugin. Let's say, you're working with a dental clinic, and they are using a specific Wordpress plugin for their appointments, like, you know, booking appointments, you know, like calendars and then, you know, users go on the website. There's a calendar, and then they book an appointment, something like that, right? And they've been using this particular plugin, and maybe they really want that plugin because maybe the staff is used to it or maybe it's plugged in somehow in their kind of business process or some integrating with other applications that they are using themselves, maybe some other CRM or something like that. In that case, right, they really need to, you know, 100% tip with that plugin. You are not able to because if that plugin is Webflow, wordpress specific, then there is nothing you can do about it. Now, obviously, there are a lot of alternatives and appointment booking applications and third party applications that are not platform specific. And most of the really good ones and most of the great third party applications are like that. They're not platform specific. They're kind of codes that you can install on any website. And you could find the alternative, but if they really want to stick to exactly that plugin because for some reason, then there is nothing you can do about it. And the only option is to go with WordPress platform, and that's it. So you have to find out if there is some requirement that it needs to be met, that they need to meet, and if you cannot fulfill it with Webflow, then you have to pass on that client. And if you didn't find any requirement that Webflow can't meet, then tell them that you have a better solution for them than WordPress and give them three big Webflow benefits. First, the painless and high performance Webflow hosting. All those points I mentioned earlier, the CDN, better security, faster, less hassle, cheaper. Second, how quickly you can build, iterate and deliver their website. The Webflow designer, the coding a website from scratch takes way more time. And third benefit, Webflow editor. That's a big one for clients. Wordpress and other CMS are confusing for most people. They are ugly, they're clunky and slow, they're not very enjoyable to use. You have to go into the back office and edit content from there. But Webflow'sE ditor is right on the live site. Clients can just go on the live website and start editing content right there and then. And that's how you actually make the case for Webflow with your clients. Not much to actually sell. It's quite simple and straightforward. I myself actually rarely need to make a case for this because most of my clients they trust my expertise. They're not very concerned where I'm going to build, because businessmen and entrepreneurs. And often even I work with teams that are kind of techie, development teams, and even they are not very concerned where I build it as long as it's efficient for me, and I produce it and I can iterate it really well because I'm the one in reality who is building a website and I'm the one who's going to be editing that website and all that stuff. So it has to be fast and efficient for them, that I can make it really easy, and they ask me, how much is it going to cost and tell them the price, and they say, Okay, good. But in those cases, where definitely Webflow seems like the best option for them and there is no limitation and but for some reason, maybe you still face resistance from your clients, maybe about the price or something else. Then all these benefits that I described are enough to seal the deal. 175. Intro to Advanced: Congratulations. You went through the main part of this course. All upcoming videos are advanced that you don't right away need to start your freelance web design career. I really hope you've enjoyed the ride. I realized this course was a handful, and you've learned everything from good design to Webflow development to successful freelancing. Feel free to revisit some of the lessons from time to time. They will stick better and you will get even more practice. My recommendation for your next steps would be to put in some independent practice outside of this course. You can pick a topic or a product that inspires you and build a website for it. Or even a better option would be to take on real projects. You can look for projects within your network between your friends, family, work colleagues, and so on, and you can take on paid or free projects. Or you can right away, start looking for real projects and real jobs on Upwork and other freelancing platforms. The tutorials in this section are both design and Webflow related. For example, that Photoshop tutorial on how to cut out an object from the background, something that we discussed in the design part of this course, but we never actually went through it as a practice because it was a Photoshop tutorial and a bit more advanced. That's why I put it inside this advanced part of the section or custom code embed, which is for Webflow, right to embed some third party applications like the commenting plugin, which we are going to do those and some more video tutorials in advanced section have fun. 176. Webflow: Custom Modal (Pop-Up): In this video, I'm going to show you how to build a custom model or in other words, a pop up, something like this. When user clicks on the button, a model opens up with a form. Models are widely used and very handy. Putting forms inside is one use. One very hated option is to use it as a pop up. You know what I'm talking about? When you're browsing a page and some annoying marketing message pops out of nowhere when we didn't click anything. This one, we're going to go with less controversial option, a form opening up when user clicks on this Get access button on our TeamApp website. Building this inside Webflow isn't as straightforward as you would think. There is no ready made modal component that we can just add to the page. There is one which is called Lightbox, but it's mainly for images and videos. But forms or anything like that, there is none. This was something that surprised me in the beginning, and when I watched the tutorial on how to build this model with a form inside. That's when I sort of understood what sort of web design platform Webflow was a professional tool where you build things from scratch like a developer, not just dropping ready made components. So it might be surprising for you, too, but that's what makes Webflow awesome. So let's begin. What happens when modal opens up? There is a background color that overlays on top of the entire page, and there is this form inside it, right? Then on a close, it all disappears. First, let's build that, and then we will take care of the interactions. I'm going to add a div block and put it on top of the page. And name it modal wrapper. That's where everything is going to go. Now we need to overlay this on the entire screen. We can do that by fixed position and selecting full. Let's give it a color so we can see what's going on. So it's overlaying the hero but not the section after it. And also it's behind the navbar, but we want it to go on top of everything. To overlay it on top of everything, we need to use a feature that we haven't discussed yet, Z index. Which we can find under position settings. It shows up on all positions besides auto or static. Z stands for Z axis, the depth. Basically, it lets us control stacking of elements on top of each other. By default, most elements are set to zero value. If we have two elements overlapping each other, one that has higher Z value is going to stack on top. I have also linked the Webflow video tutorial on Z index in case you want to learn a bit more about it. So if I change Z index to one, it's going to stack on top of all zero values. Great, but it's still behind the navbar. How come? The navbar doesn't show that it has a Z value inside, but since navbar is a ready made component, probably it has some default Z index from Webflow, which makes sense because navbar on mobile views has a drop down menu, which needs to stack on top of everything if we are opening the menu on mobile devices or tablet devices. If we give our model higher Z index value, then it will stack on top. We can see what the value for the navbar is, but I'll tell you straight up, it's 1,000. So if we set model at 1001, then it's going to do the trick. If it doesn't for you, maybe the value is different. Just go higher and higher until it works. There is no limit how you can go. Put 10,000 if you want. Okay, finally, let's make the modal wrapper a little transparent, something like 80%. Next, we need a model in the center. Before we add that, let's turn wrapper into flexbox so we can align content in the center. New div block will go right in the middle. Name it modal and style it. Neck, just add a content, a headline, a paragraph, and a form block. We don't have designs for this. I'm just winging it for demonstration. We already have classes for the form element, so let's just reuse those like button and filled. I'm going to give the modal maximum width, so the content fits nicely inside. The fields have max width. That's why they are cutting short like that. Excellent. We need one more thing on the model, a closed button. Otherwise, how do users know where to click to close the model? We can put something like Cancel or closink underneath a button or an X icon on the corner of the model. Let's go with a closed icon because it's a little more difficult, so you'll learn more. In reality, you already know everything you need to build this. We just need a closed icon, which we can get it from flat icon. And then position it in the top right corner by using absolute positioning. But when you do that, it's going to jump to the top corner of the page, not the model. Do you remember what we need to do? We need to set the modal to relative position so that the icon is positioned relative to the model. There. Now we can position the icon nicely by giving some margins. Just so you know, SVG colors are editable in Figma. If we wanted, we could open this SPG in Figma and change the color to match our palette from the project, but we don't have to do that right now. We can instead decrease the opacity to something like 30% to make it gray. Okay, let's check the preview. The cursor doesn't change to a hand. I should have used a link block instead of a regular div block, but that's okay. We can manually change the cursor type from the Styles panel. I It's that easy. And we can increase the clickable space so users don't have to be so precise on pointing it on the icon. You can do that just by increasing padding on the image. But now we should decrease the margins or it's too far from the edge, maybe even remove the margins. A hover effect would be nice. We can simply increase the opacity on hover and, of course, give it a transition effect so it's nice and smooth. And that's all. The model is done. Now what? We need interactions, close and open interactions. Let's start with close since it's already open. Our trigger element, obviously is the close icon selected. Go to Interactions panel. Make sure the interactions version with GSAP is selected here and not the classic interactions and select trigger which is click. And add a new action. Animate. So what do we animate here? We want to animate entire form, entire model, including the background, everything, right? Right now, the target is the element, which is the click trigger. We don't want that. We want to change the target. Select class, remove this and select model wrapper. That's the name, the class name of our model wrapper here. That's why model wrapper shows up. Under filter right away by default, it's going to filter within trigger element, but model wrapper is not within closed icon, so we don't want that. We don't want that kind of filtering, so just reset this. So it's set to none. So now what do we want to animate? We want it to just go to 0%, 100% visible to disappear to 0% opacity. Play it, and it disappears. Can make it faster. The change easing to something a bit more powerful. Mm hmm. That's better. Now, if you hover over the canvas, you're going to see that all of these elements they are selectable on the canvas. And that's going to happen in the preview as well. It disappears, but none of these elements here, I'm not able to select. I can't click on the fill. I can't click on the button, none of the here, and as you can see, my cursor changes because they are hovering over fields and the button here. So modal wrapper is still open. I just opacity is decreased. So it's just transparent, but it's still there. To change that, we need to remove it completely, and we need to change the visibility to none, display to none. No. We don't have display property here under visibility because it's not something that can animate. These are properties that get animated and that's the action because we selected animate action. So we don't get that property. We do have another option. GSP has this option, which is Alpha, and Alpha does control both opacity and the visibility at the same time, but we're not going to use it this time because we do want to actually hide this completely on the canvas on the original state as well. So we're going to skip this version this time. Now, let's go back to our interaction. And let's add a new action. And this time, we're going to select set. What this type of action does is it doesn't have properties that animate, and they're not going to animate, but you can set them, which is going to set them right away, instantly change to a new style of that property. Add a new visibility and select display. From display, open the dropdown, and as you can see, we have the familiar display settings block, inline, flax grade No. We're going to select N. This we don't need. We don't need class. That's another property that can be set. A specific class can be applied or removed from an element. And as you can see, this action has been added right after the animation, the first animation, which is we can actually name this modal animation. I easily recognized. So as you can see, modal animation plays, which in this case, is just a opacity change. It could be also other things like scale, for example, it's small or decreases in size or movement, it kind of goes a little bit below once that animation is done, then display set to none. And we do need to make sure that it happens here and doesn't happen somewhere in the middle. So if you update your animation duration, Note that this action is not going to follow that. Once you already have it set, and once you already at this one, just keep in mind that this set action needs to start at the end of it, which is right here, and it shows that it starts at 0.2, exactly the duration that we had set for the original animation. It can be changed to 0.5, for example, and it will go somewhere here in case you have a longer animation. Now. Right now, the target, again, is set as trigger, which is the closed icon. That's not what we want. We want, again, the modal wrapper to be the target. So change that to remove this model wrapper. One more time. Don't forget, filter N. All right, so double check everything. Set action. We can name this display none. Display none, target model wrapper. That's correct. Starts right at the end of the first animation. Make sure it's not somewhere in the beginning or in the middle. I will interrupt that animation. And the property is that display to none. That's exactly what we want. And let me go back. And when you play this now, on the canvas, as you can see the elements are not selectable anymore. We can test this here as well. Close and text is selectable, field the selectablele. All of this is now working because the entire model wrapper has disappeared. Great. Also, it would be nice if we could trigger close by clicking the area outside of the model. So basically, closing when the user clicks on the background space. Now your first instinct might be to add that to the model wrapper, but that's not going to cut. Because even though it works, it also triggers when you click anywhere on the modal two, even inside the fields because all that is nested inside the modal wrapper. So clicking the form is considered same as clicking the modal wrapper. So we need a new element that's overlaid behind the modal, and we're going to set the trigger on that element. Give it similar style like the modal wrapper, fixed position and full, no need for the background color, keep it transparent. Now, if you add this closed area after the model, then it's going to stack on top of the model. But if you move it before the model, then modal will stack on top. Usually that order changes enough, but if for some reason it's not, then you can use Z index values. Give model hire Z index, for example, two, and one for the closed area, and that will do the job. A Add the same close interaction to that closed area, and that's it. Now when we click on the modal itself, nothing happens, but when we click on the background, it's going to close. Now we need to create open model animation. We're going to start by hiding the entire model wrapper on our canvas because it's in the way, and if we want to design, it's going to be in the way, so we can just select Model wrapper. And from the display setting, select none. Now it's completely gone. We're able to select everything else on the canvas. And if you want to come back to it and if you want to edit and change the design to it, go to select the model wrapper and select display flex because it was flex layout. And the flex settings will be saved so you don't have to edit it every time. Okay, now, our trigger in this case is the button. Select the Get Access button, go to interactions panel, select click Trigger and call this Open model. And make sure click Trigger, this now lick button and add a new action. So first, action here, we're not going to do animate. Why? Because display for the model wrapper is set to hidden. So very first thing needs to happen is that we need to enable display. Otherwise, it's not there. And if we animate the opacity, it's just going to animate opacity while it's still invisible. So it's not going to work. So first, we're going to set display and change the target. Class. And what are we setting the display on on the model wrapper? Make sure to remove this filter. We don't need filtering because the model wrapper is not inside the button. What's the display setting that we want to change? We go to add new property, select display. And from the drop down, we're going to select flex because that's the display setting we want on the model wrapper. These things we don't need. Now, as you can see, it says start at 0.2 seconds. We don't want that. And so this is one thing you need to make sure. Here on the timeline, as you can see, I will say, it starts from 001 and 0.2 seconds. We don't want that, so either you can just drag it all the way all the way to the beginning on the canvas on the timeline or just reset this and all go to zero. That's what we want. So double check. Let's change this to display flex. So we have target. Target is the model wrapper, right, starts at zero second, and display changes to flax. That's what we want here. Now we need the animation. We need to appear at a new property, new action, and select animate this time, change the trigger to model wrapper again. No filtering. Let's name this model appear. And from the animated properties, what do we want? We want the opacity. That's it. And we want it to go from 0% to 100%. And this time, we are going to actually set 0% in the beginning because by default on the canvas, we didn't change the default setting to 0%. So when the page loads on the model wrapper is going to be at 100%, yes, it's invisible because we set the hidden but the opacity itself is at 100%. So in this case, we need to specify here either here in the animation or on the canvas under styles. But it's better to do it here. So on the canvas when we're working with it, we don't have to change the opacity as well, and just changing to flex will make it appear right away. So set opacity here to zero because that's where we want it to animate from 0%, and we want it to animate to 100%, going 0-100. As you can see, now, it appears, and it's slow, let's match the easing and duration to what we already had. Power three. And let's see. Double check everything. So we have target, model wrapper, duration, 0.2 seconds, easing, type from two 0% to 100% opacity. That's all good. And now let's give it a test. It appears, disappears by clicking away. Appears disappears, good. Appears, disappears on the closed icon. Good. Appears. Let's test it. It doesn't appear when we click inside the fields. Good. All right. It's all working fine. Perfect. And that's how you create a custom model in Webflow. You wouldn't expect that such a widely used thing needs so many steps, but that's how all of them are built. Developers even have to code the whole thing by hand. 177. Google Analytics: I after you ship your website for the client, the very first thing usually you will want to set up or the client will want you to set up is some sort of analytics tool. Now, this is not exactly a web designers domain to analyze the website data. It's usually the marketers who do it or the business owner themselves if they understand it. But the setting up of it usually requires installing some sort of a custom code script or a tag that gets installed on the Webflow side. And that part will often fall on your side as your responsibility. So as a web designer, it's a really good knowledge for you to have right off the bat. And in this video, I'm going to show you how to install the most popular Analytics tool, which is Google Analytics. Go to analytics.google.com. If you've never set it up, and if you're logged in, you will probably get to this page. If you're not logged in, the Google will ask you to login into your Google account. On this page, just click Start Measuring. But if you set it up in the past, you're going to arrive probably right away on the dashboard, something like this. From here, you can just go to create and click Create New Account or just account. And then you're going to arrive on this page in both cases. Name something your account, let's say, Team App in our case, and we will set this up for TeamApp. Click Next. For the property name, name it something like TeamApp website. So we know, select your time zone, currency, select your industry. It's not really relevant that much too. It's not going to change much about the analytics. Here as well, select objectives. Again, you can select a couple of them, understand web or app traffic. And again, doesn't really change much about the analytics. I just Google is going to recommend you different things to do. Click create and then accept the terms and conditions. And from here, now we're going to select the platform. Where are we collecting the data from? You know, okay, it's a web, so select web. And here, provide the address, which is the main URL of your website. To get that URL, you can go back to your project. Oh and this is going to be your main URL of the website if it's published on staging domain on Webflow subdomain. But for the client, when you're publishing on the actual custom domain of the client, then you're going to provide whatever the custom domain is. But obviously, we're going to do this with a subdomain because custom domain needs a hosting plan. So you just select and copy this domain and page this right here inside, you don't need to add the HTTPS is already here, so don't add HTPS and stream name again, just call it website. So measurements will be already selected, read can continue. Done. Now we have Google Analytics account, but we need a few more things to set up on the Webflow side. So what we need for Webflow is this measurement ID. So if you click this out accidentally, if you're here, you can just click this again, you'll get to the measurement ID. From here, just click this and you'll find measurement ID right here. Copy this measurement ID and then go back to Webflow and Webflow, go to sit settings. And inside settings go to absent integration. And here we track different ideas that Google gives us. This can be Google Analytics or can also be Google Tag Manager. In this case, this is Google Analytics. We're going to need this Google Analytics. And as you can see, Webflow tells you that it has to start with G something, right? Paste your tag here, make sure it starts with G, and make sure that exactly matches here and you correctly copy this ID. Once you have this filled up, click save, and then make sure to publish. Because until you publish, this tag is not going to be installed on your live site. It just right now in the settings for it to be pushed to the live site, it's going to need to be published. Once it's there, you can visit your site. And then we can go back to the Analytics and can exit this and go to next and then continue to home. It's going to say at this moment, no data received from your website. Sometimes it will take some time usually to reflect data and give you all the information. But often at least there is type of data that comes completely live right away. And as you can see, there's active user because I have opened this in this browser already, and it's already detected that there is one active user. And from the reports, we can select real time overview, and we will see more information here about users. And I'm not going to go into detail. Google Analytics is just another big topic and requires an entire course of its own. But this is how you set it up if your client needs it, and often they do, and they will ask you to set it up, and once you set it up for them, then analyzing analytics is up to the client and their marketing team. 178. Cookie Consent Installation: In this and few upcoming videos, I'm going to teach you how to expand your site's functionality using custom code. This is a super important skill any web designer will need in their career because most websites don't end at Webflow development. There are usually external tools that a business owner will need, for example, chat widgets, appointment booking tools, marketing tools, and many more. Most of the time that happens through custom code implementation. But don't worry. There's no actual coding involved in it. It's just a copy pasting code from one place to another. And it just needs a little bit of literacy in navigating this code. Just this understanding will expand your web design skill set and allow you to be comfortable at implementing additional tools and solutions on your sites. Now, custom code features in Webflow are paid. So to be able to follow this tutorial, you will need either a Webflow workspace plan or a hosted site. If you don't have that and don't want to invest in it at this time, then you can skip these custom code tutorials for now and come back to them when you have a paid plan or working on a client project. Now, right after you install Analytics tool on a website, usually, you're going to have to install a cookie banner like this. If you live in European Union, you're probably very familiar with this in some states, United States, Canada, Australia, UK, you'll be familiar with this because we receive these banners constantly asking us to accept or reject cookies from these websites. If you don't live in one of these regulated countries, then you might not be familiar with these banners. However, for any website, if you're going to serve the market, if you're doing a website for a client and you're going to serve users either in United States, specific places in the United States. If you're serving users in European Union, Canada, and many of these places where they have strict privacy laws, you're going to have to install a cookie consent banner and ask permission from users so you're able to sort of track them and install cookies on their device. That's when, for example, what we did in the last lesson, which was we installed an analytics tool, which was Google Analytics. This is what we installed. And for example, this is my website, personal website, and you'll see that I'm receiving here some user statistics in countries that people are visiting it from, and this happens through cookies. Now, when you do this and from these countries, you do have to get the consent. Otherwise, you cannot do this through installing cookies. So if you do tracking, then it has to be in a very different mode of tracking. Until you actually install the tracking, you don't have to do this at all. You don't have to install a cookie banner or a consent if you just launch the website. So until we did this analytics, you didn't have to do this because sometimes my students ask me, do I need to install a cookie banner on my website? How do I do that? Well, are you actually tracking them? Are you using tools like Google Analytics, and are these tools using cookies specifically or processing personal user data to track users and understand the user behavior. In that case, then yes, we have to install this. If you're not doing this, then there's absolutely no need to do this. Your website is not going to be using any sort of marketing or analytics cookies that is required by law. Your website will be using, for example, only a session cookie, which is a necessary cookie for the page to load and understand the session, and that's something that is not really part of this law, and this is not what this European Union and these legislations are actually regulate. Now, for this tutorial, we're going to need to use a third party tool, which is a cookie consent application, a banner, consent management platform, sometimes it's called. And this has to be done through one of these platforms. You cannot do this through just a custom banner that shows up on weblo. You could potentially do it, but there is a lot more logic going on. There, because the cookie consent banners that we receive and for them to be compliant to the regulations means that they need to block any scripts that run cookies and install cookies and only run those cookies and install those cookies after user clicks except them. And if the user clicks Reject all, then those cookies and scripts need to be blocked. That's why nearly every website uses some sort of a third party solution like Cookie Hub. There is another one like Cookie boot, and there is another one called Consent Pro, which can be installed right from the Webflow marketplace. And the reason I'm choosing Cookie Hub in this case, because it comes out to be the best deal because Constant Pro is paid right away. If you want it on the custom domain. It's free on the Webflow subdomain, but it's right away paid. You need to pay for it right away. And I'm using this Cookie Hub because I've tried many different, and I found this one to have one of the easiest implementations. The pricing is good, and their free tier is actually usable. And yes, it has a limitation. On what you can do and how many sessions per month can you have and how many visitors can you have, but it's still usable. So first step here is to sign up for Cookie Hub, go to cookie hub.com and sign up. It does say 14 day trial, but 14 day trial will give you these premium features. It doesn't require credit card, and after the 14 day trial, it's going to just revert to the free tier, and that's free, and it's usable as well. In the domain here, I'm going to provide my personal site domain because that's where I have the paid plan. In your case, if you have a Webflow workplace plan, and if you can use a custom code, then you can provide, for example, the chat tap application and its domain and whatever the domain you used for it, which is going to be right here. That's the domain, and that's the one you can apply here. And you get to this page, something like this that shows your domain that you just added, and it shows basic as 30 K visitors per month, but it's going to then this is the trial, and then it's going to come back to the less, I think it's thousand visitors per month that it allows under the free plan. Now we need to set things up and click the details and go into the setup installation. And on these pages at the overview overview tab, we have few ways to set up, choose manual insert code. And you're going to get this code. This is a very common method and exactly how nearly every single third party application or a tool implementation happens. They give you a code. There's an implementation, installation guide somewhere. They give you this code, and they tell you, paste it somewhere on your website. And they will tell you, in this case, it tells us, paste this in the head section above all other scripts. So it has to be the first script that runs, and then everything else has to every other script has to run after this. In Webflow we have three different places where we can paste or install custom code. The first inside the designer is code embed. Once you add it to the canvas, it's going to open up this field, and this is an HTML field, and code can go inside. It has to be an HTML code. And this thing, this will display inline, and you can paste this between content. You can have a heading here, custom code here, and then other content here, and then the custom code will run. And if it's something that it displays, then it will display right here on the page. And usually they might not precisely display on the page, but it will display inside the preview mode. And that's why there is this enabled custom code Toggle here. And then the custom code will run on the preview. Sometimes, if it's just an HTML simple HTML and CSS and there's no Javascript, it will display right inside the designer as well. So that's one place. Other place where we install and can paste the custom code is in the settings of a page. And when you scroll the way bottom, you have these two fields, obviously, sorry, not this, this field. Now, this is obviously I'm already on the paid side plan, and that's why they are enabled. If you are on the free plan, obviously, they're going to be locked. And there is two fields here. One says inside head tag, another one says before body tag. And this is, I'm not going to go dive deep into it. What's the difference between the two. And every custom code solution, they will usually tell you should you put them inside the head tag or should you put them at the end before the body tag. And this usually means before the body tech means right before the very, very last thing on the page. Body tag is, this is the body tag. So putting anything before the body tag means that everything that we have on the page in then on the very bottom. So in this case, just one thing. After the heading, it will be pasted right here and it will run on the bottom. Usually, that means that it's not being rendered. It's just once we don't want it to interrupt anything on the page. That's why we put it last. So these are two places, and this is page. So only On this page, whatever this page is, cookie consent page, this is where this will be installed, and it's not going to run on any other page on our website. And the third place is the site white. So if we go to site settings, we have this custom code tab here, and in here, we have these two exactly similar fields head tag in the body tag before the body tag, also sometimes referred to as Footer code. And this now will apply sitewide. Every single page on your website will run this code. In our case, for the cookie consent and many such applications, for example, a chat widget or any marketing tool, usually we want this st white because we want it to run on every single page on our website. And this is where we're going to paste our cookie consent code. And that's our code, and then you just save it. Once you paste your code and save, the next step is to publish it because until you publish it, this code isn't live. It's just saved here right in the settings panel, and once you publish it, then it will be pushed to the live site. Once the publishing has finalized, then we can go to our page and refresh, and we should get the cookie notice now appearing on our side. This cookie notice now can be customized, and we are going to do that from the Cookie Hub portal settings. However, there is a few more steps that needs to be done for this to be actually completely finalized and work. Now, if you are here, if you're here on the dashboard, can go back to details or just click here. Go to customize. And now we're able to change a few things about how it's being displayed. Like one of the things right now as it happened, as you can see, I'm not able to click away. I'm not able to move around. This is a very intrusive Cookie policy and cookie consent banner. It doesn't let me go anywhere. This is what by default is happening here. So we want to uncheck block user interface. This blocking happens on sites that are like Facebook or Google or news sites like New York Times, Tribune, whatever. That they really want you to define first, are you going to accept the cookies or you're not and decide and sometimes they don't even allow you to go to a site if you do not accept any cookies and use their website. And sometimes they will allow you, but they want the decision right away and they don't allow it, and they want to actually get the confirmation. Because usually, if you don't force the confirmation, people are just going to scroll and enjoy the site without ever clicking the banner. So in this case, I'm going to remove it. And another thing we can do is we can change where it's displayed. For example, a very kind of com style to put it is a bar that can go, for example, on the bottom. And there's a common unintrusive way that you still allow people to use your website, and you are just not forcing them to accept or deny cookies because you're just maybe not that important for you to track them or use their data. From here, we can also change the color palette. For example, in my case, I would maybe go with the black and white. And then buttons can be rearranged, cookies, denial cookies. And this is usually pretty good setting the way it is. But depending where you are, you might need to sort of change the location of the buttons based on what people are used to in your region, perhaps. Another preference center we have here is this is when they click Cookie settings. This opens up, and you can change what is visible here, what is not visible. Don't usually need to mess with this. This is the icon that gets left on the page. Not something I like generally. There is a regulation that you do need to have a place somewhere that they can deny the consent that users can remove the consent, and that could be put as a link somewhere in the footer for cookie settings. Instead of this kind of banner, I can always just floating around on the website. So I'm just going to save all this. And for any custom customize the phones or whatever, for any website that needs a really custom look for these buttons, then the custom CSS can be used. Once you're done, save and close, and then you have to publish pending changes. And then you can go back to the site and refresh, give it some time. And it took me a few couple tries, and then finally it worked. And now you can see the banner is different. Now, the banner is working, it appears, however, it's still not compliant. It's not actually doing what it's supposed to do. For it to do what it's supposed to do, and actually Cookie Hop can help us with this, it needs to scan for cookies and needs to start blocking those cookies. So from the scans page, it already did a scan for me, and if it didn't do it for you, you can request a scan, and it's going to go through your pages, and it's going to scan for any scripts and custom code that you have that you are running on your website and find out what needs to be blocked and if it's able to block it. Now, the way we've set up the Google Analytics code, let's see if it has already done this Action Center. Inside the action centers, usually we're going to get issues. And then we can go through these different issues and address them as they are. So one of the issues you're going to get and if you did the implementation of the Google Analytics, from here, you're going to get an issue on Cookie Hub because Cookie Hub is not able to actually block the script because Webflow injects this code and the Google Analytics script way before, then this script loads. So what we need to do here is we actually need to remove this from here by deleting doesn't allow to delete right away. I had a new tag and delete save, and we're going to do a manual installation from a custom code without Webflow installation from that field. For that, we need to go to Analytics. Analytics.google.com, one more time. From here, it will ask you to log in to the correct Google account once you log in, then you will be able to from here. If you have only one account and one property, it's going to select right away, but if you have multiple, then you have to select from here. Once you're here, search for data streams. That is what we set up last time. And if you remember, this is what we've done for my website, for the TeamApp website and I have similar here, click on this. And last time we just grab this measurement ID, but this time we're going to actually go through grab the entire script, which we can find from View tag Instructions. And select install manually, and we're going to get this code, and we're going to use this code. This is a similar code that Webflow is injecting. It just it's injecting way earlier. And we can grab this code from here. It already has our ID inside one place right here, another place right here. That's when it needs. If you're not actually able to find this code on your Google Analytics dashboard, you can actually ask Gemini or any other LLM and say, give me the latest Google Analytics script. And it's going to provide exact the same script. It just will have this GXXXx and this is where you need to replace that measurement ID, and then script is exact the same. And the measurement ID was already right here when we delete it. Now, once you have that code and you have those measurement IDs correctly, then you're going to paste this Google Analytics after the Cookie b script right here. Problem, the entire problem was that this whole script Webflow is injecting before and then runs the Cookie Hub, and now CookieHub is not able to actually catch this script and block it before user is able to give permission to it. So for any other tools that third party applications or tools that you will install on your website, the trackers or maybe a chat bot or booking appointment, anything that is going to use Cookies, you will always install them below the Cookie Hubs code. So Cookie Hub is able to control those scripts. Once you have it correctly, click Save. And then again, publish to select the domains, give it some time. And once it's published, now we can go back to Cookie Hub and ask it to rescan. And this time, once it's scanned, it should be able to catch the cookies correctly, and it should not give us any issues here, and this usually takes a few minutes, so you can walk away, take a break from it, and come back later. Once you're done, you're going to get these no issues found, and that means it's correct everything is correctly set up in the overview, you'll get this all good no issues detected. Then on the side, when users actually click Allow Cookies, that's when the cookies and Google Analytics will load, and that's when any other script that requires cookies will load and done. There are other settings and customizations one might need to make, but that depends on an actual site, particular tracking scripts used, and the audience, it's serving, so I won't go about that here. But if you do have a real project and need help, just post in the Q&A and I pot. 179. Code Embed + AI: In this video, what we're going to do is we're going to do another custom code tutorial in practice. Again, it's a paid feature in Webflow, so this will require either you to have paid Webflow account, workspace account or a hosting plan on one of the websites. Last time we did this custom code installation through site settings, and this time, we're going to use this code embed element. In this scenario, we're going to go over installing some code components from external sources inside Webflow, and this will show you how much you can expand your skill and your ability to design and Webflow and not just rely on Webflow's native functionality, but be able to bring in functionality and design from outside sources. And we're also going to utilize AI. I'm going to show you how powerful AI can be in this case, to help you modify the code and make it useful for Webflow implementation. Out in a wild, there is a lot of websites and places that share open source UI components. One of the most popular ones is CodePen. This is where developers create something. They share their code implementation, and other developers are able to grab the code and utilize them and implement them in their designs and in their websites. Another option that is UIRs is also similar to CodePen not exactly the same, but it's a bit simpler, and we're going to start with UIWors and I'll explain how this works on an example. First, let me give you a little bit of a guide of how UI verse works. So go to ivers dot IO. I'll put the link in the resources as well. And what we have here is a little bit of components that are created, like buttons that animate, things that are just like stand alone simple components that are built, and they have usually some funny, not funny, but fun animation and interactions to them that designer or developer who were created, thought they were creative. And you can go to elements, click all and here we'll see there are things that are animated, gradient, flows, and interactions that you'll be able to interact with right away. And when you hover over it, you're going to get displaced to get code. And then it offers HTML a CSS, which you can grab and implement wherever you want. And the way to use the UI verse is, I'll give you a little bit of tip here. You'll see this as tailwind and CSS. The tailwind is a framework and a library that is based on CSS, and to use that in Webflow, it's a bit complicated because that means that we need to pull the web tailwind database or library and import it into our website, and it complicates things, and it may conflict with whatever CSS classes and the library that we have inside web we don't want such dependencies. We want more clean CSS. That is just they call this vanilla CSS. And if you go over this without selecting this filter, you will see that some of them will have this tail wind icon on it. If it doesn't have it, that means it's not based on tailwind, and you can use it as this using vanilla implementation of CSS. So when you're looking through this, sometimes make sure to select CSS, and that will give you only a simple vanilla implementation without dependency on external library like healin. So I found these cards here. This thing here, and I really like this effect, however effect. And obviously, we could potentially build this out inside Webflow ourselves using Webflow interactions. But sometimes you don't want to try to figure everything out and you see very useful easy component, you can just grab and copy paste inside Webflow. When you find something that you like, you click here, Get code. And here, we're going to get HTML and CSS. So nothing complicated here. This is exactly how we're working inside Webflow as well. We have HTML elements or tags, and this is exactly what we are adding here. For example, DIV Block. That's the DO Block. This is how D Block is written. And when it says class equals card stack, this is exactly what we add here. If we just name this card card stack, This is exactly would be the same implementation in Webflow, which you see right here, DV class, card stack. That's it. And then whatever styles we change, whatever styles change here, they get line by line, they added under this card stack class. This is what is happening here. We're quite familiar with this. And this is a very good introduction for you and good way to get your hands dirty or your big wet in a little bit of a code. It's a really good idea for you to not shy away from implementing a bit of code here and there, because that expands your skill on what you can do with Webflow or just generally web design, even if you're using any other tool, even if it's not Webflow. So what we need to do here is just copy this first HML, and let's actually build out some simple section, container, heading paragraph. Let's call this custom code. Tutorial. Let's give this some padding. C center it. Alright. And inside, we can now add code embed. The moment you click it, it's going to pop up this field for us to paste the code inside. So here we're going to paste whatever we copied, and it's going to keep this comment up on. You can remove this comment or not. This is how you write comments inside HTML. And this field is an HTML field. Only HTML go inside. You cannot put your CSS or pure JavaScript inside. You have to enclose them inside HTML tags. So for example, and then second thing we need to copy from here is this CSS. But this is pure CSS. So if we just paste it like this, you're going to get this white out text. This means that it's not recognizing the language, how it's written. It's HTML and all this written the way the CSS written, it doesn't recognize that's why it whites out. So we're not going to do that. And to paste CSS inside HTML, you need to enclose them inside the style tag. And this is what it looks like when you enclose something in a tag inside HTML. Style with brackets around, style with brackets around, but the ending tag has to have a slash. For example, something we very often do is H one tag, right? And then you enclose them to H one, and this is a headline. This is how it looks like to put in a heading inside weblog. Whenever we put a heading, this is the reality in the background, this is what's happening. Just an H one tag, opening tag looks like this, closing tag looks like this. Everything inside HTML has to be closed out with a closing tag. If you don't do it, then it's going to give an error often and cause issues to make sure that it's closed out. So same thing with CSS. Once we have this enclosement, then we're able to put pure CSS inside it and just paste your CSS right here and you can make sure once everything is color coded, that means that it's now reading it correctly. It started to understand that we're telling here the browser from here onwards, read this as CSS because we called it style. And then it goes like, Oh, we got it. And then comments here again. These are comments. You can remove them if you want them, but it's a good guide for you or if you don't want any mention of whoever made it, I don't think you have to reference them based on the license they provide. I think it's free, and you don't have to reference and credit the author of those components. So here, this is how you write comments inside CSS. This is how you write comments inside HTO. Once that's done, click Save and Close. And when it's pure HTML CSS, Webflow will usually run it right away inside the designing. If it also includes JavaScript, then it's not going to do it right away inside, and it will either only work inside preview, and when you are in preview, make sure to enable custom code. And then usually also, if you have JavaScript inside, you will run JavaScript here as well. And then in rare cases, sometimes it's not even going to run in the preview, and it will only run in a published page depending on the code that you are implementing. Many and most of them, they will run here, but some that it needs to import different dependencies, then they're not going to run here because they will probably conflict with flows experience. As you can see, this is already working quite well. We can make some adjustments to it, for example, Let's give it some spacing here. And right now, let's say we want it to center, right? So this is code and Bd, and this is just a regular generic div block, and you treat it as a div block. So because it's a div block by default, display set to block, which means it's going to stretch edge to edge. So one way to make it not stretch edge to edge is either we can give it a fixed width and then center it using this or we can just give it an inline block. And the width of it will be defined by whatever content is inside. And in wide block, sets this right in the middle. Alright, that's all working fine, but what is this, right? There's no content here. How do we work with this? How do we change the text? How do we modify? How do we change the size or colors of this? Now, everything here now, because this is a code and bad, all of the styles, every content inside, this happens only through the code inside. Everything that needs to be changed has to be changed from here. We're only able to control the outside. Wrapper, which is this code and bad, and we can make different changes to it like a placement or a size, but everything else needs to be changed through the code. So for example, let's say that we want to make these images like a photosck. How do we do that? Well, this is where the AI customization comes from. We can ask AI to do this. So we can take this code. We can go to one of the alms. All three of them CloudGemni hachBT. They're all going to do this quite well. I'm using Cloud in this case because usually cloud is best with code, but this is a very simple code, and all three of them, they're going to do a great job at this. So what we can do is update this code to make the top card fill with the image. Shift Enter, so you can add a new line without sending the prompt. So you paste the code here, and now let's pin JGIPTClotimage. To give it an image, upload your images inside Webflow from the Assets panel from here, find an image on splash or paxels.com or wherever we usually find our stock photography. And once you upload them, and I have already some images here, and over this, get copy Link. And this link is going to be production ready link on our Webflow site, and this is a good place to load your images from and we are able to control our images from here. We are able to compress them, and this is a good way, and we know that our images are not going to disappear. So don't use a URL that is not part of our website. If it's like splash URL pexels.com, URL or some other URL, it might disappear at some point, and we don't have control over it. But if it's our images, we have control over it, and we know that if it's here, then URL will be working and will always be live. So once you have the URL, then paste is somewhere as well. So now we have instructions, we put all that code that we have already inside it, and we gave it an image, and it will understand that this is the image that we mean, and that's the code that needs to be updated. And let's see how it does. You can ignore this. I'm getting this. Today, I don't know. There's some sort of maybe issue with cloud, but it's still working. It's some tool call it's making that it's not able to access. All right. So now I'll explain to you what's happening here and what Clot did. Every LLM displays the resulted code in different ways, and this is how Cloud does. Usually, it will open up a preview here. If it's closed and if it just gave you code like this, it can be downloaded, but we don't have to download it. You just click on this. I'll still open this preview mode. And this is preview, but usually might not work, and in this case, doesn't work. It doesn't show things properly. So you can ignore that part and you can switch to the code, and this is the code that we can copy. We have it. And I'll show you in Gemini. I've done this already with Gemini and hachPT, so I can show you if you're going to use that and if you potentially have subscription on Gemini or HAHPT and you want to use those. No problem as well. This is how it works in Gemini. Gemini, in this case, doesn't give a preview, but updates the code and take the code from here, copy it. That works. And inside HAGPT a bit similar to kind of in between both GPT mix of clot and Gemini, you get the code, which can be copied from here. And from this switcher, you can preview, and it will give you the preview. In this case, it's working on right away on JajuPT. But same implementation. Now, once you have that code, you go back to the embed, delete everything that you had, paste this new code, and you'll see that most of the things are exactly the same. Style is still here. You can click Pretty FIT, adjust the formatting. And you'll see one of the cards card main has been updated and background image now it has a URL, which is URL or source of our image. And these things here, card is a class and main next to it is a combo class. This is what we usually do with, right? We have one card, which is the base class. So this is a common style that is shared by all the other ones. And then with the combo classes, card one, card two, card main, the modifications are made to other ones, save in close, and there you go. Image has been filled, and forgot to preview, so all working fine. And now we can potentially give more images to it and replace the other ones with more images. Let's say, copy link, go back to cloud on that, update other two cards with these images. That's one. And that's too. And then we did the job, click on it so we can copy. Again, it's not working here. Switch to the code, copy, open this up, delete everything again, paste new code. You can double check here as you can see, card one has now image background, image background, image background on all three of them, save and close and all that has been updated. And now we have images on all three. And if we want to change anything else, for example, if you want to change sizes, now we have to do the change sizes. Again, through the code as well, ask the AI to change something about it. But sizes actually quite easy to change because you'll see here being applied somewhere. You can see card stack has a size, and that is what's controlling the sizes of each card because then rest of the cards are width 100%, height 100%, so they are sizing based on the parent element, which has the size here. So if we make this bigger, it's going to be bigger. Done. If we want them to pop out a little more so we can see more images, do something else, again, with AI, explain to it, bring it in. I will work just fine. And that's it. Very powerful method to expand your skill and your knowledge on how to work with Webflow and how to expand your web design skills. In the next video, we're going to do a little more complex implementation of something similar from CodePen. 180. CodePen + AI: A in this video, we're going to do another custom code implementation. That's a slightly more complicated and more complex one. And we will also use AI, and we'll get a help of AI to modify the code that we're going to get. So I found this really cool accordion component. On CodePen, it looks really good. I love the animation, and this would make a really good component on probably any kind of website. For example, they could be used as testimonials, right? This could be avatar of a person, their name, their title, and testimonial, which potentially we add like quote here or this could be the quote. And then you have other photos of people, and background can be something else replaced. That's one way to do it. This can also be like features, you know, feature one, feature two, description, so on. Many different ways this can be used categories. It's just really nice component, and it can be used on any site. No, we can definitely rebuild this inside Webflow as well. But obviously, we'll take slightly more time to see this, look at it, rebuilt it, and find a way how to do it. Whereas when we are doing sort of rapid prototyping, we're testing ideas maybe with a client. Sometimes we'll be like, Okay, let me see. Let me drop this. You're working with a client, and you'll be like, How about this? Is this going to work? So you don't have to waste a lot of time in building everything and sort of Frankenstein building of a website is also a really valid way to do it. You grab different components from different websites. Find open source components on places like CodePen, and then you implement them bit by bit. That's one way to go about it, as well. So I'll show you how I found this on CodePen, so you understand the process of how this works. So go to codepen dot IO. And I'm already logged in on CodePen to do a search, it's going to ask you to log in. And once you log in, you'll be able to search. I searched for cards. And the difference between CodePen and UIers is that UI verse has a bit more usually simpler elements that are just CSS and HTML. That's it. The great part about UIVs is that they are easy to implement because they are clean. They are pure Javascript, sorry, pure HTML, pure CSS, and they're going to be right away working when we implement this and drop it inside code embed in Webflow. CodePen works a bit differently. CodePen has HTML, CSS, JavaScript, and also they can have different libraries and frameworks and dependencies in them. So they can be more powerful. That's why you can see a bit more. Some people even just drop entire lending page designs here and website designs. As you can see, it's entire pages here that are shared. Obviously, that's not what we want. We don't want entire page to be implemented. Sometimes games, weird stuff have, you know, interesting animations and components. So you can get good ideas that we wouldn't obviously implement the entire landing page. We would find some small components, really useful things like this, the cards, this as well that have good animation. So once you find something that you like, you go inside and you get this view with HTML, CSS, and JavaScript. And this is how every code pen will look like. You can resize this, and this is the code, and this is the playground, not the playground, but actually the view of the component itself. And sometimes you will have maybe just HTML and CSS and no Javascript and sometimes you'll have all three languages depends on the pen itself. Another thing to be considered here is that code inside CodePen might not be pure CSS or JavaScript and it's not in this example. This one is using preprocessor called SCSS, and this one is using JQuery library, which is not pure Javascript, and it's a dependency that is being pulled. Now, AI will understand this because they will understand how it's written and they'll understand that it's using these dependencies, but we can tell it to not use it. So what we're going to do is, as usual, just grab this code and then we'll go to one of the LLMs, and we'll tell you to adapt it to our needs. So this time, I'm going to use Gemini because I ran into the limits on Cloud, and it's a good demonstration to see how it works on a different LLM. So here is and the process is going to be same on all three LLMs. Now, what we're going to do here, we're going to tell it to repurpose this component, and I'm going to use a few keywords that you would need to use in such cases. And the keyword is, in this case, from code pen. Because CodePen will have some nuances, and it's a good context to feed to the chatbot. So they understand that, okay, we are grabbing this code from CodePen, and if there are some nuances there, it will kind of include that and it will know on its own. And then another thing we're going to tell it for Webflow, code and bad. And that's another nuance we do need to tell because if it's a Webflow code and bad, potential, hopefully it will understand we want this to be a one for HTML output that we can paste inside, and we're not building actually an independent environment when we have different files communicating with each other. And then we're going to give it tally to make it a vanilla implementation. And that's another co word. This is basically a technical term to say vanilla implementation or vanilla. Which means that no J query, no react, no CSS, we want it to be pure regular good old JavaScript and CSS. That way, it will work in any browser right away, and it will work inside Webflow, and we don't have to pull any dependencies which potentially could conflict with Webflow environment. So we don't want that. We just want pure JavaScript and CSS. So it works out of the box. Another keyword that we want to tell it. It's another context that we need to feed to the AI is that we are doing this on an existing website. So we need to make sure that it understands that context, that this is just a little bit of a component that we're going to paste inside our existing website. So we will tell it. It needs to work on an existing website. And it has these references here. There is a link to the author. There is something from the author here as well, so we can get rid of this. We don't need to credit. This is open source, and we can use it. We don't need to credit the authors of the code pent, so we can just get rid of it. So remove any refers to authors. And now we start pasting the code, grab HTML, paste it, shift enter, grabs CSS, Shift Enter, wrap, JavaScript. Shift. Well, it's already there. Faced it. And if you have paid plans, this is a bit more complex. So that's why paid plans and paid higher tier models are going to do a lot better job here. And all three models usually will allow you even on the free plan to play with more smarter models, like thinking and P. And in this case, I will probably try thinking because P will hit the limit very fast and in case we want to communicate with it. Um, thinking might do a decent job already. So I'm going to use thinking. You don't want to do fast. You will probably do the fine job as well, but I want to give it to thinking, so it starts to consider things that I told it about that it's a Webflow code embed, that we want it vanilla, we want it on the existing website, so it just doesn't spit out right away. So consider those things. So that's on Gemini on Cloud you would select like Opus higher models, and same thing with Chacha PT, higher thinking models. And let's see this time, it's going to take a bit more time since we also tell it to think a bit deeper about it and give it some time, and let's see what's the output going to be. All right. So it finished it. So let's see what is. This is the plug and play. Good. We do want it to plug and play. I have converted S CSS to Vena. There you go. I understood that. Replaced the JQuery with vanila javascript. Great, great, great. That's what we want. And removed all Author credits. To use the Webflow. In Webflow, simply paste the entire block below into a code embed element. Great. Okay. So it gave us a full code in one go. It didn't give us like HTML separate, CSS separate, just gave us everything on one go. That's exactly what we want. And we can just copy the whole thing from here and let's see how it's going to work. And in Webflow, again, we're going to add code and bad and paste everything here. And let's give it a quick glance. Let's see. So script is here, good. That's HTML, all of that. That's CSS wrapped nicely in the style tags. And it is pulling, which is font awesome. Okay, so it's using one dependency that this code already included, which is the icons. And now we could potentially not use this dependency, get rid of this from the top and feed the LLM with icons of our own. So we can give we would upload, like we did with images, we would upload SPG icons and we would tell you too, replace icons with this and this and this SPG icons from these links. But this is fine right now. We can definitely use this. It's a free Font Awesome is like a free icon set, which works like a font, so you don't have to apply every single icon using an image, which is a very handy tool where you pull the entire font here, and then you are able to reference them inside the code. Save and close, and let's see how it works. Alright, I think it's looking pretty good. Let's give it a test. Working really well. Nice. There are some issues here, as you can see, the text is a little bit wobbly and center align, but other than that, everything is working fine. Now, if you do this on your own and you have some other issues, and you might encounter this because the AI is not predictable. You have to sort of guide them correctly. And depending on the model that you use, if it's a fast one, you might make some mistakes. If it's a better thinking model, it will usually do the best job. So if you have issues, a screenshot. So you would basically take a screenshot like this and you would tell him, Okay, this is misaligned or something, and how do I fix it? And then you usually will give you an answer, and then you will be able to apply it. As long as the issue is not within Webflow or something coming from the Webflow, which in this case, this actually is, and now I'm going to show you where is that coming from. Now, because we have this center aligned, it's applied on the container, as you can see center line, that will cascade down, and all of the elements inside will inherit this. So as you can see, the code and bed element is inheriting this from container six. Alright? So it's center align, which means if code embed is inheriting, it will mean that everything inside, the font styles inside will inherit this in return from the code and bed unless they are explicitly left aligned inside, which they're not. So what we're going to do here is we're just going to select code and bed and just change this to left align, and that's it, and that should work. And there you go, that has worked. And another part that we can test here is that as you can see, this is a bit of a gap in here, whereas where is our original original didn't have that gap. It's nicely centered. So what we can do here is we can I could screenshot it, but I think it's going to understand if I tell it. It's usually would be nice if you know how to say it. If not, you could also skim through the C code, and you might be able to actually understand it based on what is want because this is human named classes, or human named those classes. So you will understand shadow, they named it option active. You understand that, right? Option active label, probably one of those labels underneath, info, okay? And if we label icon. Okay, we understand. So that's the label icon. We know where the icon is and label info in color white. So that's probably text, info main bold, Ifosab and also easier to see because you can just look ski for the text, actual text that was being included here in the preview. So this blond key sis, I don't know what that is, but as you can see, we can find that text inside code. And then we can see that, okay, the class is main classes sub here, so it's info main and sub. So we can reference that and tell the label text info main and sub have a bit of a white gap that. They are not as snug as they were in the Mginal component. And right, let's see what it tell us. The gap is likely caused by the white space pre property preserving the line breaks, blah, blah, blah. Replace label info. Okay, so it didn't update the entire thing. We can tell you to update or we can see if we can easily replace label infosection in your CSA with this titan version, label info, all of that, right? So we can find this exact thing. I could also tell it just regenerate it again for me. Google has trained it to not regenerate the entire code from scratch because it's going to cost them more compute power. So it's being lazy and it's telling us to just do it yourself, which we can do and we can say, Okay, it's telling us to replace label infosection in your CSS with this titan version. Alright, we will find label info, info main info sap. Label info. We did find label info, info mean here, and info sub here. So that means that we're going to have to they're not in one go, so we're going to have to replace it here. And then now infomin we already have that. So let's remove this from here. And info sub, it's redundant. This is the old version. This is the new version that we pasted, so we remove that. And let's see, fingers crossed. You never know with the AI. Not bad. Working just fine. Tighter spacing. Pretty good. Another modification and fix we might need to do is responsive. Let's see how they look like on different sizes. This looking fine here, and here already getting a little bit tight. It could work here. Let's see if it's going to work on the mobile. And on the mobile, we only have one, and we don't even know what's going on here. All right. So we'll go back to Gemini and we'll tell it make it responsive. And hopefully you will come up with an idea of what to do with the responsive. Potentially, it could do a vertical stacking instead of horizontal. Obviously, on the mobile, you can't make it horizontal, right? So there's no space. So let's see if he she, whoever the Gemini is, will understand how to make this responsive to make this response we'll switch the layout from horizontal to vertical stack. Nice. I have also kept the titan space good, replace block in your Webflow and embed but really lazy these days. It's not giving me the entire thing. Now it's telling me just replace the style. Might as well give me the entire HTML, man. What's wrong with you? Alright. Let's go back. So now it's telling us to replace the style, right? It told us to replace the style tag block in your Webflow embed with this. So this is our style tech. This is where it begins, and that's going to we have it selected, maybe we highlight where it ends. Doesn't highlight. So this is where it ends, as you can see, closing style. So what we're going to do is select all of that delete that and paste it. If you don't want to do that, just ask it to regenerate the whole thing and give me the entire HTML one more time. And let's see. Save and close. Let's see if nothing was broken. It's not good. And there you go. It's working vertical. Here, it makes sense. It fits. Here it doesn't fit anymore, and it's good. I understood that here we don't need to change, but on the mobile, we do need to change and we can switch it out. And obviously, this is now my page is not style. I need the padding here. That's why it's not we can do that, for example, give the section on heading, so it's not being squeezed here. And now they're not squat with the edge, and that's working all fine. It's pretty good. In any other modifications you would want, you would tell it to do it. Replacing images, you would ask it to replace images, or you can also do that through the code. You can easily find the URL of the image. HTPS this thing and you would copy that from here. One of the images, you would copy that, copy link, and then you would just replace that inside the code or ask AI to do it. That's all and hope this was fun and not too complicated. And if you hit some issues, just let me know in the Q&A and I'll help you out. It is definitely not something that 100% of the time will work out. Every code pen has its own quirks. They are using different dependencies. They are using different properties that might be supported everywhere. And every LLM and AI will also process it a bit differently. And sometimes same LLM and AI on Tuesday, it's going to do this, and on Wednesday, it's going to decide to give you a completely different solution, right? It's not 100% guaranteed that every solution is going to be the same. But it is still worth trying, worth experimenting with this, especially today. AI makes it so much easier to expand your skills and expand your web design and Webflow skills. This is also transferable skill. Doesn't matter if you're doing this in Webflow or any other web design tool, or if you are coding it by hand, this is saying this is not something to do with weblog. Code that we are getting here is HTML and CSS code that every single builder, every single AI builder or non AI builder, what WordPress everybody uses exactly the same thing. So HTML and CSS everywhere. So it is a good thing to learn for you. And if you do have time, I would strongly recommend to take a very foundational, basic HTML since CSS and JavaScript course, super, super foundational, nothing complicated for you to just gain literacy on how these things are connected to each other. Not that you need to understand every single property and everything, how to make but to understand the text, to understand how HTML communicates with CSS and how CSS communicates with HTML and how JavaScript is played in all this and how it's done within one HTML file versus three different files of HTML, separate files, CSS, separate file, JavaScript, separate file, which is usually how websites are compiled and built. So it would be a really good foundational knowledge for you, and it will definitely help you out and increase your skills and make you more advanced user of both Webflow and just any other web design tool. 181. Photoshop: How To Create a Stretch Crop: All right, time for some Photoshop. Tutorial for most of design, Figma is sufficient, but in some scenarios we can't do without Photoshop. This is one of them. If you don't already have Photoshop, you can get a seven day free trial. And if you want to buy it, it costs about $10 per month, which includes Photoshop, light room, and all Adobe phones and a 20 gigabyte of their cloud storage space. You can download the trial from Adobe.com slash downloads or just Google Photoshop download in case you have already used up your seven day Photoshop trial in the past, then you can try affinity photo instead. It's a very good alternative to Photoshop and most of the interface and how it all works is quite similar to Photoshop. I've included the link resources, it has a ten day free trial, although I won't be demonstrating this how to do in affinity, but since there are two very similar, you will probably figure out how to make it work inside affinity as well. Okay, back to Photoshop. After you go through the installation process, this will be your initial screen. Click open and select the photo file. I've included this image in the resources of this lesson, so you can work on the same photo if you want a quick lifesaver tape on Photoshop. When I first started using Photoshop, I would end up losing some tools and options. Frequently, I would watch Youtube tutorial to learn something, but then I would not be able to find a tool that they were using in the video. Photoshop has a lot of shortcuts and little options where you can easily close some tab or remove a tool and so on. I would end up with toolbox gun, no layers panel, and no idea on how to put them back. So I wouldn't be able to follow a tutorial anymore because the tool isn't there, nightmare for any beginner when you are trying to get your hand around this new software and learn a lot of things at the same time, I would lose a lot of time figuring out how to put it back. Here's the trick on how to return everything back to normal. In case you mess up something, go to this icon right here and select Essentials. If that's what you already have selected, then click reset Essentials. And this will return the workspace to the default just like it was out of the box the very first time you installed it. This will include two extra tabs. This here is Photoshops guide tutorial of some essential stuff. I'll recommend going through it later if this is your first time with Photoshop. Okay, I don't need these two tabs right here, so I'm going to close them. If this method doesn't still return everything back to normal, then that means you have changed something in the preferences, in that case, go to Preferences in Windows, this is under Edit Menu, and select General. And click Reset Preferences on Quit, Restart Photoshop, and everything will be back to normal. Keep in mind any preferences that you intentionally changed in the past that will be gone to. All right, back to our photo. Often you find the right image of your project, but it's not quite the right size. This image, for example, will make a great background photo. It's clean, it's simple. It has great color contrast, but it has one problem. The separation between the beach and the water cuts right through the middle of the picture. Neither side is wide enough to host our content, but if we could stretch one of the sides a little more, then we would have a perfect arrangement. Luckily, we can do that in Photoshop. Inside layers panel, you'll see this lock on the layer. This means the layer is partially locked and in many ways won't be editable as you'd expect it. Just click on this lock to unlock the layer. Now select this crop tool. You'll have these handles around the image, drag the side you want to create the stretch crop on. This just extends the boundaries of our artboard. Click the checkmark. Once done, so it commits the change. Now select this rectangular marquee tool in case you see something else here, right click on it. This will open up all the other tools that are part of this group. Now drag and select the part that you want to stretch. Make sure to select parts that don't have any detail on it, something that is already blurry or uniform. You can't do this with people or objects. This can be done only on backgrounds and blurry parts and so on. I select Extra on the left side just to make sure the entire edge is selected. Once it's selected, go to Edit and free transform. You can also press control or command, just as it's shown right here. Now just drag the left handle and stretch the image as much as you feel is right. And then click the check mark again, this commits the change you are making to the selection. If you have extra space here, select Kroptolgain and crop it out. Now we've got an image that has a good amount of space, so we can put our content to save that image. Just click file, Save As, and select J. That's all. 182. Photoshop: How to Cut Out an Image (Unboxing): counting out an object from its background is best down in photo show or affinity photo. Are any other similar software, which is for photo manipulation? Let's begin. The most important part of successfully cutting out a subject is actually picking the right photo to things that we need to pay attention to. Are the background and the position off the subject? Ideally, we want a background that it's plain and contrast really well with the subject. Cutting out subjects from difficult backgrounds can be tedious work, and the last thing you want is to spend half a Knauer to cut out a model plight into your desires and realize that the model is not a good fit. Good design is usually a result off a lot of directions. Imagine Iterating between three cut out of subjects, sending the final version to your client for their review and then climb comes back, saying that the model isn't really their target audience, and they want someone a little older and dress a little fancier. That's going to drive you crazy. If cutting out subject is not a quick and straightforward job. The second important, in fact, is the position off the subject in the photo, cutting out a model who is sitting mood and make a lot of sense. We would have to recreate the same position you are designed, so we would have to, you know, make the model sit down on something which is very similar size and shape in our designs as well, and that's too much. Need less work. Standing front facing positions are the best for cutouts and all camera angles like these are just asking for a lot of trouble during the design process. Because camera is facing her from sideways from the top thin. The space in which you will put her has to reflect that, too. It's doable, but you will bump into obstacles and limitations for your designs. These photo, even though in a plain background it's still a bad choice, ignoring the part when she is, you know, facing away from the camera because she's wearing a white top and in front off a white background photo shop will have hard time detecting the edges between the background and the sweater on Splash usually is not the great place to find such photos. Most of the photos here are taken in real life scenarios outside of the studio, which is not a bad thing. It offers a good selection of stock photos that don't look like stock. But for isolated images, the best place are paid stock sides, For example, big stock dot com. If you add a keyword, isolated tow whatever you are looking for, it will give you mainly studio shots on plain backgrounds. These photos will work the best for cutting out the photo show process will be super simple , and the camera angle and position of the subject will be excellent for your work. This is another paid stock side photos dot icon ST dot com. They offer a selection off photos, mainly on plain backgrounds. It's free for personal use, so I'm going to pick a photo from here. This is an excellent photo work with for full subject cutouts. The background is playing in single color, and there is a clear separation between the subject and the background. It's an easy work. You can pick this exact photo to follow along or choose something else. I'll link the image and the resources. I'm not going to demonstrate background removal on difficult photos. I don't even want you to learn how to work with difficult backgrounds. This way we will make sure you get into the habit of looking for the right photos. When it comes to isolating the subject for difficult photos, I do something else. I only cut out a small part of the image. I will demonstrate this later. Okay, so let's open our image. Unlock the layer by clicking this lock icon from the tool box on the left shoes. Quick selection toe hovering over a tool will tell you what a days this is. The tour will used to select the model and isolate her from the background. Now select the brush options through the size that is not too big or not too small, so we can easily select tomato and set the hardness to 100%. Now start selecting the model from the center and slowly cover her entire shape. Make sure that those animated lines are surrounding her edges and nothing else to select more precisely, zooming very closely by pinching your touch fat or hold on out or option key while using your mouse wheel. To get a better control over your selection, increase or decrease your brush size. There's a shortcut to this so you don't have to go to the brush settings panel all the time . Just click square brackets. Key left. One decreases the brush size and the right one increases it. If you feel like something extra, hold out or option key and you'll see your selection tool now has a minus on it. When you release out, it goes back to plus so plus adds to the selection and minus subtracts. Hold out and start removing areas that you over select it if you make a mistake and you want to go back under auction and photo shop actually works a little weird. I remember it was very annoying for me in the beginning. It still is because it doesn't work like you would expect it. So the regular control Z or commands a young Mac goes back and forth on your last action. So if you want to under the last action that it works as you would expect. But if you press on it again, it will redo the last action. So pressing on it a lot of time just goes back and forth, drove me not first time I was messing around in photo shop. The actual on Do see here in the Edit options is called Step Back Board and has a shortcut with an out option in it. This is your usual under and behaves as you would expect it to behave in windows, which probably should be control. I'll see, but just in case, double checks and just go into the edit and then go to step backward and see what's the shortcut next to it. Check your address and make sure you didn't miss any spots. Don't worry too much about the loose hair. Just select the main line and then we will fix the hair later, after you're done selecting click, Select and mask right here. This is actually available on the newer Photoshopped releases. If your version doesn't have this, then look for refine ach! It works almost the same way, but this new select and mask future is more superior in here. We are going to clean up our selection so we can get the perfect result. Here's another important Photoshopped tip. Make sure you have a correct layer selected. This is the layers panel, just like fig MMA. If you have more than one layer. Make sure to cite the one with the photo on it. Okay, so in here, by default, that transparency is decreased. It's a transparency off our background and everything we haven't selected sliding. This doesn't affect how our cut out will look like it's a guide for us. 0% shows the original image and full and 100% heights. Everything we have not selected. It's helpful to receive with Mr any details. Let's increase it to 100%. As you can see, there are some imperfections on her hair. The pink background is passing through her hair. Let's put her on a white background from here to better see that eat house change their passage to 100%. Here is well, this time it says rapacity instead of transparency because the white background is on top of the original background, So 100% opacity means it's 100% visible. Don't worry about this too much. The hair needs some fixing. Also, if we zoom in closely on her skin, the edges are jagged and unnatural. There's not a good standard to use in any design. Good design looks perfect when it comes to small details like this know all discolorations , and the cat out should look smooth and natural, like that's exactly the background she was taken on. The ugliness off most cutouts comes out from the edges when an just aren't well refined. It's noticeable, it looks like as if someone actually took a really paper magazine and then with scissors cut out. The model from their luckily photo shop is absolutely incredible. And fixing this to fix the edges off are cut out. We need to select a refine and brush tool from here. It's the 2nd 1 Keep your mouth over it for a second, and it will tell you which one it ISS because these three looks quite similar, just like we did with the other brush size, the brush from the options panel or by using square brackets and slowly start brushing over the edges off her hair. And look at this. What is actually happening here is that we are telling Photoshopped to look beyond the edges off our original selection and see if there are any parts that look like they belong to our selection and at the same time to remove pixels that look like they are part of the background. That's why that Ping has disappeared. Using the opacity slider, check other parts that have been missed in case you remove a little extra, just like other tool price on out or option. You'll see it's a minus sign. This will restore the original edge and then brushed over again while you keep holding on the out key. Don't worry, it's not going to subtract from the original selection. It's basically undoing what we just added. Her hair looks decent, but there's still some pink collar falling on her edges Will remove this later. Let's check the rest of her edges now. We can, of course, go around on her entire body with this refine ach tool. But there is a quicker way to do that on skin and parts that are quite simple and uniform. Unlike hair that's done through here. Edge detection. It's the same concept as the refinanced toe. With this, we can tell Photoshopped to look beyond our selection and see if we have missed any parts. It's in pixel, so one pixel means look one pixel after the selection and add any missing parts. Pay attention to how the edges movements out as we increase two pixels. Same dissent in this case, Smart radios means instead of using a uniform to pixel radios everywhere, it will use custom value depending on the edge. It's useful if you're using large values, but I like to fix odd. Adjust manually with refine edge tool. Sometimes you'll notice that you have some extra patches like this when you were making the selection, or you have actually missed some spots going back and fixing the selection after putting so much work is going to be heartbreaking. Luckily, we can add or remove the spots right here with a brush toe. As usual plus sign will add in any pixel C click on you will feel this works a little different than the previous tools that we used other two tools. They do calculations in places where you press this one doesn't you don't base to whatever you press, and one final step we need to make is to remove that pink glare from her hair that can be done automatically from here. Select decontaminate collars. Give it a moment and Walla. Now most of the ping from her hair is gone. What amazing job it did do. This step is very last because if you have the selected after every click you make, this will recalculate again and again will make things much lower. Although something funny happened here, let's see if we can fix it with refine edge tool. Okay, God, actually still chose a little tricky photo. Ideally, choose a photo that has a white or gray plain backgrounds. Cold backgrounds do end up mixing with the edges. All right, now, let's output are cut out. We have a few options here, the bastards to choose new layer with a layer mask. But this does. Instead of cutting the whole thing out, it will copy the original photo and apply a mask to it. This mass will hide the background and everything we did. This is the best option because if we notice something else and want to make any changes, we will be able to. With the new layer option we want, the background will be gone forever. Inside the layers you'll see. Also, the original photo is still there in its below, but disabled, so it's not visible. It bothers our copy with the mask. Apply to it that black and white Sylar It is the mask or gets The final step is to save our file. First, let's save This is a photo shop file for any future addicts. The rest of the design will be doing in fig MMA. The Photoshopped file can't be important in Sigma, so we have to use PNG file. PNG is the one that will keep the transparency of our cat out. J pack isn't going to work because it will fill the background with white collar. When we export this into PNG, any layer that is he don't will not be included in export. So you don't have to delete this layers. Just hide it. Also, I would like to crop the extra space, select the crop to and dragged the address, go to file export and quick exporters. PNG. Now we can place this image in fig ma and pick any background we want. And that's how you do cutouts in photo shop 183. Photoshop: Stick Out Tutorial: Now I'm going to demonstrate how to cut out on Lee. A small part of an image is always the important part is choosing the right image. You can do this with any photo you can stick out, ends off the object like table corners. Hands, legs had branches. And so any object that has a prominent tip first up in this process to define the container of the image. The frame in which it sits because you're sticking something out off that frame. If you're going to use the photo as a full background photo than address off your frame, are actually not visible. You can't stick anything out. I'm going to work on this image. In this tutorial. I have linked the same image so you can follow along. We can easily stick out that year off the dock. That means our frame has to have a top border if he stretches from top to bottom off the screen than this image won't work at all. But if I use a frame like a circle, for example, then I can stick the year out without a problem. So let's frame the photo first, just like we're doing fig Now we're going to create a mask. We're going to use the same asking to as we did previously in the cutout method. But this time, instead of selecting the dark from the background, we're going to select a circle part of that dog in the market. All right, Click on it and select the elliptical market hall. This is another word. Select. Oh, I don't even know what Marquis means. Not by dragging. Select the face off the dock. Hold shift while you do this so you can draw a perfect circle to get a better handle. You can press on space bar to move the selection around. You don't need to get this perfectly right now. We can always resize and reposition the image off the dog. Later, as we did last time. Click, select and mask up here. You're already familiar with this mask editor, but we're not going to add a hear anything. Actually, because we need a perfect circle mask. So right away go to output options and select new layer with a layer mask like we did last time There. Now we have the same arrangement as in the cutout method. If you need to reposition or re scale the image inside. We can do that similarly, like we do in Fig MMA. Select the move tool first. By default, Mass group is locked so you can move the image separately. It's moving an entire group to move just the image or just a mass quick on this link. I can hear it will, unlike the image from the mask, and now you can move them separately by selecting either the image or the mask from the layers list. You'll notice that mask in Photoshop is a defined space, as it was defined originally. That's why we have this extra bits showing here. If you end up with this extra bits after moving your image around, you can just crop this out with a crop toe. By the way, Photoshopped has this very handed toe called History Panel. Instead of undoing on and on, you can go directly to the staff that you want to undergo. I love this history tool, and Photoshopped makes undoing much easier. Okay, so repositioning image inside is easy. Just track damage around but to re scale the image so like the image layer and then goto adit and free transform. Now you can grab the handles and resize it as you wish. Hold, shift, toe lock the ratio here in my head. I'm imagining what part I'm going to stick out so I can position the image properly. Now that we have prepared our mainframe in which our image sits, we can now stick that year out of it. To do this, we're going to basically cut out a piece off the dogs here as a separate layer and place it on top off this existing layer. So the right click on this mass group and duplicate the layer. Now right, click on the mask itself. Not the entire layer, but just a mask and click dilate layer mask. Now we have the full image on top of it. If we cut out a chunk off the year from this full image and remove the rest, we will get the exact stick out effect would want. So to do so, we do the usual cut out method, just like we did in the previous lesson. Grab a quick selection tool. Set the right brush from the options from here, make sure you have selected the brush with the plus sign, not the minus. Set the hardness to 100% and set the right side so you can select that year easily turn. They'll pass it down to see the edge of the frame and select accordingly. You can select more off the image on the bottom because it's not going to do us harm. It's just going to be sitting on top of the existing photo. Anyways. That looks good. Now click, select and mask. We're seeing both of the layers. Here are frame layer, and just a year later, let's change the background toe white for now so we can refine the edge of the year. Remember how to refine badges, Select the refine edge to and go over the address. Or it adds, in any missing hair or any other missing pixels. As I mentioned before with this story, we are telling Photoshopped to look beyond our selection and detect any missing pixels. You don't have to refine the base off the year. It will merge perfectly with the background image, Now go to output settings and select new layer with a layer mask and hit OK, there. That's our year sticking out. Let's put a white background on this so we can see the results better. Create new layer and click the new feel. I can hear select solid color and choose white. Now drag that layer below everything. If you're going to use a different collar in your actual designs, you can double quick on the field and change the caller so you can visualize this right here in a photo show before you export the final result. For example, when I put this on a dark color, we can notice that there's some extra glare behind the ear. Too bad I didn't check this one refining the selection, but we can still do some work on this. Even after the mask has been applied, the mask is still edit herbal. If we zoom in on the Mask lair, you'll see we have black and white parts. The white parts are visible part of the mask, and black parts are hidden part. That's why the white part has a shape off the air. If we paint wide on this mass, we will show more off the image. Let me demonstrate if I select a regular brush tool and draw on it with white paint. It's going to show more of the image, and if I drove with a black paint on it, it will hide whatever is already visible to switch between white and black brush. Click on this arrow icon on top of these black and white boxes. Whatever is on top is the current color of the brush. There's also a shortcut. You can hit X on your keyboard, and then we'll switch between the two. Okay, now we can remove the extra glare from behind the ear. I'm going to adjust the brush to make it smooth and feathery, so I dont create any hard edges. In this case, I'm going to decrease the hardness completely and even decrease their passage to 50%. This way I will brush over the parts and in a smooth and controlled manner, and that's a better result. It might not be ideal on a black background, but works quite well fast to refine this during the masking face. And don't forget to check the view on the black background. If you plan on using it on dark backgrounds, the last step is to export damage we're going to export in PNG with the transparent background that where you have more freedom to choose backgrounds directly in fig mongering actual design process. Hide the background, crop out any extra space and under file export, click quick exporters PNG. And there you have it. This can be now important inside Sigma and use on different backgrounds.