how to make a portfolio on webflow

And we'll change that accordingly. Instead, we're going to press the plus button. [McGuire] So, the image grid. After you have customized your widget, you will obtain your installation code from the popup window on Elfsight Apps. We'll check on our headings for hierarchical-whatever-it's-called-when-you're-setting-proper-hierarchy. Now, if we go into preview mode, we're matching. How do we set these to be a little bit taller? Now, this is terrible. So it's really important that we keep on iterating. Lets add some space at the bottom, thirty pixels. We're going to be working inside of this collection list. This will create reCAPTCHA for a new site. Lets do fifteen on the left and right, or twenty on the left and right. And once weve done that we can move on to adding the hero image. Let's go to our assets panel, drag in that hero image from before, and let's drag it right into the container. Let's continue. They're hidden by our Hero image because we're about to add our interaction on the grid. Lets build it again, but faster. And the nature of our Collection list, the way we have each client project following the same structure, that lends itself to visual repetition. Now it matches. Kick off your 2021 with a 21-day course that follows the full build of a design portfolio website. Again, testing that fluidity, looks great. Lets check it on an iPhone 12 Pro Max. That's one element down, let's add the contact form. In either case, we just want to make sure its selected? It's important to consider how these interactions are going to actually interact with the foreground text. Showcase the work you're proud of 4. And we'll set our original Hero image back to block so we can see what's going on. Let's reset that maximum width. You know what else is delicious? [Sara] That's it? This bit was messy, and overwhelming in the beginning with endless scrolling while in bed. Command K, Container, add a class, Command Enter, Container. Its clean and professional layout offers a sleek and functional design that places the emphasis on the freelancer's portfolio. 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. Let's select any of our top images and we'll go over to interactions and we're going to add another one. And lets take a look at our contrast ratio, anything up here is going to be double A, triple A, if we go up to lets see, seven point one nine. Youve selected the projects you want to include, written content, and figured out all of the features you want to be a part of your web design. And we might not love this color. One thing to note, and we're going to do a design review later to catch things like this, but it might be worth noting that if we go back here, this is an H1.And even if we go back to our homepage, this is an H one. Lets add maybe thirty pixels. So, lets add additional elements. Project Info. Lets drop this, until right, right when we get triple A four point five four contrast ratio. We're rolling out more lessons very shortly. And this animation is going to have two different steps, two actions. You'll notice it's pulled over to the left. Grmur. [McGuire] "website," and we can close that out. Here are some elements you can include in your portfolio: A brief bio: Introduce yourself and your background, highlighting your skills, experience, and interests. Let's do something like five or six. This one, we're going to add a combo class. This is the list of CMS Collections, we have one, our projects Collection. Cinema 4D. Can you see the issue here?, [Sara] Cutting's too large. Whatever the project, make sure it fits with your goals and shows off what youre capable of. Let's duplicate with our circle image selected. It's always looking for our scroll position and moving the cards in the Hero section based on our scroll. [Grimur] McGuire, youre awfully cavalier about such an important topic. This is a little more specific. Oh, look. We'll create a password-protected page, then we'll design the page that prompts users for the actual password. Let's go back to our instance, so we're no longer editing the contact form and this looks pretty good. Then we can actually add the full description, we can go to the brief project description. Putting together a portfolio is more than just throwing together a bunch of unrelated projects you dont care about. In fact, that we can switch all of these if we don't believe we're adding value by adding descriptions to each of these images. There are two types of triggers. We're scrolling down and see that rotation is a little more dramatic on a smaller breakpoint. Right-click, delete column. Lets just remove that top margin, and thats better aligned. The second thing we want to do structurally, is make these clickable. The 404 is not so much about the number 4,0,4. Keep on designing in this review. Let's do 80%. Now, if we preview like this, we can see the effect. All the way down the homepage, we have the submit button. Things are getting a little tighter on Mobile landscape. And once we go through that, all we have to do is put in relevant information about this site. Open Graph settings, same thing here we can add fields or we can just grab, maybe for this we want to grab the same information from our SEO title tag. Share your form designs using #webflow101 on Tweeter, and well literally feature our favorites in a major upcoming production called Forms. It sounds like a joke, but the last time we made a video called Building a Web Form it got a quarter of a million billion trillion views. We could actually increase this to AAA again. So let's right click and duplicate this image. Bonus points if the excitement is too much for them to handle. We can just set our radius, our border radius to 50%. Let's approximate that it looks like 3vw is pretty good. 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. And all you have to do is move the project image, and that Div block weve created, inside the link lock. And now it's inheriting 60 CH. So let's click the reCAPTCHA. And again we learned this before, we can do one hundred percent width, and we can use object fit. First, lets make sure our Collection item is selected and what well do here is do a couple things. Later, well build this into a fully interactive animation. Lets style it. For the body on this larger display, that means all the dead space that was below is no longer there because the footer has been pushed down. Two rows, two columns. And, nothing really impressive right now. It is, and that's looking pretty good. Scroll down. So what does all this do? So, maybe use black, much better contrast and let's add a bunch of columns. Here's how to make a professional website for your model portfolio (with examples). That looks okay. Start from. Lets choose vertical. [McGuire] Megans portfolio is based on several extremely effective design portfolios we've created and learned from through the years. We can design with this color. A portfolio website gives your work visibility, putting it in front of the people you want to see it. [Sara] Nope. That's pretty close. We could maybe increase the container width to, lets say, sixteen hundred pixels, just widen that out. That's the password-protected page. Let's close this out because right now it'll show the name of it. We can check same as SEO tag, it'll just import the information from here and keep that current. [Sara] So, if you scroll down to the grids, I want them to be even gaps. So I like to see if we can add one now. Let's preview again. Shoot, something didn't work. So, do you want to add 20 pixels underneath in margin? Lets go to our meditation app, that has its unique lorem ipsum, with its H2 and its paragraph. Lets start with Desktop. [McGuire] So on the top, we already seem to have 20 pixels of padding. But, lets also make sure its centered. Let's also increase our saturation. Lets drag in a section element. So if we go in here and open up hero image, right now we're using We're grabbing the alt text from the asset. Just like that, we have our frosted glass effect, but here's the impressive part. Let's take it even further with our next interaction. Little more impressive, still not perfect. 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.. Again, current project will take it to whatever project is associated with this text. Design. But notice how this top image is moving to the left as we scroll down. Let's go into our navigator here, open utility page content, utility page form, and remove the existing class and apply instead, you guessed it, frosted glass. Or do you want to increase the size of the Heading on 1920? It looks like we do have the color red, let's remove that. We'll click the cog and we'll mark it as decorative. Let's do a little housekeeping, call this, footer paragraph and let's check it's contrast. When building your own portfolio, dont feel like you need to include anything and everything youve ever created. And what we're looking for is Google Site Verification, right here. We're going to move it up. We want this button to route us. Indigo. So, lets close this Collection list wrapper. That looks pretty good in this Section. So that's it for Paragraphs. On orange, let's move this back a little bit. One twenty. There's two things here, a site key and a secret key. And the next thing we want to do is select our images and add a class. So it's going to be completely transparent when it first loads. Maybe we want a larger heading on our larger display. And lets also, on the form block itself, lets add some padding. 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. There we go. Good news, when I snap my fingers, we're done with this course. So for example, success., [Sara] All right so, there is a bunch in her. Lets choose that, lets use that class, project info. First, we almost always launch lessons EARLY on Webflow University. App redesign, interface design in our portfolio, we want to show we want to highlight where were going. I just refreshed Berkshire Hathaway redesigned their site! Inside this, we're going to write the numbers 404. And this time we only want a link for each of them. Now we can't see it. I want you to increase the padding there.. And if we change the padding on any of them, again its affecting the padding on all of them. That looks pretty good. But on this project type preview, we see a lower opacity, 0.63, and we can see that's currently failing our contrast check. A charger. So it doesn't render on the page. We're switching here, of course, to Desktop. If we want to push it off from the top here, we can add a little bit of margin on the top. That looks pretty good., Lets add one more thing to this, and this is a list of three. It should be. We're going to type a password. Or confusing, like MSN, which shows you a message that Nope, not enough time to even read the words. We want it taking us to the contact page. So if we want to change it to pink, we can make it pink. All right. Check out Mobile portrait. Then, we can see the smoothing, the damping has increased. Let's go in. Continuing forward. Thats it. That looks okay for one of the rows. Half a trillion market cap, but theyre still rocking Times New Roman. So, two options here. 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. But for this lesson, we want to cover the most critical part of any portfolio, which is a clear call to action, a CTA. But some of the most important stuff we need to cover is in this lesson. 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. And right now its a little squished, but its respecting the content on the page. But remember, at any time you can clone each stage of this build to dig in and follow along with exactly what weve done along the way. And this IS and always will be free on Webflow University. [Sara] And I want you to look at the, uh, section padding here. We'll scroll down, go into preview mode and we'll hover over to make sure our glow effect is functioning properly. Let's set it at 100% for now. And for right now let's open utility page rep and for our utility page content, let's set its display to none, just for a moment because we want to build this interaction. Let's do 55% opacity and we'll continue. So now there's nothing on this image in terms of styling, it's just sitting inside a grid. We might also want to increase the saturation a little bit. Because this is where were going to build out the page. Part of us getting more accessible together means being okay with works in progress. So we have our padding, sixty on the top, sixty on the bottom. Again, we can make this minus 30. But once youve published YOUR site, share it on Twitter, Facebook, LinkedIn, and Revvit. Also, this is hideous and it sears the retinas. Let's check it on other breakpoints. Building your Design Portfolio? Read this. - UX Planet Lets select our grid, and remove the second column. In our project, go to Project settings. And that will affect Hero image bottom. [McGuire and Sara] So, you're just proving a point?
How To Stop Merino Wool From Itching, Netherlands Abandoned Castle H, Articles H