We might want to go into the cog and make this an H2, a heading two, so that hierarchically our pages make a little more sense. But, with that weve completed our first pass on the homepage. Webflow has scaled all the elements on the page, so we can simulate what it will look like on a larger breakpoint. [Sara] Okay. We're going to move this. There's probably a middle ground. But crafting a compelling user experience and flexing your creativity goes far in distinguishing yourself from everyone else. With our container down here selected, lets go up and make sure the container class is applied. And here's how that works. [McGuire] Okay. We can go back and see it's now 17.92. Except for McGuire and Sara, who are, yes, leaving the studio once again, without me. Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development. We have other projects here. Lets do five hundred pixels. Now, out of preview mode, one thing to note here is we can open in this case when we were demonstrating in preview mode, it's always going to open in a new tab, but the behavior on the published site is going to allow us to open either a new tab or if we want to replace the tab. It's a little bit jumpy. Share your finished site on Twitter using #webflow101 and well be sharing our favorite sites on social. For everything nested inside each of those sections, we have an H3. Now if we go into preview mode, we can see it follows, but with a little bit of a delay. Im a bit distracted. Lets do the first one. And, for organizations sake, lets make sure as were making these new classes, as were changing each of these items, were keeping things organized. So, go back to 45. If it was taller, it would create an oval this way. That's good. We could remove that maximum width and instead use the maximum width on our Div block here. Twelve eighty, fourteen forty, or nineteen twenty, lets add nineteen twenty for much larger displays. So in project details, if we want this to be more specific, we can put together using our collection, we can put together a more descriptive version of text. We could go in and go to our Collection item and change that from thirty to maybe ten as well. Let's say I'd love to hear from you! Let's go to Mobile landscape and look at the section padding there. So with the first one selected, in fact, it might save us time, it might be easier to edit this if we select our Div block first. Why are we doing this? So let's turn on set as initial state. We've double clicked to edit our symbol, and we're going to wrap our recapture element with a Div block. Now it's behind each of these collection items. We're getting AAA, 7.81. Let's do the same thing on our contact page. We can put it right up here. Thats because changes start on the base breakpoint, and they cascade down to smaller devices, and they cascade up to smaller devices. And if Im finished? We could also undo that, and instead add padding on the sides. So, lets do a couple things. So lets click and drag name into that Div block. Project Info. Leave people with something that theyll remember and want to come back to. Here's what I want to see. "Dark cloud hovering over sea." Lets use unitless again, maybe one point three hyphen, one point, four, five, that looks pretty good. Let's press command K, Div block, and we can set its width by default. And, for this Section were going to drag in a Div block. Lets press Done. Now, notice how it does not match the container in the nav bar, or the container in here. Learn how to build a portfolio in Webflow in 21 days, Have a strategy behind the projects you feature in your. And I'm hoping to use this platform to increase the size of my following. It'll push project client preview to the bottom, inside the space available in our link block. One, this H2 is not aligned to the top of client. We'll call it, password-protected page, press return. Well go to the add panel, and from here, were going to drag in two things for our primary structure. We can get the alt text from alt text for project image. What do we expect when we press play? that'll make a circle out of this. And, what flex box allows us to do since we set it on the project details, the Div block that parent, we can select any children of that parent,. That means when we go into preview mode and we press view project on anywhere inside this pane, it will take us to the architectural website. [McGuire] All right. Let's save that field. And then inside of each of those, we want to add a text block. We can actually select, with that text block selected, we can go down and decrease its opacity a little bit. So for our secondary heading lets decrease that maybe to twenty pixels or even ten pixels might be okay, fifteen. If theyre visiting this portfolio we want our information architecture, all the content on the site, we want it all set up in such a way that it makes it clear what she does , [Sara] Above the fold, right in the heroes section., [McGuire] We wanted to show them the quality of her work --. Lets go to the add panel, well drag a grid, and well place it inside the Section and inside the Container we just created. That means if we go back to project heading, and we make a change to one of them, so if we change the size, itll still affect both. Let's check that. You remember we did the padding 60 on the product details? Save changes, and of course, we want to publish our site for changes to take effect. Let's go out of preview and let's build our interaction. And we can do this part in Project Settings as well, under the Hosting tab. A portfolio website gives your work visibility, putting it in front of the people you want to see it. And now it's inheriting 60 CH. 100%, that means we're at the bottom of the page. Well drag in a section element, so this is a hundred percent width, and well drag in a container. Portfolio Profile Resume UI Kit CMS Ecommerce Portfolio X is our ultimate portfolio Webflow Template & UI Kit created for top-notch designers looking to launch an amazing website easily. And there's one more trick here, we can pull that project image, the main project image in dynamically. Wow. We're going to keep it like this, megangarciaportfolio.webflow.io. So how do we set a different dimension? We want that to stack on top of the glow. Learn how to make your homepage responsive on tablet, mobile devices and even larger displays. This is an H2, if we select that, it says styling rich text. And it covers everything from getting clients (including pricing your work, client proposals so much of what weve learned over the years in growing our businesses) And it goes all the way through the journey of this kind of work: an entire unit on content strategy, another on the principles of design, and going through the entire site build and launch for a completely different entirely fictional client from the perspective of a freelancer. So we're in our base breakpoint. But a lot of times, that means our portfolios are filled with the kind of work weve happened to do; not the kind of work were wanting to do (the stuff that inspires us or motivates us or introduces a new chapter whether thats getting clients, looking for a new job, getting industry recognition whatever it is). Of course, that's our main brand color on FDFDFD, which is 5.66. And a good example of this would be the contact page, the Paragraph does have a lot of texts we read from left to right. So, what do we add inside the Div block? And, we can change these things down the road, but for right now, were going to move into one of the most exciting parts of this entire build: a client project section that's driven by visual CMS. And when we make a change in here, lets say, we add a new button, and another button, and another button, notice how whats happening up here is reflecting any one instance of that symbol. Actually before we move onto that, lets double-click the Submit button, lets make it take up the full width. [Sara] Okay. Instead, we're going to do a rotate and on page load, we're going to rotate this. They look pretty good. Let's do twenty or even thirty. Ctrl+Enter Hero image. And the reason were doing this is we want to increase, we want to increase the size of that Brand Block, this clickable link so that when people press it, it takes us back to Megan Garcias homepage. We're going to do this backwards and that's okay. Lets turn it to display none for a second. Now it doesn't matter for SEO settings how we do this, it doesn't matter what break point we're on but we're going to switch to the base break point just in case we make any other changes. Of course we cant see anything right now, so lets change our background color to a lighter color, lets do kind of a light grey color here. Share your work. We'll just paste in, and this is saying a few things. So Hillside Calm is pulling from the client name, project type is web design, they all say by Megan Garcia, let's check the third one prototyping by making Garcia. Let's change that to five seconds as well and press play. We could select frosted glass and just make sure to set it to flex box. Maybe we want View Project to be at the bottom, so with this Div block selected, lets name it. Maybe the spacing in between each of these looks good at thirty. And if we double click in here, we have the H2. Make your project pages responsive to beautifully showcase your projects on all devices, like the NES. So let's make sure it's position is set to absolute. [Sara] Awesome. So if you change a value in one of these, make sure to change it in the other as well. We're going to apply a slightly different class to the bottom one. And when we do this, this will be an element trigger. Heres what happened. That looks good. This way in our search result preview we're getting all of that information, it's dynamic, it's pulling in the description in addition to what project type was done for which client. [McGuire] You're talking between the H2, the Paragraph, and the collection list., [McGuire] Okay. [McGuire] No, it did not. In fact, let's delete that. We can always click over to make our profile public. Remember we created a larger head in class as a duplicate. Well put that above. So, look at the space. So let's check frosted glass and bring it down to, let's do, 55. We set its width and its height to 100%. Let's save our changes and very carefully read this dialogue box, which is clearly stating that we have to make sure all our forms include the reCAPTCHA component before we enable this, as they'll fail to submit, unless we have the reCAPTCHA element properly added to each form. We have an H2, a heading two, and we have a paragraph, so lets do that. We do have something to catch here, which is right now, it's getting the URL from the project link. And as the final step, let's go back to our large breakpoint 1920. We can click, and we can see that its value is inherited from the Nav Link. So we can go over to interactions and this'll be a lot quicker because we've built the interaction before let's go in and add an element trigger. [Sara] Pumpkin Spice Latte? The current project is social network. The one on the bottom left there, it looks great., [McGuire] So we'll click this. So, we're putting button text right in here and we can change this later. Start from scratch or begin with a template 2. Again, with links like this, we can always choose to open it in the same tab, this tab, or we can open it in a new tab. And we'll go back to our Style panel. We're doing this so we can make changes to all the images at the same time. Again, this is located in reCAPTCHA and we're on desktop. [McGuire] Tablet breakpoint. Or do you wanna match the bottom to 30?. We can click the circle image. Let's do the same thing with our Y actions. Instead, we're going to press the plus button. Instead, we would have it bound and put together in a professional-looking booklet. Overview. We can use a combo class, lets use other, so we can remove that margin, we dont have to use the same margin we used on the original project info. Now we have this kind of side-by-side design. So, back to the base breakpoint. Let's check our password-protected. Where our H1 is clearly the big headline, the H2 is on a second level, and each of these H3s is on a third level. So lets open this up, click that text block, and we can set its top margin to auto. By switching this to relative, it's automatically placing itself on top. So let's escape from here and go back to our homepage. Maybe we do illustration; lets add another option for web design. [Sara] Normally you talk more. So how do we do that? Command Enter. We can see right here this is the iPad Pro, the twelve point nine inch, we can widen here, this is the Retina Macbook, the twelve inch, or the earlier Macbook Pro, twelves at the bottom, over here is Macbook Air eleven inch, this is Macbook Pro the earlier fifteens, and this is the Macbook Pro thirteen and the Macbook Air thirteen inch models. I like the focus you have to the, to the Heading. Thank you, GitHub. First off, lets change our styling. That looks pretty good. If we go into preview mode, we can see our interaction even as we resize. Interesting messages on Twitter, Pinstagram and LikedIn, and I want to thank everyone for sharing their progress. In fact, with the form element selected, we can make that flex box. You can do this on each of your Collection items. What about this Megan Garcia Portfolio? When a parent is set to flex and all its children are stacked, in this case, vertically, adding top margin auto will create automatic space above that element to fill up any available space inside that parent. So, these two are in one block, thats taking up the first cell. We've built out a solid homepage. Right there, getting the alt text from the alt text for project's image. We're going to fix that in a second, but let's demonstrate that we can do this on the second one as well. We can see that the max width is crossed out. We're going to add another one. Again, we can go to preview mode and we can see all of this in action. In terms of visual hierarchy, we've set this kind of sizing principles. Nobody uses Impact anymore. [Grimur] Im feeling much more responsive, uh, thanks to this lesson. Lets put in our heading, lets put in our paragraph. And thats looking pretty good., Now, for our final step, lets select our form block and well go ahead and make it a Symbol. Now has anyone else noticed, this is not a clickable link. This one's required, this one's not. But for a lot of people, this is what they'll see. Well, we're using this as reference. And we're just going to copy and paste. Back to homepage. [Grimur] But first, share your finished homepage (or maybe your draft) using #21DayPortfolio. Creative control and flexibility without code, State of the art web application security practices, Fast and reliable hosting provided by AWS, Best for a blog or other content-driven site, Bring enterprise-level security, compliance, and scalability to your website, Discover how freelancers and agencies use Webflow, Students and educators can use Webflow for free, Learn how world-class organizations build faster with Webflow, Rakuten uses Webflow to help clients push their business to new levels, HelloSign uses Webflow to empower marketing and design, Find website templates for business & personal use, Find and clone inspiring sites #MadeInWebflow, Get professional help with your next project, Extend your sites functionality with apps, The latest trends in web design and no-code. We want this happening when the mouse hovers over the element. That looks pretty good. Lets do eighteen on the top and bottom. We'll cover spacing, link naming, paragraphs, we will add our resume and we will add more interactions.. Seventy looks pretty good.. Notice how now, that side by side, its still clipped off but its no longer shrinking that image. Were not just designing one page. Looks good on all these widths. And here's where Flexbox comes in. This element integrates using reCAPTCHA V2. And what they want to learn or do could be different depending on the motivation, the intention of Megans potential clients. Actually, my laptop is still dead. So for example, success., [Sara] All right so, there is a bunch in her. But first-. In fact if we want it squared off, we might want to make it thirty pixels on each side. There is no 3D transform on this one. And the next page is? Let's hit escape to stop editing that and we'll continue. And that looks, each of these. So normally it will say, "Thank you. That's looking pretty good. Let's hit reset. Lets increase the spacing to maybe thirty pixels here, lets press Done. Larger heading, let's check it's contrast. [McGuire] Good. Were seeing nineteen twenty pixels, and to do that, weve scaled all the elements on the canvas down their original size. Add some padding. Let's go and do edit page settings. And I can see your navbar ideas. In this lesson, we'll add Google's reCAPTCHA validation to reduce the amount of spam received in Megan's contact form. And as we know, all we have to do is design one of them and they all design themselves. We don't want to open that a new tab. So let's check our contact form. And the Div block is going to hold each of these items. Let's close this out because right now it'll show the name of it. And we'll go back to the instance, then we're just going to copy and paste several times and you can see that 3D perspective take effect as we do that. [McGuire] Unbelievably shiny, and in Space gray. Lets do that, see how this responds. [McGuire] So, the image grid. Now everythings back to the way it was, and now that were selecting this more specific H2 heading inside of a project description, we can change it. And well follow THAT process. But the ideais to ADD our domain. In our project, go to Project settings. So expensive. With magic. We'll make this one Resume. We check the box that says open in new tab. And all you have to do is move the project image, and that Div block weve created, inside the link lock. [McGuire] Now, the link is a lot more descriptive. It could say meet Megan Garcia, UX Designer extraordinaire. And what we want to cover here as it relates to maintaining and growing our portfolios over time is focus. Include examples of prototyping or mockups you created. So, we have inside that, the container. ), And well start with the hero section, then well do project details, then the larger, project description well use CSS grid to build a multi-image layout, well add, links to our other projects, and finally, well add. Lets place it right underneath the page body, and we have some defaults. Let's go down to 404, same deal here. Let's do 66 and we might reuse this. Let's go back to our instance, so we're no longer editing the contact form and this looks pretty good. Well grab a Div block, well add it underneath, and well set a background color, we can grab that background color from our projects. So were on Mobile landscape, this is looking pretty good. So just like that, we can turn on live preview and move to the left and right, and it's following our mouse position. So, it's even. Let's press save because we need to add one more thing. [McGuire] Great catch. And one more, final field, lets add multiple images. Now, this is at the bottom and we can add margin top, we can just set the top margin to auto. Maybe nineteen on the top and bottom, that looks pretty good. [Sara] Nope. And, with that paragraph selected, we might want to drop down that color. And theres our grid. [Sara] Oh. And Open Graph we're going to keep the same SEO title tag and the same meta description. Now we can stay on the homepage here, what's over here does not matter when we're editing our SEO settings or are Open Graph settings. So were affecting our navigation symbol. The future. That looks okay. Your submission has been received." And theres some space here, so if we click that nav link we still have that margin on the top. If we have a few brief descriptions, which we want to map to a field, sometimes this happens if it's not named exactly how we named it when we made the Collection. With our link block selected, the parent element here, lets make sure its linking to the right place. For now, lets do the best we can to keep things organized. Command K, text block. [Sara] So it's going to be tighter on Tablet than Mobile, so, let's make sure, uh, we decrease the gaps. Our pattern here is that we want that contact form to exist in a Section. Let's call it logo and let's click our brand, link block and make sure it actually takes us where we want it to take us. So instantaneously were on the investment app page so it says investment app. For right now, it'll say, "View project." That's what we're looking for. And we want to SHARE some of our favorite work throughout this year. More interactions. Whether youre a graphic designer, product designer, web developer, writer, illustrator, or are working within some other area of creativity, you need a way to get your work out there. And well add two things inside each of these Div blocks. So we can change opacity. Maybe the larger heading could be even larger. Is it that heading? [McGuire] Do you want to let us know about. Let's do something like five or six. Share a picture or link to your light mode site, brighten someone's day. So let's go in here., With any Paragraph selected, we can use the all Paragraphs tag. And we'll add that to each of these. Let's change the bottom row. Be real with yourself about who you are and what you create. Let's go on to password. Its lorem ipsum but it's correct and it's linked to our Collection now. Take out paid ads. All the way down the homepage, we have the submit button. And thats the last section. So we did two big things here, we claimed ownership of our portfolio on Google and we configured Google Analytics. To those in this studio, this is todays paper. No, on the whole product. We want these things to stack vertically when we put stuff inside of our footer. So. Let's select its parent, the Div block, and we'll say this is 404 interaction, which we'll style this as. It's inheriting two, because it's a combo class. We want it to take people from the 404 page straight to the homepage. Now, two more things. We can make this one 30. We can say, maybe a twelve hundred pixel width is a little better. So those are size and height differences. I think 100 would be great. Let's pick up there with verifying our portfolio on Google. Try again later, bud. This is adding a backdrop filter in which everything behind this boundary, frosted glass, everything behind that boundary is going to increase its saturation to 200%. And thats being determined by this Div block.

Handmade Crochet Bikini Top, Furnished Rooms For Rent In Hartford, Ct, Michael Kors Briefcase, Neutrogena Clean Normalizing Conditioner Ingredients, Best Gaming Laptop Deals This Week, Where To Buy Sculptures Near Me, Tableau Obliterate Script Linux, Monin Matcha Green Tea Syrup, Turtle Fur Beanie Chelonia 150 Fleece Hat, Organic Cotton Pants Womens,