Learn Webflow in 16 Minutes (Crash Course)

Поделиться
HTML-код
  • Опубликовано: 16 май 2024
  • 📘 Free e-book "The Blueprint For Insanely Successful Webflow Designers" 👉 bit.ly/3vbJW76
    Learn Webflow the FAST way with our full Webflow Masterclass 👉 bit.ly/master-webflow
    Download the tutorial assets here 👉 bit.ly/16-min-webflow
    Open a new Webflow account via our affiliate link to support us 👉 bit.ly/flux-webflow
    Chapters
    00:00 Intro
    00:20 Understand this first
    1:40 Jumping into Webflow
    3:00 Creating the website structure
    3:41 Adding content and adjusting the layout
    13:20 Adding animations
    15:35 Done!
    📱 Find us on SOCIAL MEDIA
    Ran's Instagram 👉 / ransegall
    Ran's X (Twitter) 👉 / ransegall
    Flux Academy's Instagram 👉 / flux.academy
    Flux Academy's TikTok 👉 / fluxacademy
    Gear & Book Recommendations 👉 bit.ly/2ohFOuj
    #webflow #learnwebflow #crashcourse #webdesign
    Thanks for watching the video!

Комментарии • 627

  • @garyvoigt321
    @garyvoigt321 3 года назад +402

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

    • @FluxAcademy
      @FluxAcademy  3 года назад +12

      Appreciate it 🙏

    • @rmcellig
      @rmcellig Год назад

      @@FluxAcademy loved your box model explaination!!!

    • @lucutes2936
      @lucutes2936 Год назад

      yes

  • @mr.le-capibar
    @mr.le-capibar 3 года назад +29

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

  • @bartderuyck
    @bartderuyck 3 года назад +417

    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 3 года назад +7

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

    • @bartderuyck
      @bartderuyck 3 года назад +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 3 года назад +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 2 года назад +2

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

  • @pgbombketchup
    @pgbombketchup Год назад +5

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

  • @mofojackson
    @mofojackson 3 года назад +63

    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!

  • @ramonalisa4187
    @ramonalisa4187 3 года назад +5

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

  • @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. :)

  • @YasmeenCheM
    @YasmeenCheM Год назад +6

    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!

  • @johnbowman3630
    @johnbowman3630 2 года назад +84

    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!

  • @LindieBotes
    @LindieBotes 2 года назад +20

    This was super useful and consice. Thank you!!

  • @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 🔥

  • @yamunahooper9104
    @yamunahooper9104 10 месяцев назад +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!

  • @ViorelClaudiuDascalescu
    @ViorelClaudiuDascalescu 2 года назад +2

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

  • @zachardman4530
    @zachardman4530 2 года назад +1

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

  • @Kenny-Ross
    @Kenny-Ross 3 года назад

    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!

  • @altanreis1616
    @altanreis1616 2 года назад +1

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

  • @johnleighdesigns
    @johnleighdesigns 3 года назад

    Great thanks for thinking to put this together - ive done several of the great webflow courses on their site but recent projects and diversions mean ive gotten rusty and not at all up to date so was great to have this short refresher!

  • @saikrishnasunkam4344
    @saikrishnasunkam4344 Год назад

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

  • @ayushkumarchandra
    @ayushkumarchandra 3 года назад +181

    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  3 года назад +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 6 месяцев назад

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

  • @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.

  • @janegorokhovsky6810
    @janegorokhovsky6810 3 года назад

    Thank you so much! This is the best Webflow tutorial I have found!

  • @weberwong5197
    @weberwong5197 Год назад

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

  • @trkauff
    @trkauff 3 года назад +19

    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  3 года назад

      Good luck on this new journey!

  • @allanlawrence7757
    @allanlawrence7757 2 года назад

    Amazing video! Thank you for this! I'm learning it at the moment and had some struggles.

  • @patrizian2809
    @patrizian2809 3 года назад

    Thank you! That was a great video and what a beautiful interface!

  • @joshrg1703
    @joshrg1703 2 года назад +1

    This was super helpful and straight tot he point. Love it.

  • @nikolatripkovic5322
    @nikolatripkovic5322 3 года назад +5

    Amazing tutorial! Want more of it!

  • @Slayermunch
    @Slayermunch 2 года назад

    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.

  • @eissaibrahim31
    @eissaibrahim31 7 месяцев назад

    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

  • @LaydyDivine
    @LaydyDivine Год назад

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

  • @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!!!

  • @hitbox7422
    @hitbox7422 2 года назад +74

    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 Год назад +1

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

    • @hitbox7422
      @hitbox7422 Год назад +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 Год назад

      @@hitbox7422 ty!

    • @isiahtasham4253
      @isiahtasham4253 9 месяцев назад

      @@thepinwale use em/rem
      😇

    • @Z_Victory_Z
      @Z_Victory_Z 6 месяцев назад

      properties

  • @reynoldsj_
    @reynoldsj_ Год назад

    Fantastic beginner tutorial. Thank you for this.

  • @nonnythankgodnwokocha5691
    @nonnythankgodnwokocha5691 3 года назад +1

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

  • @nimitdesigns
    @nimitdesigns Год назад +1

    Brilliant Tutorial! Cannot thank you enough for this!

  • @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!

  • @Slimothy
    @Slimothy 3 года назад +2

    *What a fantastic tutorial video. Well done!*

  • @Thisisrealfia
    @Thisisrealfia 2 года назад

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

  • @tape6ixteen19
    @tape6ixteen19 8 месяцев назад

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

  • @ayushmishra09
    @ayushmishra09 Год назад

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

  • @saidmutan1746
    @saidmutan1746 4 месяца назад +3

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

  • @moin7427
    @moin7427 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!

  • @coreyamccoy
    @coreyamccoy 3 года назад

    Ran... Multiple 💡 moments on this one. Awesome, simple, informative tut.

  • @tymeplus
    @tymeplus 2 года назад

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

  • @elliottcarter7700
    @elliottcarter7700 3 года назад

    super helpful. thanks for sharing your knowledge!

  • @charlottechau3533
    @charlottechau3533 2 года назад

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

  • @lixnvqs7380
    @lixnvqs7380 3 года назад +1

    Just watch this video bout to watch the rest👍 you explain so well thank you

  • @wpd-media
    @wpd-media 2 года назад

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

  • @yusion9
    @yusion9 3 года назад +9

    This is cool, awesome webflow

  • @man_like_clause
    @man_like_clause Год назад +1

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

  • @Djhakupau
    @Djhakupau 2 года назад

    Thank you for the great introduction to Webflow and what it/ we can do.

  • @davidadams421
    @davidadams421 2 года назад

    A very good introduction, particularly how the UI hangs together.

  • @Rishiraj1995
    @Rishiraj1995 Год назад

    This video actually gave me great clarity in 16 minutes !

  • @jessicacroll5774
    @jessicacroll5774 3 года назад

    Great explanation, thank you!

  • @chillcozycafe3053
    @chillcozycafe3053 Год назад

    Wow just simply amazing, Ran!

  • @mthalitasm
    @mthalitasm Год назад

    Pretty good! Amazing explanation... thank you!

  • @aldringonzalgo
    @aldringonzalgo Год назад

    Excellent starter video for Webflow! Thank you.

  • @rmcellig
    @rmcellig Год назад

    Excellent tutorial!! Helped me understand webflow better! 😀

  • @windmaomao
    @windmaomao Год назад

    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 Год назад

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

  • @dalipantshwa3078
    @dalipantshwa3078 7 месяцев назад

    Such a great teacher.

  • @panveel
    @panveel 3 года назад +9

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

  • @simmarv
    @simmarv Год назад

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

  • @dritzzhaynes7217
    @dritzzhaynes7217 Месяц назад

    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.

  • @france4me117
    @france4me117 Год назад +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

  • @stephencottrelll
    @stephencottrelll 8 месяцев назад

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

  • @simonpetkovicc
    @simonpetkovicc Год назад

    Bro, this is awesome, congratulations 🎉

  • @staticmotion1628
    @staticmotion1628 3 года назад +1

    love your channel, But this one I really enjoyed love the how-to tuts thank you

  • @saidshafiqullahmoshfiqsada6150

    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

  • @davidmartinez5459
    @davidmartinez5459 3 года назад +2

    Wooowheee, that was great Ran. You showed a few things I didn't see before but I also see that you use combo classes the same way I do (for exception type styles). Super helpful, thanks Ran!

  • @marensvare507
    @marensvare507 2 года назад

    This is a brilliant tutorial!

  • @RB-ob5ws
    @RB-ob5ws 7 месяцев назад

    Thank you, Sir! Amazing tutorial!

  • @marvalmej007
    @marvalmej007 2 года назад

    You're really good, it's interesting how you don't need to program all from scratch to do a really good design.

  • @izzyb4786
    @izzyb4786 3 года назад +1

    Well done Ran!!

  • @UXMurt
    @UXMurt 3 года назад

    thanks getting started with webflow right now this helped alot

  • @dariaboikova9897
    @dariaboikova9897 Год назад

    Thank you so much for such a useful guide 😍

  • @michaelkappel9021
    @michaelkappel9021 Год назад

    Thank you for the tutorial. It is really helpful.

  • @saled8477
    @saled8477 Год назад

    Perfect , I love it , just perfect

  • @shirleyxie7144
    @shirleyxie7144 6 месяцев назад

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

  • @towhidweb
    @towhidweb 2 года назад

    Great Video! Thanks for this informative tutorial.

  • @Robbajor
    @Robbajor 2 года назад

    Awesome video. Really great intro!

  • @markott3978
    @markott3978 2 года назад

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

  • @Flubberiam
    @Flubberiam 8 месяцев назад

    that was super freaking cool!! i loved this

  • @devincarson73
    @devincarson73 3 года назад

    I love webflow sooo much. It’s sooo easy

  • @wylgamez
    @wylgamez 3 года назад

    Thank you, great 16 minutes!

  • @aidennelson3171
    @aidennelson3171 Год назад

    Thanks for the tutorial, may God bless!

  • @arvindkumar-xr6ok
    @arvindkumar-xr6ok 5 месяцев назад

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

  • @maharlikamirasol
    @maharlikamirasol 10 месяцев назад

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

  • @DrLauraRPalmer
    @DrLauraRPalmer 2 года назад

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

  • @pranjaldoorwar9743
    @pranjaldoorwar9743 3 года назад

    Always Amazing Ran

  • @basumathapati
    @basumathapati Год назад

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

  • @vineetboyle
    @vineetboyle 3 года назад

    Super awesome. Very well explained.

  • @shahidmehmood5934
    @shahidmehmood5934 3 года назад

    Excellent! presentation as well as the contents. Thanks!

  • @milliberman1944
    @milliberman1944 3 года назад +3

    This was so helpful for a beginner, thank you so much! Will be doing more of your videos for sure so I can get the hang of Webflow 😄

  • @lyssathemuse
    @lyssathemuse Год назад

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

  • @jss3018
    @jss3018 2 года назад

    Amazing! Thanks for the insight.

  • @glenn.patrick
    @glenn.patrick Месяц назад

    Awesome, thank you! 🙏

  • @maakyzp
    @maakyzp Год назад

    thanks for keeping it short and good for a beginner like me

  • @itsGabrielaCristina
    @itsGabrielaCristina 2 года назад

    Great video. I have to keep learning, but this at least puts me in a better place just to get started.

  • @patrickadams7061
    @patrickadams7061 2 года назад

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

  • @IUSTITA
    @IUSTITA 2 года назад

    One of my favorite channels on RUclips. BIG SHOUT OUT TO FLUX!!!!