Design A Portfolio Website in Framer - Begin With Framer Tutorial 01

In this video, we walk through a step-by-step process on how to create a responsive hero section for desktop in Framer. This is part of a set of Framer tutorials which will help you become a pro in Framer.
This site is currently live and you can test the responsiveness on your desktop here.
*LIVE WEBSITE*
emmanueltutori...
*REMIX LIKE FOR YOU TO PRACTICE*
framer.com/pro...
*MY FRAMER WEBSITE*
emmanuelakpan....
*CHAPTERS*
00:27 - Create colour styles
01:16 - Creating components
04:44 - Creating a frame for the navigation bar
06:00 - Making the navigation bar responsive
09:00 - Building the Hero Section
11:19 - Creating Button Components
14:07 - Making the Hero Section Responsive
*GREAT VIDEOS*
• How To Make A Design P...
• Framer Responsive Webs...
Please don't forget to like and subscribe and hit the notification button to get the latest design video updates every week
#framer #uidesign #graphicdesign #productdesign #portfolio #portfoliowebsite #designportfolio #howto #framertutorial #responsivedesign #webdesign #responsivewebdesign #herosection

[@lodeluyckx]

Great video

[@azpidi]

Thank you

[@xaviertyz]

Thank you for this amazing tutorial. One question: how do you make full width hero image responsive with the header text?

[@azpidi]

Thank you very much. So your header text will need to be set to full width as well within the hero section, and then on lower screens (Tablet and Mobile), you adjust the size of the fonts to be smaller.
Let me know if this helps

[@ohisohiorenoya]

Weldone

[@azpidi]

Thank you very much Sir

[@christambartrueman4726]

Hi I appreciate your efforts keep build as tutorial bro.
I'm have one doubt here may I know how did you made the logo "Portfolio" here or Imported from outside

[@azpidi]

Thank you very much. I actually imported this one as a PNG file