Hi Jose. Your by far the best webflow teacher. i have a couple of tutorial requests. 1. a before and after slider that is worth using.. lol 2. making the sliders you made in the tutorial (3 slider lesson) responsive. i had a crack at it and eventually got there but still had a tough time doing it. Cheers and thanks again for your amazing tutorials.
Thanks Corey! Great ideas. I stumbled across a nice before and after slider on Udesly the other day, but I've never used it myself. Just wanted to mention it :)
@@JoseOcandoVideos no problems and you are an amazing designer, yet equally as humble. keep up the good work. Much respect. ill be signing up for your course also..
I've watched hundreds of Webflow tutorials and this has to be one of my favorites. Incredibly easy to follow and you are a joy to listen to. I'm glad I found your channel and I'm looking forward to digging in more. Thanks for these Jose!
Thank you so much, Jose! This had exactly the hack I was looking for (target n-th last child) and loads more. Will be sure to check out the rest of your stuff. Cheers!
On the drop case section....how did you get the paragraph section into 2 different columns? Is it 2 side by side divs? Or did you code it in a way that the text from the 1st column spills over to the 2nd column?
You are amazing Jose, I have watched many of your videos and I've got to say that you are one of the best at this. It is so easy to follow your steps in each video. Thank you for everything.
Thanks, very helpful and neat tricks. Would love it if the live site was optimised for mobile. Also, a small point, in the video description it sayes csm collection, should be cms collection. Thanks again
So when I target an element on the embed it doesn't appear yellow, just all stays blue, In fact all the css I'm writing is just blue yours are different colors. Am I doing something wrong?
2:05 - Great video. FYI... One note: “Mozilla” is not pronounced like “mozzarella.” It’s “Mo-zilla” (first syllable rhymes with “no,” single “z”) pronounced as in the word “Mosaic.” Mozilla was the mascot of Mosaic Communications, the precursor to Netscape. It was a portmanteau of “Mosaic” and “Godzilla.” The code base that was open-sourced when AOL acquired Netscape eventually emerged as Mozilla. This is an important remnant of web history that should be properly pronounced. Thanks again for the excellent video.
Thanks Jose. I'm trying to combine 2 of the hacks: Nth child Row Reverse AND Media Query so that it's ONLY applied to desktop screens. Is this how you would combine them? @media only screen and (min-width: 991px){ .target-item:nth-child(even){ flex-direction: row-reverse;} }
It would take me way longer. 😉 I think your Webflow videos are the clearest out there. The only suggestion I would make is to include the reason why you choose one alternating over another. Although I’ve been using Webflow over a year, I just subscribed to your beginner series. Will you be doing more, perhaps one about a multi page site? Particularly how you handle naming conventions. Also one on setting up a blog using CMS - including setting up subscriptions and comments.
@@marvin..m I agree. Have picked up so very useful tricks that I'm using now. Very clear tutorials. Some of the best out there. Bring on schema (need to read up on what it actually is)
Hey Amartya! Thanks for the compliment :) I wasn't sure what your question was... Do you mean you want to import images from your behance profile info Webflow?
Hi Jose. Got the line clamp (chapter 8) to work but why only when I use .line-clamp as class name? And what do I do if I have 2 place on one page where I need the first to be cut to 2 lines and the other place to be 5 lines?
Hey Ole! So, the important thing is for the paragraph you want to clamp to have the same class name as what you're targeting in your custom code. If you want to have a second style of line clamp with a different number of lines, you could create a new style in your custom code that looks something like this: .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
Thanks for the video, question: Why did you style the sub-section content wrapper to go behind the image? I am asking because couldn't you just use 50% width for image and text and use padding to achieve the same?
Hey Umair. Thanks for watch the video :) I'm not sure what you're asking. But, the fun thing about development is that there are so many ways to achieve the same thing. Your solution might be a better one!
@@JoseOcandoVideos hey Jose, I was referring to min 11:52. After re-watching just now I have answered my question. I didn't initially notice that you designed the image to float over the white content wrapper underneath it with some of the white wrapper showing under the image(below the image). So realizing this, I now understand why you styled the CSS that way. Your comment indirectly answered my q as it made me rewatch with fresh pair of eyes and figure it out. Haha. Thanks!
Appreciate it Rohail. Currently, there's not a way to expand the canvas in Webflow. It might just be I was looking at it on a 27" monitor. I'm assuming you're looking at it on a laptop? Hope that helps!
Hey Jose I've added similar code to my project and it doesn't work .Product-Image { object-fit: Contain; } .Product-Name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } Can you tell me what's wrong with the code please
Hey Fantana. Sorry you're having trouble with the code. It looks good from what you posted. But, the issue may be elsewhere. Go ahead and post your question in the webflow forum. Make sure to include your read-only link and tag me in the post. I'll try and check it out for you!
Interesting! I'm not sure... I would try the property mix blend mode and see if that works? Let me know what you find! A fall back could be to export the text as a PNG file and use a blend mode on it.
Hey Jose, awesome video.... Im trying to have an image gallery in a grid. I add divs and throw in some images with a specific class name. I want the images to fill the div using object-fit but nothing seems to work, even when add a specific width and height. Nothing is working Jose, any ideas?
Hey Joseph! It could be a few things. Try posting your question in the webflow forum. Tag me in the post and make sure to add your read-only link. I'll try and take a look!
@@JoseOcandoVideos hey Jose, I actually did and they suggested for me to do the same thing I've been doing. It works one time and not the other, oddly I'm doing the same thing every time
If you have to write this much of custom code then what is the point of using Webflow? I see people(who promote Webflow) creating amazing (award-winning) websites with Webflow, but they had to use a lot of custom code(nobody shows it). The nth-child pseudo-class is something that used widely but Webflow doesn't have it(bummer). I agree that it is efficient for building simple responsive marketing pages or landing pages. I have used it for quick prototyping and it is indeed very fast to develop simple layouts. I believe Webflow has great potential for prototyping/testing (or simple CMS websites) but I don't like their marketing strategy that shows that it is a tool to build award-winning websites which it is clearly not as you have to write a lot of custom code. Maybe in the future, they build it to be a robust tool for great websites but right now it is just make-believe. If I am wrong then let me know. I like being proved wrong as it gives me an opportunity to learn from others.
Hey Gazi! Great question. I agree that some of the marketing surrounding the no code is a little aspirational at present. If you watch Vlad's quarterly videos, he says himself they've only accomplished 5% of what he envisions. But, here's a couple of reasons webflow is my platform of choice: 1) I prefer the visual nature of Webflow to writing code in a text editor. 2) The editor is super user friendly for clients. 3) The CMS is really powerful for populating content on your site. 4) There's a lot I can do in Webflow I would have a hard time doing outside of it. 5) They're constantly adding new features (like the new Lottie integration, which I had trouble custom coding) Webflow is already fairly easy to use and I'm excited about how their advances will keep making complex issues easier to solve right in Webflow. I imagine this video will be irrelevant in the near future :) Hope that was helpful.
the margin fix on the nth-child was working for me with just left or right. tried margin-right;
margin-left; and it works
Jose! This was amazing to watch. Direct and to the point. You're also a SUPER likable person. Thanks for the great tips!
Wow this was amazing! Thank you Jose! I'm so happy I found your channel. And I loved your friendly approach and small giggles, it made me happy too :)
Thang you! Your advices are amazing and helpful, as usual !
Hi Jose. Your by far the best webflow teacher. i have a couple of tutorial requests. 1. a before and after slider that is worth using.. lol 2. making the sliders you made in the tutorial (3 slider lesson) responsive. i had a crack at it and eventually got there but still had a tough time doing it. Cheers and thanks again for your amazing tutorials.
Thanks Corey! Great ideas. I stumbled across a nice before and after slider on Udesly the other day, but I've never used it myself. Just wanted to mention it :)
@@JoseOcandoVideos no problems and you are an amazing designer, yet equally as humble. keep up the good work. Much respect. ill be signing up for your course also..
Your studio website is just too good. The scroll effect on the logo at the bottom, was it made on After Effects?
I've watched hundreds of Webflow tutorials and this has to be one of my favorites. Incredibly easy to follow and you are a joy to listen to. I'm glad I found your channel and I'm looking forward to digging in more. Thanks for these Jose!
This video deserves a👍and a subscription to the channel 👏💯
Thank you so much, Jose! This had exactly the hack I was looking for (target n-th last child) and loads more. Will be sure to check out the rest of your stuff. Cheers!
Great Jose, thank you
GREAT info here. I know how to code all of these things, but I have been having to do ghetto workarounds for them. Thanks!
You are the best!
Your way of explaining is really great! Very useful Tutorial on Webflow!
Thanks Jose for this amazing tutorial!
Awesome tutorial. Thanks so much.
Super valuable episode. Please continue, you are awesome!
brilliant tutorial!!! thank you!!! wainting for more! 👍👍👍
Thanks Jose. You are the master! Great hacks.
You are amazing, thank you!!
Wonderful stuff. Thank you.
Good video Jose, congratulations, ¿Do you have a video where it is explained how to go from webflow to react using typescript?
Thanks
On the drop case section....how did you get the paragraph section into 2 different columns? Is it 2 side by side divs? Or did you code it in a way that the text from the 1st column spills over to the 2nd column?
Super awesome tutorial - so helpful for 💜Webflow
This is great - thanks a lot dude!
Thanks Jose, subscribed and watching you on skillshare. please more webflow tutorials!p
Cool video! Just wondering why use the multiply in css vs doing it in photoshop first? I find compositing your image saves a ton on file size.
This is amazingly useful, thanks man. 🙌🏻
2 of the hacks were just what I was looking for. Thank you so much.
Perfect! Really glad it was helpful :)
Does the object fit work it the div the image it placed in is set to e.g. 100% width and 200 px high? Or does it need to be px size in both w and h?
@@olehansen6568 it works with responsive units like percentages too :)
You are amazing Jose, I have watched many of your videos and I've got to say that you are one of the best at this. It is so easy to follow your steps in each video. Thank you for everything.
Great tips Jose. Looking forward to part 2! :-)
thanks, super helpful!
So easy to understand! thank you so much! You just solved 3 problems i'm having with a current client.
Thanks, very helpful and neat tricks. Would love it if the live site was optimised for mobile. Also, a small point, in the video description it sayes csm collection, should be cms collection. Thanks again
Good catch! Thanks Jason.
Your welcome. Object fit is brilliant, really useful
Like always great information. Thank you
I followed step by step but that drop-cap thing didn't work for me
Nice vid, but for the record...about 1/4 of the things you show can be done easily w/out custom code (e.g. media query, image cover etc)
Thanks Jose!
So when I target an element on the embed it doesn't appear yellow, just all stays blue, In fact all the css I'm writing is just blue yours are different colors. Am I doing something wrong?
your the best!
2:05 - Great video. FYI... One note: “Mozilla” is not pronounced like “mozzarella.” It’s “Mo-zilla” (first syllable rhymes with “no,” single “z”) pronounced as in the word “Mosaic.” Mozilla was the mascot of Mosaic Communications, the precursor to Netscape. It was a portmanteau of “Mosaic” and “Godzilla.” The code base that was open-sourced when AOL acquired Netscape eventually emerged as Mozilla. This is an important remnant of web history that should be properly pronounced. Thanks again for the excellent video.
what a sweetie - thanks for this
Thanks Jose. I'm trying to combine 2 of the hacks: Nth child Row Reverse AND Media Query so that it's ONLY applied to desktop screens. Is this how you would combine them?
@media only screen and (min-width: 991px){
.target-item:nth-child(even){
flex-direction: row-reverse;}
}
❤❤❤❤
Schema would be greatly appreciated.
Sounds good! I was nervous to do it because it would be pretty boring. But, it took me a long time to figure out...
It would take me way longer. 😉
I think your Webflow videos are the clearest out there. The only suggestion I would make is to include the reason why you choose one alternating over another. Although I’ve been using Webflow over a year, I just subscribed to your beginner series. Will you be doing more, perhaps one about a multi page site? Particularly how you handle naming conventions. Also one on setting up a blog using CMS - including setting up subscriptions and comments.
@@marvin..m I agree. Have picked up so very useful tricks that I'm using now. Very clear tutorials. Some of the best out there. Bring on schema (need to read up on what it actually is)
god bless you for this tutorial!
I have a question... Is their any way I can pull my view from behance and put in my website??
By the way love your vedios 😊😊😊👍👍👍
Hey Amartya! Thanks for the compliment :) I wasn't sure what your question was... Do you mean you want to import images from your behance profile info Webflow?
Hi Jose. Got the line clamp (chapter 8) to work but why only when I use .line-clamp as class name? And what do I do if I have 2 place on one page where I need the first to be cut to 2 lines and the other place to be 5 lines?
Hey Ole! So, the important thing is for the paragraph you want to clamp to have the same class name as what you're targeting in your custom code. If you want to have a second style of line clamp with a different number of lines, you could create a new style in your custom code that looks something like this:
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.line-clamp-5 {
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
Thanks for the video, question: Why did you style the sub-section content wrapper to go behind the image? I am asking because couldn't you just use 50% width for image and text and use padding to achieve the same?
Hey Umair. Thanks for watch the video :) I'm not sure what you're asking. But, the fun thing about development is that there are so many ways to achieve the same thing. Your solution might be a better one!
@@JoseOcandoVideos hey Jose, I was referring to min 11:52. After re-watching just now I have answered my question. I didn't initially notice that you designed the image to float over the white content wrapper underneath it with some of the white wrapper showing under the image(below the image). So realizing this, I now understand why you styled the CSS that way. Your comment indirectly answered my q as it made me rewatch with fresh pair of eyes and figure it out. Haha. Thanks!
thank you! btw, can you tell me how you increased the size of the ruler at the bottom to stretch out to 1280+ pixels. mine only goes up to 1000px.
Appreciate it Rohail. Currently, there's not a way to expand the canvas in Webflow. It might just be I was looking at it on a 27" monitor. I'm assuming you're looking at it on a laptop? Hope that helps!
@@JoseOcandoVideos i see. The reason i ask is because i dont know whether this would be a problem when im making responsive sites for my clients
@@rohailbukhari2687 I'm sure you've seen the update, but you can now change canvas size in Webflow :)
Just started the Skillshare class! :) PS. What's the font of "Bookcase"?
Great! Hope it's helpful :-) The font is Roc Grotesk. It's linked in the description box, but does require an Above account.
@@JoseOcandoVideos Thanksss !
Hey Jose I've added similar code to my project and it doesn't work
.Product-Image {
object-fit: Contain;
}
.Product-Name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
Can you tell me what's wrong with the code please
Hey Fantana. Sorry you're having trouble with the code. It looks good from what you posted. But, the issue may be elsewhere. Go ahead and post your question in the webflow forum. Make sure to include your read-only link and tag me in the post. I'll try and check it out for you!
Hi Jose, I wondering can text embed blend mode as well?
Interesting! I'm not sure... I would try the property mix blend mode and see if that works? Let me know what you find! A fall back could be to export the text as a PNG file and use a blend mode on it.
Hey Jose, awesome video.... Im trying to have an image gallery in a grid. I add divs and throw in some images with a specific class name. I want the images to fill the div using object-fit but nothing seems to work, even when add a specific width and height. Nothing is working Jose, any ideas?
Hey Joseph! It could be a few things. Try posting your question in the webflow forum. Tag me in the post and make sure to add your read-only link. I'll try and take a look!
@@JoseOcandoVideos hey Jose, I actually did and they suggested for me to do the same thing I've been doing. It works one time and not the other, oddly I'm doing the same thing every time
@@PcHabitat weird! Did you try tagging me? I don't think I got a notification.
@@JoseOcandoVideos no this was over the course of a few weeks. I can put in another and tag you.
@@PcHabitat sure thing! When you're tagged you get an email notification. That helps to make sure I don't miss it.
If you have to write this much of custom code then what is the point of using Webflow?
I see people(who promote Webflow) creating amazing (award-winning) websites with Webflow, but they had to use a lot of custom code(nobody shows it). The nth-child pseudo-class is something that used widely but Webflow doesn't have it(bummer).
I agree that it is efficient for building simple responsive marketing pages or landing pages. I have used it for quick prototyping and it is indeed very fast to develop simple layouts.
I believe Webflow has great potential for prototyping/testing (or simple CMS websites) but I don't like their marketing strategy that shows that it is a tool to build award-winning websites which it is clearly not as you have to write a lot of custom code. Maybe in the future, they build it to be a robust tool for great websites but right now it is just make-believe.
If I am wrong then let me know. I like being proved wrong as it gives me an opportunity to learn from others.
Hey Gazi! Great question. I agree that some of the marketing surrounding the no code is a little aspirational at present. If you watch Vlad's quarterly videos, he says himself they've only accomplished 5% of what he envisions. But, here's a couple of reasons webflow is my platform of choice:
1) I prefer the visual nature of Webflow to writing code in a text editor.
2) The editor is super user friendly for clients.
3) The CMS is really powerful for populating content on your site.
4) There's a lot I can do in Webflow I would have a hard time doing outside of it.
5) They're constantly adding new features (like the new Lottie integration, which I had trouble custom coding)
Webflow is already fairly easy to use and I'm excited about how their advances will keep making complex issues easier to solve right in Webflow. I imagine this video will be irrelevant in the near future :)
Hope that was helpful.
@@JoseOcandoVideos Thanks. I like the reasons you gave. I hope too that they are able to accomplish their vision.