src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.ts/GettingStartedPage/buildCategorySlide
class GettingStartedPage:	private buildCategorySlide(categoryID: string, selectedStep?: string) {
		if (this.detailsScrollbar) { this.detailsScrollbar.dispose(); }

		this.detailsPageDisposables.clear();

		const category = this.gettingStartedCategories.find(category => category.id === categoryID);

		if (!category) { throw Error('could not find category with ID ' + categoryID); }
		if (category.content.type !== 'steps') { throw Error('category with ID ' + categoryID + ' is not of steps type'); }

		const categoryDescriptorComponent =
			$('.getting-started-category',
				{},
				this.iconWidgetFor(category),
				$('.category-description-container', {},
					$('h2.category-title.max-lines-3', { 'x-category-title-for': category.id }, category.title),
					$('.category-description.description.max-lines-3', { 'x-category-description-for': category.id }, category.description)));

		const categoryElements = category.content.steps.map(
			(step, i, arr) => {
				const codicon = $('.codicon' + (step.done ? '.complete' + ThemeIcon.asCSSSelector(gettingStartedCheckedCodicon) : ThemeIcon.asCSSSelector(gettingStartedUncheckedCodicon)),
					{
						'data-done-step-id': step.id,
						'x-dispatch': 'toggleStepCompletion:' + step.id,
					});

				const container = $('.step-description-container', { 'x-step-description-for': step.id });
				this.buildStepMarkdownDescription(container, step.description);

				const stepDescription = $('.step-container', {},
					$('h3.step-title.max-lines-3', { 'x-step-title-for': step.id }, step.title),
					container,
				);

				if (step.media.type === 'image') {
					stepDescription.appendChild(
						$('.image-description', { 'aria-label': localize('imageShowing', "Image showing {0}", step.media.altText) }),
					);
				}

				return $('button.getting-started-step',
					{
						'x-dispatch': 'selectTask:' + step.id,
						'data-step-id': step.id,
						'aria-expanded': 'false',
						'aria-checked': '' + step.done,
						'role': 'listitem',
					},
					codicon,
					stepDescription);
			});

		const showNextCategory =
			this.gettingStartedCategories.find(_category => _category.id === category.next && _category.content.type === 'steps' && !_category.content.done);

		const stepsContainer = $(
			'.getting-started-detail-container', { 'role': 'list' },
			...categoryElements,
			$('.done-next-container', {},
				$('button.button-link.all-done', { 'x-dispatch': 'allDone' }, $('span.codicon.codicon-check-all'), localize('allDone', "Mark Done")),
				...(showNextCategory
					? [$('button.button-link.next', { 'x-dispatch': 'nextSection' }, localize('nextOne', "Next Section"), $('span.codicon.codicon-arrow-small-right'))]
					: []),
			)
		);
		this.detailsScrollbar = this._register(new DomScrollableElement(stepsContainer, { className: 'steps-container' }));
		const stepListComponent = this.detailsScrollbar.getDomNode();

		reset(this.stepsContent, categoryDescriptorComponent, stepListComponent, this.stepMediaComponent);

		const toExpand = category.content.steps.find(step => !step.done) ?? category.content.steps[0];
		this.selectStep(selectedStep ?? toExpand.id, !selectedStep, true);

		this.detailsScrollbar.scanDomNode();
		this.detailsPageScrollbar?.scanDomNode();

		this.registerDispatchListeners();
	}