Learn Webflow in 2024 (Beginner Crash Course)

Поділитися
Вставка
  • Опубліковано 9 лип 2024
  • Now is the time for you to learn Webflow. In this video we will build a website together and I’ll be covering the key concepts you need to get started.
    Download the working files to follow along 👉 bit.ly/3V7yCSm
    Discover the fastest, right way to learn Webflow-our full Webflow Masterclass course 👉 bit.ly/4br0Q1m
    CHAPTERS
    0:00 Intro
    0:19 The box model
    03:35 Set-up div blocks
    05:21 Add elements
    09:40 Styling
    📱 Find us on SOCIAL MEDIA
    Ran's X (Twitter) 👉 / ransegall
    Ran's Instagram 👉 / ransegall
    Flux Academy's Instagram 👉 / flux.academy
    Flux Academy's TikTok 👉 / fluxacademy

КОМЕНТАРІ • 89

  • @JohnSavin-pz8qv
    @JohnSavin-pz8qv Місяць тому +10

    This video closed me on doing the course. Explained in a way that gave me better confidence to build in WebFlow.

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

    Ran you never fail to impress me with all your videos... this was brilliant! In fact I signed up for your course because of the way you explain and go through every step in your videos. Thanks for all you do and share with us

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

      Thanks! Excited to see you in our community!

  • @SyedMuneebAli
    @SyedMuneebAli Місяць тому +4

    I am a Visual Designer, I want basic stuff about development but this really helped me understanding the structure and design. Love it!

  • @shelbytessier6508
    @shelbytessier6508 Місяць тому +3

    Best tutorial I've seen! Really appreciate the way you highlighted and explained all the boxes in a visual way!

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

      Glad it was helpful!

    • @nerathevannuavan4974
      @nerathevannuavan4974 4 дні тому

      ​@@FluxAcademyCan We Able To Create Weather API Like This Without The Code?

  • @shahriarkhaneasan3268
    @shahriarkhaneasan3268 Місяць тому +1

    Always Best!😍

  • @thegenznightmare
    @thegenznightmare Місяць тому +2

    I am working on my new website for my own brand and this is very very helpful. Thank you!

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

    Great! Now I have my first webflow project! It was amazing class, very good going to the point! Success! Thanks

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

    Amazing !!!

  • @tjveach
    @tjveach Місяць тому +1

    Very well done my friend

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

    This is super helpful! Thank you so much!

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

      Glad it was helpful! Thanks Abigail

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

    This was very helpful. Thank you!

  • @ehabomar2656
    @ehabomar2656 10 днів тому

    Thank you for your efforts and very good and clear explanation. It will be appreciated if you make video for responsiveness for this design especially.

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

    this is so helpful! Thanks :)

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

    Super insightful! 😮

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

    Thanks Ran. I love Flux Academy’s content!🔥👍🏻

  • @movie.lover.
    @movie.lover. Місяць тому +6

    Need a tutorial on responsiveness ❤❤

  • @Fake-Dady295
    @Fake-Dady295 Місяць тому +1

    Bro Your Very Execellent Web devolopment

  • @Aeybd
    @Aeybd 13 днів тому

    Thank you

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

    Gorgeous 🥰 video 📸

  • @jeyqwe8623
    @jeyqwe8623 25 днів тому

    Hello, this is me before watching this tutorial. I never tried web designing and i dont know anything on webflow, ill leave my answer after finishing this tutorial and try to make a site. I trust you Flux

    • @FluxAcademy
      @FluxAcademy  7 годин тому

      Can't wait to hear your thoughts!

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

    Clever and pretty. This guy is a full package.

  • @faithwanjikukimani4840
    @faithwanjikukimani4840 День тому

    I can't seem to download the working files in most videos. I don't know if it's just on my end

    • @FluxAcademy
      @FluxAcademy  День тому

      Hi, Sorry you’re having trouble accessing our resources. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.

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

    I loved!
    I'm a little scared that AI will replace us when it comes to making websites

  • @markusbuls9469
    @markusbuls9469 20 днів тому

    Wow, insane video editing. I got inspired by these animations and sound effects. Are you doing edit by yourself? Or you have a editor?

  • @MoniHuang
    @MoniHuang 10 годин тому

    Hi Ran, At 4:26 in the video, the body has three sections. Why are three Div blocks added within a section instead of adding three sections? I don't quite understand the logic here. I'm wondering if others have the same question as I do.🤔

    • @FluxAcademy
      @FluxAcademy  7 годин тому

      Becuase if the page was longer, there would be other sections, and you'd like to put the BG image only on the first section, so you need to wrap them in a DIV

  • @Eric-Sweet
    @Eric-Sweet Місяць тому

    I hope Webflow pays you. There content is creative. Your content is concise and all the essentials to get to functionable for someone who has no experience.

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

    In framer am I able to create a navigation, for instance I have a camera, I want the navigation to be the cameras navigation on the right. could I do something like that. PS its going to be a photograph website/portfoilio, this could impact other sizes for etc:mobile, and tablet. If you understand what I mean! Great video easy to follow edit: just realised this is webflow

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

      can you specify what you mean by ,the cameras navigation’ ? How should the interface look like, any specific camera model? etc

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

      @@whatsgoinon150 I am talking about the dial on the right too select certain modes

  • @Senpai_Otaku_
    @Senpai_Otaku_ 28 днів тому

    nice explanation sir thnx for this.

    • @FluxAcademy
      @FluxAcademy  28 днів тому +1

      Most welcome

    • @Senpai_Otaku_
      @Senpai_Otaku_ 27 днів тому

      ​@@FluxAcademy All of your viewers have to appreciate for this level of work and explanation.

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

    how is this program called? look great :)

  • @m_anees_c
    @m_anees_c Місяць тому +1

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

    Like it

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

    Thanks for this video, I have been following the webflow 101 tut, but they make a lot of mistakes there and takes forever to build just a very simple example.

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

    Ran
    One of the many things that I have learned from your UA-cam channel is that in the structure of a web page there is always a container.
    Wouldn't a container be missing in this exercise?

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

      A container is a div it just has pre-defined styles like padding, margins etc. with a div you can style it from scratch.

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

      @@faelanm I know that using a div you can create a container, what seems strange to me is that Ran does not put a container in this exercise.

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

      To be fair - i decided to have a design that doesn’t require a container for this tutorial for simplicity sake, as the video was getting a bit long. But yes, most designs require a container.

  • @rizkihidayatulfadli
    @rizkihidayatulfadli Місяць тому +1

    24:44 "You can stack"
    Looks like you are using Framer, is it right?

    • @FluxAcademy
      @FluxAcademy  7 годин тому

      haha, there's a reason framer called it stack - beacuse it make sense for this usecase.

  • @Poncki
    @Poncki 7 днів тому

    Awesome video! When is part two?

    • @FluxAcademy
      @FluxAcademy  7 годин тому

      What would you like to see there?

  • @Mania26
    @Mania26 29 днів тому

    How to give this to client? Client have to pay for plan or what? No one is talking about it! Help pls.

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

      There's a cost for the domain and hosting of any website.

    • @Mania26
      @Mania26 29 днів тому

      @@FluxAcademy u did not help at all...Yea i know im no stupid. But what plan and how to migrate website to client's account?

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

      @@Mania26 Webflow knowledge base and support can hep you with this. Best of luck!

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

    just finished the video. I think it's kinda similar to figma. I'm a figma designer. willing to learn a new app. i saw some videos about webflow, framer and wordpress. one of my friend is currently working with wordpress. so i wanted to try a new one. I'm basically focusing on designing and building no code animated websites. which platform would you suggest for me so i can design and animate a website without or with less limitation on my thinking.
    I'm currently doing my bachelor in CSE, will have few coding knowledge in upcoming year but not much.
    Thank you for your Concern.

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

      Webflow is currently the most robust when it comes to animations

  • @aahanmansuri3071
    @aahanmansuri3071 Місяць тому +3

    First Student 😀 👨‍🎓

  • @user-yw8eh3jm5c
    @user-yw8eh3jm5c Місяць тому

    How to connect the webflow design to a database

    • @FluxAcademy
      @FluxAcademy  7 годин тому

      Webflow has their own database (CMS), but you can also link an external one

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

    How can I learn webflow

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

      Start with this video 😄

  • @User-uj6ie
    @User-uj6ie Місяць тому +2

    I'm Palestinian and I appreciate your videos 🥲☮

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

    I want to learn the webflow like a pro i want to build websites something like this one

  • @TylerDurden-mv9vd
    @TylerDurden-mv9vd Місяць тому

    Why is there no lesson on responsiveness? PX units are difficult for responsiveness, maybe you could make a lesson on that

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

      This is a quick "crash course". We have videos on responsiveness and accessibility on the channel.

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

    how long do the working files take to send? been waiting so long :(

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

      Sorry! we seem to have an issue on the website. Please reach out to our support and they will send it to you

  • @RichardV-CPD
    @RichardV-CPD Місяць тому +2

    I'm sorry, but that transition sound is super annoying (airpods pro reference) . Still grateful for your tutorial.

    • @RichardV-CPD
      @RichardV-CPD Місяць тому +1

      It seems only used at the beginning of the video.

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

    wondering WhY would someone PAy Roughly $600 for the course when you can watch webflow university for free? thanks in advance

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

      Here's the answer: ua-cam.com/video/MLAlsKZusHg/v-deo.html

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

    Never got your freaking email. I hope I don't start receiving spam instead

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

      Sorry, we had an issue with emails yesterday, hopefully you'll be getting it now!