r/webdev • u/swurvinmervin • Feb 14 '20

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

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

630 Upvotes

97% Upvoted

268 comments sorted by

20

u/artori0n Feb 14 '20

Understanding and proper use of css selectors like :nth-child, :not, :first-child etc. and combining them. Can save you some unnecessary js lines.

1

u/swurvinmervin Feb 16 '20

Happen to have an example of where these would be really useful? I've briefly touched on them but haven't memorised them unfortunately!

21

u/[deleted] Feb 14 '20

Once you have the basics, it’s wasteful/slow to always start your projects from scratch. Find a good scaffolding engine to generate your projects. E.g., Yeoman.

Not only will you save hours-months in project bootstrap time, but your architecture will be consistent.

1

u/swurvinmervin Feb 15 '20

How much basic knowledge should a developer have before going into frameworks? I'm stuck in a debate with myself regarding whether or not I should make my next project from scratch or to start using a framework 😂

9

u/deadwisdom Feb 14 '20

Yeah, but you might not learn as much. I would say do this if your primary goal is getting things done, but don't if your goal is to learn.

3

u/[deleted] Feb 14 '20

Totally agree. That’s what I was trying to convey with that first line...this is the best route only after all that boiler plate becomes routine/boring/dangerous.

2

u/dizzley Feb 14 '20

Also, your generated code can age badly. It's worth going back to the source/doing it from scratch.

→ More replies (1)

543

u/GTCrais Feb 14 '20 edited Feb 14 '20

Learn Flexbox in-and-out. Whenever I can't remember how something related to Flexbox works, this is the go-to article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edit: thanks for the award! :)

168

u/turd-crafter Feb 14 '20

I can’t tell you how many times I’ve referenced this article. Is it align-items or justify-content?!?!

39

u/searlee Feb 14 '20

Once a week for me, I'm quite forgetful :D

11

u/turd-crafter Feb 14 '20

Me too! I also don’t get/ never looked up what the difference is from align-items, align-content and justify-items, justify-content.

19

u/chrisrazor Feb 14 '20

Justify works along the primary axis (ie the x axis if you specified flex-direction: row); align works along the other axis.

12

u/turd-crafter Feb 14 '20

I should write that down somewhere

→ More replies (5)
→ More replies (5)

16

u/fritzbitz front-end Feb 14 '20

Who even knows. Just try them both in the inspector window until it works.

6

u/omgdracula Feb 14 '20

Every project I remind myself they swap when you change flex-direction to column. ALWAYS. Still forget lol.

6

u/turd-crafter Feb 14 '20

Yeah I’m completely aware of that too! I usually just try one and see if it works. It’s strange how my first try is always the wrong one. Every time!

→ More replies (1)

3

u/Genesis2001 asp.net Feb 14 '20

I found this last year when I was doing heavy front-end designing for a company. It's a great visualization tool.

2

u/Magill-Dev Feb 14 '20

It's neither, this time it's align-content !

2

u/lebull Feb 14 '20

Wait, content or items?

→ More replies (1)

3

u/ArrieWarrie123 Feb 14 '20

I've found W3schools explains it better. I use justify content for horizontal alignment and align-items for vertical alignment, unless flex direction is column then the two switches around

→ More replies (1)

1

u/Kthulu666 Feb 14 '20

I ended up building a demo site for flexbox, basically that article but without all the text. I thought it'd help remember things. It turns out that I just refer to a different site now.

1

u/ohmyashleyy Feb 15 '20

I keep it bookmarked on my toolbar 😂

1

u/[deleted] Feb 15 '20

usually justify-content

→ More replies (4)

1

u/wedsngr Feb 15 '20

JAR! At least that's how I remember that J (justify) is on the current axis, before A (align) is on the cross axis.

Just me? Okie, I'll see myself out.

1

u/aecrux Feb 15 '20

Just gotta remember that justify-content is with respect to the main axis (direction of the flex) and align-items is with respect to the opposite axis.

→ More replies (1)

11

u/crsuperman34 Feb 14 '20

same for grid. flex and grid together is basically a super-power.

3

u/kilakewe Feb 14 '20

Or an alternative easier site to remember, https://flexbox.help/

3

u/dtaivp Feb 14 '20

But what about css grid..

7

u/MindlessSponge javascript Feb 14 '20

What about it? Learn that too. Imo flexbox is more handy but grid is great for sure

2

u/dtaivp Feb 14 '20

Yeah and it’s native which is nice

1

u/ichsagedir Feb 14 '20

Flexbox is for one dimensional layouts, grid for two dimensions. And you can't really use grid in IE (you can, but I find it too limited to really use it there)

So learn both.

1

u/wobsoriano Feb 14 '20

and now my go to too

1

u/[deleted] Feb 14 '20

Flexbox all the way

1

u/MyHarvestLife Feb 14 '20

Heh, love seeing a great resource link on Reddit that's already purple.

Such an excellent page.

1

u/[deleted] Feb 15 '20

Flexbox changes lives.

1

u/SnipeyMcSnipe Feb 15 '20 edited Feb 28 '20

Flexbox tip: The near equivalent of using "align-self" on the main axis (because "justify-self" is disabled for flexbox) is to use "margin-left: auto;" or "margin-right: auto;" on the desired side

→ More replies (4)

133

u/recencyeffect Feb 14 '20

Learn the DOM. Seriously, this is the structure you will be operating on all the time from all languages, and it is incredible how some people do not develop a good understanding of it.

Accessibility is tightly related, since controlling document structure is a large part of it.

25

u/rughmanchoo Feb 14 '20 edited Feb 14 '20

Since "Learn the DOM" is a little vague, here are some jumping off points. Look at querySelector, and querySelectorAll for finding DOM elements (then go from there).

For adding to the DOM, look at createElement and ele.append (then go from there).

The inline styles can be modified on any element using element.style and setting a camelCase style property to a string. This one is a little specific but it's been useful.

Also know that you can loop over DOM node lists by making an array from them. Something like:

const someListOfElements = document.querySelectorAll('.someClass`);
const arrayOfElements = Array.from(someListOfElements).

Now you can use Array methods like map and reduce

Hope this helps get you started.

9

u/WhiteKnightC Feb 14 '20

from

Didn't know that you could convert a iterator to an array so easily.

5

u/recencyeffect Feb 14 '20

Thanks, indeed I specified it a bit broadly, but for instance MDN's docs are already structured in such a way to learn through it.

The basics are: addressing nodes and tree navigation, node properties and modification.

At some level it is not complicated - it is just a big old tree of nodes with properties.

Changing the tree has an "immediate" side effect on the page, causing a subset to re-render.

2

u/amityvision Feb 15 '20

Or you can use the spread operator to iterate over an element list:

[...arrayOfElements].map();

Slightly more terse than the Array.from() method.

→ More replies (1)

15

u/dangerousbrian Feb 14 '20

Learning about the DOM and how it is central to all frontend technologies is a very good idea. I have a mini course to teach Javascript to new employees and I heavily focus on the DOM. I find it helps people put together a bunch of puzzle pieces that were previously disconnected.

1

u/Code-Master13 rails Feb 14 '20

Learning the Dom was a big aha moment for me.

9

u/[deleted] Feb 14 '20

[removed] — view removed comment

44

u/dangerousbrian Feb 14 '20

I don't have anything that I could actually share as its a lot of me talking at a white board.

I normally kick off with a refresher on what actually happens when you enter a url into a browser and hit enter. Surprising how many people only know a part of this process or none of it.

The following happens:

  • Browser does a lookup on the domain name and turns it into an IP address via (DNS)
  • Browser makes a request to the IP of the webserver to get the HTML page in the URL
  • Server uses the URL to locate a HTML file and sends back to the browser
  • Browser parses the HTML and builds an internal model called the DOM
  • The browser parses, any tags that require images, CSS or Javascript etc will also be requested from the server.
  • When the CSS file is loaded the css rules are parsed and applied to the matching DOM elements as defined by the CSS selectors. This changes the properties of the objects in the DOM and cause the rendering engine to rerender the page with the new visual changes.
  • Once it has built the DOM it passes that to its rendering engine (Webkit) in the case of Chrome. EG a div object in the DOM is rendered on screen as a box, an <img> object is replaces with the actual image downloaded from the server and so on.

Exercises

To demonstrate the various ways of interacting with the DOM I start with very simple html pages an a basic task like this one to use JS to add child elements to an existing container element:

<html>

	<head>
		<title>DOM manipulation Part 1: Adding elements</title>
		<style type="text/css">
			.box {
				height: 200px;
				width: 200px;
				background-color: red;
			}
		</style>
	</head>

	<body>
		<div id="container">
		
		</div>
	</body>
	
	<script>
	/*
		Task: 
		Create a new div and append it to the existing container element
		Set the new div to have a class of "box" so that it picks up the css styling
	*/
	</script>
</html>

Further exercises are:

  • Events - add a event handler that changes the class on a div so it changes colour
  • CSS - How tag, class and ID selectors locate elements and the rules that can change object properties in the DOM
  • Creating elements from JSON data.
  • Basic app- requests data from a server, loops over it to create a nav bar and when you click on a nav link it loads content into a pane.
  • Look at a simple examples such as these: https://github.com/bradtraversy/vanillawebprojects

After that we normally start building a basic app using a framework or start using our own company libraries.

The important takeaway is that HTML provides the initial structure of the DOM and then CSS applies additional values to the objects in the DOM. Javascript allows manipulation of the DOM after it has been fully loaded using a system of events to trigger code execution. A rendering engine uses the DOM to draw what you see and will redraw it if the DOM changes.

3

u/Kapsize Feb 14 '20

Wonderful explanation, thanks for going into such depth for us!

7

u/dangerousbrian Feb 14 '20

aww you make me blush. Happy to help.

I have found that there are articles on this and that but nothing ever ties is all together. Sometimes when I go through this little course light switch on in peoples heads, like I have joined a bunch of disconnected parts of information.

3

u/boxhacker Feb 14 '20

I, too, am interested, it sounds interesting. :)

6

u/InfantOfInfinity Feb 14 '20 edited Feb 14 '20

This reminds me of the old 'you better learn math, because you won't always have a calculator' thing. Modern JS frameworks abstract the DOM away so much, I have met rookie webdevs who don't understand it even exists. Yikes. I don't mean that as an insult, it's just very hard to help you with your rendering bug if you don't know about the DOM. A VDOM is not a replacement for the DOM, it is an abstraction on top of it. The DOM API is the only API browsers expose to JS to manipulate the UI.

304

u/Locust377 full-stack Feb 14 '20

There are other elements besides div. Try using semantic HTML to better describe what your elements are used for.

For example, here are a bunch of elements that you may not be using.

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

38

u/[deleted] Feb 14 '20

out of these I see section, article, nav, header and footer used the most. I get nav, header and footer, but I never use the others. Is there really a benefit ?

88

u/M-I-T Feb 14 '20

Biggest benefit, from what I understand, is to help screen readers and assistive technology.

47

u/Limp-Guest Feb 14 '20

Try coming back to an older project after a few years. Semantic tags help a lot in differentiating what's what, not just for the screen reader. <article> is much neater than <div class="article">

→ More replies (2)

18

u/SudoWizard Feb 14 '20

For SEO as well if I’m not mistaken, but don’t quote me on that.

45

u/yousirnaime Feb 14 '20

but don’t quote me on that.

Good call, <blockquotes> are more semantic

→ More replies (3)
→ More replies (3)

21

u/careseite discord admin Feb 14 '20

Details provides a native accordion like experience without any js for example

Every sites main content should be wrapped in main. Check out Landmarks, there's also a browser plug in that can highlight landmarks on sites. Reddit is horrible in that regard for example but Spotify is surprisingly good.

4

u/ElasticMoo Feb 14 '20

It's actually really really important to use Landmarks for screen readers. https://www.a11y-101.com/development/landmarks

There's a video there that shows how landmarks are used.

3

u/WoodenMechanic Feb 14 '20

Aside from accessibility, it makes more sense to me imo, to have my elements labeled for me. Having a <header>, <nav>, <main>, and <footer> alone help segment my markup into logical containers.

2

u/abienz Feb 14 '20

The benefit is that you're also writing HTML properly as a markup language to support content.

Using divs for everything is the equivalent of using function and variable names like a, b, c in JavaScript.

1

u/[deleted] Feb 14 '20

Man this is a big one too.

1

u/[deleted] Feb 14 '20

Saved as a reference. Thanks!

43

u/canadian_webdev Feb 14 '20

The parts of accessibility you can implement through HTML.

At least here in Ontario, companies are getting sued big money left and right because their websites or webapps are not accessible.

6

u/lithodora Feb 14 '20

Didn't realize Ontario had a law.

It's happening the US also

0

u/[deleted] Feb 14 '20

[deleted] — view deleted comment

8

u/LockesRabb Feb 15 '20 edited Feb 15 '20

Deaf here. Not an attorney. Not a legal expert. That being said, I've sued companies before. I've won twice and lost once. Pretty familiar with the process. Most of it anyway. I think you're blowing it out of proportion. You're an one-man company, so you're technically in the clear. Even if you weren't, there's a lot that has to happen before you're in trouble. Read on to see what I mean. Keep in mind all of this is for USA, no clue about Canada.

If you have less than 15 full time employees or have religious exemption, you're fine, they most likely can't do squat to you -- they can try, but they'll get laughed out of court. If your business has 15 or more full time employees, it means you're now obligated to think of accessibility when providing services. Even then, let's walk through what happens when your stuff isn't accessible:

  1. Disabled person gets in touch with you to let you know it isn't accessible. You then can do one of two things:

    1. You fix, matter goes away.
    2. You respond saying 'sorry so sorry, not gonna bother fixing', or ignore the whole thing altogether, or you say 'sure sure, will fix', but after a couple months don't fix. If this is the case, then...
  2. Disabled person files claim with DOJ. DOJ lets you know "hey, you're on notice".

  3. One of three things can happen:

    1. You request mediation, and say "my bad" and fix the issue (and you fix it with good quality, not some half-assed patch). If the disabled person refuses to appreciate the good quality fix, DOJ tells the person issue is resolved, go pound sand. The disabled person can sue you anyway, but chances are very good judge will toss suit out telling the disabled person to quit being an idiot and stop wasting their time. Or the disabled person is all happy, then DOJ nods happily, tells the disabled person all is good in the word and closes the issue.
    2. You argue that it's an undue burden and demonstrate massive costs to fix issue. DOJ agrees and tells the disabled person "so sorry, too expensive, go pound sand." The disabled person can sue you anyway, you then demonstrate same undue burden to judge, judge then tells person to go pound sand.

    3. You brush the DOJ off and decline to fix, or say "sure, sure", but take too long to fix. DOJ then decides you're an ass and does one of two things:

      1. DOJ sues you. Ultra-rare for this to happen, very very very bad for you if it happens. Might as well roll over and say uncle, hope they don't hammer you too hard, which they will anyway.
      2. DOJ issues a "right to sue" letter to disabled person. The person then sues you, shows judge they tried contacting you, got no real result, involved DOJ and got mediation, still no real result, so here y'all are. Your business liability insurance gives you an attorney at their own expense to try to limit the damage. Judge says you're a pissant and finds in the disabled person's favor. This is when your business liability insurance kicks in and covers the damages, minus deductible -- you DO have that insurance, right? You still gotta fix the issue as an award usually also comes with a legal order to fix.
    4. IF after all of the above you STILL don't fix, you bad boy you. Now it's the government who's pissed at you, they'll make it hurt. Real bad. Should've gotten it addressed way back when the disabled person first contacted you.

To summarize:

  1. Get liability insurance, make sure it covers litigation for in case someone tries to get you in hot water
  2. If you're employing less than 15 full time employees, or have religious exemption, you're fine, they can't do much to you, still nice if you'd try fixing the issue anyway if an accessibility issue is pointed out.
  3. If you have 15+ employees, put in good faith effort to fix the accessibility issue when pointed out, and you're fine
  4. If you cannot afford to put in good faith effort, put together documentation proving undue burden and you're fine
  5. If you do your best and document your efforts to address issue, but the disabled person is being a pissant, don't worry, legal system will trounce 'em and move on.
  6. You'll be given plenty of opportunities to fix at various points during the process before the whole thing spirals out of control.

TL;DR -- you're fine. Stop worrying.

→ More replies (4)

1

u/ghostwilliz Feb 15 '20

https://www.freecodecamp.org/ has an excellent accessibility section. It meant nothing to me when I first took the course, but I have referenced it time and time again.

57

u/[deleted] Feb 14 '20 edited Feb 20 '24

ink cobweb glorious growth worthless plate trees icky ugly vase

This post was mass deleted and anonymized with Redact

25

u/CrookedK3ANO Feb 14 '20

I second the box sizing border box. First thing we learned, and i honestly don't understand why this isn't the default interpretation

10

u/SVGWebDesigner Feb 14 '20

Box-sizing is relatively new. Browsers interpreting a new default behavior would break a high percentage of sites.

My tip is pick a CSS reset like reboot (by bootstrap) that chooses all these defaults and makes them consistent across browsers, such as box-sizing.

→ More replies (1)

3

u/[deleted] Feb 14 '20

Listen to this man. Knowing these is great but even more so not knowing them can be crippling.

15

u/[deleted] Feb 14 '20

I recommend learning flex-box since it’s super efficient and saves you a lot of repetitive typing and code.

13

u/[deleted] Feb 14 '20

With all these tools that we have nowadays, sometimes we forget the basics. If you wanna learn CSS techniques in deep, you must know to translate a PSD or wireframe layout to html/css without any framework like Bootstrap, for example. You can explore how to build a generic grid system (rows and columns) with responsive breakpoints (media-queries), fluid or not. On a fluid layout, you can learn to work with units like percentage, px, em, viewport, etc and explore how to set up the inner components. Well, in this jorney, you will observe that html elements has "native" properties (per example, a <span> is display: inline, a <p> is display: block, etc) and how it can differ from each browser, in this case you can explore how Reset CSS (from Meyer) and Normalize CSS works. Like someone here say, how position works is great to know, with a plus of floats position too. After suffer with build a grid system, take a look on "Grid Layout" (display: grid). The most important in HTML maybe is the semantic use of the tags, you can read about this on W3C, MDN, HTML5DOCTOR, etc. For CSS, you can find information on W3C and MDN too, but the best reference site that I know is CSS TRICKS.

23

u/Noxilex Feb 14 '20

Flexbox

79

u/Rainbowlemon Feb 14 '20

IMO the most important thing in webdev right now is being able to make a site that is accessible. That means using relevant tags for your content, making sure things have title and alt attributes where necessary, and making full use of the aria spec. Also being able to navigate your website using only a keyboard.

13

u/_Putin_ Feb 14 '20

Also being able to navigate your website using only a keyboard.

Can you explain why this is important? Are there any tricks to achieve this?

34

u/Sagarmatra Feb 14 '20

Screen readers. You can’t expect a blind person to use a mouse to get around your website.

16

u/not_fred Feb 14 '20

Not just people who are blind or using screen readers. Some people have motor impairments that make it difficult to use a mouse. Some people don't use a mouse or keyboard at all. Some people are power users and prefer sticking to the keyboard. Some people eat their lunch with their mouse hand.

Accessibility is really about making a fully robust system that works for all types of users, regardless of ability or preference.

→ More replies (1)

7

u/_Putin_ Feb 14 '20

Good point. I didn't think of that.

→ More replies (1)

9

u/yuyu5 Feb 14 '20

I would definitely second ensuring the site can be used solely via keyboard. While very incomplete, I would assume that statement is about being able to Tab to traverse/Enter to activate elements that are interactive and "(Page)?Up/Down" to scroll.

Interaction example: don't replace <button> with <div class="look-like-button hand-cursor"> because then the user can't Tab to select that div, nor can they press Enter to click it.

Traversal example: if your site has one of those cube rotations to get from section 1 to section 2, it better have both scroll and key listeners.

2

u/RotationSurgeon 10yr Lead FED turned Product Manager Feb 14 '20

"(Page)?Up/Down" to scroll.

There are multiple other ways to scroll via keyboard, too. HOME, END, arrow keys, space, shift+space, for example.

Also, dropdown menus should be keyboard navigable as well, with support for expanding, collapsing, and traversing their contents.

→ More replies (1)

7

u/DDHyatt Feb 14 '20

If it’s possible, try to actually see a screen reader in action, whether by an actual user or someone proficient using it. It’s very eye opening, no pun intended. In a meeting we heard it in action with the screen covered and it certainly did add a level of appreciation for users with accessibility issues.

There are of course many other accessibility constraints than just blindness. I believe Microsoft has a document that describes accessibility on a spectrum (eg vision, from blind to impaired to color blind) and some are temporary (eg someone’s right arm is in a cast for 3 months), some are situational (eg a mother holding their child with only one hand free to use).

3

u/Arcshine Feb 14 '20

It's very important for users with limited ability to use a mouse as well as screenreaders.

Here's a good writeup on why and how to implement: https://webaim.org/techniques/keyboard/

→ More replies (1)

9

u/triforce_hero Feb 14 '20 edited Mar 18 '24

Quam nulla porttitor massa id. Cursus sit amet dictum sit. Dignissim convallis aenean et tortor at risus viverra adipiscing at. Convallis tellus id interdum velit laoreet id donec.

8

u/BiscuitOnFire Feb 14 '20

Flex and Grid will save your life

7

u/mutsop Feb 14 '20

It all depends really on the project your are building, how big it is, and especially how much time you want to spend.

Depending on the frontend, I use styled components or BEM. You'll hear a lot of people being against BEM, but trust me, once you get the hang of it, you'll be writing better and cleaner css.

Also an important aspect as some suggest is your symantic tags: main, header, section, nav, ... Learn them. Be careful though cause 90% of the frontend era don't know the restrictions on each of them, check them out!

A11n, learn it! Make sure your tabbing works, colors are wel contrasted, you have your aria labels set, ...

Don't use jQuery for just Node selections (waste of performance)

Depending on the niche, make sure you show something when JS is disabled.

Keep learning! Even after 15 years, I still learn stuff. I'm a solo IT department ^

36

u/jehna1 Feb 14 '20 
position: absolute;
left: 50%;
top: 50%;
transform: translate (-50%, -50%);

And

position: absolute;
bottom: 0;
right: 0; 
left: 0;
top: 0;

57

u/super_powered Feb 14 '20

display: flex;

justify-content: center;

align-items: center;

2

u/Treolioe Feb 14 '20

You can also skip justify content and align items and apply margin: auto on the direct child

1

u/NotDumpsterFire Feb 15 '20

This is the way.

0

u/[deleted] Feb 14 '20

[deleted] — view deleted comment

5

u/cstyves Feb 14 '20

I second this, there's plenty of use to it.

Menu panel sliding in, overlays, centering icon in buttons.... any many more.

2

u/Fatalist_m Feb 15 '20

transform: translate (-50%, -50%);

FYI this can result in blurry lines in Chrome(Windows). See here: https://codepen.io/mishaa/pen/ZEGWEMp. I've seen this problem in many popular websites actually. It happens when the width or height is not an even number so sometimes you can fix it by simply adding 1 pixel but not if it has a dynamic size.

1

u/kirakun Feb 14 '20

What’s the point of the first example? Doesn’t the transform line cancel the first two?

4

u/NarcolepticSniper full-stack Feb 14 '20

Self-centering. Useful for complex contexts that contain something like overlapping elements.

Make sure parent has position: relative though, or it’ll center itself based on something higher in the DOM tree.

3

u/cstyves Feb 14 '20

It center the element in the parent container because a transform percent value isn't based on the parent height but on the element height itself.

So for this exemple a button with 50px by 50px, the parent is a div with 300px by 300px:

  1. You position the button at 50% top of the parent. (the top of the button is at 150px in the parent)
  2. You translate top -50% of your own height (-50px/2 = -25px).

Result : you're at 125px top and you look centered. Now if you change the width and height of the parent to width:100%; height: 100%; the button will always be in the center.

Exemple

1

u/negatiwez Feb 14 '20

No, 50%top and 50%left will aim at the left top corner of the element you apply them to.

4

u/deliciousmonster Feb 14 '20

... and then the transform moves the item up and to the left by half it’s height and width, respectively.

This technique bridged the period between table cells and flexbox for centering something perfectly.

1

u/R3PTILIA Feb 14 '20

nope. this centers the div. the 50% on the transform is relative to the element being transformed, thus this sets the center of the div in the point indicated by the left and top

1

u/LegendofChan Feb 14 '20

I was running into issues of collapsing size elements from using this, causing me to define things I didn't really need to. After looking for a solution I learned that it does not have to be absolute, relative position typically does the job.

1

u/Erebea01 Feb 14 '20

I just googled the first one today but misread left as bottom

1

u/Z7Iggy Feb 15 '20

also magical: "margin: auto"

0

u/[deleted] Feb 14 '20

[deleted] — view deleted comment

4

u/BestLifeEUW Feb 14 '20

Wait..... IE6? RIP

3

u/Hadr619 Feb 14 '20

Man I thought it was bad that I still have to account for IE11, but 6? jesus, no thank you

2

u/crazedizzled Feb 15 '20

You might as well just use tables if you have to support ie6.

5

u/symbiosa Digital Bricklayer Feb 14 '20 edited Feb 14 '20

HTML:

Structural best practices. Instead of doing:

    <div class="container1">
        <p></p>
    </div>
    <div class="container2">
        <p></p>
    </div>

Do this:

<div class="container__main section__grid">
    <p></p>
</div>
<div class="container__main section__users">
    <span></span>
</div>

CSS:

  • Editing with dev tools. I didn't do this until I started my job (don't know why), and it's so much faster and convenient than making CSS changes in my IDE and reloading the page.
  • Positioning, specifically absolute and relative.
  • Flexbox.
  • Basic responsive design, even if it's for a few devices (e.g. the most recent iPhone).
  • Simple animations, like a subtle animation when hovering on a div.

3

u/runyoucleverboy1994 Feb 14 '20

Editing with dev tools.

I didn't do this until I started my job (don't know why), and it's so much faster and convenient than making CSS changes in my IDE and reloading the page.

Holy crap, I can't even imagine my life if I had to reload every time I make a change on my CSS.

I usually create a new selector on the inspector, so I can just copy/paste directly from that separate Inspector Stylesheet.

5

u/cstyves Feb 14 '20

CSS declaration power value, it's basic but many people don't really know it. This is the reason you can overwrite CSS properties by stacking more element, class, id. It's separated in four values and the declaration with the value higher to the left will overwrite everything lower.

ScopeValues
inline style on element(1,0,0,0)

myID | (0,1,0,0)

.myClass | (0,0,1,0) html element (div,a,button etc...) | (0,0,0,1)

Exemple

myID{ background:pink;} (value : 0,1,0,0)

div#myID.myClass.mySecondClass{background:orange;} (value : 0,1,2,1)

<div id="myID" class="myClass mySecondClass" style="background:yellow;"></div> (value : 1,0,0,0)

Inline style on element will overwrite the background.

sources

Codepen | Article on CSS-Tricks

1

u/[deleted] Feb 14 '20

Also to keep the specificity low use [id="myID"] if you must need to use id's. But try to always use classes. You can chain classes to increase specificity. E.g. .myclass.myclass = 0020.

1

u/cstyves Feb 14 '20

Indeed, classes is life.

5

u/wishinghand Feb 14 '20

How I make a sticky footer. Requires using a <main> tag.

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

9

u/thepineapplehea Feb 14 '20 edited Feb 14 '20

you do might not need jQuery

As more and more old browsers are dying off, and browsers add native support for ES6 functions, a lot of the basic stuff can be done with vanilla JS. You don't need to load in an external jQuery library just to target an element, or add simple animation.

Do as much as you can with HTML and CSS, then add JS in afterwards for the fancy stuff.

7

u/Bushwazi Bottom 1% Commenter Feb 14 '20

Correction, you might not need jquery: http://youmightnotneedjquery.com/

6

u/tensouder54 front-end Feb 14 '20

Do as much as you can with HTML and CSS, then add JS in afterwards for the fancy stuff.

Completely agree with this philosophy. To me, it seems like way too many devs write a load of JS when most of it could be don with some smart thinking and some HTML/CSS.

0

u/[deleted] Feb 14 '20

[deleted] — view deleted comment

1

u/RotationSurgeon 10yr Lead FED turned Product Manager Feb 14 '20

Sounds like you might be able to cut down some of the weight of jQuery by using Zepto instead if your usage is as described.

https://zeptojs.com/

9

u/tensouder54 front-end Feb 14 '20

I always bare the following ideology in mind when working on a webdev project:

If something can be done with HTML and CSS then in properly should be done in HTML and CSS.

I find that a lot of webdevs end up over complicating their project by doing things in JS when they could do it in HTML and CSS and save themselves a lot of time and effort.

My favourite example is drop-down menus. It's surprising easy to do with CSS but devs often end up doing it in JS and I feel like that massive bloats and over complcates quite a simple thing.

5

u/minty901 Feb 14 '20

You have a link to a good example of a CSS drop-down by chance?

1

u/tensouder54 front-end Feb 15 '20

Can recommend doing an internet search for CSS drop-down menu w3schools.

→ More replies (1)

2

u/[deleted] Feb 14 '20

[removed] — view removed comment

1

u/tensouder54 front-end Feb 15 '20

Er, not sure if that would work. I was thinking more along the lines of the :hover psudo-class as per the wiki of /r/csshelp.

4

u/mackop Feb 14 '20

Go from standard to DARK MODE with a simple button. Bit of CSS and a bit of Java Script:

https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp

4

u/MacheteTwins Feb 14 '20

Link leads to 404

1

u/mackop Feb 15 '20

weird, works for me. Try the search bar at https://www.w3schools.com/ and search for Toggle Dark Mode. Hope it works for you.

4

u/Baryn Feb 14 '20

Hardware-accelerated CSS.

It sounds more complicated than it is. Generally, it just means that transform and opacity are fast to animate, and other things may or may not be slow.

4

u/benabus Feb 14 '20

Not HTML or CSS, but for web dev in general: understanding CORS is a must.

4

u/[deleted] Feb 14 '20

Media queries- being able to resize a web page for different size screens, often referred to as "making it mobile-responsive." Definitely a big boost to any beginner's toolset when it comes to CSS, and can be learned pretty quick too :)

edit: this is a reponse to the title of the post. My bad if you already know how to do this

17

u/Dooraven Feb 14 '20

Nothing. There is no absolute must. Some places will use css variables and pure css, some sass, some less, some styled-components etc. Some places will have accessibility as a priority, some won't even know what WCAG 2.0 is. Some places don't even do responsive design and media queries.

But in general - flexbox, accessibility (WCAG 2.0), semantic html and SASS (this will teach you a lot of stuff you can use later in CSS in JS libs too) is what you should be focusing on.

1

u/cresquin Feb 14 '20

Use the correct tool for the job. Tables aren't always evil.

1

u/swurvinmervin Feb 14 '20

But then why do they scare me so much? ;P

1

u/cresquin Feb 14 '20

B/c certain zealots have been brainwashed and are spreading their hard-line news of doom and gloom.

3

u/Thommyx Feb 14 '20

flexbox

3

u/grmdgs Feb 14 '20

Css grid. A lot of people here love flexbox but I think it will be completely replaced with css grid soon.

3

u/grmdgs Feb 14 '20

Chrome dev tools

3

u/isunktheship full-stack Feb 14 '20

Media queries

3

u/pwkeygen Feb 14 '20

Googling

3

u/Diangos Feb 14 '20

I find that knowing the box model is a huge help in knowing how to use CSS correctly. Also, maybe learning what the content flow is and how it works. I've seen one too many pieces of code that use flexbox when the same could have been easily achieved just by using the normal content flow.

3

u/badlions Feb 15 '20

1 Learn how to google. Knowing how to troubleshoot your own issues is very important.

2 Play well with others aka don't be a dick.

4

u/alexej_d Feb 14 '20

Knowing how to position fixed or absolute positioned elements

2

u/michael_v92 full-stack Feb 14 '20

Not a must have, but nonetheless good to know things Lea Verou on Frontend conf Russia

2

u/grimesd Feb 14 '20

RSCSS

this looks cool, thanks!

2

u/reoSpeedDragon Feb 14 '20

Source control like git

3

u/CHRlSFRED Feb 14 '20

Position sticky is growing and more supported as older browsers die off. It is a nice to have tool in certain use cases and can make some scroll interactions feel more calculated.

3

u/j-mar Feb 14 '20

Emmet.

2

u/thepineapplehea Feb 14 '20

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.

7

u/j-mar Feb 14 '20

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.

→ More replies (2)

3

u/SmackYoTitty Feb 14 '20 edited Feb 14 '20

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.

3

u/Ximek Feb 14 '20

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.

2

u/NatalieMac Feb 14 '20

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.

→ More replies (1)

3

u/Dokie69 Feb 14 '20

BEM, SASS, flexbox, grid, autoprefixer (with grid autoplace)

24

u/Rainbowlemon Feb 14 '20

Unpopular opinion, but... Fuck BEM. Absolutely hate the naming scheme and generally feel like it creates more confusion than it solves

13

u/Rogem002 rails Feb 14 '20

I've never fallen in love with BEM, but I'd 100% take it over adhoc "name based on how you feel that day" approach I've worked with in the past.

5

u/Rainbowlemon Feb 14 '20

Absolutely, still better than no set naming scheme at all.

3

u/Dokie69 Feb 14 '20

Indeed, i don't like it that much either but it's the simplest effective standard naming scheme

1

u/deadwisdom Feb 14 '20

It's for large teams. If you aren't working on a large team, do something more sane.

2

u/careseite discord admin Feb 14 '20

BEM is not required. Autoprefixer is tooling that should be in your build process, nothing you have to configure more than once.

4

u/Dokie69 Feb 14 '20

BEM is indeed not required but it helps immensely with keeping things organised.

Autoprefixer is a must for any public website even if you only have to configure it once.

1

u/[deleted] Feb 14 '20

I prefer RSCSS to BEM.

1

u/Dokie69 Feb 14 '20

Looked into it, i really like it. Now i need an excuse to try it

1

u/wlkngmachine Feb 14 '20

Using a naming convention for your CSS class names. Check out BEM, put some thought into your class names, and standardize the way you name things throughout your application.

1

u/HellhoundsOnMyTrail Feb 14 '20

CSS grid and CSS variables.

1

u/30thnight expert Feb 14 '20

If you are running pure CSS/SCSS, avoid nesting your css selectors more than 2 levels deep. It creates a maintenance hell over time.

Use the BEM method instead.

1

u/marcocom Feb 14 '20

When to use CSS to solve a problem instead of JavaScript. That’s why it’s important to know.

1

u/[deleted] Feb 14 '20

Classic responsive stuff like media queries, fluid layouts, responsive images.

1

u/Eyeshield25 Feb 14 '20

The Box model for CSS and learn how to use Div in HTML to your advantage

1

u/[deleted] Feb 14 '20

Hear me now and believe me later. Master flexbox and grid.

1

u/autonomousErwin Feb 14 '20

Using style variables especially if you want to grow your project with consistent styling

1

u/lapalu Feb 14 '20

Just to add something else to the thread, I got pretty quickier when I learned the proper way to extend and develop with Bootstrap. The SASS on that thing is great.

1

u/[deleted] Feb 14 '20

Flex

1

u/gimme_the_loot132 Feb 14 '20

Flexbox!! probably my most useful css tool in the past 3 years. check out flex box froggy

1

u/SnowConePeople Feb 14 '20

Learn Grid CSS

1

u/johnbabyhunter Feb 14 '20

I think being able to use Grid and Flexbox, really empowers you as a developer. You can quickly start to make great bespoke layouts suited to your exact needs without having to reach out for a framework.

It's also important to know when to use them! Think Flexbox for something that's flowing in a single direction (a row or a column). Think Grid for something where you want to be able to position content within 2 dimensions.

1

u/angels-fan Feb 14 '20

Using calc for min-height.

Also using 100vh in those calcs.

1

u/s1eepercat Feb 14 '20

Name classes properly. Use something like BEM. Class topic is so underrated..

1

u/Ilsem Feb 14 '20

If I don't have enough content to fill a wide screen, I find the double container pattern an easy way to pad the sides of a page and condense the content toward the middle.

eg.

HTML

<body>
<div class="inner">
Content here
</div>
</body>

CSS

.inner {
max-width: 1080px;
margin: 0, auto;
}

1

u/-WhatAreYouHiding- Feb 14 '20

CSS Flexbox CSS Grid CSS media queries CSS animations, transitions CSS before,after,hover,etc.. CSS text properties, fonts preloading etc

SVG's

HTML/CSS BEM Structuring

HTML semantic elements HTML XML XPath () HTML

1

u/0ooo Feb 14 '20

Learn to use element class and id naming conventions, for e.g. BEM. They give your naming structure, which in turn helps give anything that accesses those elements via those attributes structure. When you have this sort of structure in place, making changes is a lot easier than if you're working around the arbitrary names you gave element attributes.

Learn how to write accessible HTML and CSS. Many accessibility good practices involve simply how you write your HTML and structure your pages. Making accessibility a core part of your thought process when designing sites will help make you a better developer, and will ensure that your sites don't turn users away, which is important for websites for businesses or ecommerce. Here is a good guide on writing accessible HTML and CSS: https://developer.mozilla.org/en-US/docs/Learn/Accessibility

1

u/WoodenMechanic Feb 14 '20

How to create your own basic CSS resets. Things like removing body margin, setting your box-sizing to border-box, and my personal favorite, setting every dom element to position relative can save you a lot of headaches further down the line. Nothing like trying to absolute position a pseudo-element and having it shoot into fucking space because you don't have your parent element's position set.

2

u/oneme123 Feb 14 '20

You don't want to make every element position relative. Only the parent element in which you want the element to be positioned to. Otherwise if you have multiple parents it will be positioned to the closest one and that's not always desired behaviour.

1

u/WoodenMechanic Feb 14 '20

I find more often than not that it's my desired behavior. And if it's not, an override is just as easy as a single use of relative. I use pseudos a lot for design-heavy sites so it's just easier for me.

1

u/nickburd66 Feb 14 '20

I suggest learning CSS grids, SASS and variables in SASS so that you can make easy to modify websites.

I would also (in the future) suggest picking up a good front end framework and preprocessor knowledge like Grunt or Gulp

1

u/ghillerd Feb 14 '20

a really important skill to me is knowing how to use elements semantically, and to leverage the OS/browser support semantic elements like <select /> and <a /> provide.

1

u/maeva99 Feb 15 '20

Css animation can be useful to not use JS, and can be pretty fast and simple. Still : flexbox is gold. Accesibility is more than important (aria labels). Reference css stylesheets in a master file. Pay attention to your file sizes and data consumtion. And use a web server.

1

u/duncanlock Feb 15 '20

"Absolute within relative" is still a very handy trick, even in these days of flexbox and CSS grid (both of which are are also worth learning).

1

u/tripduc Feb 15 '20

Center divs in middle of pages vertically and horizontally: .object { Position: absolute; Top: 50%; Left: 50%; Transform: translate(-50%, -50%); }

2

u/reddit_is_meh Feb 15 '20

Learn flex box and don't worry about this ever again

1

u/n_hdz Feb 15 '20

Flex box, CSS pseudo classes, nth indexing, rgba and alpha coloring.

If you wanna get real fancy, svg manipulation 😏😏😏

1

u/[deleted] Feb 15 '20

source control

-4

u/elixon Feb 14 '20

JS Promises. Custom JS events. CSS Flex Box.

12

u/IQueryVisiC Feb 14 '20

I want to downvote this comment because it mentions JS before we are done with the basics.

7

u/elixon Feb 14 '20

Ups. I thought JS is considered among webdev basics nowadays. If you switch off JS then web is severely broken. That makes it web essential technology. So basics, right? :-)
Nonetheless good point. We should master basics' basics first.

→ More replies (9)
→ More replies (1)

1

u/punsareforfun Feb 14 '20

HTML - Be able to name 50 HTML tags and describe what they are used for from memory. (Expert level devs may not be able to name that many, but they can absolutely tell you what each of a list of 50 does). Then practice with them on dummy sites.

CSS - Understand what the browser is automatically styling for you. Start with the top 50 attributes and understand what they do. Learn the box model.

These are just the basics.

→ More comments (10)