PRO TIPS〡Webflow Tips & Tricks

Enjoy the free lesson 'Webflow Tips & Tricks' from the Awwwards Academy Course: Webflow - CMS and Advanced Techniques by Greg Rog. Webflow is an absolute game changer in web design industry. As an UI / UX designer you can now deliver your projects as ready-made websites. Webflow: CMS and Advanced Techniques → https://bit.ly/awwwards-academy-advanced-webflow-course Webflow: Basics → https://bit.ly/webflow-basics-course 00:00 - Let's get started 00:33 - Cmd + Return for adding a class 00:54 - Referring to viewport with VH and WH 01:36 - Option + Arrows for navigation 02:33 - Referring to viewport with VMIN and VMAX 03:14 - Cmd + Return and Delete to fix a class 03:34 - iddqd for God Mode 04:35 - HTML Embed for CSS preview in Designer 05:51 - Control contrast ratio 06:31 - Use classes nested in Rich Text 07:58 - Show all elements with class 08:20 - Use Rich Text for quick embeds 09:26 - Option + drag to duplicate 09:54 - Cmd + E for searching in Webflow 10:18 - D for Settings (and S for styles) 10:31 - Cmd + Shitf + P for Preview 10:56 - Change scroll to anchor speed 11:46 - Scroll to middle of the screen 12:06 - Search Google Fonts Extension 13:43 - Color Picker Extension 13:53 - Click and move to change values 14:02 - Hold Option to change two sides 14:09 - Hold Shift to change all four sides 14:21 - Option Click to reset property 14:33 - Preview margins with x-ray 15:08 - Select child with Cmd click 15:25 - Use columns for text 15:42 - Truncate text with line-clamp 16:31 - Change div block to link block 16:55 - Generate dummy images from CMS 17:59 - Apply alt text from Assets Panel 18:35 - Shift + P for Publishing Panel 18:40 - Shift + Return to Publish 18:57 - Cmd Shift + S for backup 19:09 - Clean assets - delete and republish 19:46 - Cmd + Shift + O - turn off responsive image 20:09 - Lazy image loading 20:36 - Prefetch links 21:19 - systemflow.co 21:45 - SystemFlow.co - Components 22:06 - SystemFlow - use framework for Figma 22:47 - SystemFlow - design tokens 22:59 - SystemFlow - readymade classes More Courses & Free Live Sessions for web designers and developers: https://www.awwwards.com/academy ​ For the latest web design trends - follow us: Blog: https://www.awwwards.com/blog​ ​Twitter: http://twitter.com/awwwards​ ​Instagram: https://www.instagram.com/awwwards​ ​Facebook: https://www.facebook.com/awwwards​ ​LinkedIn: https://www.linkedin.com/company/awwwards #awwwardsacademy #webflow #webdesign