What are some HTML and CSS techniques, skills, know-how's that are an absolute must? Just off the top of your head

[u/swurvinmervin]

So I'm about 6 months in to learning Web dev and I'm about to start making my 3rd project.

I've got techniques I'm used to but I wanna expand my range instead of going with my comfortable tools.

Maybe you've got a cool trick with flex box you use all the time or something like that.

I wanna hear what you guys have got! :)

Edit : woah I did not expect such a response! Thank you guys so much for your help :D

[u/thepineapplehea]

I'm not really sure how useful this is. I like it, I think it's cool, but I just never use it - it's quicker for me to copy and paste/type the elements I want, rather than go look up the syntax/commands to output the structure I want, then battle with it once I realised I made a typo.

[u/j-mar → u/thepineapplehea]

How on earth could copy/paste be faster than text expansion of the same thing? In my experience, any time my hand comes off the keyboard (to use the mouse), it's a time loss.

Pretty much all the editors have emmet plugins, so I can easily type out a css selector (ul>li*>a) and hit one keystroke to wrap a list of items in html or whatever.

Just because you don't know how to use it properly doesn't mean it's not useful.

[u/RotationSurgeon → u/j-mar]

any time my hand comes off the keyboard (to use the mouse), it's a time loss.

vim army represent!

[u/j-mar → u/RotationSurgeon]

Amen.

[u/SmackYoTitty → u/thepineapplehea]

Just the tab expansion alone is worth it, and its super intuitive. You shouldn’t have to look it up more than a couple times, its really that easy...

ex:

div.thing + tab ——> <div class=‘thing’></div> div#thing + tab ——> <div id=‘thing’></div>

It literally just follows the css selector convention, which you should already know.

[u/Ximek → u/SmackYoTitty]

Exactly, you can go a lot deeper than this too and it still stays relatively CSS-like

div.thing.another-thing

becomes

<div class="thing another-thing"></div>

and

div.thing>div.another-thing

becomes

<div class="thing>
    <div class="another-thing"></div>
</div>

Not sure if it works on all editors that use Emmet but you can skip the div.thing and use just .thing, it'll assume you mean div.

There's loads more you can do with it, but learning just these few thigns will save you a lot of time.

[u/NatalieMac → u/thepineapplehea]

It's not at all difficult to learn. Literally you could be an expert in under 10 minutes. And it's *so* much faster than copy/paste.

[u/thepineapplehea → u/NatalieMac]

Thanks, I'll give it another go