Intermediate CSS
About
While beginner CSS lays a solid foundation, advancing into more complex concepts enhances a developer’s skill set. Understanding elements like box-sizing, relative units, and advanced selectors allows for greater precision and flexibility in design. This ensures designs are compatible across different screen sizes and devices.
As developers advance in their careers, familiarity with these more advanced techniques becomes a norm in professional settings, enabling students to have a smoother integration into teams where they could manage complex stylesheets.
Content
| Lesson | Video Time | Video | Skills |
|---|---|---|---|
| Setup | 4 min | Link | Setting up the development environment. |
box-sizing |
4 min | Link | The box-sizing property in CSS. |
| Fonts | 8 min | Link | System fonts in CSS, importing web fonts from Google Fonts. |
| Selectors | 18 min | Link | Attribute selectors, pseudo-classes, pseudo-elements, uncommon combinators in CSS. |
| Relative Units | 6 min | Link | Relative units in css em, rem, %, vw, vh, when to use each. |
| CSS Boilerplate | 4 min | Link | Common CSS boilerplate types, Normalize, Reset. |
| Internal and Inline Styling | 9 min | Link | Internal styles and inline css. |
| Inheritance | 2 min | Link | How children inherit the style of parent elements, preventing inheritance. |
| Specificity | 4 min | Link | Ranking style priority with specificity. |
| Margin Collapsing | 5 min | Link | Identify and avoid margin collapsing. |
| Web-safe Fonts | 2 min | Link | Implement web-safe fonts. |
| Total content | 66 min |
References
Internal
Prerequisites
- Intro to HTML
- Intro to CSS
Course landing pages
Resources
Find a 👾 bug 👾 or have suggestions? Let us know!