Learn Webflow in 16 Minutes (Crash Course)

Поділитися
Вставка
  • Опубліковано 30 січ 2025

КОМЕНТАРІ • 672

  • @Avanke.1
    @Avanke.1 4 роки тому +66

    I just learned how to use Webflow in 16 minutes... For real, I just began working on Webflow to experiment and this totally works!

    • @FluxAcademy
      @FluxAcademy  4 роки тому +2

      Yey!! Success 💪

    • @Vspcoder
      @Vspcoder 2 місяці тому

      Ye❤ same here​@@FluxAcademy

  • @garyvoigt321
    @garyvoigt321 4 роки тому +429

    The 30-second box model explanation was rad. Breaks it down and takes the mystery that tends to over-complicate web basics.

    • @FluxAcademy
      @FluxAcademy  4 роки тому +13

      Appreciate it 🙏

    • @rmcellig
      @rmcellig 2 роки тому

      @@FluxAcademy loved your box model explaination!!!

    • @lucutes2936
      @lucutes2936 Рік тому

      yes

  • @bartderuyck
    @bartderuyck 4 роки тому +431

    Say what you want about Webflow but seeing something like this come together in just 16 minutes is simply amazing. Great little showcase, Ran!

    • @DarioVillirilli
      @DarioVillirilli 4 роки тому +7

      What are the criticisms about Webflow? So far I can only see the positive.

    • @bartderuyck
      @bartderuyck 4 роки тому +50

      @@DarioVillirilli Well, every platform has its downsides. Webflow is very designer-friendly but has limitations, too. Ecommerce is not as feature-rich as some competitors, multilingual websites are a huge handicap, it lacks some flexibility for custom code or design. There are probably more. It's always a tradeoff. WordPress has its advantages (super-flexible, plethora of plugins) and its disadvantages (bloated code with themes and plugins, security issues). And the same goes for any other platform, be it Drupal, static site generators, or just writing the code yourself. I think it's good to be aware of the limitations and understand that each project requires a thoughtful approach when it comes to choosing the right platform.

    • @DarioVillirilli
      @DarioVillirilli 4 роки тому +13

      @@bartderuyck woah that was an awesome answer. Thanks for sharing your perspective. It doesn't concern me specifically but it's good to be aware of it.

    • @waene5324
      @waene5324 3 роки тому +4

      @@bartderuyck That was some great Info.
      If you don't mind, could you name some websites/ services you could recommend & are worth to check out (maybe even why - if you got a spare minute)?
      You seem quite knowledgable in this field, and I'd gladly take your advice, as I just got started in this industry!
      Thanks in advance, Mr Ruyck! :)

    • @alessiodigiacomo3725
      @alessiodigiacomo3725 3 роки тому +2

      @@bartderuyck Can you take your code out after the initial design?

  • @johnbowman3630
    @johnbowman3630 2 роки тому +103

    Obviously a good web designer, but you sir have a gift for teaching as well.
    The 'boxes within boxes' explanation was the most concise description of web design as a whole I've ever heard.
    Kudos!

  • @ayushkumarchandra
    @ayushkumarchandra 4 роки тому +190

    Awesome as usual!
    I'm a web developer and an designer and know these things quite well but still your explanation and teaching leaves me speechless everytime.
    Wish I had an awesome teacher like you when I was learning design and development!

    • @FluxAcademy
      @FluxAcademy  4 роки тому +12

      Thanks for the kind words!

    • @saylormilan6693
      @saylormilan6693 2 роки тому +3

      Do you still do web design?

    • @transcendstandards1
      @transcendstandards1 Рік тому +2

      @@saylormilan6693 I do if you still need help

    • @adbtqcsq-mm8os
      @adbtqcsq-mm8os Рік тому

      Been using a few website builders but still searching for 'the one'. Anyone tried Kraft Builder? Heard it's great for pros."

  • @hitbox7422
    @hitbox7422 2 роки тому +81

    alot of people in webflow use pixels to give certain objects size propertys, but the problem here is that on differend screen resolutions, pixel size defined objects appear smaller/bigger, so you actually need to define parent boxes with viewport height and viewport width, and child elements with percentage. That way you keep content responsive.

    • @thepinwale
      @thepinwale 2 роки тому +1

      What the best way to make the font size responsive as well?

    • @hitbox7422
      @hitbox7422 2 роки тому +8

      @@thepinwale the best way I've came up with it is downloading the chrome extension finsweet, it enables a few extra options in webflow, one of them beeing a REM-calculation tool that re-scales the REM sizing unit automatically depending on the breakpoint you view the project from. This way you define font sizes always in REM and the CSS calculation will automatically resize it to the desired format. If you're a non-coder this can take a few hours to become comfortable with, but once you get the hang if it you can adjust responsive designs in seconds for every breakpoint. I transitioned to defining everything in REM, besides global parent containers that inherit the body ofc.

    • @thepinwale
      @thepinwale 2 роки тому

      @@hitbox7422 ty!

    • @Z_Victory_Z
      @Z_Victory_Z Рік тому

      properties

  • @mofojackson
    @mofojackson 3 роки тому +67

    16 minutes and this is by far my favorite tutorial so far! Thanks so much or putting this together Flux! Just what I needed as a first time WF user!

  • @panveel
    @panveel 3 роки тому +12

    This is by far the shortest tutorial I have ever seen with precise and amazing impact.

  • @saidmutan1746
    @saidmutan1746 Рік тому +5

    This is the best video on UA-cam about learning a skill , like bro thanks so much ! A person who actually understands what it is to not be slow

  • @pgbombketchup
    @pgbombketchup Рік тому +6

    So clear, so fast but not too fast to comprehend. Just fantastic.

  • @YasmeenCheM
    @YasmeenCheM 2 роки тому +7

    I'm upskilling by learning Webflow and your tutorial is a great introduction without getting bogged down by minute details. You've even given me some ideas on how to design my protfolio. Cheers!

  • @eissaibrahim31
    @eissaibrahim31 Рік тому +1

    I already know the html and css and after watching this video, I am able to make my portfolio using web flow .. Thanks a lot.. You are a great teacher.. God bless you

  • @saikrishnasunkam4344
    @saikrishnasunkam4344 2 роки тому

    This might be the most efficient dev tutorial I've seen in my life

  • @windmaomao
    @windmaomao 2 роки тому

    I have been making website for 10 years, and found this video very inspiring. Not only you can do all the things we normally do visually, but it also can do things really quick. Which means it gives more time to do other creative stuff.

    • @striveandvibe2214
      @striveandvibe2214 2 роки тому

      With 10 YOE it should take you almost the same amount of time and make it responsive.

  • @zachardman4530
    @zachardman4530 2 роки тому +1

    Best 16min tutorial I have ever seen on web design or webapps.

  • @LindieBotes
    @LindieBotes 3 роки тому +20

    This was super useful and consice. Thank you!!

  • @Kimikawaii_ii
    @Kimikawaii_ii 11 місяців тому

    As someone who started coding using Visual Studio, I have to say, Webflow looks so much easier to use since I am not planning on being a web developer. I just want it for personal use. This is great! Thank you!

  • @briansloops4724
    @briansloops4724 2 місяці тому

    I just finished watching and doing this tutorial and created and my first website in 16 mins! Had a lot of trial and error because I was having some weird things happen so I just kept pressing Ctrl-Z and rewound the video over and over and finally got it! Super awesome! A somewhat complicated tool to use but I did it! Looking to get into the Webflow Masterclass after watching this brief tutorial!

    • @FluxAcademy
      @FluxAcademy  2 місяці тому

      That's awesome! Glad you were able to get it done 👏

  • @trkauff
    @trkauff 4 роки тому +20

    Exellent Ran! Starting to build my personal photography website, exactly the basics to get me started. Hopefully I will become familiar enough with the webflow tool to take your master class. COVID has forced me to seek a home-based business right about the time I was getting the retire within 2 years... Your timing is impeccable, thanks again!

    • @FluxAcademy
      @FluxAcademy  4 роки тому

      Good luck on this new journey!

  • @genzee4567
    @genzee4567 Рік тому +1

    Thanks a lot bro for saving me! I have webflow dev interview today and I reacted what the heck is webflow?? Your video gave me an idea and made me realize that my entire Html,css clases are waste!! DAAm ! this webflow is timesaver!!

  • @rishabhkashyap2671
    @rishabhkashyap2671 3 роки тому +2

    I have recently entered the digital marketing world and web designing is something that I am more focused on because of the excitement I feel while designing a webpage. Designing using webflow is a totally new topic to me and starting this topic with your video is definitely a boost for learning more of designing skills. Thank you so much for this amazing video. I hope to learn a lot from your channel and enhance my skills like yours. Respect 🔥

  • @benjinobel
    @benjinobel 3 роки тому +15

    Watched this tutorial for 1 issue that I have: repositioning a picture.
    And boom, his picture positions itself.
    God damn it. I'm just a beginner, don't blame me. Haha
    Great tutorial btw!

  • @LivingTheMoment-101
    @LivingTheMoment-101 Рік тому +1

    Amazing video. Planning to make my own portfolio website using webflow and this video helps me alot. I was confusingly clicking on everything and now that I watch this video, I have a better understanding on what to do. Thank you!

  • @Oetosyrus
    @Oetosyrus 2 роки тому +2

    From what I understand, If you have some knowledge of HTML/CSS it makes it more easy to understand what those words mean in more details, thank you for this amazing tutorial!

  • @Jojo-pf4gl
    @Jojo-pf4gl 2 роки тому

    I watched the video twice, before and after learning html and css. Everything is more clear after learning

  • @dritzzhaynes7217
    @dritzzhaynes7217 9 місяців тому

    wow your opening simplified some things very quickly. I'm designing my own website for the first time. I've watched a few other videos of yours, which has convinced me to use Webflow as I've been discovering the best website builders to use for a number of days now. I think I'm going to be watching a lot of your videos over the next few days and possibly weeks to get combatable with it.

  • @BlakeCarlson-p6s
    @BlakeCarlson-p6s Місяць тому +1

    Really clever explanation and no unnecessary verbiage! Respect! + subscription

    • @FluxAcademy
      @FluxAcademy  Місяць тому

      Glad you liked it! Try our newer Webflow tutorials for the most up-to-date version.

  • @weberwong5197
    @weberwong5197 2 роки тому

    that 30 second explanation of html & CSS was poetry, major props dude

  • @Reputate
    @Reputate 2 місяці тому

    Thanks!! Great tutorial

  • @france4me117
    @france4me117 2 роки тому +1

    This is absolutely brilliant ... WOW! that is fast :) As I only used the Adobe Illustrator, I am trying to learn this Webflow as a friend of mine asked be to build a new website for them as they use Webflow ... Thanks a million for this introduction

  • @maansibislam977
    @maansibislam977 2 роки тому

    Out of nowhere at 3AM, this video made me gain interest in mastering Webflow. Thanks boss😂❤️

  • @DeFiPonzi
    @DeFiPonzi Рік тому

    This is such a too the point video - explains what webflow is, shows how to build a quick design and tailored in such a way that a newbie with no experience could understand! 😮
    I had to subscribe.

  • @MCHdesu
    @MCHdesu 11 місяців тому

    Thank you so much! Very Helpful! I was having such a hard time trying to figure out webflow and your videos have made it so easy to learn the basics. Thanks Ran! Best of luck

  • @Slayermunch
    @Slayermunch 3 роки тому

    Why is your channel so amazing? Why are you so amazing Ran?? I mean I literally have no words than Love your channel and content. I mean i just dont have any words. Ran really you are so amazing i cant stress this enough. Your channel is helping designers who are not that great in their financial background, students who cant go to online schools or offline wher heavy fee is demanded. For students like those your content is Bible. Thanks man.

  • @JaredHuntsinger
    @JaredHuntsinger 2 місяці тому

    This was an excellent introduction. I appreciated how you just jumped right in and started teaching. Thank you.

    • @FluxAcademy
      @FluxAcademy  2 місяці тому +1

      Great to hear Jared. We have some 2024 Webflow tutorials for beginners on the channel you might find helpful.

  • @rklokesh12
    @rklokesh12 Рік тому

    This short tutorial made me go all into the webflow, thanks for introducing me to webflow.

  • @MarcusRideout
    @MarcusRideout 2 роки тому +2

    Dude, this video was a phenomenal introduction to Webflow. Thanks for making this kick-ass resource for a first time user!!!

  • @createitwithmj6914
    @createitwithmj6914 3 роки тому +28

    Am I the only one who really loves the colors of the bottle Ran has?😂🤩

  • @kaanbeyhan
    @kaanbeyhan 5 місяців тому

    Amazing! The only two things would make this even more more perfect: How to keep building in a scroll, and how this will look on mobile + how to edit that one. But regardless, one of the best Webflow introduction videos I've seen. Thank you

  • @tymeplus
    @tymeplus 3 роки тому

    This is an amazing teacher. He knows this topic so well... You are great mehn...

  • @y_social_
    @y_social_ 2 роки тому

    Bro after tearing my hair sorting through lines of css and html, this brought tears of joy to my eyes.

  • @n_i_cho_las
    @n_i_cho_las 2 роки тому +1

    Nice brother. Your videos are helping me get better at web design!

  • @TheDapperBrotherTV
    @TheDapperBrotherTV 3 роки тому

    Let it be known that THIS was the video that convinced me to use webflow!

  • @IUSTITA
    @IUSTITA 3 роки тому

    One of my favorite channels on UA-cam. BIG SHOUT OUT TO FLUX!!!!

  • @gianna4042
    @gianna4042 2 роки тому

    Squarespace could never. It's so limiting. I really appreciate the creative freedom Webflow allows.

  • @stephencottrelll
    @stephencottrelll Рік тому

    Just watched this video to get a taster of Webflow and it was such a great introduction. Thanks!

  • @sahilmusicsss
    @sahilmusicsss 4 місяці тому

    My first Web flow tutorial , easily understandable !

  • @brutus8123
    @brutus8123 4 місяці тому

    Great quick video for basics! Btw I loooove the CLS!

  • @jeeiee_com
    @jeeiee_com 4 роки тому +550

    Fun Fact: You need 16 hours of research before you start designing 😀
    Thanks for the 500+ votes ✅

    • @keetalux
      @keetalux 4 роки тому +4

      lolol

    • @garyfisher2006
      @garyfisher2006 3 роки тому +9

      Haha no u dont lol

    • @lassef3692
      @lassef3692 3 роки тому +41

      Love this comment because this is exactly what clients forget, all the time off screen thinking about the design and all the research that goes in to their project

    • @michael-Valley
      @michael-Valley 3 роки тому +43

      ​@@vesakoskelainen Fun fact: we rarely spend the time we actually need for research because of rushing clients and tight schedules

    • @judemarino8914
      @judemarino8914 3 роки тому +21

      @@vesakoskelainen fun fact: he didn’t say it takes 16 hours to become a good designer, he said he does 16 hours of research prior to beginning to design

  • @shashwatdwivedi8184
    @shashwatdwivedi8184 2 роки тому

    It took me more time finding images than staying with tutorial.
    Come One man Share a drive link or something in description.
    Loved the tutorial.

  • @acestudioscouk-Ace-G0ACE
    @acestudioscouk-Ace-G0ACE 2 роки тому

    Many years ago I failed at making websites using Dreamweaver. This seems more logical, thanks for the video.

  • @faizahfaiqah6996
    @faizahfaiqah6996 3 роки тому +11

    Im a developer and i just discovered webflow (based on your vids also lol). Now im sooo pissed that i dont discover it sooner. This page would take me a day to code from scratch :')

    • @elierh442
      @elierh442 3 роки тому +1

      Check out Bootstrap Studio, they charge you for a one-time payment instead of monthly like Webflow.

    • @cristian91re
      @cristian91re 3 роки тому

      Noob

  • @bulgogimaster
    @bulgogimaster 2 роки тому +1

    Learned Html and CSS for a few months now, so I'm quite familiar with some of the functions mentioned. This is the first time I knew about webflow and wow, it's like Photoshop exclusively for web design.

  • @qunyarsocod2260
    @qunyarsocod2260 2 роки тому +1

    I'm familiar with HTML and CSS, and have used both so this is fun for me.

  • @LaydyDivine
    @LaydyDivine 2 роки тому

    So glad I came across this! An apprenticeship I’m doing uses Webflow and this is helpful.

  • @ViorelClaudiuDascalescu
    @ViorelClaudiuDascalescu 3 роки тому +2

    We need more videos like this one to explain a tool. Wanted a quick intro to Webflow, this video nails it. Thanks!

  • @kauiz951
    @kauiz951 Рік тому

    I'm trying to learn web development and designing I'm a beginner and I think I'm gona go along with this channel for web designing

  • @patatebanine4278
    @patatebanine4278 Рік тому

    I swear in god, you video with the Dual of Fate (Starwars) soundcrak in the background make the video so cool

  • @ramonalisa4187
    @ramonalisa4187 4 роки тому +5

    Wonderful, informative video as always. Thank you so much. Cant wait to take your course when it reopens!

  • @ayushmishra09
    @ayushmishra09 Рік тому

    You made it much more simpler than Webflow itself. Excellent video and choice of website.

  • @basumathapati
    @basumathapati 2 роки тому

    wow..that is excellent tutorial on developing an excellent web page so quickly .. well done !

  • @simonpetkovicc
    @simonpetkovicc Рік тому

    Bro, this is awesome, congratulations 🎉

  • @shikhli
    @shikhli 17 днів тому

    Thanks. Quick, clear, most essentials.

    • @FluxAcademy
      @FluxAcademy  17 днів тому

      Thanks. Have a look at out recent Webflow tutorials which follow the current UI.

  • @Kenny-Ross
    @Kenny-Ross 3 роки тому +1

    Nice tut Ran!! I like this. I still haven't pulled the trigger on Webflow, checking some things out before I do, but this shows how powerful WF is and how creative you can get with it. Thank you!

  • @angelumez
    @angelumez 5 місяців тому

    Thank you so much! I thought i was in over my head the I found this video

  • @Thisisrealfia
    @Thisisrealfia 3 роки тому

    OMG! Yes now I think I started to love Webflow. Thank you Sir Ran Segall

  • @jonbernbach8704
    @jonbernbach8704 3 роки тому +6

    Wow...This was a really helpful and informative tutorial. A great way to make the app feel accessible for someone who hasn't ever worked on web. I love the box model explanation... and then following up with DIVs and the GRID container. Thanks! Gonna watch more. :)

  • @malkablowy2106
    @malkablowy2106 Рік тому

    OK, this video officially converted me to webflow!! Thanks

  • @markott3978
    @markott3978 2 роки тому

    Man.. nice.. this is exactly what i needed after watching some of your best website videos

  • @markott3978
    @markott3978 2 роки тому

    I love you so much doing this with my favourite car company haha. so i can concentrate so much better with my adhd

  • @altanreis1616
    @altanreis1616 3 роки тому +1

    Amazing how fast and easy you can build a simple but a impressive landig page. Thanks for the tutorial.

  • @shirleyxie7144
    @shirleyxie7144 Рік тому

    Ur video is so clear to catch on, thank you so much.

  • @nadaah9
    @nadaah9 Рік тому +1

    Thanks, Ran! Your insights were super helpful as a Figma User. Now I can translate my website into live pages. Appreciate it!

  • @ScubaLui
    @ScubaLui 3 роки тому +2

    Much quicker and easier way to understand webflow compared with the tutorials 👍👍👍

  • @Flubberiam
    @Flubberiam Рік тому

    that was super freaking cool!! i loved this

  • @TheFunnyLlama
    @TheFunnyLlama Рік тому +1

    I love your videos and community! I would love to see you create a discord for the community to get together and share work and ask questions!

  • @Speed-TV
    @Speed-TV 2 роки тому +1

    Man, no longer are the days of having to write literally an entire website with just text on a screen!

  • @chillcozycafe3053
    @chillcozycafe3053 2 роки тому

    Wow just simply amazing, Ran!

  • @2boys3dogs
    @2boys3dogs 2 роки тому

    It's the boom, boom, boom for me. Great tutorial!

  • @charlottechau3533
    @charlottechau3533 2 роки тому

    ur tutorial so clear & easy to understand, thank you so much!

  • @arvindkumar-xr6ok
    @arvindkumar-xr6ok Рік тому

    what a way to make things simple...thanks buddy

  • @stevendesigner
    @stevendesigner 7 місяців тому

    Great introduction, thanks!

  • @DrLauraRPalmer
    @DrLauraRPalmer 3 роки тому

    EXCELLENT EXCELLENT! - Your videos are suburb and your mic and lighting exceptional! - i sooo appreciate these details my man! #SUBSCRIBED!

  • @simmarv
    @simmarv 2 роки тому

    Great tutorial of how it works! Thank you very much for that.

  • @saidshafiqullahmoshfiqsada6150
    @saidshafiqullahmoshfiqsada6150 2 роки тому

    I am fully wondered about your's talent sir I love you and thanks about every thing you learned to me
    with respect your student

  • @devincarson73
    @devincarson73 3 роки тому

    I love webflow sooo much. It’s sooo easy

  • @nonnythankgodnwokocha5691
    @nonnythankgodnwokocha5691 3 роки тому +1

    Love your video on web flow Ran, just subscribed to your channel. Keep up the good work.

  • @UXMurt
    @UXMurt 3 роки тому

    thanks getting started with webflow right now this helped alot

  • @Slimothy
    @Slimothy 3 роки тому +2

    *What a fantastic tutorial video. Well done!*

  • @dalipantshwa3078
    @dalipantshwa3078 Рік тому

    Such a great teacher.

  • @patrickadams7061
    @patrickadams7061 3 роки тому

    You are too good 🔥🔥✌️✌️✌️🙏🏿🙏🏿🙏🏿...you making learning soo easy keep the good work boss

  • @emmanueladegbulu-by4og
    @emmanueladegbulu-by4og 4 місяці тому

    This is beautiful 🤩❤️

  • @wpd-media
    @wpd-media 3 роки тому

    This was very helpful!! My first real try at Webflow and it's so dope.

  • @nikolatripkovic5322
    @nikolatripkovic5322 4 роки тому +5

    Amazing tutorial! Want more of it!

  • @nimitdesigns
    @nimitdesigns 2 роки тому +1

    Brilliant Tutorial! Cannot thank you enough for this!

  • @maharlikamirasol
    @maharlikamirasol Рік тому

    wow this is amazing tutorial! Hope to learn more! Thanks man!

  • @LordBulbator
    @LordBulbator Рік тому +1

    hype, he created only a shell, but not a site with links. in 16 minutes I just TRIED to work with Webflow (the bunch of possibles)

  • @LaurenzCDL
    @LaurenzCDL 3 місяці тому

    Genius Video Thank you!

  • @Rishiraj1995
    @Rishiraj1995 Рік тому

    This video actually gave me great clarity in 16 minutes !

  • @LyssaTheMuse
    @LyssaTheMuse 2 роки тому

    Really good video! I'm a Front-end Developer and I found this very beneficial!