Video není dostupné.
Omlouváme se.

world's shortest Framer course

Sdílet
Vložit
  • čas přidán 3. 08. 2024
  • Here's an ultra quick intro to Framer, a nocode platform that allows you to make beautiful and modern websites intuitively with all sorts animations and effects.
    ✨ Use code "FRAMER25INFLUENCER" to get 25% off first 3 months of Mini and Basic site subscription on Framer:
    framer.com/?via=juxtopposed
    // Helpful links:
    Framer site made in the vid: shortest-course.framer.website/
    sites featured: www.sebastian-martinez.com and www.wegrow.design/
    // ✨ Let's connect:
    Twitter: / juxtopposed
    CodePen: codepen.io/Juxtopposed
    -----
    // Timestamps:
    00:00 Intro
    00:15 Environment
    00:40 Breakpoints
    01:08 Assets & Styles
    01:44 Layout
    02:37 Add Elements
    03:19 Position
    04:20 Properties
    05:14 Components
    06:00 Final Points
    ------
    #framer #framercourse #framertutorial #framerpartner #buildwithframer

Komentáře • 141

  • @MatthiasFeist-de
    @MatthiasFeist-de Před měsícem +324

    Suggestion for the next videos: Also dig a little into the pricing. I actually use Framer in production and I will definitely move away from it as soon as I have time because their pricing is outrageously expensive. Basically they charge for every little feature that other platforms have included.

    • @Solanaar
      @Solanaar Před měsícem +11

      do you have alternatives? I am currently looking for applying for a job as app- and webdesigner and need to make a portfolio page that itself should show off my skills. But I want to be flexible in my host options, so stuff like wix, etc. is a no go imo.

    • @bencehorvath8016
      @bencehorvath8016 Před měsícem

      @@SolanaarBootstrap Studio is a pretty good alternative

    • @omrisadovsky
      @omrisadovsky Před měsícem +11

      @@Solanaar honestly, keep it in framer. after research that I did its the most easy and if you don't want spend the extra money you don't have to. you can build a portfolio in few days just by remixing an already made template. and the only cost its the domain. ( and you don't have to also because framer give a free subdomain )

    • @seb-astian-design
      @seb-astian-design Před měsícem +4

      sadly the same thing is true for webflow. do yuo have a comparison between them both?

    • @omrisadovsky
      @omrisadovsky Před měsícem +5

      @@seb-astian-design I didn't do much research for webflow because, to be honest, it's more of a learning curve for me. I came from Wordpress and Figma, but I hated Wordpress. But now that I know Framer, I'm eager to move on to learning Webflow.

  • @Dni..
    @Dni.. Před měsícem +263

    how do you speak fluent advertiser?

    • @kumbidi1770
      @kumbidi1770 Před měsícem

      😂😂

    • @Patrick-gm3fb
      @Patrick-gm3fb Před měsícem +4

      This is what happens when someone has legit confidence in the product they're trying to sell.

  • @aynehancer5959
    @aynehancer5959 Před měsícem +49

    "good news is you can learn it in no time"
    bad news is that it's way too expensive for what it is and monthly visitors limit is applied to you website. Framer is a prison.

    • @edenassos
      @edenassos Před měsícem +1

      "I'm broke."

    • @aynehancer5959
      @aynehancer5959 Před měsícem +12

      @@edenassos If you don't get what is a tech golden cage, then you must love you iPhone.

    • @geoffplywood6112
      @geoffplywood6112 Před měsícem

      Is webflow less expensive?

    • @edenassos
      @edenassos Před měsícem

      @@aynehancer5959 A lot of words for someone who is broke. Get a job. I have both iPhone and a Samsung Z Fold. We are not the same.

    • @aynehancer5959
      @aynehancer5959 Před měsícem

      @@geoffplywood6112 Webflow is outdated comapring to Framer, so no need to compare a wooden axe with a metal one.
      Webflow is crazy expensive too by the way.

  • @stevepaul1872
    @stevepaul1872 Před měsícem +18

    Note to everyone: it is priced if you want to add a custom domain

  • @Tosti_bakker
    @Tosti_bakker Před měsícem +8

    I read the title as "Farmer course" and I was very confused, but still clicked...
    Then I read it again lol

  • @menschmatthes
    @menschmatthes Před měsícem +37

    Where did you come from and why are your Videos so high quality fromt he get go and are still getting better every time? Its crazy. I only got here because i was wondering where the Spotify Heart went and youtube using my google searh data to algortihm me this video. And now i will never leave again because this content just helps me so much. AAAA

  • @cristinelcostachescu9585
    @cristinelcostachescu9585 Před měsícem +38

    NGL, I like your UI redesign work more than this type of content. But as a tutorial from you, that's top-notch!

  • @omrisadovsky
    @omrisadovsky Před měsícem +8

    After nearly a year of practicing Framer, I finally get the relationship between positions and their types, thanks to your explanation!😳😅

    • @edenassos
      @edenassos Před měsícem +4

      Damn, someone needs to learn some critical thinking.

  • @fic-it
    @fic-it Před měsícem +4

    Oh my gosh just YESTERDAY I was thinking I should learn framer and webflow only to see you post this today. I adore you to bits, thank you!!

  • @williamericson
    @williamericson Před měsícem +2

    Jux I literally was looking for this and I saw that my favorite UX CZcamsr just posted a vid with exactly what I needed. Many thanks broski

  • @sanketpatrikar
    @sanketpatrikar Před měsícem +15

    framer motion next please!

  • @freckhard
    @freckhard Před měsícem +1

    Highest respect to all of you making and breaking things and creating beautiful stuff. As a keyboard only person I can not think of something that would come less smooth out of my brain than design wether web/app or anything other so kudos to your skills and talents, oh and to Juxtopposed for being my guilty pleasure (I would never have believed to being subscribed to an "art"/"design" channel lol 🙂)

  • @pixxle6861
    @pixxle6861 Před měsícem +30

    SHES BACK!!1

  • @waut
    @waut Před měsícem +3

    came at the PERFECT time

  • @barimull
    @barimull Před měsícem

    Just what I needed to kickstart my portfolio on Framer! Thanks 💛

  • @Ari-lv8nc
    @Ari-lv8nc Před měsícem +5

    Warning : Framer *does not* allow you to export your websites

  • @AndrewEugene
    @AndrewEugene Před 23 dny

    That sticky, absolute visual explainer was on point!

  • @LazyMoka
    @LazyMoka Před měsícem

    man, i love these videos

  • @PourasRaut
    @PourasRaut Před měsícem

    Goddamn I can’t take my eyes off from your videos once I started watching them

  • @waytolegacy
    @waytolegacy Před měsícem

    You are ASTONISHING ❤❤

  • @arnavshukla2408
    @arnavshukla2408 Před měsícem +2

    Another banger let's go 🤍

  • @capability-snob
    @capability-snob Před měsícem +1

    My big fear is that a designer hands me one of these and now I have to intuit the CSS and document structure they were intending.

  • @Solanaar
    @Solanaar Před měsícem

    Perfect timing! I am currently looking to get into the app- and webdesign industry. Figma is already super intuitive so I immediately got hooked on the familiar interface of framer. I know there's a figma importer plugin for framer, so would you recommend designing in figma and then import to framer for all the interactions or directly work in framer?
    Also I've heard the pricing can be high, does framer offer the flexibility of exporting the actual files for self-hosting or are you locked into framer as a host when using it?

  • @user-fw1ok4lz2j
    @user-fw1ok4lz2j Před měsícem +1

    you need to make a course, I'll pay anything for it

  • @NaveenRaajK
    @NaveenRaajK Před měsícem

    we need more cats to invade the videossss just another awesome banger and crispy vid good to go and post regularly

  • @ronakdave2437
    @ronakdave2437 Před 12 dny

    Framer should hire you as tutorial expert

  • @that_guy1211
    @that_guy1211 Před měsícem +1

    ah yes, lovely how my teacher forces us to use Google sites, doesn't allow us to write our own HTML, even tho we were taught how, and how she says anything other than google sites isn't real website development cause you can just template, and templates are bad
    =)
    love my teacher /s /j

  • @nerusnotfound
    @nerusnotfound Před měsícem +1

    I love her voice 😍

  • @shrunotshur
    @shrunotshur Před měsícem +1

    she makes things so simple to understand like a person would explain it to 5yr old.
    like yess girl you understood the assignment !!

  • @bravo8932
    @bravo8932 Před měsícem

    i love your videos and i dont know why

  • @Gagan_salwan
    @Gagan_salwan Před 16 dny

    I started designing my website on framer but then I wanted to change the audio icon which is a pre built component inside framer and we can't make changes to them. So i switched back to webflow.

  • @Pollychoiyewon
    @Pollychoiyewon Před měsícem

    thank you for the promo codes 🥺

  • @greyw0lv
    @greyw0lv Před měsícem

    love the inter respect

  • @EthanBB
    @EthanBB Před měsícem +5

    Framer is a bit useless since you can't export code and put it on your own hosting.

    • @edenassos
      @edenassos Před měsícem +1

      Useless. Sounds like a comment I just read.

  • @Orca4YT
    @Orca4YT Před měsícem +20

    You should redesign the Fortnite ui in a video. The lobby, shop, battle pass, all of that, and maybe the ui like the health, sprint, shield and more

    • @MoleNihil
      @MoleNihil Před měsícem +8

      ew

    • @CleverYeti
      @CleverYeti Před měsícem

      She already remade the lobby and the button outline animation on CodePen and I think a redesign could be interesting.

  • @Xenthiums
    @Xenthiums Před měsícem +1

    Make a penpot course next?

  • @FaizKhan-of9qv
    @FaizKhan-of9qv Před měsícem

    your voice is addictive

  • @10zDelek
    @10zDelek Před měsícem

    basically Figma but is deployable ?. why Figma hasn't thought of this feature yet. this would make Figma 10 times feasible. i was hoping for this announcement in the Figma Config :(

  • @tonystarkmowa
    @tonystarkmowa Před 28 dny

    I want to learn all new techniques like gsap and modern practices but where I can learn them with a structured way?

  • @3xist
    @3xist Před měsícem

    juxtopposed the goat

  • @boston.z2651
    @boston.z2651 Před měsícem

    world's shortest webflow course dropping in near future?

  • @triplexd
    @triplexd Před měsícem

    well needed tutorial, thank you

  • @iscream8963
    @iscream8963 Před měsícem

    this video came when i just broke my 12 hr work in weflow

  • @jonyeazel
    @jonyeazel Před měsícem

    wish the video would have been done with better contrast from the elements and the background. other than that, great content as usual.

  • @_Levi2589
    @_Levi2589 Před měsícem +3

    i cant stop binging your videos helpp

  • @othmaneer-refaly9216
    @othmaneer-refaly9216 Před měsícem

    more videos about Framer please

  • @paul_e123
    @paul_e123 Před měsícem

    I'm already comfortable building websites with React. Is there any point learning Framer? Like is it actually faster to build in framer than React? Or is Framer just for people who don't want to learn to code?

  • @banksoor
    @banksoor Před měsícem +1

    It surely looks cool and convenient, but how does it perform on the DOM and backend? Does it provide maintainability and scalability of an entire website?

    • @edenassos
      @edenassos Před měsícem

      Stop trying to sound smart, the Framer engineers know this way better than you.

    • @banksoor
      @banksoor Před měsícem +8

      @@edenassos stop sounding stupid please, what i said isn't being smart it's just asking from a professional point of view

    • @user-lj4lo7cx7m
      @user-lj4lo7cx7m Před 27 dny

      ​@edenassos do you get paid for writing stupid comments?

    • @edenassos
      @edenassos Před 27 dny

      @@user-lj4lo7cx7m Do you get paid for being mediocre in life? Doubt it, that's why you're broke.

    • @edenassos
      @edenassos Před 27 dny

      @@banksoor A simple google will tell you all the information you need but you had to ask it here like some 78 year old grandma who has never used a computer in their life.

  • @Enuman
    @Enuman Před měsícem

    You are awesome. that's it.

  • @lilililil8201
    @lilililil8201 Před měsícem

    Grid and stack are grid and flex in css

  • @BrainBitss
    @BrainBitss Před měsícem

    Cool video, Can you please make a new Webflow tutorial?.

  • @faa-
    @faa- Před měsícem

    👤+Yeah!

  • @krytec_gaming
    @krytec_gaming Před měsícem

    Please do a Buzzfeed redesign!

  • @tacticalassaultanteater9678

    Inter is amazing, thank you!
    I'm a programmer who actually enjoys CSS a lot, so I was about to click off this video, but I decided to stick around and I'm richer with another beautiful font.

  • @CaptainFalcon92
    @CaptainFalcon92 Před měsícem +2

    So essentially a gui for making entry-level css. Nice for somes but i'll stick with knowing actual css.

    • @llamamilk
      @llamamilk Před měsícem

      i think its mostly for web-design and prototyping, like an alternative for Figma. you need to explain your ideas and creative works to a client or dev team but you want them to grasp a full picture, i havent tried framer but i doubt it can be attached to back-end without actual coding. but as a designer that knows how User interaction works and want to create great experiences for users translating your idea's from creative outlet to actual code takes the "Fun" out of designing something. So this tool allows those who have fun being creative to be creative and leaves room for those who enjoy coding and problem solving.

    • @edenassos
      @edenassos Před měsícem +1

      You can use code in Framer for anything that doesn't exist within the UI. Grow a brain maybe.

  • @Zack-dw5op
    @Zack-dw5op Před měsícem

    I prefer grid. Stack feels like it might as well just be a carousel

  • @artificiyal
    @artificiyal Před měsícem

    world's shortest course ❤❤

  • @Haluku9
    @Haluku9 Před měsícem

    Amazing Video as always!!! Thank you sooo much

  • @tacticalassaultanteater9678
    @tacticalassaultanteater9678 Před měsícem +1

    Think twice before using soft cursors. Your website or framework won't adapt to the client computer's available cpu time. They're fine on fancy over-the-top landing pages, that's what a landing page is for, but users shouldn't ever have to visit a page with a soft cursor or excessive scrolljacking in a hurry.

    • @arkitekt1981
      @arkitekt1981 Před měsícem

      I personally think overriding scroll behaviour and cursor is a huge problem and should never be done. unless you're going for a full application experience like a game, there's no reason a user should have to learn how to interact with your website in any other way than normal. hurts everything, including accessibility.

    • @tacticalassaultanteater9678
      @tacticalassaultanteater9678 Před měsícem

      @@arkitekt1981 If done right, scroll jacking is supposed to disorient a bit. The narrative is that you're going on a journey. You can't get lost because there's only one way to go, but you should just take the road at your own pace and watch the show.

    • @tacticalassaultanteater9678
      @tacticalassaultanteater9678 Před měsícem

      @@arkitekt1981 it is a hand cranked animatic, if you will.

  • @cax_official
    @cax_official Před měsícem

    Bro are you a gigachad ?

  • @karma3040
    @karma3040 Před měsícem

    Eyy love your work! Keep it up

  • @Gdeepanshu_
    @Gdeepanshu_ Před měsícem

    Obsessed with your content !!

  • @zyan...
    @zyan... Před 5 dny

    o próximo redesign poderia ser do notion ou SoundCloud

  • @EpiccDragon
    @EpiccDragon Před měsícem +8

    Stack is better for me 😊

  • @noahwaaga5079
    @noahwaaga5079 Před měsícem

    But what if I'm a masochist and want to write the html/css yourself

  • @kitamashi
    @kitamashi Před měsícem

    1:00 smaller than 390px?

  • @jeanlucdecoster
    @jeanlucdecoster Před měsícem

    Please redesign Apple Music and Discord UI!!

  • @ivnshkshn
    @ivnshkshn Před měsícem

    I like your videos, your delivery, your voice
    Thanks for the quality content

  • @jotyy318
    @jotyy318 Před měsícem

    cool

  • @brnmln
    @brnmln Před měsícem

    Oh look it's Teleportina

  • @jiessix
    @jiessix Před měsícem

    What's the difference with figma ?

  • @EpiccDragon
    @EpiccDragon Před měsícem

  • @morphingmandalas8703
    @morphingmandalas8703 Před měsícem +3

    Can you do it for figma

    • @juxtopposed
      @juxtopposed  Před měsícem +2

      already have. check my channel :D

  • @avi12
    @avi12 Před měsícem

    IMO the best responsiveness isn't "adaptive" but rather "fluid", where there are no breakpoints but rather the layout adapts to all screen sizes effortlessly by using relative units like percentages

  • @marcusdelictus
    @marcusdelictus Před 21 dnem

    its all cool, but then you realize youres stuck there with another subscription. and you cant export de design. its a no for me

  • @cdkw2
    @cdkw2 Před měsícem

    3:12 ellipses. My god this is my first time listening that pronunciation of ellipse, my favorite conic section got done bad 😭

  • @daydream8451
    @daydream8451 Před 25 dny

    I'm just hear for your voice😇

  • @karanheer
    @karanheer Před měsícem +5

    your videos are so relaxing, at the same time so educating ❤

  • @mathieul4303
    @mathieul4303 Před měsícem

    I want an extended tutorial please 😅

  • @user-li7cm9gt8g
    @user-li7cm9gt8g Před měsícem

    W

  • @Isteyak-78
    @Isteyak-78 Před měsícem

    It's the easiest web builder I've tried

  • @cax_official
    @cax_official Před měsícem

    I am a psycopath, sure at 1000000% 😂

  • @LVsale
    @LVsale Před měsícem

    Figma or framer?

  • @CoolAlex4734
    @CoolAlex4734 Před měsícem

    I thought framer said figma 😂

  • @lazuee
    @lazuee Před měsícem

    it's like figma.

  • @ismailsultan2577
    @ismailsultan2577 Před měsícem +1

    its such a shame you cannot export the website

  • @xeroxtra
    @xeroxtra Před měsícem

    speedran

  • @herosova
    @herosova Před měsícem +2

    framer is just a fancy name for i will charge you a fortune for the free stuff which you can learn but because of your laziness you cannot learn

  • @IgnatRemizov
    @IgnatRemizov Před měsícem

    But why would you ever use this over Figma?

    • @juxtopposed
      @juxtopposed  Před měsícem +4

      well, figma is a design tool that helps finalize the design, but it doesn't actually build a functioning site.

  • @Clinxt
    @Clinxt Před měsícem

    Wow, I am first

    • @Clinxt
      @Clinxt Před měsícem

      OMG JUXTOPPOSED HEARTED MY COMMENT WOAH

    • @Clinxt
      @Clinxt Před měsícem

      @Juxtopposed you're the best yay

    • @Clinxt
      @Clinxt Před měsícem

      @juxtopposed I wuv u

  • @ramanujachowdarykoneru7305
    @ramanujachowdarykoneru7305 Před měsícem

    keep framer on the low...ig

  • @NutchapolSal
    @NutchapolSal Před 9 dny

    looks like Figma