Web Styling Course

Styling Course Overview

Table of Contents

• Content
• Aspects
  • 👶 Introduction
  • 💪 Workout
  • 🦑 Deep
  • ✨ New
  • 🔮 Obscura

Content

Below you can find the ordered content of the topic, in a linear progression

The linear progression of content aims to cover all content, course by course, workout by workout as follows:

• first course is the only core one, denoted by its manifest
• the next course is denoted by the first item of the next array in each course manifest
• each course has its order of workouts designated by the sections field in the same aforementioned manifest

1. intro-css

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	what-is-css	✅	👶 introduction	❌	✅	✅	❌	❌
2	css-declaration	✅	👶 introduction	❌	✅	✅	❌	❌
3	what-is-cascading	✅	👶 introduction	❌	✅	✅	❌	❌
4	basic-selectors	✅	👶 introduction	❌	❌	✅	❌	❌
5	class-and-id-selectors	✅	👶 introduction	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

2. css-basics

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	applying-css	✅	👶 introduction	❌	✅	✅	❌	❌
2	internal-css	✅	👶 introduction	❌	❌	✅	❌	❌
3	css-specificity	✅	👶 introduction 💪 workout	❌	❌	❌	✅	❌
4	css-specificity-ii	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
5	common-css-properties-values	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
6	relative-css-properties	✅	👶 introduction	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

name	type	aspects	standards	done
will-this-work-on-ie8	tetris	👶 introduction 💪 workout 🦑 deep	❌	❌

3. box-model

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	the-box-model	✅	👶 introduction 💪 workout	❌	❌	✅	✅	❌
2	borders	✅	👶 introduction	❌	✅	✅	❌	❌
3	margin-and-padding	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
4	the-box-sizing-property	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	the-display-property	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

4. positioning

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	block-elements-characteristics	✅	👶 introduction	❌	✅	✅	❌	❌
2	inline-elements-characteristics	✅	👶 introduction	❌	✅	✅	❌	❌
3	inline-block-elements-characteristics	✅	👶 introduction	❌	❌	✅	❌	❌
4	positioning-elements	✅	👶 introduction	❌	✅	✅	❌	❌
5	floating-elements	✅	👶 introduction	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

5. dimensioning-and-box-sizing

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	vh-and-vw-vmin-and-vmax	✅	👶 introduction 💪 workout 🦑 deep	❌	❌	❌	❌	❌
2	use-em-instead-of-px-for-sizes	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
3	vertical-percentages-are-relative-to-container-width-not-height	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
4	use-box-sizing-to-define-an-element-s-width-and-height-properties	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	inherit-box-sizing	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

6. practical-css

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	debug-with-the-selector	✅	👶 introduction	❌	✅	✅	✅	❌
2	add-line-height-to-body	✅	👶 introduction	❌	❌	✅	❌	❌
3	difference-between-initial-and-inherit	✅	💪 workout 🦑 deep	❌	❌	✅	✅	❌
4	the-difference-between-display-none-and-visibility-hidden	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
5	page-breaks-for-printing	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

name	type	aspects	standards	done
c-s-splat	bugSpot	👶 introduction 💪 workout	❌	❌

7. typography

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	a-great-font-resource-google-font-api	✅	👶 introduction	❌	❌	✅	❌	❌
2	letter-spacing-property	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
3	change-the-color-of-the-decoration-with-text-decoration-color	✅	👶 introduction	❌	❌	✅	❌	❌
4	change-the-style-of-the-decoration-with-text-decoration-style	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
5	using-the-font-variant-property-to-transform-text-to-small-caps	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

name	type	aspects	standards	done
existential-crisis	tetris	💪 workout	❌	❌

8. centring-recipes

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	horizontal-centering-fluid-blocks	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
2	horizontal-centering-with-margin-0-auto	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
3	vertical-centering-fluid-blocks	✅	👶 introduction 💪 workout 🦑 deep	❌	❌	✅	❌	❌
4	vertical-centering-with-margin-top	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
5	vertically-center-text	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
6	vertically-center-anything	✅	👶 introduction 💪 workout 🦑 deep ✨ new	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

9. colors-tips

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	hexadecimal-color-system	✅	👶 introduction	❌	✅	✅	❌	❌
2	determine-the-opacity-of-background-colors-using-the-rgba-declaration	✅	👶 introduction 💪 workout 🦑 deep	❌	❌	✅	❌	❌
3	currentcolor-improves-code-reusability	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
4	matching-images-to-a-website-s-color-scheme	✅	💪 workout 👶 introduction 🦑 deep	❌	❌	✅	❌	❌
5	default-to-a-transparent-border-color-before-adding-a-border-to-on-hover-state-elements	✅	👶 introduction 💪 workout 🦑 deep	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

10. positioning-tips

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	clearfix-for-layouts	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
2	position-elements-with-position-sticky	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
3	controlling-cellpadding-and-cellspacing-in-css	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
4	direction-column-reverse	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	equal-width-table-cells	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

11. styling-i

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	change-the-style-of-borders-using-border-style	✅	👶 introduction	❌	❌	✅	❌	❌
2	use-border-radius-to-style-rounded-corners-of-an-element	✅	👶 introduction	❌	❌	✅	❌	❌
3	use-list-style-type-to-change-the-marker-type-in-lists	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
4	removing-the-bullets-from-the-ul	✅	👶 introduction	❌	✅	✅	❌	❌
5	comma-separated-lists	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

12. styling-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	underline-feature-on-html-elements	✅	👶 introduction	❌	✅	✅	❌	❌
2	make-text-unselectable	✅	💪 workout	❌	✅	✅	❌	❌
3	disable-resizable-property-of-textarea	✅	💪 workout	❌	✅	✅	❌	❌
4	use-background-repeat-to-repeat-a-background-image-horizontally-or-vertically	✅	👶 introduction	❌	✅	✅	❌	❌
5	how-to-flip-an-image	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

13. styling-iii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	border-radius-circle	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
2	border-radius-property-can-use-slash-syntax	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
3	declaring-linear-gradients-using-the-background-property	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	use-the-box-shadow-property-to-create-shadow-effects-on-an-element	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	multiple-borders-with-pseudo-elements	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

14. pseudo-classes-i

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	use-pseudo-classes-to-describe-a-special-state-of-an-element	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
2	the-hover-pseudo-class	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
3	use-not-to-apply-unapply-styles	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	the-nth-child-property	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
5	required-and-optional-pseudo-classes	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

15. pseudo-classes-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	drag-and-drop-pseudo-class-drop	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
2	matches-any-pseudo-class-matches	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
3	highlight-input-forms-using-focus-pseudo-class	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
4	empty-and-blank	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	in-range-and-out-of-range	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

16. pseudo-elements

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	use-pseudo-elements-to-style-specific-parts-of-an-element	✅	👶 introduction	❌	✅	✅	❌	❌
2	styling-elements-using-before-and-after	✅	👶 introduction	❌	✅	✅	❌	❌
3	drop-caps-with-first-letter	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
4	use-attribute-selectors-with-empty-links	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
5	change-selected-area-color	✅	👶 introduction	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

17. flexbox

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	flexbox-flex-wrap	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
2	flexbox-justify-content	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
3	flexbox-order	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	using-flex-grow	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	using-flex-shrink	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
6	avoid-margin-hacks-with-flexbox	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

18. features

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	use-z-index-to-specify-the-stack-order-of-elements-that-overlap	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
2	calc-for-simpler-maths	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
3	at-rules	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
4	combining-selectors	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	use-svg-for-icons	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

19. recipes

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	load-custom-fonts-on-a-web-page-using-font-face	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
2	disclose-file-format-of-links	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
3	fixed-navigation-bar	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	hide-the-scrollbar-in-webkit-browser	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	autohiding-scrollbars-for-ie	✅	💪 workout	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

20. responsive-design-tips

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	disabling-default-callouts-using-webkit-touch-callout	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
2	prevent-text-enlargement-on-an-iphone	✅	👶 introduction 💪 workout 🦑 deep	❌	❌	✅	❌	❌
3	using-media-rule-to-create-cross-platform-responsiveness	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	responsive-images-in-a-layout	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
5	use-text-transform-to-avoid-screen-reader-pronunciation-errors	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

21. sass-i

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	what-is-sass	✅	👶 introduction	❌	✅	✅	❌	❌
2	rules-and-directives	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
3	partials	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
4	importer	✅	👶 introduction 💪 workout	❌	❌	✅	❌	❌
5	sass-supported-comments	✅	👶 introduction	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

22. sass-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	referencing-parent-selectors	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
2	sass-mixins	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
3	using-sassscripts-interactive-shell	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
4	sass-extend-inheritance	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
5	strings-in-sassscript	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

23. sass-iii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	sass-operators	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
2	sassscript-number-functions	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
3	sassscript-color-operations	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	sassscript-string-operations	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
5	sassscript-map-and-list-functions	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

24. animations

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	animation-basics-in-css	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
2	chaining-animations	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
3	using-animation-delay-in-debugging	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
4	shorthand-transitions	✅	💪 workout 🦑 deep	❌	❌	✅	❌	❌
5	prepare-for-will-change	✅	💪 workout 🦑 deep ✨ new	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

25. css-animation

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	making-shapes-with-transform	✅	👶 introduction 💪 workout 🦑 deep	❌	❌	✅	❌	❌
2	pause-and-play-css-animations	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
3	manipulating-shapes-using-css-border	✅	👶 introduction 💪 workout 🦑 deep	❌	❌	✅	❌	❌
4	manipulating-shapes-using-css-clip-path	✅	💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	manipulating-shapes-using-css-shape-outside	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
6	animations-in-webkit-browsers	✅	👶 introduction 💪 workout 🦑 deep	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Aspects

Given the insights are tagged with aspects, we can filter over the linear content progression and create learning sub-paths.

These sub-path progressions will most likely not cover all content, but they will ensure and enforce an unified learning experience, tailor for the user wish.

For example, a user might be interested in new additions and updates of a language, rather than introduction lessions. Note that these sub-paths don't take games into consideration

👶 Introduction

If you are being introduced to the topic for the first time

Insights:

1. what-is-css
2. css-declaration
3. what-is-cascading
4. basic-selectors
5. class-and-id-selectors
6. applying-css
7. internal-css
8. css-specificity
9. css-specificity-ii
10. common-css-properties-values
11. relative-css-properties
12. the-box-model
13. borders
14. margin-and-padding
15. the-box-sizing-property
16. the-display-property
17. block-elements-characteristics
18. inline-elements-characteristics
19. inline-block-elements-characteristics
20. positioning-elements
21. floating-elements
22. vh-and-vw-vmin-and-vmax
23. use-em-instead-of-px-for-sizes
24. vertical-percentages-are-relative-to-container-width-not-height
25. use-box-sizing-to-define-an-element-s-width-and-height-properties
26. debug-with-the-selector
27. add-line-height-to-body
28. the-difference-between-display-none-and-visibility-hidden
29. a-great-font-resource-google-font-api
30. letter-spacing-property
31. change-the-color-of-the-decoration-with-text-decoration-color
32. change-the-style-of-the-decoration-with-text-decoration-style
33. using-the-font-variant-property-to-transform-text-to-small-caps
34. vertical-centering-fluid-blocks
35. vertical-centering-with-margin-top
36. vertically-center-text
37. vertically-center-anything
38. hexadecimal-color-system
39. determine-the-opacity-of-background-colors-using-the-rgba-declaration
40. currentcolor-improves-code-reusability
41. matching-images-to-a-website-s-color-scheme
42. default-to-a-transparent-border-color-before-adding-a-border-to-on-hover-state-elements
43. clearfix-for-layouts
44. position-elements-with-position-sticky
45. controlling-cellpadding-and-cellspacing-in-css
46. equal-width-table-cells
47. change-the-style-of-borders-using-border-style
48. use-border-radius-to-style-rounded-corners-of-an-element
49. use-list-style-type-to-change-the-marker-type-in-lists
50. removing-the-bullets-from-the-ul
51. comma-separated-lists
52. underline-feature-on-html-elements
53. use-background-repeat-to-repeat-a-background-image-horizontally-or-vertically
54. how-to-flip-an-image
55. use-pseudo-classes-to-describe-a-special-state-of-an-element
56. the-hover-pseudo-class
57. the-nth-child-property
58. matches-any-pseudo-class-matches
59. highlight-input-forms-using-focus-pseudo-class
60. in-range-and-out-of-range
61. use-pseudo-elements-to-style-specific-parts-of-an-element
62. styling-elements-using-before-and-after
63. drop-caps-with-first-letter
64. change-selected-area-color
65. avoid-margin-hacks-with-flexbox
66. use-z-index-to-specify-the-stack-order-of-elements-that-overlap
67. calc-for-simpler-maths
68. at-rules
69. use-svg-for-icons
70. prevent-text-enlargement-on-an-iphone
71. use-text-transform-to-avoid-screen-reader-pronunciation-errors
72. what-is-sass
73. rules-and-directives
74. partials
75. importer
76. sass-supported-comments
77. using-sassscripts-interactive-shell
78. strings-in-sassscript
79. sass-operators
80. sassscript-string-operations
81. making-shapes-with-transform
82. manipulating-shapes-using-css-border
83. manipulating-shapes-using-css-shape-outside
84. animations-in-webkit-browsers

⚠️ There are no exercises tagged with this aspect in styling. Games:

1. will-this-work-on-ie8
2. c-s-splat

💪 Workout

Theory put into practice/that’s how you achieve X points

Insights:

1. css-specificity
2. css-specificity-ii
3. common-css-properties-values
4. the-box-model
5. margin-and-padding
6. the-box-sizing-property
7. the-display-property
8. vh-and-vw-vmin-and-vmax
9. use-em-instead-of-px-for-sizes
10. vertical-percentages-are-relative-to-container-width-not-height
11. use-box-sizing-to-define-an-element-s-width-and-height-properties
12. inherit-box-sizing
13. difference-between-initial-and-inherit
14. the-difference-between-display-none-and-visibility-hidden
15. page-breaks-for-printing
16. letter-spacing-property
17. change-the-style-of-the-decoration-with-text-decoration-style
18. using-the-font-variant-property-to-transform-text-to-small-caps
19. horizontal-centering-fluid-blocks
20. horizontal-centering-with-margin-0-auto
21. vertical-centering-fluid-blocks
22. vertical-centering-with-margin-top
23. vertically-center-text
24. vertically-center-anything
25. determine-the-opacity-of-background-colors-using-the-rgba-declaration
26. currentcolor-improves-code-reusability
27. matching-images-to-a-website-s-color-scheme
28. default-to-a-transparent-border-color-before-adding-a-border-to-on-hover-state-elements
29. clearfix-for-layouts
30. position-elements-with-position-sticky
31. controlling-cellpadding-and-cellspacing-in-css
32. direction-column-reverse
33. equal-width-table-cells
34. use-list-style-type-to-change-the-marker-type-in-lists
35. comma-separated-lists
36. make-text-unselectable
37. disable-resizable-property-of-textarea
38. how-to-flip-an-image
39. border-radius-circle
40. border-radius-property-can-use-slash-syntax
41. declaring-linear-gradients-using-the-background-property
42. use-the-box-shadow-property-to-create-shadow-effects-on-an-element
43. multiple-borders-with-pseudo-elements
44. use-pseudo-classes-to-describe-a-special-state-of-an-element
45. the-hover-pseudo-class
46. use-not-to-apply-unapply-styles
47. the-nth-child-property
48. required-and-optional-pseudo-classes
49. drag-and-drop-pseudo-class-drop
50. matches-any-pseudo-class-matches
51. highlight-input-forms-using-focus-pseudo-class
52. empty-and-blank
53. in-range-and-out-of-range
54. drop-caps-with-first-letter
55. use-attribute-selectors-with-empty-links
56. flexbox-flex-wrap
57. flexbox-justify-content
58. flexbox-order
59. using-flex-grow
60. using-flex-shrink
61. avoid-margin-hacks-with-flexbox
62. use-z-index-to-specify-the-stack-order-of-elements-that-overlap
63. calc-for-simpler-maths
64. at-rules
65. combining-selectors
66. use-svg-for-icons
67. load-custom-fonts-on-a-web-page-using-font-face
68. disclose-file-format-of-links
69. fixed-navigation-bar
70. hide-the-scrollbar-in-webkit-browser
71. autohiding-scrollbars-for-ie
72. disabling-default-callouts-using-webkit-touch-callout
73. prevent-text-enlargement-on-an-iphone
74. using-media-rule-to-create-cross-platform-responsiveness
75. responsive-images-in-a-layout
76. use-text-transform-to-avoid-screen-reader-pronunciation-errors
77. rules-and-directives
78. partials
79. importer
80. referencing-parent-selectors
81. sass-mixins
82. using-sassscripts-interactive-shell
83. sass-extend-inheritance
84. strings-in-sassscript
85. sass-operators
86. sassscript-number-functions
87. sassscript-color-operations
88. sassscript-string-operations
89. sassscript-map-and-list-functions
90. animation-basics-in-css
91. chaining-animations
92. using-animation-delay-in-debugging
93. shorthand-transitions
94. prepare-for-will-change
95. making-shapes-with-transform
96. pause-and-play-css-animations
97. manipulating-shapes-using-css-border
98. manipulating-shapes-using-css-clip-path
99. manipulating-shapes-using-css-shape-outside
100. animations-in-webkit-browsers

⚠️ There are no exercises tagged with this aspect in styling. Games:

1. will-this-work-on-ie8
2. c-s-splat
3. existential-crisis

🦑 Deep

Prerequisite knowledge consisting of 2 or more 👶/💪 workouts

Insights:

1. the-box-sizing-property
2. the-display-property
3. vh-and-vw-vmin-and-vmax
4. use-box-sizing-to-define-an-element-s-width-and-height-properties
5. inherit-box-sizing
6. difference-between-initial-and-inherit
7. page-breaks-for-printing
8. horizontal-centering-fluid-blocks
9. horizontal-centering-with-margin-0-auto
10. vertical-centering-fluid-blocks
11. vertically-center-anything
12. determine-the-opacity-of-background-colors-using-the-rgba-declaration
13. matching-images-to-a-website-s-color-scheme
14. default-to-a-transparent-border-color-before-adding-a-border-to-on-hover-state-elements
15. clearfix-for-layouts
16. direction-column-reverse
17. border-radius-circle
18. border-radius-property-can-use-slash-syntax
19. declaring-linear-gradients-using-the-background-property
20. use-the-box-shadow-property-to-create-shadow-effects-on-an-element
21. multiple-borders-with-pseudo-elements
22. use-not-to-apply-unapply-styles
23. required-and-optional-pseudo-classes
24. drag-and-drop-pseudo-class-drop
25. empty-and-blank
26. use-attribute-selectors-with-empty-links
27. flexbox-flex-wrap
28. flexbox-justify-content
29. flexbox-order
30. using-flex-grow
31. using-flex-shrink
32. avoid-margin-hacks-with-flexbox
33. use-z-index-to-specify-the-stack-order-of-elements-that-overlap
34. combining-selectors
35. load-custom-fonts-on-a-web-page-using-font-face
36. disclose-file-format-of-links
37. fixed-navigation-bar
38. hide-the-scrollbar-in-webkit-browser
39. disabling-default-callouts-using-webkit-touch-callout
40. prevent-text-enlargement-on-an-iphone
41. using-media-rule-to-create-cross-platform-responsiveness
42. responsive-images-in-a-layout
43. referencing-parent-selectors
44. sass-mixins
45. sass-extend-inheritance
46. sassscript-number-functions
47. sassscript-color-operations
48. sassscript-map-and-list-functions
49. animation-basics-in-css
50. chaining-animations
51. using-animation-delay-in-debugging
52. shorthand-transitions
53. prepare-for-will-change
54. making-shapes-with-transform
55. pause-and-play-css-animations
56. manipulating-shapes-using-css-border
57. manipulating-shapes-using-css-clip-path
58. manipulating-shapes-using-css-shape-outside
59. animations-in-webkit-browsers

⚠️ There are no exercises tagged with this aspect in styling. Games:

1. will-this-work-on-ie8

✨ New

Recently added/gained traction feature

Insights:

1. vertically-center-anything
2. prepare-for-will-change

⚠️ There are no exercises tagged with this aspect in styling. :warning: There are no games tagged with this aspect in styling.

🔮 Obscura

Stories, obscure details that don’t specifically relate to a learning objective

⚠️ There are no insights tagged with this aspect in styling. :warning: There are no exercises tagged with this aspect in styling. :warning: There are no games tagged with this aspect in styling.

✅ All content has been tagged with aspects.