Before you go, check out these stories!

Hackernoon logoLevels of expertise in CSS โ€” Are you ready for the tutorial? by@brianbest

Levels of expertise in CSS โ€” Are you ready for the tutorial?

Author profile picture

@brianbestBrian Best

If you like this come check out my site for more blogs!

The following is a guide to help understand Cascading Style Sheets (CSS) tutorials. To assist with those who are creating tutorials, as well as my future tutorials, I would like to quantify levels of expertise in CSS. Iโ€™m planning on making a guild for HTML and JavaScript! I have found that sometimes these skill levels are not well defined. So as a resource for students to gauge if a tutorial is right for them, Iโ€™ve come up with the following. For this scale, I will use Beginner, Basic, Intermediate, and Advanced to indicate what prior knowledge a student should know before taking on a tutorial. For each level, the student should know or have:

Beginner CSS

  • No previous knowledge of CSS

Basic CSS

  • Requires a basic or intermediate knowledge of HTML.
  • How to make a style rule.
  • Understanding of the differences between a tag, ID, and class rule declaration.
  • Understand on how styles โ€˜cascadeโ€™ downward.
  • Some basic style rules, like color, font-family, background-color.
  • How to insert CSS files into HTML documents.
  • What pseudoclasses are, and how to target rules on to them.
  • What web fonts and system fonts are.

Intermediate CSS

  • What the ruleย !important does and why not to use it in most cases.
  • What the browser defined styles are and why reset files are needed.
  • Most of the style rules.
  • How to target rules based on HTML attributes.
  • Understand the various ways of positioning and when to use them.
  • Understand the box model, when to use position, margin, border, padding, height, and width.
  • How to nest styles within styles.

Advanced CSS

  • Requires an advanced knowledge of HTML.
  • All style rules and when they apply to specific tags.
  • Sibling selectors, like > and +.
  • How to solve style issues caused by browser compatibility.
  • How to use media queries to build responsive sites and elements.
  • How to create animations with keyframes.
  • How to useย :before &ย :after to make style driven elements in the DOM.
  • Understand what CSS preprocessors are and how to use at least one.

This blog is only a guideline, of course, there are plenty of cases where some overlap of knowledge will be required. Example being a basic tutorial requiring some intermediate knowledge. For students, just remember Googling for terms you donโ€™t completely understand is encouraged. For educators, itโ€™s not a bad thing to go into more detail on what you think might be necessary knowledge.


Join Hacker Noon

Create your free account to unlock your custom reading experience.