☂️ Umbrella Issue updating lessons with interactive code examples ☂️

[Sembauke]

I am opening an umbrella issue for adding interactive examples to lessons. This will help us keep some order in the chaos. I'll open this up when we can create active code examples in lessons.

GitHub has a limit of the number of sub issues you can create for a parent. So I am starting a checklist for the remaining ones.

Remaining HTML lessons

• Add interactive examples to Proper Heading Level Structure lesson #63752
• Add interactive example to associated label lesson and update questions #63776
• Add interactive examples to aria roles lesson #63779
• Add interactive examples to aria-label lesson #63782

CSS lessons [COMPLETE]

List of lessons

• Add interactive examples to css reset lesson #63013
• Add interactive examples to css filter lesson #63014
• Add interactive examples to What Is CSS Flexbox, and When Should You Use It? lesson #63086
• Add interactive examples to What Are Some Common Flex Properties, and How Do They Work? lesson #63088
• Add interactive examples to What Are Font Families and How Do They Work? lesson #63089
• Add interactive examples to How Do You Work with External Fonts Like Font Squirrel and Google Fonts? lesson #63090
• Add interactive examples to What Is the text-shadow Property, and How Does It Work? lesson #63091
• Add interactive examples to What Are Some Tools to Check for Good Color Contrast on Sites? lesson #63092
• Add interactive examples to What Are Best Practices for Hiding Content So It Doesn't Become Inaccessible? lesson #63094
• Add interactive examples to What Are Common Use Cases for Using Floats, and How Do They Work? lesson #63097
• Add interactive examples to What Is Relative Positioning, and How Does This Differ from the Default Static Positioning? lesson #63099
• Add interactive examples to What Is Absolute Positioning, and How Does It Work? lesson #63101
• Add interactive examples to What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning? lesson #63104
• Add interactive examples to What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements? lesson #63105
• Add interactive examples to What Is the Attribute Selector, and How Can It Be Used to Target Links with the href and title Attributes? lesson #63106
• Add interactive examples to How to Use the Attribute Selector to Target Elements with the lang and data-lang Attributes? lesson #63107
• Add interactive examples to How to Use the Attribute Selector to Target Ordered List Elements with the type Attribute? lesson #63108
• Add interactive examples to What Is Responsive Web Design, and What Is Its Relationship to Tools Like CSS Grid and Flexbox? lesson #63112
• Add interactive examples to How Do Media Queries Work, and What Are Some Common Media Types and Features? lesson #63113
• Add interactive examples to What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design? lesson #63114
• Add interactive examples to What Is the Mobile First Approach in Responsive Web Design? lesson #63115
• Add interactive examples to What Are CSS Custom Properties, and How Do They Work? lesson #63118
• Add interactive examples to What Is the @Property Rule, and How Does It Work with Fallbacks? lesson #63119
• Add interactive examples to What Is CSS Grid, and How Does It Differ from Flexbox? lesson #63147
• Add interactive examples to How Can You Create Flexible Grids with the fr Unit? lesson #63148
• Add interactive examples to How Can You Create Gaps Between Tracks in a Grid? lesson #63150
• Add interactive examples to How Can You Repeat Track Listings in a Grid Layout? lesson #63151
• Add interactive examples to What Is the Difference Between an Implicit and Explicit Grid? lesson #63152
• Add interactive examples to What Is the minmax() Function and How Does It Work? lesson #63153
• Add interactive examples to How Do the grid-column and grid-row Properties Work? lesson #63154
• Add interactive examples to How Can You Position Items on the Grid Using the grid-template-areas Property? lesson #63155
• Add interactive examples to What Are CSS Animations, and How Do They Work? lesson #63156

JavaScript lessons

• Add interactive examples to What Is JavaScript, and How Does It Work with HTML and CSS lesson #63169
• Add interactive examples to What Are Variables, and What Are Guidelines for Naming JavaScript Variables lesson #63171
• Add interactive examples to let and const lesson #63173
• Add interactive examples to What Is a String in JavaScript, and What Is String Immutability lesson #63175
• Add interactive examples to What Is String Concatenation, and How Can You Concatenate Strings with Variables lesson #63179
• Add interactive examples to What Is console.log Used For, and How Does It Work lesson #63181
• Add interactive examples to How Does the typeof Operator Work, and What Is the typeof null Bug in JavaScript lesson #63184
• Add interactive examples to What Is Bracket Notation, and How Do You Access Characters from a String lesson #63188
• Add interactive examples to How Do You Create a Newline in Strings and Escape Strings lesson #63190
• Add interactive examples to How Can You Find the Position of a Substring in a String lesson #63191
• Add interactive examples to What Is the prompt() Method, and How Does It Work lesson #63195
• Add interactive examples to What Is ASCII, and How Does It Work with charCodeAt() and fromCharCode() lesson #63197
• Add interactive examples to How Can You Test if a String Contains a Substring lesson #63199
• Add interactive examples to How Can You Extract a Substring from a String lesson #63201
• Add interactive examples to How Can You Change the Casing for a String lesson #63223
• Add interactive examples to How Can You Trim Whitespace from a String lesson #63224
• Add interactive examples to How Can You Replace Parts of a String with Another lesson #63225
• Add interactive examples to How Can You Repeat a String x Number of Times lesson #63226
• Add interactive examples to number types lesson #63231
• Add interactive examples to What Are the Different Arithmetic Operators in JavaScript lesson #63232
• Add interactive examples to What Happens When You Try to Do Calculations with Numbers and Strings lesson #63235
• Add interactive examples to How Does Operator Precedence Work lesson #63237
• Add interactive examples to How Do the Increment and Decrement Operators Work lesson #63238
• Add interactive examples to What Are Compound Assignment Operators in JavaScript, and How Do They Work lesson #63240
• Add interactive examples to What Are Booleans, and How Do They Work with Equality and Inequality Operators lesson #63243
• Add interactive examples to What Are Comparison Operators, and How Do They Work lesson #63244
• Add interactive examples to What Are Unary Operators, and How Do They Work lesson #63247
• Add interactive examples to What Are Bitwise Operators, and How Do They Work lesson #63249
• Add interactive examples to What Are Conditional Statements, and How Do If/Else If/Else Statements Work lesson #63252
• Add interactive examples to What Are Binary Logical Operators, and How Do They Work lesson #63254
• Add interactive examples to What Is the Math Object in JavaScript, and What Are Some Common Methods lesson #63256
• Add interactive examples to How Does isNaN Work lesson #63259
• Add interactive examples to How Do the parseFloat() and parseInt() Methods Work lesson #63260
• Add interactive examples to What Is the toFixed() Method, and How Does It Work lesson #63261
• Add interactive examples to How Do Comparisons Work with Null and Undefined Data Types lesson #63265
• Add interactive examples to What Are Switch Statements and How Do They Differ from If/Else Chains lesson #63266
• Add interactive examples to What Is the Purpose of Functions, and How Do They Work lesson #63269
• Add interactive examples to What Are Arrow Functions, and How Do They Work lesson #63271
• Add interactive examples to What Is Scope in Programming, and How Does Global, Local, and Block Scope Work lesson #63272
• Add interactive examples to What Are the Key Characteristics of JavaScript Arrays lesson #63277
• Add interactive examples to How Do You Access and Update Elements in an Array lesson #63278
• Add interactive examples to How Do You Add and Remove Elements from the Beginning and End of an Array lesson #63280
• Add interactive examples to What Is the Difference Between One-Dimensional and Two-Dimensional Arrays lesson #63281
• Add interactive examples to What Is Array Destructuring, and How Does It Work lesson #63283
• Add interactive examples to How Can You Use String and Array Methods to Reverse a String lesson #63285
• Add interactive examples to How Do You Get the Index for an Element in an Array Using the indexOf Method lesson #63289
• Add interactive examples to How Do You Add and Remove Elements from the Middle of an Array lesson #63292
• Add interactive examples to How Can You Check if an Array Contains a Certain Value lesson #63293
• Add interactive examples to What Is a Shallow Copy of an Array lesson #63295
• Add interactive examples to What Is an Object in JavaScript, and How Can You Access Properties from an Object lesson #63298
• Add interactive examples to How Can You Remove Properties from an Object lesson #63299
• Add interactive examples to How to Check If an Object Has a Property lesson #63301
• Add interactive examples to How Do You Work with Accessing Properties from Nested Objects and Arrays in Objects lesson #63303
• Add interactive examples to What Is the Difference Between Primitive and Non-Primitive Data Types lesson #63305
• Add interactive examples to What Is the Difference Between Functions and Object Methods lesson #63307
• Add interactive examples to What Is the Object() Constructor, and When Should You Use It lesson #63309
• Add interactive examples to How Do JSON.parse() and JSON.stringify() Work lesson #63333
• Add interactive examples to What Is the Optional Chaining Operator, and How Does It Work lesson #63330
• Add interactive examples to What Is Object Destructuring, and How Does It Work lesson #63345
• Add interactive examples to How Do Loops and Iteration Work in JavaScript lesson #63342
• Add interactive examples to How Does the For...of Loop Work, and When Should You Use It lesson #63340
• Add interactive examples to What Is the For...in Loop, and When Should You Use It lesson #63335
• Add interactive examples to What Is a While Loop, and How Does It Differ from the Do...while Loop lesson #63339
• Add interactive examples to What Are the Break and Continue Statements Used for in Loops lesson #63336
• Add interactive examples to String object lesson #63368
• Add interactive examples to toString() Method lesson #63378
• Add interactive examples to Number Constructor lesson #63375
• Add interactive examples to How Do You Get the Length for an Array lesson #63373
• Add interactive examples to closures lesson #63372
• Add interactive examples to var keyword lesson #63371
• Add interactive examples to hoisting lesson #63370
• Add interactive examples to arguments object lesson #63369
• Add interactive examples to rest parameters lesson #63384
• Add interactive examples to Callbacks and forEach method lesson #63387
• Add interactive examples to Higher order functions lesson #63388
• Add interactive examples to Map method lesson #63389
• Add interactive examples to Filter method lesson #63396
• Add interactive examples to Reduce method lesson #63397
• Add interactive examples to Method chaining lesson #63398
• Add interactive examples to Sort method lesson #63401
• Add interactive examples to Every and some methods lesson #63386
• Add interactive examples to What is the DOM lesson #63442
• Add interactive examples to creating new nodes lesson #63443
• Add interactive examples to innerText, textContent and innerHTML lesson #63445
• Add interactive examples to adding and removing nodes lesson #63446
• Add interactive examples to navigator, window and document object lesson #63451
• Add interactive examples to setAttribute lesson #63452
• Add interactive examples to addEventListener lesson #63454
• Add interactive examples to removeEventListener lesson #63460
• Add interactive examples to inline event handler lesson #63461
• Add interactive examples to element.style and element.classList lesson #63462
• Add interactive examples to DOMContentLoaded lesson #63463
• Add interactive examples to setTimeout and setInterval lesson #63465
• Add interactive examples to requestAnimationFrame lesson #63468
• Add interactive examples to web animations API lesson #63470
• Add interactive examples to canvas API lesson #63471
• Add interactive examples to dialog element lesson #63472
• Add interactive examples to change event lesson #63473
• Add interactive examples to dynamic and interactive content accessible lesson #63479
• Add interactive examples to aria-expanded attribute lesson #63546
• Add interactive examples to aria-live attribute lesson #63581
• Add interactive examples to common aria states lesson #63547
• Add interactive examples to aria-controls attribute lesson #63549
• Add interactive examples to try…catch…finally lesson #63545
• Add interactive examples to regex and common methods lesson #63575
• Add interactive examples to common regex modifiers for searching lesson #63577
• Add interactive examples to lookahead and lookbehind assertions lesson #63578
• Add interactive examples to regex quantifiers lesson #63579
• Add interactive examples to capturing groups lesson #63580
• Add interactive examples to validate forms lesson #63553
• Add interactive examples to e.preventDefault lesson #63555
• Add interactive examples to JS Date object lesson #63569
• Add interactive examples to different ways to format dates lesson #63570
• Add interactive examples to negative patterns associated with client side storage lesson #63567
• Add interactive examples to IndexedDB lesson #63568
• Add interactive examples to JS classes lesson #63558
• Add interactive examples to this keyword lesson #63563
• Add interactive examples to class inheritance lesson #63564
• Add interactive examples to static properties and methods lesson #63565
• Add interactive examples to recursion and call stack lesson #63566
• Add interactive examples to functional programming lesson #63556
• Add interactive examples to currying lesson #63557
• Add interactive examples to async/await lesson #63551

[Sembauke]

@jdwilkin4, when you're back please update the issue accordingly.

[jdwilkin4]

Marking this is blocked until the following is approved and merged in

#61805