How to launch your first UX portfolio website (beginner tutorial)
🪄 Start with Framer (Get 1 free month of Framer Pro with code ALIENA1): https://framer.link/AlienaCai
📖 This is part 3 of my free portfolio course: • UX Design Portfolio Course for Beginners (...
📄 Free UX portfolio & case study guide: https://alienacai.gumroad.com/l/uxpor...
🪄 Apply to my portfolio lab: https://forms.gle/u48UCBB3F4bXcQCa8
📄 Free 2026 UX Career Guide: https://alienacai.gumroad.com/l/uxroa...
📖 My UX Bootcamp (Official Figma Education Partner): https://fasttrackux.com
☕️ Emails on design, career, and life: https://trillionscafe.substack.com/
Learn how to build a responsive UX portfolio website in Framer from start to finish. In this tutorial, you’ll turn your design into a live website by making it responsive, interactive, and fully functional. We’ll also cover the technical setup you need, including metadata, favicon, social preview, and how to publish to your custom domain.
This part is a little more technical, but I promise, if you pay attention, it’s actually very, very fun. You’re not just building your portfolio, you’re learning a real web design skill along the way. And seriously, if you’ve made it this far, you should be so proud of yourself for making your portfolio live.
Chapters
00:00 How to build a UX portfolio website in Framer
00:32 Create web pages from Framer design pages
01:04 Import your Figma design into Framer
02:23 Set up website breakpoints
04:14 Work with layers of frames and stacks
06:32 Understand Framer width and height settings (fixed, relative, fill, fit content, viewport)
09:31 Understand Framer position settings
10:16 Full responsive webpage walkthrough
13:03 Make links and buttons work
14:09 Add Framer effects
15:54 Add a custom cursor
17:15 Set up page metadata, favicon, and social preview
19:07 Publish your portfolio to a custom domain