How Much CSS Do I Need To Be Job Ready?

#webdev #beginners #codenewbie #css

CSS is one of the three foundational web technologies every front-end developer needs to know, and in some ways, the most difficult to learn. There are a staggering amount of properties one can learn, and many subtleties to be aware of regarding how they interact with each other. Today, I'm going to go over the minimum CSS you need to know to be effective on the job!

What Do I Mean By Job-Ready?

Before starting, let me clarify precisely what I mean when I say 'job-ready:

You'll understand the broad strokes of the technology in question, and know the most fundamental concepts that come up every day.
There may be gaps in your knowledge, but those will be limited to secondary concepts or syntax/other details that you'll be able to find the answer to relatively quickly and easily.
You'll know exactly where to turn to find answers to problems or questions that you're running into.

Following the advice here won't make you a master of CSS, but you'll be effective at the day-to-day that you'll need to get started on the job.

I will mention that while the mechanics that dictate how CSS works are simple, how they interact with each other in the wild can be anything BUT simple, and CSS requires a much deeper understanding of the fundamentals that HTML to be truly effective and not have to constantly be redoing previous code. This post in particular is probably going to have a lot of edits as I refine it to deliver the best information.

What you need to know

Core mechanics and terminology

Be able to identify and explain what properties, selectors, declarations, values, and rules are.
Understand at a high level how specificity, inheritance, and the cascade work.
Understand the box model, the different roles that margin/padding/border play, etc.
Understand the basic display types (block, inline, and inline-block), and the major differences in how the default versions of these display types work in flow layout aka the default version of how layout works in CSS.
Understand the basics of positioning in flow layout (absolute vs relative vs sticky vs fixed vs static)
Understand the fundamentals of stacking with z-index, and when and what elements it's applied to in that given context.
Understanding how Flexbox and Grid work is a must for modern CSS developers; you should be tangentially aware of how layout works using float, but don't spend a lot of time on this since it shouldn't be the first layout tool you reach for.
How to remove or hide items from the DOM or the page: There is a difference between removing items from the DOM or simply making them invisible, and you should know what rules accomplish one or the other, and have an idea of some situations where one method is more desirable than the other.
Understand the different units of measurement (pixels, ems, rems, etc), and their strengths, weaknesses, optimum use cases.
Techniques for responsive design, including media queries.
At least some familiarity with transforms, animation, etc.
How to build a basic design system, and utilize CSS variables.

Extra Credit

Have some familiarity with older paradigms to make CSS more efficient, such as Sass, BEM, etc. These aren't as widely used these days, and you can delve into more detail if you need one of these technologies for a job, but it's not something you'll need for every job.
Some familiarity with a CSS framework like Bootstrap can be helpful, but it would be better to be able to demonstrate fluency in writing CSS without them.
If and when you learn a front-end framework like React, some knowledge of a paradigm like Tailwind, styled-components, or Emotion would be helpful.

Where to Learn

Basic Resources

For the absolute basics, I'm going to repeat my recommendations from my post on getting job-ready with HTML, as far as basic resources for your first contact with the language go, with the caveat that you'll get less of a quality education in terms of writing solid CSS from freeCodeCamp than you would HTML.

Additionally, Google's web.dev mini learning platform has a really nice, brand-new CSS module.

For a deeper dive, I would recommend taking a look at Jonas Schmedtman's Advanced CSS Udemy course. This course shows projects in styled with three different paradigms (old school, Flexbox, Grid) so you can see how those approaches work, and how some of the more modern ones make some techniques easier than the old way or enable layouts that would have been previously impossible.

Premium Resources

A small caveat about the following section: The course I'm about to talk about is in closed beta at the time of this writing, but I consider it so essential that I can't exclude it here. So with that said...

The toughest thing about CSS is that the overwhelming majority of education surrounding it is "Here's this rule, this is what it does" without going into the inevitable gotchas or unexpected behavior that will pop up when you're writing CSS at any scale above the smallest possible use-case. Compared to HTML and JavaScript, it's much harder to learn how to write good CSS without a teacher that really knows that they're talking about.

Josh Comeau's CSS For JS Developers doesn't do this and instead focuses on how the core behavior behind many aspects of the language work, and will teach you tips and tricks it would take you years of trial and error writing production code to figure out. My ability to write efficient, maintainable, and scalable CSS has improved considerably as a direct result of the modules currently available to those who were able to get in on the beta (5 out of 9 total modules), and I consider this the single best CSS resource money can buy.

Where To Get Help/Find Reference

In addition to the sources I mentioned in my last post (Stack Overflow and MDN), I would also recommend checking out CSS Tricks, a time-honored blog with many deep dives on various CSS subjects, including the definitive guide to Flexbox that I had linked above.

In Conclusion

CSS can be surprisingly tricky to get a firm handle on, but I hope this guide makes the path a lot easier for you. Join me next time, where I talk about getting job-ready with JavaScript!