Spacing on the web (padding, margin, and Occam's square) - web design tutorial

[@jeffreyclaybrook]

"The problem with that sort of not very responsive design is that it's not very responsive." This guy cuts straight to the point and I respect that.

[@person81045]

Why are these so good. Honest to God, if it wasn't for these training videos, I'd have moved on to a diff platform. Webflow is a big tool and its scary as an ultra n00b, but these videos REALLY make it easy to follow along and learn.

[@Gome.o]

Jesus dude that new mac is definitely making leaps and improvements to the already stellar quality of this channel.

[@zegollygosh]

I can't tell you how much I appreciate that you include the CSS! I'm a software dev who wants to start doing web dev freelancing on the side. I feel most at home in vs code, and the little designing I've already done has come in the form of applying css styles that UX designers in my company have already laid out for me. It gets frustrating trying to learn important rules via a different tool when I know what the CSS says much better than webflow, meanwhile on the flip side the visual representation helps me draw the connection between changes to the CSS and the actual on-page effect. I know tutorials without the CSS can seem more comfortable for anyone starting with no coding experience, but I'm glad you included it for folks doing hand-coding.

[@RishabKapadia]

Video editing award of the year goes to the guy who did this. He can edit Hollywood movies. 😎🏆

[@DesigedByNino]

This software is so amazing I actually learnt how to code after using it. Make it visual, brilliant idea !

[@mohammedfaisalhussain5677]

Can tell about this software

[@goldenrel]

what software is this?

[@DesigedByNino]

@@goldenrel Webflow, it says in the thumbnail. It's Webflow academy ;)

[@dimitrisqq]

One thing i noticed during those lessons is that Webflow has not only top-notched videos but also the kindest and funniest people writing in the comment section. That's called building a culture. edit*: comment::first-letter { text-transform: uppercase; }

[@AgusRiady]

Thanks for this! This is really one of the thing that makes me confused when switching from print design to web/UI design. You make this much easier to understand. Keep up the good work Webflow team!

[@babakfp]

If I were my grandmother, I would give a juicy kiss to this young man for his wonderful tut ;)

[@Flip_PR0]

Webflow is such a powerful webdesigntool, that I don't want to show it to some other designers, but at the same time the hype is really real and I can't hide it anymore.

[@gavinsinger]

Haha!!! Yeah!!! I too wish ONLY I had this amazing secret weapon to design pages!!

[@gavinsinger]

I so much wish to have this Webflow as a desktop application!! This is the best EVER web design application!! BEST EVER!!!

[@ifthis_]

These new videos and animations are just butter, bros! Like sizzling butter. 🧈

[@Webflow]

Glad you think so! Thanks for the kind words, Arthur.

[@catherinecoloma3426]

Thank you for this! I just started using webflow and this is one of the things that I was struggling with 😅

[@Flowkey247]

On to the next video! Great stuff

[@iDacian]

Nicely done Mr.Rayzer' - Ssss.

[@cweb1988]

your tutorials are the best.

[@sebas0692]

This tutorials are amazing!!

[@liammatteson4733]

Love the subtle figma shoutout

[@barrybrewer5164]

Outstanding.

[@brianbluue]

Thisss some good stuff

[@JCL-nu4ge]

This series is great! One question: what is considered the best practice when trying to implement overlapping elements like what you showed on the video of the avatar going over the top of its card. I always thought using position: absolute/relative would be a better choice?

[@QRIOART]

Excellent work.

[@king_m]

Keep dishing them out! 👍🏽

[@hectorg362]

Had no idea you can use negative margins :0 Thansk

[@Webflow]

Negative margins are super powerful! Glad we could help you see the power! 😁

[@typingmasterpro6762]

Great Video!!!!! Say more for the windows user. The audience of the windows users is the most I think and they need the advice most. Coz they need the money to buy the mac os mate.

[@luedersdesign]

Great!

[@mukulishwar2737]

Webflow best way to learn CSS

[@MegalodonEG]

I understand quantum theory here much better than college class !

[@Webflow]

Just wait until last year.

[@kklol07]

thanks!

[@lukewestwood]

Does anyone know the name of the music in the intro, it's epic :D. Would love to know the song name :).

[@astrovisionmedia9677]

Woah who is this guy. This face came out of nowhere in the playlist tutorial

[@user-dt1hb6fz8s]

I have one question though: While using templates, I can see vertical spacings between the elements, but there are no margins set. How does that work?

[@user-dt1hb6fz8s]

@webflow please answer!

[@Webflow]

Can you please post this question on our community forum - discourse.webflow.com . Also, don't forget to include your projects read only link - university.webflow.com/lesson/share-your-project-and-invite-collaborators This will help us see your project and investigate the issue more clearly.

[@pccomputer1550]

what is this ? is it a page builder or a theme or coding ?

[@Webflow]

We're building in Webflow, it's free to use and runs in your Chrome or Safari browser: webflow.com

[@surekhakharote4551]

Sir how to change button text name to center to left on button

[@Webflow]

Hi, Surekha Kharote - thanks for reaching out! Since a button is usually sized by the text and the padding inside, try decreasing the left padding so the text goes to the left. Let us know if that works!

[@Kabarza]

why is your CSS preview not in beta? I still can see my beta tag. Not a big deal. Just curious.

[@Webflow]

Great question - generally during screen capture, we turn off Beta labels so there isn’t a visual disconnect when a feature moves out of beta. We also hide top-secret features currently under development. 😍

[@adnanabdullah5068]

Where can I download this software?

[@Webflow]

Hi, Adnan! You're looking for Webflow - it's free to try out at www.webflow.com 👍

[@sammile2681]

Hello. I'm desperate. When I build up a page and pull it together, the last window overlaps the other two above. Maybe someone knows how I can do it right?

[@Webflow]

Hi, Sam Mile! Can you post on forum.webflow.com and include the Share link for your project? That way members of the community can jump in and take a look! 👍

[@sammile2681]

@@Webflow Many thanks. I am very new to webflow. I will post the problem on the link from you. Thank you very much

[@StephenRayner]

QFT! God I miss physics :(

[@Trazynn]

Anyone else spacing on the web?

[@Webflow]

We're spacing a bit , too.

[@kklol07]

lol

[@vrajmalvi7194]

Yo I am first

[@Webflow]

With this comment, we're 28th. 😎

[@madis_ux]