So we want to interact with the collection item itself. We want to make it vertical, and then we can take that Submit button and override. Of course, if we want to increase the drama of the effect, we can go into the 404 interaction and increase these numbers. And were looking for our DNS records (our DNS settings). So with our link block selected, again, with the Collection item, were affecting all other Collection items too, so this is also now a link block with the link block class. Everything's looking pretty good here. When the page loads we'll have this animation, we'll build a continuous animation. We will see actually it looks like something there is red. So you need to drag it to a smaller device. Now on mobile portrait, it's a disaster. We built a contact page (which people can click over to from any page). That looks pretty good, but what if we want this image to be full width? And if you notice over here on the left side, the H2 goes all the way up to the section. The first one is Inter, so lets go down here. Now, we dont want to forget about that. We've created selected projects, hover, and I'll have her out. Our grids nice and responsive. [Sara] Do you realize what happens when you film without me here? Lets drag in an image here, so we have this investment app, we can just add the Bluerock.jpg here, well just drag it right in. And that's really it. So, 10 pixels, 20 pixels, 30 pixels. From here, let's go to the SEO tab. This is an H2, if we select that, it says styling rich text. 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. [Sara] (laughs) Stop doing that. It's a block element by default, but we can set its width to 100%, and we can even add a divider. So the Div block now has all four of our elements. Lets do this one. When this happens, then this happens. Lets move on to Mobile landscape. So if, for instance, we make this all caps, and we decrease or increase the letter spacing and decrease the font size a little bit, its already created this class for us called field label. Press done and now we have a two-by-two grid. We're here, collection list. But whether youre following along from the past, present, or future, were really excited to cover each and every aspectof this design portfoliofor a completely fictional person. Let's select our Hero camera. If we select the section, by default, there is no padding, padding being the space inside an elements boundary. Instead of one pixel, we can make this minus 10 and we'll have to go in sequence, which will time-lapse right now. Were doing this so theres a clear objective, a clear deliverable for each lesson. [Sara] That looks good for now. So we're going to make a new animation. Can you decrease that size?, [McGuire] Okay. Close out of here, back to our pages panel, back to our cog and let's paste in that URL. And of course, we're here. Let's move on to our other pages. First off, because we've enabled absolute positioning, we can set z-index to a negative value. So that's it for Paragraphs. Whether youre a retail giant or a freelancer, branding shows your value and how youre different from the competition. [Sara] Oh, so there's two notes I have. So how do we do that? Lets change the background color, maybe for our background color we can do a solid black. It could be unique, it could be matched to each project. We're going to unbind this and instead, again, shift-space project. I like the focus you have to the, to the Heading. Now, if we go into preview mode, we're matching. Overview. Meters in Swedish. So we'll get rid of this Hero image in a moment. Lets go in and add a Section, again well add one underneath our other Sections, and well add our Section class, Section. Well, the reason is if we use a screen reader, it will now say-, [macOS VoiceOver] "Link. 3X faster time to launch. Share your work. Let's name our property, we'll call it Megan Garcia, UX Designer Portfolio. Let's do 30 pixels and let's set a paragraph here. 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. Especially ours! Well link it to the project name. [McGuire] So, in Tablet, we initiate this menu button. This one, if it's the same color, we know it's going to be the same thing. 50% is the default. . Smaller. One of the reasons we want to validate like this is so we can test our site, so we can find out is Google able to accurately crawl everything on our site that we want it to crawl? So let's make sure it's taking us to the homepage. We have our reCAPTCHA element. First, lets make sure our Collection item is selected and what well do here is do a couple things. Just like we used flex box up here in the project details Div block, we can do the same thing down here. It has a maximum width. So decrease this size, lets make it twenty-four, maybe a little higher, thirty. This is a great exercise to go through. Again, we can set a maximum width. We can see that the max width is crossed out. [Sara] Okay. that'll make a circle out of this. Building for the web is no longer rigid it's a more fluid, collaborative process that allows for faster, better output." It's okay that these things are overflowing right now. So it brought back the changes on mobile landscape. Well include regular and six hundred, press add font. Again we should say this is button text. If we want to resize our 404 interaction, again, the size, this is set to auto width and height. In fact, we can option, click to remove. And Insta. Remember, we're affecting the combo class (thats Navlink AND Button). On hover out, we want to start an animation. So, you see on the product details, I want you to increase the padding on that card. Hover in and hover out. We hit play, it does that, but there's a couple of things we can do to make this better. So let's go back to interactions. All of it seems to be working great on all of these widths. Now we have a grid sitting inside that Div block. Here's an example of a lock. Now, it's always a good idea to check a site like caniuse.com so we can see what the compatibility is of something like backdrop filter. These 20 sources of web design inspiration are sure to ignite the creative fire you need to build better website designs. 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. And for these top text blocks, lets decrease the opacity. Let's add a container, Command K for quick find, container. That looks a lot better. We want that to stack on top of the glow. Okay, its a little too tight here. So, let's move on to the password and 404 page. But ignoring that for now, lets test responsiveness here. That looks pretty good. Seventy looks pretty good.. Something to note, this is the current lighter variant, but we could select our utility page rep. We're affecting both utility pages. We can do the same thing for Instagram, for LinkedIn, any social buttons we have at the bottom. Have a presence on social media like LinkedIn and Facebook and share your portfolio with your followers. First off, lets change our styling. Up next, well build out the final homepage section, the footer, and after that well wrap up our work on the homepage by making everything responsive.. Project type. And well choose just regular for our headings, lets go in and add font. Keep your portfolio updated Define your specialization and market your portfolio Why a portfolio is important for your career [Sara] Right now, it's not very accessible. Share your finished site on Twitter using #webflow101 and well be sharing our favorite sites on social. And that's the hero section. The final design review and some more interactions before we cover the last steps in this course. 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. Let's open up the password interaction, double-click the password cell, and of course select our base class password cell color, increase that opacity. Now, a symbol once created can be used all over the project. Type type type, I really wish my MacBook Pro had battery. (As a business owner or hiring manager, I want to explore and validate the quality of this portfolio, so I can hire this entirely fictional person as a UX designer.) [McGuire] So space between the H2, the dark Paragraph and this field label. Heres how to do it. That's the class name, and we'll set its position to absolute. [Sara] All 23. Now it says web design by Megan Garcia. Lets start on Desktop and test responsiveness and fluidity. And our Collection name is going to be Projects. Why have we done this? And on each of these, with any of these elements, with Project Info selected, lets add some margin on the bottom to space these things out. So we can just quickly ulink, and select our H2, again were selecting all H2s when nested inside a project description. Maybe we want a larger heading on our larger display. But if my computer was on, heres what youd see, and maybe Stacy can help me out here by putting a screen recording of this over my face. Actually let's pull it up to 500px, even off the screen right now. Let's try 30 pixels, 30 pixels on each of these. View Darkhorse plan project, UX design, architectural website. This is 30 at 1.1. And, so we can reuse that color in other elements, other styles, lets call that it the main brand color. Let's slow this down to say five seconds. This one will move, minus 30. Let's set it to absolute position, and we want it to fill the space available inside its parent container. We can put things inside that rectangle. I wanted to communicate the process of my work through visual storytelling. We want it to take us to a page. Let's enable reCAPTCHA and let's scroll up to go back to the designer.But that's setting up reCAPTCHA. Add some padding on the top and bottom, that increases the tap target, the target size here, so when someones clicking it they have a much wider area, a much better chance of hitting the target when they attempt to click, or especially when they attempt to go down to mobile devices or touch devices, they have that tap area that tap target that's larger and more accessible. But, we might want it to instead say, we'll delete the word project, and so now it says "view". Also, lets name it. [McGuire] Between other projects, and so this is presently 15 on this one. And well use a Div block for this. Command Enter. This doesn't look too good. Lets say project images. Its a two-by-two by default, we do not need that second row, delete. And right now its a little squished, but its respecting the content on the page. Let's edit our grid and we'll increase the spacing. Let's save that change and we'll close out. Notice how this secondary heading is a white color. Each project has its image, and its description.
Mead Weekly Monthly Planner,
How To Explain Data Science Project In Interview,
Dior Dior Homme Eau De Toilette,
Articles H
