8 Awesome Custom Code Hacks for your Webflow Project

by | Feb 21, 2021 | 0 comments

8 Awesome Custom Code Hacks for your Webflow Project

by | Feb 21, 2021 | CSS Tips and Tricks | 0 comments



— 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

0 Comments

Submit a Comment

What Our Clients Are Saying

Amplifylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to...

Rob - Amplylife.ca

Dieno Digital Marketing Services
5
2018-05-03T19:49:40+00:00

Rob - Amplylife.ca

Been working with Leland on a project for a Not-For-Profit organization and it is a pleasure to be able to bring a high level of creativity, energy, expertise and professionalism to the project for their digital marketing needs. We are so excited for the chance to work more with Leland and Dieno Digital.

FS Designs

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic...

F.S.

Dieno Digital Marketing Services
5
2018-06-19T18:50:18+00:00

F.S.

Leland is extremely knowledgeable and super pleasant to deal with. He helped me get my website running for my graphic design business and improved my SEO so that I appear more frequently and near the top of searches. He a great digital and web strategist and I would highly recommend his services.

Juju Hair Lounge

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything...

Leah

Dieno Digital Marketing Services
5
2018-07-09T03:06:21+00:00

Leah

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything I've learned to our Facebook business page!

Uniglobe Travel – Western Canada

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated...

Ciara

Dieno Digital Marketing Services
5
2018-07-10T03:22:20+00:00

Ciara

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated that there was some concrete, actionable advice given as well!
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>