— SKILLSHARE —
Check out my newly launched “Webflow for Beginners” class. Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don’t have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free.
https://skl.sh/2PU9tML
– ABOUT –
In this tutorial, I cover 8 different pieces of custom code that power up your webflow project, especially with CMS collections. This tutorial is geared more towards intermediate or advanced users.
– CHAPTERS –
Chapter 1 | Resources – 01:12
Chapter 2 | Vertical Text with writing mode – 02:55
Chapter 3 | Blend Modes – 05:44
Chapter 4 | Targeting Items in a CMS Collection with Nth-Child – 08:51
Chapter 5 | Nth Last-Child – 14:48
Chapter 6 | Nth First-Letter – 17:39
Chapter 7 | Object Fit – 20:07
Chapter 8 | Line Clamp – 23:59
Chapter 9 | Media Queries -26:52
– WEBFLOW –
Live Webflow Site:
https://jocando-tutorials.webflow.io/custom-code-hacks
Read-only link:
https://preview.webflow.com/preview/jocando-tutorials?utm_medium=preview_link&utm_source=designer&utm_content=jocando-tutorials&preview=b1ade817df2e41566f53d6b876d5b9f9&pageId=5d856a8408e53e648cddeb32&mode=preview
– RESOURCES –
Special thanks to Daniel Korpai. I used all of his photos on Unsplash for the tutorial site:
https://unsplash.com/@danielkorpai
Can I Use: https://caniuse.com/
Mozilla: https://developer.mozilla.org/en-US/
W3 Schools: https://www.w3schools.com/
CSS Tricks: https://css-tricks.com/
Heading Font: https://fonts.adobe.com/fonts/roc-grotesk
Body Font: https://fonts.adobe.com/fonts/proxima-nova
– ABOUT ME –
Serve – My Studio’s Site: https://www.madebyserve.com/
Dribbble: https://dribbble.com/Jose_Ocando
source