Full design review with interactions - Build a custom portfolio in Webflow, Day 17

Sara Lundberg runs design for Webflow University, and today, she’ll be walking through dozens of design notes on Megan’s portfolio site. From spacing to interactions (and everything in between), this lesson covers:
00:00 - Day 17, begin
01:06 - Spacing
12:36 - Link naming
15:55 - Paragraphs
17:16 - Résumé
19:32 - Interactions
23:56 - Recap
Get early access, plus downloadable assets and cloneable project for every lesson: wfl.io/2021-portfolio
#21dayportfolio
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[@DJC4026]

I truly believe that these tutorials deserve way more views than they currently get/have. Nevertheless, I hope that doesn’t discourage because these tutorials are truly amazing, funny, clear and educational. And I hope that these videos will never stop coming. For every Webflow customer / designer, I feel we get a lot for our money. Not only THE BEST web designer tool there is, but free and very qualitative tutorials as well. I just love you guys! Have a wonderful day!

[@hawk9312]

At least our potential employers won't see that our portfolios are all similar!

[@thekyser]

Totally agree!

[@maurocerino5600]

how the heck do they manage to be so funny while are recording a "serious" course? I just love their chemistry (and her laugh)

[@svetlanavokueva2751]

Meggy and Grimur thank you for your accent! You are braking language barrier and open new opportunities for not native English speakers

[@mikepapahotel]

Hey team - I'm constantly blown away by the quality of your Webflow tutorials - not just because of the excellent pacing, technical detail and clear instructions - equally valuable is your brilliant on-screen chemistry and subtle humour which elevates your content beyond simple tutorials - making every video fun to watch and learn from! Thank you guys - and long may you reign! 😊👍🏻

[@NizarAnan]

Thies tutorials are the very reason im making a website on Webflow. Keep it up Webflow team, your work is amazing.

[@azpidi]

Join in if you're just watching these tutorials in 2023. These are super amazing. Following from the first episode and I've been able to build the site. I can't believe it 😲Thank you Webflow

[@benk.5200]

🤣 never had so much fun learning. ever. 💯 Thank You Guys! 🚀

[@humility0is0a0virtue]

RIGHT?!

[@Kozlar92]

This was so refreshing to watch omg. Love you guys so much.

[@beingdanzee]

Sara is just amazing. Well done Sara.

[@timothysolly7863]

Thank you for these tutorials, I know there is far more work behind making them than people realize but I certainly hope you plan to make more! The chemistry between you all is awesome and you're my TV show of choice! My site is already launched, but I would love to study under you all!

[@Jorianbossy]

First comment ever on YT: You've got to love these two and Webflow's content in general. I mean, the relaxed, fun and natural way the interactions (on the project as well as between the presenters) is just blissfull.

I don't know the correct saying but I literally left my heart in this video. Thanks for all the good vibes!

[@u_u2322]

I had a blast watching this. thanks for making learning so enjoyable and fun.

[@Webflow]

Glad you enjoyed it! Stay tuned because there's a LOT more coming this year!

[@u_u2322]

@@Webflow omg really. I'm excited. I love you guys. you guys so awesome and fun.

[@mxss.12313]

You guys are fantastic on camara. I want all tutorials to be like this.

[@SuperTenja]

Thanks so much for doing this!

[@shubham-cd9lx]

You guys are the funniest comedian I have ever seen

[@azzammeeralam7182]

Perfect example of designer/customer final design review.

[@Mehtab-Hassan]

I know I am almost an year late or maybe not so much because this course was from future anyways. I am mostly not commenting or posting #21daysportfolio because of obvious reasons as grimur might not be available now. But Guys! I love all three of you and Sara has been a nice addition to this course. Loved her intterruptions and designs lessons! and accent and hairs yes. haha Huge respect for webflow team

[@assamawy]

This is perfect!!!!!!

[@irubielmoreno6683]

Well done gang!

[@Dorsetwatersofteners]

Brilliant.

[@unofficialnickcantu]

Dang, Berkshire Hathaway deserved that one. haha. I really couldnt believe it but for some reason, wasnt surprised hahaha

[@nihanmohammed7998]

Amazing

[@raresdobrescu2260]

For anyone having trouble with the PDF file, it's no longer possible to upload it with the free version of Webflow. What you can do instead is upload your PDF resume to Google drive, click the 3 dots, click Share, set it to ''anyone with the link'', copy the link and then use that link instead.

[@Jasmine-fu1ix]

Hi guys, has anyone had any issues with their Lottie animation? It works fine in preview mode but when I go to actually test it live, the animation displays only the last frame (the green tick) without the animation? I followed the tutorial by the book so is there something I've missed out?

[@Rasil14]

Why is webflow so amazing? 👌🏾🔥🤣

[@robinzon100]

this looks like a sketch and I love it :DDD one like from me

[@chrismlone]

This is outstanding! 😂😂

[@ramivideos167]

I like your humor parts lol --- LOVE

[@person81045]

The hover effect for the Other Projects does not work. When clicking on Link Block and selecting the two animations previously made, the effect is wrong. It starts off blank and hovering over causes the images to come into view. Then hovering off causes them to go disappear again. No change to animations have been made and they are functioning correctly on the home page as created in the previous lessons.

[@stefanofarina7317]

I can't seem to implement the hover animation inside the Other Projects section. The error I get from webflow is that the "target" of the animation is inside the Home Page.

[@Webflow]

Hi Stefano, sorry for the trouble there. Might be best to contact our support team by clicking on the question mark icon on the lower left corner of the Designer.

[@grittygirlgraphics8633]

Oh dear Sara...at 19:44, I think you meant to say, "there ARE two notes"....going back to the whole "data" thing...😜...and can I just say, I've never seen McGuire actually laugh. That's so funny!

[@anupsarkar6326]

great

[@yaseersanni1521]

So I dont know if the publishers at webflow still read the comments but at 14:50 , can I achieve the same effect by adding a new text block on top and setting the transparency to 0? would the on-screen reader and search engines also be able to see this?

[@Webflow]

Yes. We still read comments from all our videos :) As for your question, I did a quick Google search and found that yes, screen readers will still read elements that have an opacity of 0 set to them. Reference: ishadeed.com/article/hiding-web/#:~:text=Accessibility%20Implications%20For%20opacity%3A%200,and%20focusable%20with%20the%20keyboard. Hope this helps.

[@yaseersanni1521]

@@Webflow oh nice. thanks for clarifying

[@voss779]

❤

[@dankmemes4068]

10:27 you could hear him pressing "esc" to try to get out of grid view, please make this a feature :)

[@Webflow]

It is! Pressing Escape will exit editing a Grid, and pressing again should deselect the selected element. 🙏

[@francka.4174]

2:06 I don't really agree. Evening the space here kind of " blurs " everything by making the 3 text elements a single group. Not saying I am right, you are the pros. Would love to know what other people think about it.

[@kaleb-oldaccount]

Does Sara offer a Figma website design course? :) Sign me up pleeeease!

[@snuggymonkey96]

fffffffffffffffffffffffffffff FLEXBOX. Noice

[@dayandknight.]

Sara seems very dominant when working with her (or for her). It's either put up or shut up.

[@person81045]

woke culture

[@grittygirlgraphics8633]

And SHAME on Berkshire Hathaway...I can't believe that. 😳 That's ridiculous!