Better tutorials on the basics? Need "Code by designing"

I’ve watched the Webflow tutorials on positioning over and over and over, and I still don’t get it. Just now, I create a div, put in a text block, add top margin to the text block, and the parent div is now moving down, whereas the text block stays exactly where it was within the parent.

I find the Webflow tutorials to be severely over simplified, to the point where they oversell “design without coding,” which clearly is false. This is really “code by designing.”

I’ve searched, and it’s really hard to find someone who actually knows the right balance. Most the time I get crazy advanced stuff on Stackoverflow, or back to ultra over-simplified basics like the Webflow videos. Does anyone have any recommendation for good tutorials that actually explain how the basics really work? For example, have no clue why my text block margin not adding margin around the text block, but it is pushing it’s parent away its parent.

I’ll try anything at this point, but I’ve got a deadline. I’ll keep banging my head against the wall clicking around randomly till something works because I have no choice, but I’d rather watch a nice 30-60 min vid that really really explains this. Clearly, without truly understanding blocks vs inline blocks, and positioning (along with float and clear?), as if it was 2nd nature, you can’t really use Webflow without extreme frustration.

Any suggestions?

I find w3schools.com really helpful. For example on margins - CSS Margin

You can play about with things too.

I don’t know if it’s relevant to your case, but margin has a property of “margin collapse” -

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

Thanks, but I’ve been to that site googling many times. What I need is a tutorial that actually explains things overall — basically, if the Webflow tutorial was 20 min long, not 3 which isn’t even near enough time to explain anything. Margin collapse - does this happen in Webflow?

Yes… That’s a VERY good question.

There are articles such as: Spacing | Webflow University
Even that points to a Siteimprove article!

1 Like

I don’t think anyone (yes you will find people who still do :slight_smile: ) uses floats and clear anymore :slight_smile:.
Are you following the instruction videos along to the exact action? I wouldn’t be surprised if you ended up selecting the wrong element. This happened to me with serious frequency when I first learned webflow. I only used the university videos but used squarespace to the max so that gave me some background.
If you could share a screenshot of what’s happening, I can take a look and see what’s going on :slight_smile:

1 Like

But, if I recall, the tutorials don’t even mention that some of the position settings don’t work unless the parent has a different position setting other than the default of static — skipped completely, so again, severely oversimplified and thus later on extremely frustrating.

I used Squarespace before this, and clearly everything was hidden. I tried to stack 2-3 “layers” on top of each other recently and it took me probably half a day to figure it out. And, I still couldn’t explain to someone else why it works; it was likely trial and error, not reading something about CSS or done with conscious understanding. They should have more tutorials on situations designers are likely to want, not some “hey, flick this popup and this is what it magically does” explained in 2 minutes then move on.

I guess my main contention is that the tutorial vids seem marketing driven so people sign up for Webflow, not reality driven so people can actually use it to its fullest potential. Also, “design without coding” I think is philosophically wrong, as it really is “code by designing.” Without real understanding of HTML/CSS it’s confusing. I love it. I honestly wouldn’t use anything else ever again. But, there’s a far more steeper learning curve than the marketing materials let on.

I think my next goal, if I ever have down time (sadly, need to eat/pay debts), is to take some web coding course(s). Thus, my question here. Is there already some video out there that covers in actual useful detail positioning with HTML/CSS? More from a design perspective, rather than a code perspective (i.e. You want to do this effect, here’s the philosophy that makes it happen, and here’s the code that underpins that… not the other way around). Cheers!

I literally learned that yesterday! And not through webflow

Webflow makes it quick to actually crank out layouts but to do it effectively is going to depend on your understanding of the fundamentals.

My favorite resource is MDN (Mozilla Developers Network).

There is also plenty of amazing content on linkedin learning (formerly lynda.com).
LinkedIn Learning with Lynda: Online Training Courses for Creative, Technology, Business Skills