- 103
- 160 219
Derek Siu | Webflow & Web Design
เข้าร่วมเมื่อ 8 ม.ค. 2023
Welcome to my TH-cam channel: Your destination for high-quality content on Webflow tutorials, UI/UX design insights + freelance knowledge. I'm Derek Siu a freelance Website designer and Webflow Developer based in Sydney Australia with over 4+ years of experience. My goal for this TH-cam channel is to provide free valuable resources to help you master Webflow and elevate your design skills.
Sit back, follow along, and unlock valuable insights in each video. Don't forget to show your support by liking, commenting, and subscribing for regular updates.
Discover more about me and my journey on my website:
www.dereksiu.com.au/about\u2028
Ready to get started with Webflow? Use my affiliate link here:
webflow.partnerlinks.io/4brsncjjm7ge
Want to hire me for your project or for consultation? Contact me here:
www.dereksiu.com.au/contact
Sit back, follow along, and unlock valuable insights in each video. Don't forget to show your support by liking, commenting, and subscribing for regular updates.
Discover more about me and my journey on my website:
www.dereksiu.com.au/about\u2028
Ready to get started with Webflow? Use my affiliate link here:
webflow.partnerlinks.io/4brsncjjm7ge
Want to hire me for your project or for consultation? Contact me here:
www.dereksiu.com.au/contact
CSS Classes in @Webflow Explained: Beginner’s Guide
Box Model Video: th-cam.com/video/_aP_zT9qRQA/w-d-xo.html
Understanding the CSS box model is essential for effective web design, as it defines how elements are structured and displayed on a webpage. In Webflow, mastering the box model enables designers to create responsive and visually appealing layouts.
Yes around 10mins into the video I said Margin when I was meant to say Padding.
📚 Time Stamps:
0:00 Recap of Box Model
0:40 CSS styles the box
1:30 Changing CSS style example
3:34 CSS class shares the styles
4:00 CSS class in style selector
4:24 HTML CSS Class (pink tag)
5:14 Walkthrough of CSS Classes (example)
5:54 What to name classes?
7:24 How to rename class name
11:24 Combo Classes
12:40 Recap / Closing Statements
For more value please visit:
www.dereksiu.com.au/value
📢 Connect With Me
Website: www.dereksiu.com.au/
Fiverr: www.fiverr.com/dereksiu
👇 Helpful Links:
Hire a Freelancer on Fiverr:
fiverr.grsm.io/k8bhq1js4hmx
Try Webflow:
webflow.partnerlinks.io/4brsncjjm7ge
Want to record a video like this? Try Tella:
tella.tv/?via=derek
Have questions or suggestions for future tutorials? Leave them in the comments below! Your feedback is greatly appreciated.
--
*Disclaimer: Some of the links in this description are affiliate links, which means I may earn a small commission if you make a purchase through them. This comes at no extra cost to you and helps support the channel. Thank you for your support!
Peace!
#WebflowTutorial #CSSClasses #WebDesignTips #WebflowForBeginners #LearnWebflow #WebDesignTutorial #WebflowCSS #WebDevelopment #WebflowBasics
Understanding the CSS box model is essential for effective web design, as it defines how elements are structured and displayed on a webpage. In Webflow, mastering the box model enables designers to create responsive and visually appealing layouts.
Yes around 10mins into the video I said Margin when I was meant to say Padding.
📚 Time Stamps:
0:00 Recap of Box Model
0:40 CSS styles the box
1:30 Changing CSS style example
3:34 CSS class shares the styles
4:00 CSS class in style selector
4:24 HTML CSS Class (pink tag)
5:14 Walkthrough of CSS Classes (example)
5:54 What to name classes?
7:24 How to rename class name
11:24 Combo Classes
12:40 Recap / Closing Statements
For more value please visit:
www.dereksiu.com.au/value
📢 Connect With Me
Website: www.dereksiu.com.au/
Fiverr: www.fiverr.com/dereksiu
👇 Helpful Links:
Hire a Freelancer on Fiverr:
fiverr.grsm.io/k8bhq1js4hmx
Try Webflow:
webflow.partnerlinks.io/4brsncjjm7ge
Want to record a video like this? Try Tella:
tella.tv/?via=derek
Have questions or suggestions for future tutorials? Leave them in the comments below! Your feedback is greatly appreciated.
--
*Disclaimer: Some of the links in this description are affiliate links, which means I may earn a small commission if you make a purchase through them. This comes at no extra cost to you and helps support the channel. Thank you for your support!
Peace!
#WebflowTutorial #CSSClasses #WebDesignTips #WebflowForBeginners #LearnWebflow #WebDesignTutorial #WebflowCSS #WebDevelopment #WebflowBasics
มุมมอง: 29
วีดีโอ
I'm Reviewing YOUR Webflow Site for MAJOR Improvements!
มุมมอง 582 ชั่วโมงที่ผ่านมา
In this video, I'm reviewing YOUR Webflow site for major improvements! Watch to see how you can enhance your website design and functionality using Webflow. In this new series, I review my subscribers Webflow site (with permission). Today's site was sent by Ivan who wanted specific feedback to improve his Webflow site for his client DR7TEAM GYM. High level improvement includes: Font Sizing, Cas...
Revamping ITDEvents.com for an Epic User Experience
มุมมอง 477 ชั่วโมงที่ผ่านมา
Take a behind-the-scenes look at the revamp of ITDEvents.com, an event website designed to provide an epic user experience. In this video, we'll dive into the process of transforming the website's CMS solutions to create a seamless and engaging experience for users. From enhancing navigation to improving content discovery, we'll explore the strategies and techniques used to take ITDEvents.com t...
What Webflow Freelancers Don't Want You to Know About Productivity
มุมมอง 11516 ชั่วโมงที่ผ่านมา
In this video, I share the essential tools I use every day as a freelancer to stay productive, organized, and successful. From communication to project management, design, and content creation, these tools help streamline my workflow and ensure I deliver high-quality results for my clients. Whether you're just starting your freelance journey or looking to optimize your own workflow, this video ...
Unveiling Alta Invest's New Website - Webflow Showcase & UX Design Magic
มุมมอง 246วันที่ผ่านมา
Get ready to experience the magic of Alta Invest's new website, a stunning @Webflow showcase that redefines the boundaries of UX design. In this video, we'll take you on a journey through the making of this responsive design masterpiece, highlighting the key features and design elements that make it stand out. From the initial concept to the final product, we'll dive into the creative process b...
Unveiling the Box Model: Discover How Websites Truly Operate!
มุมมอง 8814 วันที่ผ่านมา
Ever wondered how websites truly operate behind the scenes? In this video, we're diving deep into the world of web development to uncover the secrets of the box model, a fundamental concept that shapes the way browsers render web pages. From responsive design to web standards, we'll explore how this crucial model affects the way we design and build websites. By understanding how the box model w...
How I Built QuantumRevenues.com - Webflow Showcase & UX Design Insights
มุมมอง 12514 วันที่ผ่านมา
In this video, I take you through the process of designing and building QuantumRevenues.com in @Webflow. From conceptualizing the layout to implementing custom features, I’ll share how I created a site designed to elevate Quantum Revenues’ brand and convert visitors into clients. This tutorial-style showcase covers everything from responsive design to Webflow-specific tips that make the site st...
Custom Cursor in Webflow Made Easy: Beginner’s Guide
มุมมอง 18221 วันที่ผ่านมา
Want to make your @Webflow website stand out? Learn how to create a custom cursor with this step-by-step tutorial! Perfect for beginners, this video covers everything from design basics to implementation, helping you add a unique touch to your website. Whether you’re building a portfolio, a business site, or a personal project, a custom cursor can enhance your user experience. Watch now and ele...
How I Built Kalotravel.com - Webflow Showcase & UX Design Insights
มุมมอง 23421 วันที่ผ่านมา
How I Built Kalotravel.com - Webflow Showcase & UX Design Insights
How to Create a Smooth Accordion Animation in Webflow
มุมมอง 19528 วันที่ผ่านมา
How to Create a Smooth Accordion Animation in Webflow
How I Built @Vividize's Website - Webflow Showcase & UX Design Insights
มุมมอง 132หลายเดือนก่อน
How I Built @Vividize's Website - Webflow Showcase & UX Design Insights
How to Create Text Stroke Effects Natively in Webflow Without Custom Code
มุมมอง 61หลายเดือนก่อน
How to Create Text Stroke Effects Natively in Webflow Without Custom Code
How I Built www.shaybenmoussa.com.au - Webflow Showcase & UX Design Insights
มุมมอง 91หลายเดือนก่อน
How I Built www.shaybenmoussa.com.au - Webflow Showcase & UX Design Insights
How to Compress Webflow Videos with Handbrake for Faster Page Load Speeds
มุมมอง 135หลายเดือนก่อน
How to Compress Webflow Videos with Handbrake for Faster Page Load Speeds
How I Built Santanatudioco.com - Webflow Showcase & UX Design Insights
มุมมอง 98หลายเดือนก่อน
How I Built Santanatudioco.com - Webflow Showcase & UX Design Insights
I Pretended to be a Billionaire Using Inspect Element
มุมมอง 54หลายเดือนก่อน
I Pretended to be a Billionaire Using Inspect Element
How I Built SkinSafe.au | Webflow Showcase & UX Design Tips
มุมมอง 198หลายเดือนก่อน
How I Built SkinSafe.au | Webflow Showcase & UX Design Tips
Create a FREE multi-step form in Webflow using Formly (tryformly.com)
มุมมอง 7283 หลายเดือนก่อน
Create a FREE multi-step form in Webflow using Formly (tryformly.com)
Building a Conference Website in Webflow (Showcase: pmreconference.com)
มุมมอง 924 หลายเดือนก่อน
Building a Conference Website in Webflow (Showcase: pmreconference.com)
Prevent page scroll on Webflow Modal (using Chat GPT)
มุมมอง 4354 หลายเดือนก่อน
Prevent page scroll on Webflow Modal (using Chat GPT)
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 2
มุมมอง 2314 หลายเดือนก่อน
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 2
Compressing CMS Items (Images) in Webflow CMS
มุมมอง 2325 หลายเดือนก่อน
Compressing CMS Items (Images) in Webflow CMS
Webflow Showcase: Philippstrucking.com
มุมมอง 765 หลายเดือนก่อน
Webflow Showcase: Philippstrucking.com
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 1
มุมมอง 1635 หลายเดือนก่อน
Top 3 Must-Have Tools for Freelance Website Designers (UI/UX) & Webflow Developers | Part 1
So simple , thanks !
Nice!!! 🎉
You really put in the effort to ensure everyone understands, even though you were frustrated. Still, you went the extra mile to explain-kudos to you!
Wow, thank you so much for your feedback, it means a lot. Whole site is made from scratch, i wasn’t using any type of template. Consistency will be fixed😂
Ofc - Thanks again for giving me the opportunity to provide you with feedback Ivan. If you made the site from scratch I can already tell you put a lot of effort, deploying various animations / styles and techniques. Keep up the great work and just keep practising you will kill it!
Thanks so much for the info! I really appreciate how easy you made the process to understand and follow. I actually got it done successfully-unlike so many other videos out there!
Awesome! You got it working na :)
The navbar trick is it done through interactions or gsap scroll trigger ?
Native Webflow interactions - I believe I made a tutorial on this.
Can u demonstrate a use case when to use finsweet slider and when to use swiperjs since both can be binded with CMS is it only when you want featured toggle ? that s when you choose finsweet?
This is actually a great point I never even thought of. I think you are right technically both can be used. I guess I used Finsweet CMS slider and not Swiper JS because it was easier to setup and I wanted to reserve the Swiper JS for something else potentially.
Nice video, i would also love to hear more about buying tickets feature
Noted!
Amazing Webiste, but could you please explain more how did you do the ticket buying feature?
Yes - Will make a video on this!
Hi. How can you get this working when viewing on a mobile device without the Spotify showing preview and only playing 30sec ?
I suspect it's because Spotify has a (Free) and a (Paid) version so hence why the free version may limit duration and what not..
This is so helpful! Thank you so much for sharing it!
No problem, glad you found it useful!
amazing!
Thank you! Cheers!
Thanks a lot bro! That is really smooth to follow and the result is great
No problem! Glad you got this working.
I tried it multiple times but its still not working(PC)...
Really? Are you using the default lightbox component then adding ?autoplay=1 at the end of the TH-cam URL?
🫡
🫡
Sou Brasileiro e estou criando um site, seus videos me ajudam muito, sem saber, você está ajudando alguém que nem conhece e de outro pais! parabens pelo ótimo conteudo!
Olá, saudações da Austrália. Obrigado pelas amáveis palavras. Estou tão feliz que meus vídeos tenham ajudado você de alguma forma, mesmo que eu não consiga ver porque somos de outro país. Sinceramente, desejo a você tudo de melhor!
@@dereksiuau ❤❤
Thanks for the tutorial Derek, what i don't understand is how you changed the color based on the state of the tab, i try to customize it the way you did it on the tutorial but i just can't find anything to do it :C
With the Tab in the setting you can choose which tab is selected first. Whatever is selected you can see on the style panel in the class it will have a GREEN tag that says "current" so that is a unique class style which you can style for only the selected TAB. + You can apply a hover state to the tabs (non-selected one). Hope this helps :)
@@dereksiuau Thank you so much Derek! Doing that i realized that i had a mistake on my classes 😅😅
very helpful, thanks!
You are welcome!
The meanest thing I did was go buy a lottery ticket, then edit the lottery results online to match my purchased ticket like you did, and took a photo of the website with my ticket along side. My whole family started become nicer to me after I sent them the photo.
WOW - this is hilarious lol.
DVH calc was nice can't we use svh since client first sections kinda ships with svh?
Yeah SVH is probably better in all situations. Good point will be using that moving forwards. Webflow actually made a video explaining the difference VH,DVH,SVH
Love the footer
1.84 k is not mere peasant bro it is someone else's unachievable dream
This is true - it's all about perspective.
Now in two months create another video showing how to close all questions if you open one, so only one can be opened at a time 😂 Infinite content glitch
hahahahaha
@@dereksiuauActually can you show us this now😅
This is super important not only does it improve SEO but you can actually get sued if your website isn’t ADA compliant - if every single relevant image and clickable icons don’t have alt text you can get sued, I’ve seen it happen before.
@@Squidlord1738Very interesting point!!!
Another quick way to show these boxes in boxes, is to go Inspect Element, then add a new CSS: *{border:1px solid pink !important;} This will add a border over everything, and its useful especially when you are on mobile, and there seems to be some element that is wider than it should be and causing users to be able to scroll left and right.
That is an awesome suggestion! Thanks for sharing
how do you do that? Im struggling a lot with that...
1. Right click anywhere in the page and click on Inspect Element 2. Go to the right section where all the css is and create a new css selector, I.e *{} 3. Add border: 1px solid pink !important; The * is select all elements on the page The !important at the end will help override any element that already has a border
@ thanks 🙏
GRACIASSSSSSSSSSSSSSSS
@@LeithGamer 👍
I actually didn't like this update, don't believe it was needed and webflow has other things more important to improve probably
@@genovevalente Valid comment!
Bro bla bla bla how to make this Interaktion 😅
Which interaction to be specific?
I found this tutorial to be very useful and I will use this effect soon. Thanks!
@roving-camera_72 Awesome 👌
I love you
Easy to understand and follow! Another learning! Thank you sharing your knowledge!
Awesome glad you understood :)
is the torch effect pure css Make a tutorial please
going to watch the scroll tut i was wondering on how to accomodate the nav length
BACKUP
Requesting BACKUP {over}
Good job you did there, can you make some lessons on how you build it from time to time?
This is an interesting idea - can you expand? Like a timelapse with my voice over recording or something?
@@dereksiuau Yes, something like that, or even a video about your approach on building a specific section or a feature you thought it was challenging. thank you again for what you are doing
@1azjoy I understand, this has been noted thanks for the suggestion.
How i remove that scrow line bellow site when i made this loop?
If you are talking about a horizontal scroll bar on your website. Then that is easy, it just means something is going outside of the screen (body). So you can just make a page wrapper div set width to 100% set overflow to none (which clips everything.
Bro dropped banger regarding componentizing the cursor.
Always use components lol
Very helpful! Thank you for sharing! 🎉
You are so welcome! - thanks for the comment.
Bro slid in his own site lol 🔥good stuff
Haha gotta self plug - you know how it is lol.
soo the day i start using webflow again it changes?! i thought i was soo behind and that this'd existed for a good while LOL changing the preview position is baffling to me. like, why?
Hahaha - I'm sure Webflow had a reasoning, I suspect to make their upsell functionalities (Locale and Analytics) more noticeable. But after using the new UI - I'm sure you will get use to it :)
Nice, thanks for you work !
No problem 👍
everything redirect to their homepage now. is this going to be fixed anytime soon?
Really wow - Actually I've seen the homepage be on the Webflow canvas before. You can refresh the page and it should be fixed!
I actually am fine with this honeslty. Nothing crazy. When are the changes going in effect ? And is analytics something you have to setup ? Super excited for that
Yeah it seems very different but we are creatures of habit so I'm sure we will all adjust.
Thanks man, we are working with Webflow on university, and I wanted to do this so bad! Thanks!
Glad it was helpful! Webflow university is a fantastic tool btw
Consuming Bro's video made me think UX is as easy as he speaks . bro casually inserted UX principles especially on the gallery image stacking section and double CTA section.
Hahaha - if this is a compliment thanks!
Only problem with this is that it sorts images top to bottom instead of left to right. So if you want your layout to be specific and change with scaling, it completely breaks the order.
Interesting, do you have a solution for this?
Thank you for sharing this, learning a lot from you
Glad you are learning!! & Thanks for watching / commenting.
Clutch tip!
GG!
Sir i have a question, What makes a person job ready as a Webflow developer ? Like what things he/she should be good at before applying for jobs, I am beginner and i always get stuck and think how much do i have to learn?
If you are talking about working for someone else (ie. Company): - Willingness to learn and work - Getting your foot in the door with a good resume / portfolio (doesn't have to be real client work it can just be your personal projects). As for the actual Webflow skills, personally I think: - Confident in turning a website design into a Webflow site including coding the site with some sort of structure (eg. Section > Container > Item) and using classes efficiently. - Confident in making the website mobile responsive and adding animations - Confident with the Webflow CMS. If you need any more specifics let me know :)
@@dereksiuau Thank you so much for this detailed reply! I really appreciate you taking the time to guide me. I'll focus on building a strong portfolio with personal projects and improving my skills in structure, responsiveness, animations, and CMS as you mentioned. For third-party integrations, I'm planning to learn tools like Zapier, Airtable, Memberstack, and Finsweet. Do you think there are any other tools or integrations I should explore?
Nice website. I have a question, if the header is sticky, why have navigation menu (quick links) on the footer?