The Basics of HTMLCommon HTML Elements and AttributesFirefox Developer ToolsMixing in CSSExercises: HTML and CSS BasicsCSS Basics and SelectorsExercises: Page DeploymentCommon CSS AttributesExercises: The DOMDeploying to GitHub PagesThe DOMMixing in JavaScriptKey Differences Between JavaScript and PythonJavaScript BasicsExercises: Basic InteractivityIntroduction to JavaScript CallbacksManipulating the DOM with JavaScriptExercises: Basic Interactivity (2)JavaScript EventsExercise: Creating a StopwatchExercise: Image CarouselBuilding an Understanding of Execution Order and TimingJavaScript ScopeThe State of JavaScriptPop Quiz!Template Literals and Conditional OperatorsExercises: Command Line and npmAnimationPromisesCommand Line BasicsIntroduction to Package ManagementIntroduction to WebpackExercises: Yes/No APIExercises: Yes/No (2)Live ShareKilobytes GambitThe Observer PatternModel-View-Controller (MVC)Exercises: React.jsUnderstanding Libraries vs. FrameworksExercises: React todoReact.JS BasicsAdding State to React Components with State HooksAccessing DOM Elements in React with RefsExercises: React todoNeat JavaScript Tricks: Destructuring AssignmentExercise: Todo with storageAn Introduction to TypeScriptStoring Data Client-SideNeat JavaScript Tricks: Short-Circuit ConditionalsExercise: Find the bugUser Inyerface :-PUser Inyerface (2)InternationalizationCharacter EncodingsThe Internationalization APII18n Strategies: Message TranslationInternationalization Beyond Message TranslationBrief Tips on AccessibilityAlternative Execution Environments
Integrating JavaScript Libraries
html`
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
`
html`
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
`
html`
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
