Descriptive "Instagram logo." So something interesting with the hierarchy of headings, we can always realize that our big statement on the page is an H1. 10 on the top and bottom. Lets grab a Div block, and we can drag it anywhere we want. Now it will be sized based on whatever's taking up more space. So all were going to do is add them to this page. That looks good. Featured projects can be built as a part of a CMS collection. We'll do viewport height, and we'll do the same thing on the bottom. [Sara] So, I don't have anything on the contact page. We can see, were now styling these things. We have to select the element that we want to change. 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. The Freelancers Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design. Most creatives never stop deepening their knowledge and expanding their skills. Let's rotate about the x-axis as well. And I'm hoping to use this platform to increase the size of my following. So when it starts, it's not moving at all from its X position from its left right position. Authenticity is key. But we also want to share your work. A link block is like a Div block, except its a clickable link. [Sara] What will happen when the viewport gets smaller?, [Sara] It looks good. So lets deselect Bluerock, drag these four right in, and thats it. Its pretty close. 1. Preview in Designer. We'll go to reCAPTCHA, paste that in, .webflow.io. Share a picture or link to your light mode site, brighten someone's day. At any time, we can click in, of course, reset back to the original scaling, so that we can see the nineteen twenty breakpoint on this display. And underneath the images lets add a Div block. Well, a lot of times we'll use a scroll wheel on a mouse. And I really mean that. The color of course, green. [McGuire] You're saying the grid gaps here, which are 30, and the grid gaps here, which are probably 16. One, let's go back to the 404 and let's grab that HTML embed, copy it to our clipboard. So let's make sure it's taking us to the homepage. Webflow helps you put the pieces together in creating your own online portfolio with no-code, from the most minimalist to the more elaborate and eye-catching designs. Let's go into preview. Our default, if we see where that white color is being inherited from, press color, its coming from the body (all pages) tag. One thing to know, go down to Mobile, and I want the image grid to be one column. So let's go in. So if we go to any of these that have the Nav Link class applied, we decrease the padding, lets say we decrease it to, lets do fifteen on each side. We want to make it vertical, and then we can take that Submit button and override. Even as it gets more narrow, its looking pretty good. Now, again, this is the base class. So it looks scaled down because we're looking at the scaled view. This is the last part of the homepage, the last thing were adding for now. We can type, "screenshot of Stockholm-". With our link block selected, the parent element here, lets make sure its linking to the right place. Glow disappears. We recommend taking a look at that full article before making any changes, and always back up these resource records. So if we want to change it to pink, we can make it pink. Our pattern here is that we want that contact form to exist in a Section. We're going to take this even further in the next part of this course as we cover password-protected pages for sharing password-protected work with potential clients, clients of our completely fictional UX designer named Megan. 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. And of course we'll select a yellow color for this. Thats the first one, and the second one, well press to add ANOTHER record. All right. Lets press Done. Let's fix that. And you'll see this pattern throughout the rest of the course. Potential clients and employers get to see right away your accomplishments and what makes you unique. So, if we want to make this one darker, lets just make it darker. But keep in mind, it's going to affect different breakpoints. Go down here, investment app, you get the idea. That looks pretty good. So, for clients, were going to want a brief description. Yeah, 16., [McGuire] You want those even. Now it's behind each of these collection items. It's a little bit jumpy. Lets select, lets go and open up Container, Collection list wrapper, there we go, Collection list. And notice how its pulling that color from the form block. Let's eyeball this maybe 30, 35vw. As of the recording of this video, Firefox, for instance, does not support this by default. That looks pretty good for now. So expensive. Well pick two of our favorite responsive sites and fly those designers out to our annual conference where they'll meet designers, developers, and Webflow engineers. Instead of going to the add panel each time, lets hit Command K or Control K on Windows, and well use quick find here, well just type Container. Well we can just select our Collection list right over here, and we can press grid. Maybe semibold. We designed this course to be taken over 21 days (one main lesson every day). But things get really close to the edge here, so what we might want to do is add some padding. Theres a lot of space here. Of course, at any time we can go into live preview or just go into preview mode to see how this is going to look in real time. We use a link block. Again, contrast AA. If we actually go back to that sun image, lets go back, Shift Option left, there we go. 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. And well come back to it later, but we want to build our second page, and theres a secret. Right there, getting the alt text from the alt text for project's image. And then, assuming you want to match the same thing in other projects? Copy and paste, that symbol, so we have two instances of the symbol, and we can edit a symbol by double-clicking on it. From the container, lets decrease this padding. In this lesson, well visually edit our CSS to redesign the portfolio to take it from dark to light. Lets look at our images. Were going to create a combo class. [Sara] So I want you to increase that padding. And we have all four projects added right here., Now, weve set up a visual hierarchy here. How to create a free portfolio website 1. This one's going to be a duplicate class. And lets look at our current structure. And if we go down, we have our options for the Showcase. All the code is saying is this. What we're doing is we're dynamically placing together these variables and creating a title that will display on search engines based on that. Do you want something like 60 or do you want a smaller number than that? [Sara] And you can see on the search bar there, search for the Lottie animation you want. If we want to go even quicker we can select sibling elements using the left and right, arrows, so we can just go down here to this bottom text block, Command Enter, Project. So right now we can't actually add an action. Well, we can create whats called a combo class, and this is essentially something built on top of the Nav Link class that we created. We know that over five seconds, the same thing's going to happen with our second action. Let's move on to our contact page. H2 then, to decrease its size, to keep it proportionate?. We can go to our CMS and because we copied this to our clipboard, we can quickly replace that project color, save, close, and choose an opacity that passes at least AA. [McGuire] See, that felt actually like you were making a threat. Again, this is a Collection list, so a change on any one Collection item will affect the others. It's responsive by default. Let's turn that on. But, if we click this little cog, and we actually get the text from, we go to get text from, we can link this to the project name. And something to note, at any time, if we go into our style manager here we can see there are some things we havent named properly like image two, image three. So now we have everything that should stack nicely. [Sara] All 23. Type type type, I really wish my MacBook Pro had battery. And to prove that we can go through, we have unique Collection items, with unique lorem ipsum for each of them. And we can set up all kinds of triggers, hover, follow the mouse, scroll, click, and we'll use different triggers on each of these three. And by default its giving us a two by two, but lets see what happens if we remove one of those rows and add two more columns. Escape so that we're no longer editing the footer.Okay, let's go to mobile portrait. And this is what Saras design does extraordinarily well. And we COULD publish here, but most commonly, well publish from the Designer. And let's select our Hero image or original Hero image and set it to display none. So, well have one, thats copy and paste. Once youve completed the Webflow Expert Certification Course, youre all set to take the next step in becoming a Webflow Expert. This is an H2, if we select that, it says styling rich text. It pushed down the other actions. 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. Looking pretty good. Stream highly curated and original Webflow content. [Sara] While you're at it, you also forgot to set the alt text on Megans logo. Also, lets name it. So we might want to make them more even. So lets change each of those. This action so far includes rotating about the z-axis. Were seeing nineteen twenty pixels, and to do that, weve scaled all the elements on the canvas down their original size. The contrast ratio on page not found and everything here is pretty high especially when this isn't there, but it might not be so legible when someone's hovering over this. Smaller. We can go to element settings, and get its background color from our projects, from that particular project color. So, with this image selected, lets add a class. It just automatically creates rows, one row each for each of these. Copy the code for later use. Share it on social media. Can you see the issue here?, [Sara] Cutting's too large. You can always look at advanced options, but for right now, we're going to press next. And usually we'd set constraints on the parent element like the frosted glass, but because we don't want to affect both pages or make any changes that are going to negatively affect our other page, we're setting this on password paragraph. [McGuire] And it seems to be functioning properly. Before we do anything else, before we do any styling, let's add all the correct elements. Theres something different about this course (something different from every other course in the world). And decrease our line height, lets use unitless, and lets choose something like one point one. We'll go here, we'll get the text from project details. Creator profiles | Webflow University Lets put it back to twelve hundred, and thats pretty good for the navbar.. Let's paste, what we have on our clipboard of course you can configure this to whatever works best for your portfolio. And we'll set one thing top margin. In fact, lets go and add to the right section, lets say, footer. We have an H2, a heading two, and we have a paragraph, so lets do that. [Grimur] How about YOUR design? The space is a little dramatic between the two of these, lets decrease that from fifteen, to maybe five. Now, its creating an automatic row by default because its showing four, but we can quickly limit this. 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. Lets continue. Lets add our paragraph underneath the image, underneath the logo. It has three things inside a text block, which says 404, another piece of text. Let's see what's going on there. We want to add this inside the section, and of course if we grab our secondary heading, and put it inside, we have our container, keeping everything neatly bound. And, a note to anyone following along, weve created clonable projects for each major lesson here. No longer desaturated. Make your project pages responsive to beautifully showcase your projects on all devices, like the NES. Lets make this the project type. Were not just designing one page. We can always, with our image grid, with our Collection list selected, we can always limit the number of items. Same with Y. Let's Okay, let's go. Too tight here as well. And right now it's maxed at 450 from the homepage. One, we might want to just add a logo, just a logo on the top right here. So make sure to share your custom 404 page using #21dayportfolio. Lets escape, contact form looks okay. Maybe a little less space between project info, lets do maybe five pixels here. Suddenly you can see right here, we have a list of each of the four projects. Heres the impressive part. We're scrolling down and see that rotation is a little more dramatic on a smaller breakpoint. If we go up here we see this little dropdown called item, and this is each of our Collection items, but right now its blank. Thats because were editing the grid. You're doing such a good job. Maybe round the edges a little bit. [macOS VoiceOver] 5430960300DV65E40566621_sunset.JPEG. And we'll go into the Symbols panel one more time and grab our footer. On orange, let's move this back a little bit. We're going to move it under 404 into the frosted glass again. And it's performing exactly as we'd expect. So can we add some more padding in there? And if we preview now, the grid, it's just a guide. Again, if you're adding this to an existing site, this change will go into effect immediately before the next publish. Assuming you're looking at decreasing the padding to lineup the logo?. In this case, if we look in page resources, we'll see, there is one image, part of the reCAPTCHA validation that doesn't show up, that image does not, nor should it show up in search results. And we'll set our original Hero image back to block so we can see what's going on. Start from scratch or begin with a template 2. And once we go through that, all we have to do is put in relevant information about this site. And, for this Section were going to drag in a Div block. And this is where we can see our completely fictional UX designer, Megan Garcia has absolutely no activity on her site, until, let's view real time, and that's Grmur from his mobile phone. Of course, that's our main brand color on FDFDFD, which is 5.66. You have to select an element to enable more actions. Text, this is decorative text. When we publish our project, if we're on the homepage and we press projects, it'll take us down to selected projects. And well apply that label here too. So let's click the reCAPTCHA. Then for our second text block, lets add another class. Of course, well add our container class, and now everythings the way we need it to be. We're going to drag it right into the Div block, and that's it. So, how much do you want to increase the padding to? And well follow THAT process. So we'll decrease from 30 to about 10. And if you notice over here on the left side, the H2 goes all the way up to the section. This is where we can either copy this one, this sub domain, right to our clipboard, or we can change it, if now is the time we want to change our subdomain. We can change the text color to black. So right now, its parent, because nothing else is set to relative, is look to the body. And as we test responsiveness and fluidity, now it responds just fine. And we can go in on the Style panel and change its opacity to 0%. This time with an option dropdown, this can be the type of project, or project type. A quick note before you change records like this we recommend always taking a screenshot or writing down (backing up your records here in case you want to change them back later). We have a list of each of our projects at the bottom. Grimur? Press done and now we have a two-by-two grid. [McGuire] So you want to increase the maximum width to a larger number?. The contact form, and the footer. We could go in and go to our Collection item and change that from thirty to maybe ten as well. And we can set maximum widths here at the Paragraphs level, at the all Paragraphs tag level. [McGuire] Those are Energizer. And, we could just apply that same class again (this is the Nav Link class, it was automatically created when we made that change to the white color) and we can apply it to all of these. Let's move onto our final part, which is our frosted glass effect. [Sara] Okay, that didn't make any sense.. Actually before we move onto that, lets double-click the Submit button, lets make it take up the full width. We do have something to catch here, which is right now, it's getting the URL from the project link. This time we're going to duplicate the combo class, yellow. Let's save our changes. And lets add a Collection list. Grmur? Well get the image from our Collection for the project image, and just like that, we have an image for each of our projects. So well just go over here, and well add field label. [McGuire] The first one we want to do is we want to set this to fill the space available inside this pa. 0% is at the top. Get ownership of your site and understand how visitors interact with your portfolio site to optimize performance and search engine settings. [McGuire] Yes. In fact, if we click through, we go to the larger breakpoint. Maybe some more space if we select this heading again. Branding takes your personality, knowledge, and talents and distills them into something that's easy to define. Well, the reason is if we use a screen reader, it will now say-, [macOS VoiceOver] "Link. [McGuire] Actually, it would behilarious. In addition, we'll check responsiveness and fluidity on Desktop, Tablet, Mobile landscape, Mobile portrait, and the larger 1920px breakpoint. Again, it's a project image. So if we select this, and go in here, and we can just click Container. Let's go out of preview mode and let's connect our page. This one is going to follow the spectrum order. Lets call it Project Heading. Its looking fairly consistent. Let's press Escape, and let's change one more thing. So, lets do the same thing here. That looks pretty good. You have a preference there? [McGuire] And of course, we want to make it really clear how to get in touch., [McGuire] Thats right. 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%. So we have our padding, sixty on the top, sixty on the bottom. [Sara] Great design. [McGuire] You're saying on this card increase spending. We could maybe increase the container width to, lets say, sixteen hundred pixels, just widen that out. 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. Now we have a Container. Let's add some margin, 30 pixels here as well. We're going to come back to this in just a moment for some of the other parts of this lesson. Lets switch it to maybe fifty-six, and lets increase that height. Maybe prototyping. Remember, when it comes to ocus is just as much about saying no to non-pressing things so we can put our full attention on what matters. Lets say twenty pixels on both sides, so that its not going right up to the edge. So, here's how we can do that. You're like , [McGuire] Whats your confidence level?. Lets edit our grid, and remove two of our columns. So for example, success., [Sara] All right so, there is a bunch in her. Kick off your 2021 with a 21-day course that follows the full build of a design portfolio website. And for this one, we're going to be effecting our selected projects. We're getting that 3D tilt effect again because our section is a camera. Now this could be a great example of decorative versus something that actually has meaningful content. Lets say black, but we can choose any color we want here. Green should be next. This is consistent across all pages in our project. It's also stacking. So, let's go down to the Tablet breakpoint.. A Div block is just a rectangle. Back to homepage. Weve done a lot in this course. Building for the web is no longer rigid it's a more fluid, collaborative process that allows for faster, better output." And when we do, we bring along all those style values from before. So, we could set its height to one hundred percent, but notice how the Div block still isnt taking up the available room. So now it's taking up that width. The 404 details at 320 might be wide. Were designing one pagewhich will serve as the design for all client pages to be automatically created. In fact, we can option, click to remove. 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. That's what we want as the initial state, when the page loads. We can put things outside that rectangle. We can do four. Lets push off on the top, create fifteen pixels of space. The one on the bottom left there, it looks great., [McGuire] So we'll click this. [McGuire] So, we have 30 padding here, 30 padding here, so we have that consistent line. Remember a change to any one collection item affects all the others. Now for the other ones, lets create a new class, lets call this Project Info. Let's decrease the size of that. Of course, you may have a few different types of clients youve worked with, and its perfectly fine to include those in your body of work. There's the iPhone 12, 12 pro even on narrow devices, it looks okay. Or share you navbar design (whether youre using a preset or building your own custom navigation) using #21DayPortfolio. Here's what I want to see. So, we have a Section, inside that Section we have a Container, inside that Container we have the heading, and we have that text block, and then we have our Project Main Image. Let's leave it as lock icon right now and move on. And what this is means is, its a more specific styling than our project heading. Thats our starting point. I mean Im reviewing some of the hero sections and navorgations on Tweet-hir. We can at any time, let's go back to the base breakpoint. So well double-click and change this, well replace this second image with the instagram logo. Here's how. Build a portfolio site in Webflow - Introduction - YouTube So, what we'll cover here is password-protected pages. And well add some rounding, maybe a radius of five pixels. So if we select our H2, we can select a tag in here, and we have this option to change our H2 headings. Most creative projects involve collaboration. So 60, more spacing on the inside of each of the project details link blocks. Let's check our password-protected. We took everything we learned from the future, brought it back to the start of the year, and presented itin this course. So, what do we add inside the Div block? that'll make a circle out of this. Let your portfolio evolve as you do. Now that you've built your entire portfolio, it's time to own it by verifying your site. In fact we want this one first. These are standard considerations. Let's call it social link, and then, with the social link selected, let's copy and paste, twice. I wanted to communicate the process of my work through visual storytelling. And what that means is this. [McGuire] 10 on this one right here? Our contact form is looking good here too on Tablet, and of course, weve already configured our footer which doesnt need the space anyway. How do we make it a grid? It says you're now only affecting the selected element. And, lets add a few options. But each of these pages are already building themselves. So 1000, a nice middle ground. We don't have to scroll far for our last one because we want to name our input labels on our forms. Not great, but we can make it better. Sometimes this can take a few moments before it goes through. So what have we built so far? It is. In a user-friendly design, it collects the projects that represent the best of what you do. And the whole concept here is based on two things, a trigger and an animation. And in that case, we might want to remove this margin even further. And in a portfolio, thats usually the work. And were back. We could always make this one required. Again, this is an H3. Things look good on this display. Let's move on. Display your CMS items on your homepage in a beautiful and consistent layout using magic (which we also brought back from the future). [Sara] So I want to add this to our success message. Let's go down to Investment app and that looks pretty good. [McGuire] So if we go to Tablet and we open up our Menu button, so let's go here open Menu. This is going to be our content organizer, were going to place all of our content inside this Div block. Notice how this little menu bar icon is also moving. We built a contact page (which people can click over to from any page). (Well do this in the CMS. Its a two-by-two by default, we do not need that second row, delete. And now its going to clip off and respect those dimensions. Now, could we just add the Navbar we already created to the bottom of the homepage?, [McGuire] No need to worry. No. First off, on the success message itself. Cut to black., So, by default we have two items in here. Our social wrapper here could use some space, so let's add some margin. Were getting good at this part. It's adding a backdrop filter. Lets grab the project color so each of them corresponds to the color we set in the Collection. And like we said, the great thing about building it this way, is not only can we change the design down the road, but as we change stuff in our database, in our Collection, the design is going to update to reflect those changes. So, one thing were noticing up here this would actually affect all pages, if we go back home on Mobile landscape Megan Garcia Portfolio, that might not be spaced correctly. Let's go to Mobile landscape and look at the section padding there. We can apply a lower opacity. So, 10 pixels, 20 pixels, 30 pixels. Lets go back to our H2, this one right here, and lets go into our all H2 headings tag, well remove the pink color. Let's go down to this one as we scroll. It's important to consider how these interactions are going to actually interact with the foreground text. So, to fix that, lets use object fit. But, lets go back to this particular instance of it. Now. Another plain text field for the name of lets say, client name, the name of the client on that project. There's a lot of things we can do to this. Create a 404 page and keep visitors entertained on the site long enough to forget their frustration of landing on an error page in the first place. Overview Webflow 101 Beginner - Intermediate 2hr 18min Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development. Create an engaging call-to-action and generate leads with a contact form front and center on your portfolio's homepage. [Sara] I mean it can be a little bit, uh, larger on the larger breakpoint. Now, this is the pen penultimate lesson in our course that walks through building and launching a portfolio site from the future. Let's rename Hero images to Hero image grid, and then we'll go in and apply Hero image to each of these. Now, if we don't want to see the hover when we're previewing, we can always go in and select that selected projects effect. We can add a field, that's just going to be a plain text field, which we can call, alt text for project image. Well build out a project details page, details about each project in Megans portfolio, and well add a separate contact page we can link to throughout the project., [McGuire] After lunch, the project details page.. We want to make it exceedingly simple for someone to reach out and get in touch. 60 pixels of padding, space inside on there. And once we've done that (once we've added the navbar) we can move onto styling the navbar. The only thing that's left is the Navbar.. Grimur?). Preview, and now the effect is a little more pronounced. Even if you dont have any design skills, you can craft a functional and visually appealing web design. We can option, remove that so it inherits the 10. You can see more of a blur behind the frosted glass. And let's see what's going on with the button up on the top, the menu button. Well first, so we can apply this to all our devices, let's go back to the base breakpoint and we'll select our body. Let's go out of preview mode and for our password cell let's double click to edit our Symbol. Keep your portfolio updated Define your specialization and market your portfolio Why a portfolio is important for your career Thats looking pretty good. And, lets double-click and change the text. So we're looking pretty good.Let's move on to mobile landscape. So we can change opacity. Once you have a portfolio up and running, dont just forget about it. Let's make this class project client preview. Here we have a slight tilt effect. No, its not product placement, just excited and their coffee is just delicious. Now on mobile portrait, it's a disaster. We can see in this one its kind of showing this cloud, kind of floating there. Dark horse plan. We're going to keep that on, so we get notifications if not working properly, then we'll press submit. Then, we'll go to preview. 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's what we have for spacing. And we'll go back to the Style panel because we have this Div block, the parent, and we're going to turn this Div block into a camera. And heres how object fit works. Again, these aspect ratios are not the same. now something we want to do here, when it's absolutely positioned is we want it to fill the available space inside its parent.
German-bliss Gehl Parts,
Uspto Registration Exam,
Determination Of Protein Content By Kjeldahl Method Lab Report,
Articles H