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.