Levels of expertise in CSS — Are you ready for the tutorial?

If you like this come check out my site www.brian-best.com 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.