Lets go up and add a container. We're still getting that translucent effect, is it as exciting? Now you'll notice the moment we switched between tablet and mobile landscape, this heading gets smaller. Share or upvote product ideas from the community. [Sara] Perfect. And then let's set a limiter on this. Start from. Why? 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. Im a bit distracted. We created a password-protected page and we created the password page that shows up to let users type in a password that lets them access the password-protected page, is a very confusing sentence. Determine the purpose of your online portfolio website While portfolio websites and personal websites are similar, the goals are often different. The only thing that's left is the Navbar.. There we go. [McGuire] Going back to the base breakpoint. This is a Div block and we can right click. Lets press Done. We also made sure it responded and was fluid on all device breakpoints, including desktop, tablet, mobile landscape, mobile portrait, and larger than 1920 pixel breakpoint.Up next in the course, we'll set up and optimize our search settings, how people will find Megan's portfolio site on search engines like Google. Let's go to interactions, and we're going to add a page trigger while the mouse is moving in the viewport. Each project I've worked on has its own stories and learnings, and I wanted to capture that essence. We built up portfolio pages and now we'll do the last of our main pages, our contact page. So we're looking pretty good.Let's move on to mobile landscape. That's part two. So, do you want to add 20 pixels underneath in margin? [McGuire] What's up? Under forms, we have reCAPTCHA. This will be a move. I want to see a full page shot of any of the pages of your portfolio, homepage, contact, whatever. So how do we make it better? Let's go here, turn off preview mode. So, whats the call to action? We can style the navbar however we want to match our hero section. Lets select the body element, we can just select the body element at any time, go up to the selector field, and click into Body (all pages). So lets land maybe on this one for right now, Investment App. Let's paste, what we have on our clipboard of course you can configure this to whatever works best for your portfolio. We can even click the edge of the canvas and increase the canvas width to some obscenely high number, and we can see the footer stays at the bottom of the page. We can emphasize that Z depth by making one transform, and that is scaling along the Z axis. We could do it on the typography here, or we could set a max width that's closer to the original, and just decrease this actually remove that size. Again, we have our container, so its keeping everything neatly organized, neatly bound towards the center with that margin. Lets move on to Mobile landscape. People want to know what its going to be like working with you and how your skills and talents can help them. Yes, your work should be the main focal point, and a design should provide the framework for experiencing it. Start course Pardon the interruption. Yeah, just gotta think about it. Now, this is going to be an advanced design. First up, let's open up the Audit panel and this will show us some of the alt text that's missing on certain assets in our project. So we're just going to press right Ctrl+Enter Hero image, press right, Ctrl+Enter Hero image. [McGuire] It sounded a little bit like you said, the word interactions, but you added several, several Zs at the end of interactions. The next line is saying the same exact thing. Let's save that field. We're going to use a page load transition here. This will be called, password interaction. There are three columns, and only one row. But what we unlocked here is the ability to stick our footer at the bottom. Suddenly you can see right here, we have a list of each of the four projects. Contact form. Assuming, do you want the nav link button or do you want it to look like the regular nav link?, [McGuire] Okay. You have many options to choose from when putting together your own online photography portfolio website. We're going to use CMS Collections to generate all of our pages by building one page. Whether its for clients, design rebuilds, or things that rhyme with Manhattan, we want to see your CMS-driven project pages! So now it's taking up that width. So to demonstrate this, we can always go in. A few different things. If you want to decrease it, it's it's certainly possible. But, lets also make sure its centered. 36 looks pretty good.As for the rest of it, everything's wrapped in our container class and we know our container class is already configured on each breakpoint, so that looks pretty good. Go down here, meditation app, it takes us there. That looks pretty good. So now it's behind the selected projects. So lets get an image element, lets drag it not in the Div block but under the Div block, and lets get that image from our project image field. Copy the code for later use. Again, this is on the homepage. Looking pretty good. Right-click, delete column. Let's add a class to this. As for me? So we can grab everything between the two quotes after content. And once we've typed out our URL, let's go to continue. In this lesson, we'll create a custom 404 page for when your visitors encounter an unavailable page on your portfolio. This time with LinkedIn. 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. [Sara] Ye-, no. There's a lot coming up. We built a contact page (which people can click over to from any page). Then we have this other number right here, this seventy-six point seven percent. [McGuire] So let's do 10 pixels there. And well choose just regular for our headings, lets go in and add font. Lets add another one for the project details, rich text, project details. Now we have this sort of grid-based layout, with each of our items inside. So lets grab another Div block, grab a Div block, in our grid, lets put it next to it. We might want to select this image element, and make its width one hundred percent, and its height one hundred percent. In this course, were going to build a full UX designers portfolio but the principles of design and development were covering can apply to portfolios and projects of all types and well be using the same exact CSS properties used by Apple and Stripe and Awwwards almost every development leader throughout the industry.. And as we hover out, it goes away. This makes it easy to update the design and content of your portfolio as web design trends evolve. So here's our Hero section right now. Now, this a lot of control but heres how it works: all we have to do is start styling, so if we want to change our font to DM Serif Display we can do that. And if we drag and resize now, lets hit Escape to go out of that Symbol, even on the narrowest device, everything works okay., Now, heres one of our favorite parts. [Sara] You didn't add a password to your notes. You have a preference there? [McGuire] And it seems to be functioning properly. So any time we add the text block class to something, itll follow suit. Itll fit this image to what we specify. If we change this later, for instance if we change this sections background color, or we change all our sections background color to red, of course that contrast wont be high enough now. So, let's move on to the password and 404 page. Smaller. Let's add a new one. 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. So let's duplicate our project image. So all we have to do, let's remove that more specific value. Here are some elements you can include in your portfolio: A brief bio: Introduce yourself and your background, highlighting your skills, experience, and interests. And lets select that text block inside, and link it. Now if there are more images we add later, itll continue to add rows. Wow I might need to sit down, uh, and regroup. And well add two things inside each of these Div blocks. But notice how this top image is moving to the left as we scroll down. If we want to add an image, maybe an image for each project, lets go to image, and lets say project image. And, what weve done ahead of time, is weve cleared out our resource records. Again we should say this is button text. Other projects. [Sara] Right now, it's not very accessible. And for these top text blocks, lets decrease the opacity. Well get the image from our Collection for the project image, and just like that, we have an image for each of our projects. Let's change that to the class. Were going to call it Secondary. So this is our Open Graph preview. We could use viewport units on the animation itself. When we want to add an animation on something, we have to select the item. Convert it to a Symbol to reuse it and keep it consistent throughout your project. This Div block, we called frosted glass. In fact, let's time how long it's going to take to get from the bottom left corner of the screen to the bottom left corner of the screen. Each project has its image, and its description. [Grmur] No, it's Duracell. Learn how to make your homepage responsive on tablet, mobile devices and even larger displays, like the screens at Regal Cinema. Of course for the last one, we'll go and add "Twitter logo.". And, nothing really impressive right now. Building for the web is no longer rigid it's a more fluid, collaborative process that allows for faster, better output." And well call this, Navigation. Notice just how when we scroll, if we do it slowly, it looks real time but as we actually scroll like this, you can see it's delaying a little bit. And lets click to make sure we ADD. So, if we go into our cog, get the text from project details, its nonsense. But the other thing to note is that it's also being sized in its original proportions. Not great, but we can make it better. We'll check on our headings for hierarchical-whatever-it's-called-when-you're-setting-proper-hierarchy. Let's set a children perspective of 1000 pixels, and this enables a 3D camera effect. That's 1-return, and let's increase our font size to something very large. Before we do anything else, before we do any styling, let's add all the correct elements. Buy $129 USD Preview in browser Preview in Designer Overview Maybe we want View Project to be at the bottom, so with this Div block selected, lets name it. Let's also increase our saturation. 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. So we're going to add a Div block. This is not the right page, let's go back to our homepage. The height is being determined by the image inside. Lets remove that font change. Let's increase that. Hit return, and both have been added.We're going to accept the reCAPTCHA terms of service, send alerts to owners. And, with that paragraph selected, we might want to drop down that color. So, go back to 45. So just like that, we can turn on live preview and move to the left and right, and it's following our mouse position. [Sara] If you scroll down, let's do the same glow interaction we did on the homepage., [McGuire] Okay. So, with these social links, we can click this cog icon here to open the link block's settings where we can link out to each of our social channels. Now, this is terrible. We'll use the page scroll, go to our scroll animation. More interactions. Each project builds on what came before it. We have to select the element that we want to change. What does it look like when we preview? There's the iPhone 12, 12 pro even on narrow devices, it looks okay. These incredible things 31 day whoa 23, 21 day portfolio. Now, each of these images, as you'll remember has the same class applied, Hero image. We've added this snippet down below. Then, we can see the smoothing, the damping has increased. So it should scale proportionally there as well. To do that, well need to unlink. Let's do 66 and we might reuse this. Suddenly were editing the symbol. Our project description, we want to check this text. That means we can link parts of our design, we can connect placeholders to that data., But this means were able to design faster, and we can add new items that adhere to the designs we build out. We have a section, and inside the section we have a container., Lets move on to our text elements, and we have two that were going to add here. Of course, back in Webflow, we'll paste that ID right here in the Universal Analytics Tracking ID and make sure that our global site tag is turned to yes, is flipped to yes. [Sara] So I want to add this to our success message. Press return. But I feel good about this site, which is for an entirely fictional designer, you know, going out to the world. Twenty pixels looks pretty good, maybe even, maybe even some more, just referencing our original design here. That'll chop off anything that extends outside beyond the boundaries of the Hero camera. Lets say twenty pixels on both sides, so that its not going right up to the edge. Well just drag in a third section underneath the other sections, and well apply our section class. I want you to increase that padding. Let's go to our ad panel and let's grab a heading, we'll drag it right in, double click to edit, secret, press escape to de-select. Lets go to the add panel, well drag a grid, and well place it inside the Section and inside the Container we just created. It's okay. On the page, let's add a trigger when the mouse is moving in the view port, and we're only going to do this on desktop and above. So a big heading, Page Not Found. That looks good. That way if we add more images down the road, if we add more images to this client project, its not going to overwhelm our design and create rows upon rows upon rows. That looks pretty good. Let's add one more thing underneath that. So if we go over to our CMS, we can see where that's going to take us. [McGuire] Especially with the Apple (product launch). That's the 404. It looks smooth. We want it to take us to the homepage. [McGuire] Thank you, Grimur. So we'll lock this and we'll type 30. Now, if we wanted to add the Navbar at the bottom--, Well set up our footer structure, well design our new footer, and of course well make it a Symbol. Lets drag those four things. And there are a lot of things we made sure we did first before this lesson, like building and launching a portfolio site from the future. Let's leave our preview mode and we'll press save on our Hero scroll animation. No other links in here. Over on Google Domains (this is where we bought garciaux.com), let's go to "My domains" where we'll find all the domains we've purchased. So now there's nothing on this image in terms of styling, it's just sitting inside a grid. Heres what that means. We can design with this color. So let's close out of here and continue down. So were going to increase that to seven eighty. Again, it starts at 0% opacity and it rotates and comes up to 100% opacity over five seconds. Its critical, though, that you follow the design I made in Figma.
Lululemon Shorts That Don't Ride Up Tiktok, Best Books About Perfume, Gg0010s Gucci Sunglasses, Canon Flash Trigger And Receiver, Telecom Next Best Offer, Benefits Of Sleeping With Shower Cap, Kitchenaid 8 Qt Mixer Attachments, Healthy White Sauce For Chicken, Candlewood Suites Columbus Airport,
Sorry, the comment form is closed at this time.