And we have a collection list wrapper that contains all of them. [Sara] A threat again? Again, the password interaction grid is selected. So we might want to make them more even. So that'll be on hover. Now, could we just add the Navbar we already created to the bottom of the homepage?, [McGuire] No need to worry. Of course, we might want to go back in and change the smoothing to something a little more dramatic, like 99%. When we scroll back up, the image moves back to its original position. [McGuire] Going back to the base breakpoint. In fact, if we click through, we go to the larger breakpoint. We want to add a heading. We're scrolling down and see that rotation is a little more dramatic on a smaller breakpoint. One more text element to add here. Now, if this image did not have a perfect one by one aspect ratio, 50% would create an oval. We can see, were now styling these things. Maybe 10 pixels on top. Now if there are more images we add later, itll continue to add rows. Lets go back to our H2, this one right here, and lets go into our all H2 headings tag, well remove the pink color. There's triggers again, there's a trigger and an animation. Lets add a text element, this time text block right above the heading. 404 page. And the next thing we want to do is select our images and add a class. Learn how to make your homepage responsive on tablet, mobile devices and even larger displays, like the screens at Regal Cinema. Press escape. Slug is okay. And lets add some more spacing underneath, thirty pixels. Let's set a line height of 1.2, hyphen to set unit less, maybe 1.1, and we can set a maximum width on this. Lets add a navbar element. Let's move on to the password page and check out the larger breakpoint. 0% let's say we don't want these moving at all. But what we're looking for is any image in our project that doesn't have a description, that doesn't currently have alt text. Thats looking okay, at least while theres a black background. [Sara] So I want to add this to our success message. [McGuire] Between other projects, and so this is presently 15 on this one. Let's start with the first page. Its inheriting that. In either case, we just want to make sure its selected? Even if you dont have any design skills, you can craft a functional and visually appealing web design. [McGuire] That's an excellent point. Let's go to our Assets panel and we can just drag the PDF from P90X, right into assets and that's uploaded., And over here, instead of external URL, let's have it linked to a file. Let's do something like five or six. [Sara] Ye-, no. So its even and matched. In this lesson, we'll create a custom 404 page for when your visitors encounter an unavailable page on your portfolio. Learn how to build a portfolio in Webflow in 21 days, Have a strategy behind the projects you feature in your. And as we hover out, it goes away. And lets change a couple other things while were here. One twenty. H1, pretty good. And when we scroll, the image moves to the left. That does not look good. We want to play with individual elements. That should also be an H2. So, before we create our interaction, let's fill up the rest of the cells with password cell selected. Add Portfolio module to Webflow website [2023] - Elfsight Describe the steps that they took and how your role ultimately helped your clients to reach their goals. Click the cog, and make sure these have descriptive clear names. Once youve completed the Webflow Expert Certification Course, youre all set to take the next step in becoming a Webflow Expert. [McGuire] Okay. That looks a little bit better. [McGuire] Yes. We used character units to limit how wide Paragraphs are we added a resume for Megan about pushups, heavy pans and chins. Lets move on to our second topic so we can add details for each of these projects. Again, we have our container, so its keeping everything neatly organized, neatly bound towards the center with that margin. Lets do maybe ten pixels, that looks okay. Let me put some of it back and stop right here. We can do that. That way, we can make a change on any one structure and it'll affect all of the cells. ), But lets wrap up by choosing our default. If we go to the CMS over here, we can see our Collection we created earlier, projects, and of course we have our four Collection items, each of the projects in Megans portfolio. Here's what I want to see. [Sara] Oh, so there's two notes I have. Then lets change our text block on the top, lets change that instead of Inter four hundred, lets choose six hundred. Lets style it. Well drag it right into that Section, right into that Container. That looks pretty good for now. So, now there are two sibling elements inside of our password cell. I can see it. Let's save our interaction for right now. That's password protection in our portfolio, project. And as the final step, let's go back to our large breakpoint 1920. Let's continue. Then, we can see the smoothing, the damping has increased. Press return. And we'll set the height right now using pixels. And there are some great browser extensions that do this really well. So let's go to larger breakpoints and check the Heading. Now it's up to us, whether we want to add that black background. Other projects. We can go back as we want to clean up, and rename those things. The second thing we want to do structurally, is make these clickable. We'll click the cog and we'll mark it as decorative. So, do you want to add 20 pixels underneath in margin? That's where we're getting the white color. And heres how object fit works. So if we go over to our CMS, we can see where that's going to take us. In this case, the contrast does seem to be high enough and keep in mind if we're in Firefox, we know the frosted glass won't render. Let's do 30 pixels and let's set a paragraph here. Maybe soften it a little bit. This paragraph can be basic, lorem ipsum, we can use placeholder paragraph text. But, if you look at this section, sixty pixels doesnt go all the way down to that heading. Purchase a paid Site plan to publish, host, and unlock additional features. Let me know when were filming. Let's increase that to AAA. Let's decrease the size of that. So far in this course weve built out a heroes section, navigation, an entire project section (driven by visual CMS), a contact form, and footer. Now these are going to be higher. Finally, well place in our Symbols (our navigation and our footer). Lets move on to Mobile landscape. Now, let's make some changes. In full color, it makes engaging with your creative output an active and immediate experience. What does it look like when we preview? The foreground being the text, whether it's a heading a paragraph, text on a button and the background, which is usually the background color behind the text. And in the modeling industry, your portfolio is often the first thing potential clients consider. And lets style it first to differentiate. But thats the big idea: iterate, yes, but focus. So, lets do a couple things. Lets change the background color, lets do a sort of dark grey color. And lets delete this second row that comes with this. And with this one selected, with any of our bottom elements selected. Let's go down to this one and check its contrast. Now what weve gone through our design review, we have one major step left BEFORE we verify our site on Google and set up Google Analytics and thats to PUBLISH our portfolio. Tell their stories. We can set the height to four hundred pixels, but we can also set the width to one hundred percent. Why are we doing this? When you build your online portfolio with Webflow, you get the power of Webflows content management system (CMS). We can make this one 30. Well also show how to add your own portfolio to the Webflow Showcase for increased visibility throughout the community. Way to go. Yours can be for you or your business. Let's set it to absolute position, and we want it to fill the space available inside its parent container. Now another decorative element, this is a circle image, so let's make sure it's decorative. Lets make sure this goes to brief project description. We'll do minus 20. Copy and paste, that symbol, so we have two instances of the symbol, and we can edit a symbol by double-clicking on it. We're going to add a second filter to increase saturation. So let's duplicate our project image. Now, the Symbol doesnt include a Section. So something interesting with the hierarchy of headings, we can always realize that our big statement on the page is an H1. A portfolio is a valuable tool in promoting your creative services. And for this one, we're going to be effecting our selected projects. Whether its a redesign, client work, work for a past employer, or even an entirely fictional company (which, it might be a good idea to say something about that so people dont Google this fictional company and find nothing at allwhich would be). Why is the lamp shaking? And once thats added, we can add the form block inside. We'll set a maximum width on this frosted glass. And we have our glow animation, which responds on mouse hover. [Sara] "Working with Megan Garcia absolutely changed BY business.". And we want to SHARE some of our favorite work throughout this year. Thats because changes start on the base breakpoint, and they cascade down to smaller devices, and they cascade up to smaller devices. That'll chop off anything that extends outside beyond the boundaries of the Hero camera. Let's select our Hero image grid. On the second one, we'll do a positive value of 40 and let's add two more y actions, it's moving up and down. [Sara] That's everything I have on the Desktop version on the homepage., [Sara] All right. Let's move on to our next one. Okay. That looks a little better, twenty-two, maybe on this we can decrease that a little more. We know it's going to start at 0% opacity, and then it's going to rotate and transition to 100% opacity. Let's reset that maximum width. And once were done there, lets go back to the Designer. And a couple changes we have to make.. The H1 still seems to fit. Let's add some stuff inside. By default, it's over 0.5 seconds. You have a preference there? Now, if we do want to see that red a little more boldly, we can go in and in our style panel, we can move this back. Lets go up and add a container. Let's duplicate it. But there's still interactions and accessibility and design review and SEO settings. It's not adding any tremendous value to this. That looks pretty good. Let's switch this to black with a higher opacity. We know that over five seconds, the same thing's going to happen with our second action. In our body, we'll press paste and we'll move that to the top. But, if we pick the more specific one, project heading secondary, a change here will not affect the first one. We'll build a 404 page in Webflow, and, of course, it exists to tell users the page they're requesting may be a broken link or a mistyped URL. That's exactly what we want, but we also want We're on the glow effect here. We can always make changes like on the project side by side, we can go in and decrease this, maybe give it a little more width over where. Lets just select our text block, and change it to inline block. And underneath the images lets add a Div block. That's great for Tablet., Mobile landscape.Things are getting a bit tighter here. Lets use a link block. Let's add that as a secondary brand color, create. Thats one topic down. So were using all of the style properties of section, but were adding on using this footer combo class. As we scroll, we can see that left and right motion, very aggressively following our scroll position. As for the second thing, as you build your hero section, whether youre following this lesson or creating or updating your OWN hero section, we want to see your work. Let's go to Mobile landscape and look at the section padding there. Let's fix that. Webflow makes it possible to go live with just a click of the Publish button. Design a footer to wrap up your homepage's content and act as a second navigation this footer will be used for every page on your portfolio for consistency. We can see under CMS Collection pages, a projects template has automatically been created. Let's do 66 and we might reuse this. Part of us getting more accessible together means being okay with works in progress. That looks much better., Lets check out Mobile portrait. Were going to indicate that top row is indeed the header, and well hit Continue, and were just going to match each of these field types. But we can set these to in-line block. Let's try that out in preview mode. Let's go all the way to 200%. Check out Mobile portrait. If we want to with Hero images selected, we can go down and add a black background, or we can do a light gray. But lets do the Showcase: How do we do it? 45, on the opacity we're getting AA. Same thing for our cloud here. And decrease our line height, lets use unitless, and lets choose something like one point one. And there's one thing were missing which is of course, our contact form. How does 20 pixels look?. Let's add an opacity interaction. And Insta. Were designing one pagewhich will serve as the design for all client pages to be automatically created. Let's add a little margin at the bottom, push it off the bottom to space. Maybe a little spacing reduction underneath the client, five pixels. We could select frosted glass and just make sure to set it to flex box. Lets add our heading, lets put that right inside the Container, and well add a text element, just do a little text block right underneath that heading, also inside the Container. [Sara] So it looks good here. Saras done this since yesterday. Well actually where we place it. The container seems to have some space underneath. Lets grab the project color so each of them corresponds to the color we set in the Collection. And the last thing, lets select our project description, lets select our rich text field, and lets link it to our Collection. And just like that, our image is spanning across all of this right now. Remember: we almost always release lessons earlier on Webflow University, so check there for the most up-to-date parts of this course, if youre not doing that. Well, there are a few ways to do this. Click. What about projects? Creator profiles | Webflow University Then of course, let's choose a color towards violet. Let's check our password-protected. That looks pretty good. And we can see the Div block is a child of this link block, along with the project image. So let's bring this up. That looks pretty good. So, to do that, lets do what weve done for the rest of this project. Can you show me that one? So its going to hold everything else. With our HTML embed selected, let's press return, and let's change this. [Sara] I want them to be the same on the contact page. We want one more block. I can't wait to see more. We can click this cog icon here and your account may look different, but what you're looking for is to create a new property, so we'll create a new property. In your own words, it tells the story of projects youre proud of and offers a glimpse into the thinking and personality of the person behind them. Let's press save. This course covers everything from the basics of grid and flexbox to advanced interactions and accessibility work. Things are getting a little tighter on Mobile landscape. Press return. [Grimur] Share your work. And the third button texts we want to use, let's just copy and paste again. Lets add the Container class. This is going to be a list of all our other projects. We did our SEO and Open Graph settings to optimize for search, we redesigned our entire site which is now a light version. That looks okay. We can always check them just to make sure, but we can go in here and say, "Translucent white." And well say this is a brief project description. So, for UX design, this kind of combo class here, lets reduce that sixty to thirty. And well choose just regular for our headings, lets go in and add font. And if we want these to be side-by-side we can drag in a grid. Lets delete this rogue heading, delete. In fact, let's first choose DM Serif Display. We'll call this contact. Where do you want to go for a lot of animation? And well apply that label here too. The default size looks great. [McGuire] Now, the link is a lot more descriptive. Project type, lets map that too. And it should scale proportionally through all of our breakpoints. We tested this earlier, but let's test again. So, with that being said, let's move on from Google Site Verification to Google Analytics. Maybe add a maximum width of six hundred pixels, and that looks okay. Lets say twelve pixels for now. [Fire alarm beeping] I gotta go. [McGuire] So, the image grid. And, well do this in five parts: well set up the basic structure, well create our CMS Collection (this is the database of project), well add content to that Collection, well show how we can use the CSV to more quickly import that data --, And finally well build out our design referencing the items in that Collection, which really does feel like magic. We're just eyeballing it right now.Let's press back to instance, so we're no longer editing that symbol and let's test responsiveness and fluidity. Let's say the maximum width is 260. We can see as we scroll, it takes a second to catch up. Above here, if we actually go above the zero seconds frame, there's this little spot up here we can press and do opacity. Because on the second one, we want to bind it, we want to link this text, get this text, from the client name. Just wanted let you know you're doing great and to make sure you share your work using #webflow101. Lets use unitless again, maybe one point three hyphen, one point, four, five, that looks pretty good. [Sara] Theres nothing to suggest Im not confident and youre going to follow that design. Its critical, though, that you follow the design I made in Figma. We can increase the space between architectural website and the project Paragraph preview, or we can decrease the space by kind of removing the looks like I got 20 pixels of margin on the top of project name, preview. And when we go over here, it goes to sixteen hundred for a wider display. So normally it will say, "Thank you. This doesn't look too good. The future. There's nothing actually there. This is embarrassing. Continuing forward. [Sara] So, if you scroll down to the project details. Let's create one. And we have a good starting point for the types of headings we want. Oh, look. So maybe with our Collection items selected, go back to element settings, lets just add some margin at the bottom, maybe thirty pixels. This is a great plain password page, it looks okay. Maybe nineteen on the top and bottom, that looks pretty good. Let's move on to projects template. We can transform all of it. [McGuire] Okay. Lets go back up, with the Collection list selected, lets press grid. Sign up to get early access to additional Webflow lessons and courses. [McGuire] Well, you have Grimur on speaker, youre holding the red pen, theres a note in the Figma project that says follow this design, and for the last eight minutes youve been air playing your phone to the studio monitors, where you texted your mother in Sweden saying Im not confident he is going to follow the design., And well start with the structure. Green should be next. In this lesson, we'll update our projects CMSCollection by adding a new client project and we'll filter our CMS layouts for a more advanced and curated showcase. And in this case we have the selected projects hover. Let's press play. We'll do 20 viewport height. Lets just remove that top margin, and thats better aligned. We can add a field, that's just going to be a plain text field, which we can call, alt text for project image. We want it to take us to the homepage. Okay. Up next, well get everything up and running with Google including Google Analytics. Whether its for clients, design rebuilds, or things that rhyme with Manhattan, we want to see your CMS-driven project pages! Let's call it social link, and then, with the social link selected, let's copy and paste, twice. Lets add another one for the project details, rich text, project details. View Darkhorse plan project, UX design, architectural website. But that's alt text. Its a really specific way of styling. We have the contact form on the homepage. That's it for Mobile. It doesnt look too good as things get narrow, so lets go in here and lets take this Collection list, which is also a grid, and lets remove three of the columns. Focus on what you love to do so you can do more of it. Command Z, undo, very quickly, very quickly, very quickly., Well, we built it once. There's a lot of things we can do to this. Well add our navbar, well style it, and then well make a symbol. (Actually, two things to remember.) Share your stuff, we love sharing your stuff. Thisll be an H2, and well call it "Other projects". A portfolio site provides depth and detail. Let's save changes. All the way up here we created a style for secondary heading. Looks pretty good here. In fact, we might want to structure it so it starts with the project title. And just like that, we can go to preview mode and see that as we hover over, we see the glow effect come in. Were going to click to grab this first IP address (well click it), thats going to copy it to our clipboard. Let's rename Hero images to Hero image grid, and then we'll go in and apply Hero image to each of these. There is no 3D transform on this one. Thats one more topic down. Before we move on from this section, let's show the second way to add alt text, and this is on a per element basis. So, we've added it to all Paragraphs.. And, it says Megan Garcia Portfolio, we can make that a little bit smaller. So we have 30 on all sides. Now, if we hold down Shift and Option, and go left and right, we can see, in fact, lets hide this main image. So heres what we have: investment app, this was a UX design project for Megan. Just to be safe, let's set a Z index of one to make sure it's stacked on top of anything underneath. Save changes, and of course, we want to publish our site for changes to take effect. Make a checklist of the essentials to focus on for you type of work. So we'll use reCAPTCHA V2. And as we test responsiveness and fluidity, now it responds just fine. That's good. Let's increase that. Lets add another one. So lets grab our email address, drag it into the Div block, and lets grab that text field, and drag it into that Div block. But ignoring that for now, lets test responsiveness here. Let's go to add field, let's grab the brief project description and maybe add learn more on my online portfolio. Lets select our grid, and remove the second column. It'll have an initial state and it'll have a hovered state. Bottom as well here and finally to the third one bottom. [Sara] Perfect. That happened because we created projects. We have this kind of side-by-side design, so we can select our Div block here, maybe add some padding, lets do thirty pixels on all sides. We can call this translucent white. Thank you, GitHub. So let's make sure we're on the base break point and we'll double click to edit our contact form. [Sara] Okay, that didn't make any sense.. Now were ready for the magic part., So, lets close out of the CMS, and were back in our main page. If we switch over to architectural website, also a UX design project.
Soft Bamboo Double Yarn, Ryobi 6ah Battery - Bunnings, Mini Wooden Paint Palette, Pixel Buds A Series Cute Case, Nightingale Data Visualization, Heeled Mary Jane Shoes Uk, Ariat Unisex Elite Grip Glove, Van From Alabang To Sta Cruz Laguna, Restaurants Near Lincoln Marriott Cornhusker Hotel,
