Тёмный

Framer Crash Course - From UI/UX to Frontend with No Code 

DesignCourse
Подписаться 1,1 млн
Просмотров 75 тыс.
50% 1

framer.com 👈 Start using Framer today for Free!
bit.ly/3Es29zd 👈 Want to learn UI/UX? Use "UI2022" for 22% Off!
-- Today, we've got a big one for ya! Framer has been around for awhile, but they've recently updated in a big way. Think of Framer as an all-in-one solution. Framer is like if Figma and VSCode had a baby, except you can skip the coding process and go straight from your design, to a fully responsive website. Need a backend? They even have a CMS. So, in this video, you're going to get a crash course in using Framer to build a fully responsive landing page.
Project files download for this course:
coursetro.s3.amazonaws.com/st...
0:00 - Introduction
1:03 - Framer UI Overview
3:30 - Editing the Navbar
11:23 - Hero Section
20:37 - Features Section
27:40 - Third Section
31:01 - FAQ Section
34:26 - Final Section
35:10 - Adding a RU-vid Embed
36:33 - Adding a Footer
37:37 - Responsiveness (Tablet)
39:42 - Responsiveness (Mobile)
44:20 - Adding Scroll Animations
45:57 - Deploying the Project
46:55 - Additional Pages
49:24 - Conclusion
Let's get started!
#framer #uiux #frontend
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Хобби

Опубликовано:

 

12 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 145   
@DesignCourse
@DesignCourse Год назад
Hey all. Let's get a no code status update. Who uses no (or low) code solutions, and which do you use?
@larsverschoor
@larsverschoor Год назад
I think you should write good your code yourself, or hire a web-dev. dont use crappy generated code...
@heroe1486
@heroe1486 Год назад
I sometimes use visual editors to get components UI that I export as code that I can modify, more like templates then, but never used no code solutions to do everything, I don't really see the point if you're a dev, you'll just end up limited and try to fight the platform for something a 3 lines anonymous function could solve
@heroe1486
@heroe1486 Год назад
@@larsverschoor Sometimes templates could be useful if you can export, not all devs are good at designing/styling, but yeah full no code is limiting, at least when you know better
@larsverschoor
@larsverschoor Год назад
@@heroe1486 yeah, but if you are making something for a client you should not use templates.
@heroe1486
@heroe1486 Год назад
@@larsverschoor Why do you think that ? I personally think It depends to be honest, some clients are not willing to pay dozens of hours of designing/styling and are ok with a slightly modified template with added functionalities. Same if the client wants an MVP for a SAAS and prefer to spend his budget on functionalities that makes his webapp original rather than on design. I guess that's why stuffs like Tailwind UI are popular in the first place
@susmitadey6735
@susmitadey6735 10 месяцев назад
Amazing introductory crash course on Framer covering the basic parts.
@farizfazrel8783
@farizfazrel8783 Год назад
Thank you gary, this crash course is great!
@user-iv9mj4oz6p
@user-iv9mj4oz6p 10 месяцев назад
Many thanks! The explanation is great!
@gpolonia
@gpolonia 10 месяцев назад
Framer changed a lot since the video was made, but the tutorial still holds up
@osks
@osks 11 месяцев назад
Very nicely done!
@TalentlessSora
@TalentlessSora Год назад
Bro thank you so much! I’ve had tNice tutorials software for like a year and was super intimidated by all the bars and windows. The way you’ve
@Yeshadobariya006
@Yeshadobariya006 Год назад
clicked on. Very detailed and to the point, thank you so much for tNice tutorials! I subscribed and I look forward to watcNice tutorialng and learning more about
@narayanshrestha1205
@narayanshrestha1205 Год назад
Thank you, great way of learning by doing
@thebirdsnextdoor
@thebirdsnextdoor Год назад
Wow! I am a newbie, but was envisioning this to be the future, but according to your video we are already there! Is this kind of software going to take over our jobs?
@collinskivuki5979
@collinskivuki5979 Год назад
Thank you for this tutorial.
@jaguhari64
@jaguhari64 Год назад
Nice. Thanks a lot actually. It worked, you exp
@David-xq7ef
@David-xq7ef Год назад
Framer... Best design tool ever !
@Kuwandi
@Kuwandi 10 месяцев назад
Love Framer for somone who is coming from a print world this is so familiar in the structure to layout print programs vs ….other ie. Wix or Webflow… great interface design inside the framer
@Rio-by1eh
@Rio-by1eh 8 месяцев назад
How are you progressing now that it has been one year using Framer - …curious
@feelcollins4358
@feelcollins4358 7 месяцев назад
@@Rio-by1eh there's no indication where it says he has been using Framer for over a year lol, the video was published a year ago but his comment was 3 months old. Though I imagine he'd be great at it now if he were to start a year ago and continued to work on it instead of stopping halfway, personally I started like 3 weeks ago and I've managed to get the hang of things and can create my own basic responsive websites with fancy scroll interactions and other effects (I'm lucky though since I already have a solid understanding of stacks from the Figma counterpart auto-layout, components and prototyping etc), still learning stuff like CMS though which is new to me and perhaps some other stuff I have yet to explore, overall it has been a fun experience to learn Framer and I'm excited to learn more
@GermanLazarev
@GermanLazarev 4 месяца назад
your the best on youtube
@Mikaweb3
@Mikaweb3 Год назад
awesome ! Thanks ! And how to add a converkit form for example ?
@bySterling
@bySterling Год назад
Before I watch all of this G Money, can you add animations, multi layered parallax (and of course mobile friendly) etc to the elements?
@eksonmude_
@eksonmude_ Год назад
Eu amo este canal.
@EpicDurian6964
@EpicDurian6964 Год назад
just like webflow, nice.
@CasaFassa
@CasaFassa 10 месяцев назад
Nice class! Does the free version not include elements? There is not FAQ grid.
@hyggedev2124
@hyggedev2124 Год назад
I wish there was a quick search feature. For example, on mac, CMD + F + input and immediately find the field you're looking for. Like CMD + F + padding and it immediately highlights the padding field. I find my self scrolling up and down looking for one field at a time lol.
@IStMl
@IStMl Год назад
request a feature in the community
@MrJellekeulemans
@MrJellekeulemans Год назад
This is just insane to me. You are making a website in a webapp. Maybe it'll support js in the future, making it possible to make a website in a webapp thats made in a webapp 🤯. I think this is really useful for making websites for events and stores, but not for anything more advanced. I hope that it'll stay that way so I can keep my job 😅
@sebastiangudino9377
@sebastiangudino9377 Год назад
I mean, it is a tool. Think about it like Figma, if you are a developer you probably have at one point made a pretty cool Figma design for, let's say, a card, with a cool Prototype and stuff. And then copy the SVG, take it to your IDE. Make it a Component clean everything up and voila, there is your cool component. You didn't have to do it all from scratch. Well this is kinda like that, but more advanced than a simple SVG Export. is not going to take your job, it's going to make your job easier.
@IStMl
@IStMl Год назад
you can already add React components and overrides
@johnleighdesigns
@johnleighdesigns 9 месяцев назад
this is great im just starting my Framer journey - Do you or viewers know how to get standard universal fonts to show up in Framer, Arial, Verdana etc as they dont show up for me in font picker
@NicoloSodano
@NicoloSodano 9 месяцев назад
Hello! I am new to Framer, I am learning and would like to understand more, I followed your tutorial and there is one point I just can't get past. The position types; fixed, relative, fill and fit content, min and max width and height. I still can't, even though I am training myself, understand the layer hierarchy (I come from the world of graphic design), and to understand and use these options quickly, I often find myself confused about them. Can I get some help with this? A more comprehensive focused explanation? i have also studied the official guides, but they were not enough for me to understand the real differences and the right use. thank you
@AS-ld5mz
@AS-ld5mz 10 месяцев назад
do you how you add drop down menus? looks like you have to create a whole interactions set up from scratch?
@wings8099
@wings8099 Год назад
thank you!!!!!!!
@mattsterp748
@mattsterp748 Год назад
Im here mostly for Garys hair, nice video too.
@dgloria
@dgloria Год назад
How do you get the HTML and css, or get the source code? I assume it is not in the free version, but is it in the membership? I love that it automatically adds stuff to both tablet and mobile view, I don't seem to remember Figma doing that. Apart that it won't be good for an app website, because there are bespoke stuff on the app, and you have to customize your own components.
@IStMl
@IStMl Год назад
you can feed data from a databse and add custom React components
@yoman9446
@yoman9446 Год назад
Can you do a PenPot tutorial? The FOSS figma alternative.
@gashumba888
@gashumba888 Год назад
Considering the direction of Figma, PenPot will definitely be a good alternative.
@AhmedvevoLIVE
@AhmedvevoLIVE Год назад
Thank you for the Course buddy , please record at least 1440p , 👍🏻
@Crazystunts4190
@Crazystunts4190 7 месяцев назад
They remove the footer? Can’t seem to find it. They have the nab bar at top I can add in but not footer one
@yashasvibagri4120
@yashasvibagri4120 Год назад
How do i expand header & footer according to the screen size if its more than 1200? the header and footer dont expand in my case
@ikennaamaechi2054
@ikennaamaechi2054 9 месяцев назад
Awesome
@1nonlykingnaeem
@1nonlykingnaeem 5 месяцев назад
I have some questions to you. 1.Is it essential to learn figma before framer? 2.Is it essential to learn HTML CSS before framer? 3.What is the prerequisite for learning framer? 4.Is learning figma helps to framer? Please answer these questions I am new to this field.
@enogratechnologies1896
@enogratechnologies1896 Год назад
Can I export the code?
@kaioneal6160
@kaioneal6160 Год назад
is there a way to grab the code after I am finished with my design??
@almeDineshNaik
@almeDineshNaik Год назад
Once I Get In The Top Ten s Your My Credit ;)
@james.kaloki
@james.kaloki 6 месяцев назад
how does someone implrement negative margin in tools such as framer ?
@kaushikmitra6402
@kaushikmitra6402 8 месяцев назад
Hi Can I convert in this in CMS?
@melissaviesca2299
@melissaviesca2299 2 месяца назад
Why did you drag a Column component and delete a section, could you not have just dragged out a Frame? For the Hero Section
@sairahgonzalez
@sairahgonzalez Год назад
I wish you added the website copy made in framer so that I could easily copy paste the contents rather than manually typing all the text
@gavinjuen2764
@gavinjuen2764 Год назад
what its the shortcut for hand tools tho
@DaGai
@DaGai Год назад
How do I get html code from Framer?
@yashraj4272
@yashraj4272 Год назад
Damn i didn't even recognise you with the long here.. i was like.. oh no they changed the admin
@outpost31737
@outpost31737 Год назад
Very similar to Web Flow which I don't like. The interface is far too dense. Framer looks interesting though.
@offthepathworks9171
@offthepathworks9171 Год назад
Is there any real difference between the Framer website app and let's say Windows version?
@IStMl
@IStMl Год назад
no its a wrapper
@ianthehunter3532
@ianthehunter3532 Год назад
Please talk about more Figma alternatives :)
@Trazynn
@Trazynn Год назад
Framer is all you need.
@Trazynn
@Trazynn Год назад
Until Adobe buys it as well.
@ianthehunter3532
@ianthehunter3532 Год назад
@@Trazynn what about penpot?
@JamiltonMacedo
@JamiltonMacedo Год назад
@@Trazynn Already done haha
@IStMl
@IStMl Год назад
@@Trazynn the deal is blocked
@johnapple3471
@johnapple3471 Год назад
Framer is the go-to for motion design and hi-fi prototype and now site building, but I wouldnt build a website directly in Framer. Framer is available as a plugin in Figma!
@Ari-lp5bu
@Ari-lp5bu Год назад
Can we upload to file to hosting in 2023?
@IStMl
@IStMl Год назад
@@Ari-lp5bu you can directly publish to your domain
@IStMl
@IStMl Год назад
it takes less than 1 second literally
@bkkcloud
@bkkcloud Год назад
Can it inspect the code after published?
@David-xq7ef
@David-xq7ef Год назад
Yes. You Can inspect CSS with browser developper tool
@ThangPham-io3nk
@ThangPham-io3nk Год назад
Make big room sir
@ericsearing7808
@ericsearing7808 Год назад
Reminds me of dreamweaver but there I can switch between code and visual layout as well as integrate data with coldfusion/php. Front page in 1998 was not quite as advanced but then we didn't have CSS and JS and smart browsers doing a bunch of work. Making the text or images move was popular with Flash MX. Nothing new here other than Gary's excellent design approach.
@edwinchidi
@edwinchidi Год назад
There's something new and it's that Framer is independent, not part of some Creative Cloud Subscription.
@froglegsfried1303
@froglegsfried1303 Год назад
@@edwinchidi Flash and Dreamweaver were once free of Adobe but sadly that is no more.
@Rio-by1eh
@Rio-by1eh 8 месяцев назад
Guys now that it has been a Year, can somone provide an input , 1) if they have gone directly to Framer to start designing : YES : 2) NO. Additionally is the right path to using FRAMER first to learn FIGMA , where you prototype…? I’m a bit baffled as to the CORRECT way to get to the Web design. I’ve only been on the sidelines watching but never actively doing any of these tools … appreciate your responses✅
@divye.ruhela
@divye.ruhela 3 месяца назад
It's been 5 months since you posted this. Did you find a definitive answer to your questions?
@plutus4047
@plutus4047 Год назад
So will coding die in the future?
@tonyvito5062
@tonyvito5062 Год назад
code will never die this program itself is made by code
@heroe1486
@heroe1486 Год назад
The day an AI would be able to build Facebook then we'd all go for ML, not before haha, tools like this don't even target half a percent of what "coding" is able to
@MixLife96
@MixLife96 8 месяцев назад
how to make web app on framer without code
@adilsonantonioramos8929
@adilsonantonioramos8929 Год назад
Lmao im feel exactly the sa
@setsaturnip4123
@setsaturnip4123 Год назад
Literally many people don't use gms
@offthepathworks9171
@offthepathworks9171 Год назад
Aligning content feels a bit off, jankier than Figma imho.
@hoanganhmai1211
@hoanganhmai1211 Год назад
dude sa lmfao
@IlyaRa
@IlyaRa Год назад
adobe buy figma 😞for 20 billions
@sashakuridza3945
@sashakuridza3945 Год назад
OMG
@DesignCourse
@DesignCourse Год назад
Possibly. I'm not too worried about it, in the short term at least.
@viniciuschinen1689
@viniciuschinen1689 Год назад
are u kidding? ooooh no if this is true.
@viniciuschinen1689
@viniciuschinen1689 Год назад
adobe will probably destroy the platform . thats too sad.
@DesignCourse
@DesignCourse Год назад
@@viniciuschinen1689 I don't think so. It's hard to justify destroying $20 billion of your money. ;)
@techtipsuk
@techtipsuk Год назад
We want code, this is web design for the intellectually challenged. This is just a poor mans Webflow which I don't like.
@heroe1486
@heroe1486 Год назад
This
@cdey3886
@cdey3886 Год назад
code all the way!
@clout8270
@clout8270 Год назад
Another dude who thinks he's smart because he can code while the "intellectually challenged" that use Framer or Webflow make 10 times more money than him
@dannycabrera8466
@dannycabrera8466 Год назад
@@clout8270 that’s definitely not true
@heroe1486
@heroe1486 Год назад
@@clout8270 They absolutely don't (or have the most dumb clients in the world and congratulations to them for finding perfect preys, they should try to work in other field to profit from this skill tho) and are at the mercy of some closed source, highly limited softwares, a developer could build something similar to webflow, a webflow user can build a standardized landing page, guess who is more likely to profit from his skills ?
@mohssinechnaf1057
@mohssinechnaf1057 4 месяца назад
Very good tuto, recently i started using it but I'm not finding how can link pages of About Us Contact Us... with the home page, when I click on About for example the browser showcases another tab. if someone can help me please?
@Superak07
@Superak07 Год назад
can we export code in free version?
@DesignCourse
@DesignCourse Год назад
I do not believe you can export code.
@Superak07
@Superak07 Год назад
@@DesignCourse thanks for answering :( btw your kickstart UI/UX course, helped me allot :D thanks sensei
Далее
Why I switched to Framer from Webflow
12:17
Просмотров 149 тыс.
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Просмотров 459 тыс.
Framer for Beginners: Avoid the #1 Rookie Mistake
16:47
Design Better Than 99% of UI Designers
14:52
Просмотров 178 тыс.
Build an E-com Store with Framer CMS
33:15
Просмотров 66 тыс.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 725 тыс.
Framer Crash Course
34:49
Просмотров 25 тыс.
If I started UI/UX Design in 2024, I'd Do This!
8:22
Просмотров 195 тыс.
UI/UX Desktop Navigations in Figma (Challenge)
31:21
Sprinting with More and More Money
0:29
Просмотров 168 млн