thank you thank you thank you thank you!!! You just saved my project! Had a bit of difficulty fixing a section with reversing the position of two flexbox children, but now it's fixed! You're AMAZING!
Jose, this was SUPER helpful... Thank you! I'm so glad you explained the proportional units! I've been using PX and I didn't know how simple it was to make text responsive!
Jose, My guy. You saved my current and future projects! The read-only link you provided allowed me to really see all you've done, so I can follow your example. So informative and clear, thank you!
Jose, you are the best ! your tips are brilliant and extraordinary well exposed in a superb presentation, thank you so much for your great work, it will be really helpfull for me. Bless
Thank you Jose! I am so happy to have found you on RUclips! I very much appreciate your style in teaching, top notch organization (i.e. timestamps on the sites and in the video descriptions) and attention to detail. Keep up the great work!
Incredible lesson on responsiveness. I've always struggled with it. New to Webflow and that's the thing I would spend so long on without getting it quite right. So many useful tips. Can't wait to put them into effect. It was like a full lesson on responsiveness in half an hour! Awesome! Thanks so much!
Great tutorial and understanding of responsive principles and concepts... As a seasoned and experienced designer, I still need to recap on front-end development and design from time to time. Technology moves soooo fast.
That helped me! Hint: 22:22 - just delete the columns.. webflow will automatically create the second row.. I don't know if it's a new feature.. great video though:)
Excellent video! That may be the best tips video I've ever watched. As a Webflow beginner and just come off a day of Webflow frustration, this video gives me the inspiration to keep going. In the video, you mention a longer video in which you re/create the sample website. I'm not finding it. Did you not end up making it? I see that you have a beginner's Webflow class. Is there a way of seeing a list of topics covered in that class? My interest gratitude.
Hey Ernest! That's awesome. Glad it was an inspiration to keep learning. I don't think I ever did that video... Life got in the way :) But it sounds like my skillshare video could be helpful? skl.sh/2PU9tML
Very great video and clarified many of my troubles even so I consider myself an advanced webflow user. I hope you will make more this kind of basic yet advanced concept teaching videos.
Thank you for the work you put into this. "Wrap" was a gem. 🙏🏼Out of curiosity, was this created before Webflow created their grid layout? If not, why would I use typography columns over grid? Didn't quite catch what the difference is. Still learning. :)
Hey Jose, thanks for the video! I stumbled upon a spelling error while looking at your website, make sure to correct it: You misspelled "critical" here: Start your project. Every project starts the same way. I ask questions, get to know you, and delve into the challenges you face. My crticial thinking roars to life and I envision what we will accomplish together.
Great stuff! You blew my mind with that font size tip. I have a question, what do you think about using Flexbox instead of grid in the "Landscape Declarations? Cause It seems that is easier to setup the flexbox and then change the horizontal flow for the vertical flow (mobile version). Thank you for this amazing video.
Hey Lucas! Great thought. Both work well, so it depends a little bit on what you prefer. I like using grid for this type of situation because it's really easy to specify the distance or gutter between the columns. Also, with grid 2.0, the elements get automatically repositioned as you delete columns, so it's gotten a lot easier. Hope that helps!
Hi Jose, thank you so much for the super clear explainations of all these stuff. I would like to ask a question about the text columns tips for masonry galleries. I just created for a client website a masonry product grid from an ecommerce collection list, but for example he wants the most recent products right on the top of the grid, so here is my question: How can I change the sequence of those items? I mean, now the items are following the columns direction starting from the first column to the last one. But the items are set from the most recent to the oldest but still they are vertically following the direction of the columns and in the second and the third columns I just see some of the older items at the top. Thanks in advance for your kind response, greetings from Italy!!
I played around w WebFlow but there was more of a learning curve than I’d hoped. 90% of my client builds are WordPress based. Curious if you have any design experience in WP and would you see WebFlow can have as much mobile friendly on scroll parallax and animations once you get very familiar w the platform? Can clients update any basic content w WebFlow if they don’t have much or any experience with or do they have to rely on the site designers for all edits?
One question, when you’re doing the flower wrappers in landscape. You changed the design for mobile landscape, to a single tile across in a square aspect ratio. You said it looked good, but isn’t that a mistake? I find it odd that webflow overlooks completely the ability to view mobile landscape as it would be in reality… with a small device height! It just seems like you fell into a trap which you could be forgiven for. Because in the case of that flower image, a single one of those grid squares would be multiple swipes? And that would be so unwieldy, when what you really needed to do was maybe a 2 or 4 across?
Hi Jose, wondering if you can help me. If I'm correct, I believe you had a video on your channel talking about responsive design and on this video you redesigned a website in adobe xd/figma and then you uploaded that design into webflow to use as a base, and you started designing on top of it. I cant find the video now. If you made it private or took it off, could you reupload/make it public? That was really helpful to me and is one of the reasons why i subscribed to your channel. Really wanted to come back and revisit that video so I can start implementing that into my web design process. Hopefully you can help me with this...thanks
Hey, great video Jose! Would you mind explaining what is happening at 18:10? I am having a hard time understanding how this is happening with a height of 0 and adjusting padding.
Hey Cooper! Hoping to do a video on this at some point. But, padding (as a percentage) is relative to the width of the element. So, if I make the padding 75%, that's a 4:3 ratio. Then, I can nest something inside that absolutely, set it to width and height of 100%, and set the image-fill property to cover, and you should be golden :)
Hi Jose! I'm following your class at Skillshare (very good, by the way). And I'm jumping between here and there. I have a question for you, or anyone with the answer. When you create "sections" and add their corresponding tag, such as "Header"; you use divs instead of the section element. Why this? Can't I throw a section item and assign header tag to it? Or does it necessarily have to be a div?
Hey Carlos! Good question. If you use use your browser's developer tools, you can see how webflow exports the code. If I add a div block but give it a tag of header, you'll see it gets exported not as but as . I haven't tested it with the section component, but I double-checked with the div blocks to make sure. Thanks!
26:30 Complete Webflow Pro-hack! Awesome work, hands down! Quick question about the side circles that function as a section marker; I saw you click it to bring you to a different section, are those styled link blocks within a div set to absolute positioning? How did you program the interaction to make each circle change color when the section is in view? Thanks!
Hey Tommy! It's been a while since I built that micro-site. But, I probably used fixed positioning as opposed to absolute. That way, it would stay in frame no matter if you scroll up or down. And yes! They are styled link blocks that are linked to an "anchor tag" or a section on the page. The link knows when it's in the section you linked it to. So, you can give it a style for its "current" state. Hope that helps!
I learned so much from your video! I was referencing the Webflow read-only link, and it was super helpful. The link was working perfectly earlier, but now it leads to a 404 error on Webflow's website?
Hey Leah! So glad the video was helpful. I'm not sure what what happened to the read-only link. But, I tried copying it again and here it is! preview.webflow.com/preview/ten-tips-for-creating-a-responsive-site?preview=7521e2c2667bec1d535a4890ddc10bb8
Love your video :-) really insightful. I am completely new to Webflow as I am building my Portfolio, your tip are very helpful. I have build many website but it is does not look very slick as the Pro :-( (as a side note, the video recorded is a bit Blurry) Thanks
Thanks Park! Just keep working at it and you'll continue to improve. In terms of video quality, were you watching at 1080p? If you weren't, that would definitely help to sharpen things up:)
@@JoseOcandoVideos Thanks Jose for your reply. is it possible to have your honnest feed back about a website that I am developing in Webflow (split-project.webflow.io/)
@@JoseOcandoVideos Thanks for your reply, I did not have the option to select 1080p on youtube when watching it last time. I have checked now the option 1080p is there.
Scetch is a desktop app and it's for Macs only. If you prefer something that opens in a browser try figma. www.figma.com and last, Adobe has a free web design product called Adobe XD. www.adobe.com/products/xd.html they all work great.
Hey aleksejs. I just realized that you might have been asking what I used to develop the website (not design it). Sorry if I misunderstood. Anyways, if that's the case, the development was done in Webflow (webflow.com)
thank you thank you thank you thank you!!! You just saved my project! Had a bit of difficulty fixing a section with reversing the position of two flexbox children, but now it's fixed! You're AMAZING!
Absolutely love how you prepared a website with real-time adjustable content to illustrate each tip! Kudos and many thanks.
Thanks Sir !
Absolutely love how you set this video up and explained everything..especially EMS!!
Finally such helpful video about creating responsive website! I was having such trouble with it.. Thank you so much Jose!
Jose, this was SUPER helpful... Thank you! I'm so glad you explained the proportional units! I've been using PX and I didn't know how simple it was to make text responsive!
you are awesome man.....
Great stuff, Jose. This is one of the most informative videos I've seen yet about Webflow.
Finally I have so clear understanding of the EM use. Not only for fonts but Margins and paddings!!!! Brilliant
I'm testing that one
Jose, My guy. You saved my current and future projects! The read-only link you provided allowed me to really see all you've done, so I can follow your example. So informative and clear, thank you!
Thank you so very much. You accent and the way you convey your thought is so easy to understand. I need more of your videos.
Would absolutely love to see more videos like these!!!
You are a wonderful teacher. Thank you!
Really like the flex wrap and EMs unit. Thanks for the tips Man 👌☺️👍🏻
This helped me so much with taking an ugly responsive design into a beautiful one :) Thanks!
OMG, this tutorial was so well put together. Thank you so much!!!!
Thank you! You saved my sanity! AND my website! ❤
Thank you Jose, very nice approach to present information!
Great Tutorial. So much value in this one.
Wow! I learned a lot from this video! Thanks very much Jose!
Explained beautifully, so helpful. Thanks, Jose!
Jose, you are the best ! your tips are brilliant and extraordinary well exposed in a superb presentation, thank you so much for your great work, it will be really helpfull for me. Bless
Jose, seriously, thank you!
super helpful video, still very informative even after 3 yrs, thank you, Jose!
Thank you Jose! I am so happy to have found you on RUclips! I very much appreciate your style in teaching, top notch organization (i.e. timestamps on the sites and in the video descriptions) and attention to detail. Keep up the great work!
Incredible lesson on responsiveness. I've always struggled with it. New to Webflow and that's the thing I would spend so long on without getting it quite right. So many useful tips. Can't wait to put them into effect. It was like a full lesson on responsiveness in half an hour! Awesome! Thanks so much!
So glad it was helpful :)
had to redo my whole project, but your vid helped me to understand!
amazing value in this one Jose .... thank you
Super beautiful and helpful video! Thanks
Your videos are top class! You're so generous with your content and your time! Love your content!
Hi, Jose. Love your video’s. Keep update this channel. 👍 Muchos gracias
The background image styling is blowing my mind! This was an awesome lesson Jose! Thank you for sharing!!
Thank you very much for this one, the pace was enjoyable to watch, and the video was full of useful information making it a great Webflow summary.
Thank you for explaining EM so clearly. I get it now :)
You’re a really good teacher. Thank you ☺️
Really excellent stuff, full of must-remember tips. Many thanks.
Excellent tips. I'm just learning Webflow, so thanks so much for sharing, Jose!
Thank you! So helpful!
Wow this is absolutely incredible. It has taught me so much!! Thank you Jose!
GREAT VIDEO. Thank you for spending the time to make this. I learned a ton.
I can't say how grateful I am for this vid. We are still waiting for the making-of video though. Thank you and keep the awesome tutorials rolling!
Thanks Alex. Appreciate the encouragement :)
Thank you so much for this tutorial. Very well done and organized. Keep them coming!
Thanks, Jose, all these are very productive tips.
Very nice tutorial. Thank you
Thank you very very much Jose!
Great tutorial and understanding of responsive principles and concepts... As a seasoned and experienced designer, I still need to recap on front-end development and design from time to time. Technology moves soooo fast.
That helped me! Hint: 22:22 - just delete the columns.. webflow will automatically create the second row.. I don't know if it's a new feature.. great video though:)
Wow, all of these were great, but #10 was 🔥
Thank you for sharing!
Please keep making webflow videos!
Excellent video! That may be the best tips video I've ever watched. As a Webflow beginner and just come off a day of Webflow frustration, this video gives me the inspiration to keep going.
In the video, you mention a longer video in which you re/create the sample website. I'm not finding it. Did you not end up making it?
I see that you have a beginner's Webflow class. Is there a way of seeing a list of topics covered in that class?
My interest gratitude.
Hey Ernest! That's awesome. Glad it was an inspiration to keep learning. I don't think I ever did that video... Life got in the way :) But it sounds like my skillshare video could be helpful?
skl.sh/2PU9tML
The reverse combo class!! My life just got a lot easier! thanks!
Thank you
Very great video and clarified many of my troubles even so I consider myself an advanced webflow user. I hope you will make more this kind of basic yet advanced concept teaching videos.
Thanks Gazsi! That's very kind :)
Thank you! I learned a lot in a short time. Subscribed
This video is wonderful! So much great information and presented in such a simple way. Thank you for making this, Jose!
This is great!!! Thanks Jose!
Great work! I really like the attention to detail you put into all your stuff!
thanks so much for this.
Merci beaucoup, thank you very much Mr. Ocando
Love it :-) Are you releasing a video of the process of building this microsite ?
Thanks so much!!!
This was really helpful, thanks!
BEST VIDEO YET, VERYYY HELPFULL!!! Thank you!
super helpful!!!! thanks!
DUDE! This stuff is awesome! THANK YOU! 😁👍
Thanks Joseph!
This opened my eyes
sr loving your tuts!!
Thank you for the work you put into this. "Wrap" was a gem. 🙏🏼Out of curiosity, was this created before Webflow created their grid layout? If not, why would I use typography columns over grid? Didn't quite catch what the difference is. Still learning. :)
Awesome video! Thank you so much for the upload :)
Hey Jose, thanks for the video! I stumbled upon a spelling error while looking at your website, make sure to correct it:
You misspelled "critical" here:
Start your project.
Every project starts the same way. I ask questions, get to know you, and delve into the challenges you face. My crticial thinking roars to life and I envision what we will accomplish together.
Thanks Arno! If you've watched enough of the videos, you'll notice I'm an awful speller. Ha!
Love the video, super Helpful!
Great video! So helpful!!
Great stuff! You blew my mind with that font size tip. I have a question, what do you think about using Flexbox instead of grid in the "Landscape Declarations? Cause It seems that is easier to setup the flexbox and then change the horizontal flow for the vertical flow (mobile version).
Thank you for this amazing video.
Hey Lucas! Great thought. Both work well, so it depends a little bit on what you prefer. I like using grid for this type of situation because it's really easy to specify the distance or gutter between the columns. Also, with grid 2.0, the elements get automatically repositioned as you delete columns, so it's gotten a lot easier. Hope that helps!
@@JoseOcandoVideos thank you so much. Hope we can talk more sometime.
Awesome tips. thanks)
Great Tuts Sir, well done !
Hi Jose, thank you so much for the super clear explainations of all these stuff. I would like to ask a question about the text columns tips for masonry galleries. I just created for a client website a masonry product grid from an ecommerce collection list, but for example he wants the most recent products right on the top of the grid, so here is my question: How can I change the sequence of those items? I mean, now the items are following the columns direction starting from the first column to the last one. But the items are set from the most recent to the oldest but still they are vertically following the direction of the columns and in the second and the third columns I just see some of the older items at the top.
Thanks in advance for your kind response, greetings from Italy!!
Thanks 😄
Awesome stuff man!! Thanks for teaching us!
Really great, would like more info on type sizes and ems etc.
I played around w WebFlow but there was more of a learning curve than I’d hoped. 90% of my client builds are WordPress based. Curious if you have any design experience in WP and would you see WebFlow can have as much mobile friendly on scroll parallax and animations once you get very familiar w the platform? Can clients update any basic content w WebFlow if they don’t have much or any experience with or do they have to rely on the site designers for all edits?
Great! Thank you!
One question, when you’re doing the flower wrappers in landscape. You changed the design for mobile landscape, to a single tile across in a square aspect ratio. You said it looked good, but isn’t that a mistake? I find it odd that webflow overlooks completely the ability to view mobile landscape as it would be in reality… with a small device height! It just seems like you fell into a trap which you could be forgiven for. Because in the case of that flower image, a single one of those grid squares would be multiple swipes? And that would be so unwieldy, when what you really needed to do was maybe a 2 or 4 across?
Thank you so much for this video!
Hi , I am not able to set a fix width to the container, all I can do is give it a max width, how do I then build it for responsiveness?
Really excellent.
Hi Jose, wondering if you can help me. If I'm correct, I believe you had a video on your channel talking about responsive design and on this video you redesigned a website in adobe xd/figma and then you uploaded that design into webflow to use as a base, and you started designing on top of it. I cant find the video now. If you made it private or took it off, could you reupload/make it public? That was really helpful to me and is one of the reasons why i subscribed to your channel. Really wanted to come back and revisit that video so I can start implementing that into my web design process. Hopefully you can help me with this...thanks
Hey, great video Jose! Would you mind explaining what is happening at 18:10? I am having a hard time understanding how this is happening with a height of 0 and adjusting padding.
also a side note, how are your images and text div blocks separated without margin? Thanks again!
Hey Cooper! Hoping to do a video on this at some point. But, padding (as a percentage) is relative to the width of the element. So, if I make the padding 75%, that's a 4:3 ratio. Then, I can nest something inside that absolutely, set it to width and height of 100%, and set the image-fill property to cover, and you should be golden :)
@5:45 are the team member icons arranged within a grid ?
Hi Jose!
I'm following your class at Skillshare (very good, by the way).
And I'm jumping between here and there.
I have a question for you, or anyone with the answer. When you create "sections" and add their corresponding tag, such as "Header"; you use divs instead of the section element. Why this?
Can't I throw a section item and assign header tag to it? Or does it necessarily have to be a div?
Hey Carlos! Good question. If you use use your browser's developer tools, you can see how webflow exports the code. If I add a div block but give it a tag of header, you'll see it gets exported not as but as . I haven't tested it with the section component, but I double-checked with the div blocks to make sure. Thanks!
Jose Ocando thank you very much!
26:30 Complete Webflow Pro-hack! Awesome work, hands down!
Quick question about the side circles that function as a section marker; I saw you click it to bring you to a different section, are those styled link blocks within a div set to absolute positioning? How did you program the interaction to make each circle change color when the section is in view? Thanks!
Hey Tommy! It's been a while since I built that micro-site. But, I probably used fixed positioning as opposed to absolute. That way, it would stay in frame no matter if you scroll up or down. And yes! They are styled link blocks that are linked to an "anchor tag" or a section on the page. The link knows when it's in the section you linked it to. So, you can give it a style for its "current" state. Hope that helps!
AWESOME
Amazing
I learned so much from your video! I was referencing the Webflow read-only link, and it was super helpful. The link was working perfectly earlier, but now it leads to a 404 error on Webflow's website?
Hey Leah! So glad the video was helpful. I'm not sure what what happened to the read-only link. But, I tried copying it again and here it is! preview.webflow.com/preview/ten-tips-for-creating-a-responsive-site?preview=7521e2c2667bec1d535a4890ddc10bb8
@@JoseOcandoVideos Awesome, thank for reposting. I'll be watching your other tutorials as well to improve my workflow. Great work!
Super powerful video
Love your video :-) really insightful. I am completely new to Webflow as I am building my Portfolio, your tip are very helpful. I have build many website but it is does not look very slick as the Pro :-(
(as a side note, the video recorded is a bit Blurry) Thanks
Thanks Park! Just keep working at it and you'll continue to improve. In terms of video quality, were you watching at 1080p? If you weren't, that would definitely help to sharpen things up:)
@@JoseOcandoVideos Thanks Jose for your reply. is it possible to have your honnest feed back about a website that I am developing in Webflow (split-project.webflow.io/)
@@JoseOcandoVideos Thanks for your reply, I did not have the option to select 1080p on youtube when watching it last time. I have checked now the option 1080p is there.
What is the software you use in this video? Thanks! Like
Hey Aleksejs. I think you mean the software I used to design the website? If so it's sketch app. www.sketchapp.com
Jose Ocando Thanks 🙏 for reply. So is that sketch app can be opened through browser?
Scetch is a desktop app and it's for Macs only. If you prefer something that opens in a browser try figma. www.figma.com and last, Adobe has a free web design product called Adobe XD. www.adobe.com/products/xd.html they all work great.
Hey aleksejs. I just realized that you might have been asking what I used to develop the website (not design it). Sorry if I misunderstood. Anyways, if that's the case, the development was done in Webflow (webflow.com)
It's webflow :)
Hey man...I love what you are doing. Any chance you can make at least this project cloneable? Your popularity ok webflow would 10x.
Sure thing! Just made it clone-able :)