Reflecting on my first Webflow gig

I recently completed my first Webflow related gig. Pretty exciting stuff! The job was to develop an already-made design. Here’s the landing page I built. Here’s the link to see the back end.

I’m not gonna lie, at first I was nervous that I wouldn’t be able to do everything. But then a wise Webflow developer told me everyone learns something new when they build. 

And he was right, I did learn how to tackle every obstacle that came my way. This gives me the confidence to take on even more challenges. Because even if I don’t know how to do a certain thing in Webflow, I know I can figure it out.


I’m thinking of writing a reflection after every project I take on, where I document all the things I learned throughout each project. This is in case I later forget how I did something, but also to help others by publishing all the resources that were useful to me. And, maybe more importantly, to show aspiring Webflow developers (like myself) that you don’t have to know everything to take on a project. Be confident that you’ll figure things out.

Here are a few things I learned

How to convert figma into webflow

I only had little experience using Figma, but now I know how to extract assets and find the exact styles I need to copy. I found this series of videos from Waldo Broodryk to be very helpful. I ended up following his whole process. Waldo was essentially my companion throughout my project. It was exactly what I needed!

How to manipulate sliders

The slider on the hero section of this project gave me a lot of trouble. But in the end, I learned a lot about how to manipulate sliders in pretty much any way I want. I have to thank Nelson Abalos for personally helping me get unstuck on this.

How to turn cards into slider on mobile

This projects design had many sections where a row of elements on desktop turned into a slider on mobile. I thought this was a great way to present things to the mobile user (much better than showing a long list of items stacked on top of each other) so I had to find a way to do this.

My first instinct was to create two sections, one that contains columns of the cards and one that has a slider, then do “display: none” accordingly, so only the column section shows up on desktop and the slider on mobile.

But then I found a little hack in this forum post. The solution: make the desktop version as a slider and hide the arrows and dots. Set the width of each card to the percentage depending on how many cards you want. There’s more to it, but you get the gist.

What image file size is too large in web design?

I always knew it’s important to compress your images, but I wanted to check what was acceptable. Answer: under 500 KB. Also learned that the page size should be under 5 MB.

How to edit slide nav

I needed to figure out how to edit the dots from the slide. Found this helpful vid. Apparently you need to do some custom code.

How to crop collection list images (or any image)

For the blog list, I needed to make the images the same size and dimensions, even though the images are different sizes. Also I didn’t want them to stretch to fit the dimension. I found this great guide.

The fact that you have to give a certain percentage of padding to the container is so counter intuitive. I would have never figured it out. This will come in handy for future projects.

What I need to improve on

I think I can improve on creating a more sound naming system. While I was conscious about doing this, I’m afraid I wasn’t consistent enough.


Shout out to Waldo Broodrÿk for taking his time to give me a bunch of advice on how to turn Webflow web development into a career. Also to Nelson for helping me figure out sliders, and for his countless YouTube videos that taught me so much. Finally, I want to thank Matt, who took a chance on me and gave me the job. Because of him I feel energized to search for more Webflow related opportunities.

Excited to see where this will take me.

About

Hello, I'm Erick. I like to write about philosophy, self-development, running, unschooling, podcasts, software tools and digital marketing.