"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Practice Instructions: Study Guide with Table of Contents" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "Create a comprehensive study guide page for \"Web Development Fundamentals\" with a functional table of contents that allows users to jump directly to different sections. Your page will demonstrate professional internal navigation that makes long content easily accessible." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "This project teaches you to create the kind of internal navigation systems found on professional websites like Wikipedia, documentation sites, and educational resources. You'll learn to make long-form content user-friendly and accessible through thoughtful internal linking." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your study guide will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A main heading introducing the study guide topic" }), "\n", _jsx(_components.li, { children: "A table of contents with links to all major sections" }), "\n", _jsx(_components.li, { children: "Four main content sections with unique anchor points" }), "\n", _jsx(_components.li, { children: "Descriptive content in each section that demonstrates the topic" }), "\n", _jsx(_components.li, { children: "Professional organization using proper heading hierarchy" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Estimated completion time: 10-15 minutes" }) }), "\n", _jsx(_components.h2, { children: "Step-by-Step Instructions" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the Document Structure" }), "\n", _jsx(_components.p, { children: "Set up your HTML document with proper structure:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create the basic HTML document foundation with DOCTYPE, html, head, and body elements" }), "\n", _jsx(_components.li, { children: "Add a descriptive page title that reflects the study guide content" }), "\n", _jsx(_components.li, { children: "Include a main heading (h1) that introduces your study guide topic" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your basic page structure."] }), "\n", _jsx(_components.h3, { children: "Step 2: Build the Table of Contents Section" }), "\n", _jsx(_components.p, { children: "Create a navigation section that will contain your internal links:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a secondary heading (h2) titled \"Table of Contents\"" }), "\n", _jsx(_components.li, { children: "Create an unordered list that will contain your navigation links" }), "\n", _jsx(_components.li, { children: "Plan for four main sections: \"HTML Fundamentals\", \"CSS Basics\", \"JavaScript Introduction\", and \"Best Practices\"" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about how to structure a list where each item will become a clickable link to a page section." }), "\n", _jsx(_components.p, { children: "Example structure pattern:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Table of Contents", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "2", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ul"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "#section-id", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Section Name", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "5", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your table of contents structure taking shape."] }), "\n", _jsx(_components.h3, { children: "Step 3: Create the First Content Section" }), "\n", _jsx(_components.p, { children: "Build your first main content section with proper anchor point:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a secondary heading (h2) for \"HTML Fundamentals\"" }), "\n", _jsx(_components.li, { children: "Give this heading a unique id attribute that matches what your table of contents will link to" }), "\n", _jsx(_components.li, { children: "Add 2-3 paragraphs of content explaining HTML basics" }), "\n", _jsx(_components.li, { children: "Remember that the id value should be descriptive and use hyphens instead of spaces" }), "\n"] }), "\n", _jsx(_components.p, { children: "Consider how to create an anchor point that links can target:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsx(_components.code, { className: "language-html code-highlight", children: _jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "descriptive-section-name", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Section Title", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your first content section."] }), "\n", _jsx(_components.h3, { children: "Step 4: Add the Remaining Content Sections" }), "\n", _jsx(_components.p, { children: "Create three more content sections following the same pattern:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "\"CSS Basics\" section with appropriate id and 2-3 paragraphs of content" }), "\n", _jsx(_components.li, { children: "\"JavaScript Introduction\" section with appropriate id and 2-3 paragraphs of content" }), "\n", _jsx(_components.li, { children: "\"Best Practices\" section with appropriate id and 2-3 paragraphs of content" }), "\n", _jsx(_components.li, { children: "Ensure each section has a unique id that describes its content" }), "\n"] }), "\n", _jsx(_components.p, { children: "Each section should follow the same structure as your first section, with descriptive content that explains the topic." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see all your content sections in place."] }), "\n", _jsx(_components.h3, { children: "Step 5: Connect Your Table of Contents" }), "\n", _jsx(_components.p, { children: "Update your table of contents to link to each section:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Modify each list item in your table of contents to include proper internal links" }), "\n", _jsx(_components.li, { children: "Use the hash symbol (#) followed by each section's id value" }), "\n", _jsx(_components.li, { children: "Ensure the link text matches the section headings exactly" }), "\n", _jsx(_components.li, { children: "Test that each link targets the correct section id" }), "\n"] }), "\n", _jsx(_components.p, { children: "Remember that internal links use the format:" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsx(_components.code, { className: "language-html code-highlight", children: _jsxs(_components.span, { className: "code-line line-number", line: "1", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "#section-id", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Link Text", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " and test each table of contents link to ensure it jumps to the correct section."] }), "\n", _jsx(_components.h3, { children: "Step 6: Add Content Context and Polish" }), "\n", _jsx(_components.p, { children: "Enhance your study guide with additional helpful elements:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a brief introductory paragraph after your main heading explaining what the study guide covers" }), "\n", _jsx(_components.li, { children: "Include a short description under \"Table of Contents\" explaining how to use the navigation" }), "\n", _jsx(_components.li, { children: "Ensure each content section has substantial, educational content (not just placeholder text)" }), "\n", _jsx(_components.li, { children: "Review that all your headings create a logical hierarchy" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete, polished study guide."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.h3, { children: "Structural Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Proper HTML document structure with DOCTYPE, html, head, and body" }), "\n", _jsx(_components.li, { children: "✅ Descriptive page title in the head section" }), "\n", _jsx(_components.li, { children: "✅ Main heading (h1) introducing the study guide" }), "\n", _jsx(_components.li, { children: "✅ Table of contents section with secondary heading (h2)" }), "\n", _jsx(_components.li, { children: "✅ Four main content sections, each with secondary headings (h2)" }), "\n", _jsx(_components.li, { children: "✅ Unordered list structure for the table of contents navigation" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Internal Linking Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Each content section heading has a unique id attribute" }), "\n", _jsx(_components.li, { children: "✅ Table of contents contains four internal links using hash (#) syntax" }), "\n", _jsx(_components.li, { children: "✅ All internal links target the correct section ids" }), "\n", _jsx(_components.li, { children: "✅ Link text in table of contents matches section headings" }), "\n", _jsx(_components.li, { children: "✅ ID values use lowercase letters and hyphens (no spaces)" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Each content section contains 2-3 paragraphs of relevant educational content" }), "\n", _jsx(_components.li, { children: "✅ Introductory paragraph explaining the study guide's purpose" }), "\n", _jsx(_components.li, { children: "✅ Context provided for how to use the table of contents" }), "\n", _jsx(_components.li, { children: "✅ All content is appropriate for a web development study guide" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Navigation Testing" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Click each table of contents link" }), " - Verify it jumps to the correct section"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Check smooth scrolling" }), " - Ensure the browser scrolls to the targeted content"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Verify link accuracy" }), " - Confirm each link targets the intended section"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Test link text clarity" }), " - Ensure link text clearly indicates the destination"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Structure Testing" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Review heading hierarchy" }), " - Confirm logical organization with h1 and h2 elements"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Check id uniqueness" }), " - Ensure no duplicate id values exist"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Validate list structure" }), " - Verify proper ul and li organization"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Confirm content quality" }), " - Check that each section has substantial, relevant content"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Functional Navigation" }), ": All table of contents links successfully jump to their target sections\n✅ ", _jsx(_components.strong, { children: "Professional Structure" }), ": Clear heading hierarchy and logical content organization\n✅ ", _jsx(_components.strong, { children: "Unique Anchors" }), ": Each content section has a unique, descriptive id attribute\n✅ ", _jsx(_components.strong, { children: "Quality Content" }), ": Each section contains educational content relevant to web development\n✅ ", _jsx(_components.strong, { children: "User-Friendly Design" }), ": Table of contents provides clear navigation context\n✅ ", _jsx(_components.strong, { children: "Technical Accuracy" }), ": All internal links use proper hash (#) syntax and target correct ids\n✅ ", _jsx(_components.strong, { children: "Accessibility" }), ": Link text is descriptive and matches section headings\n✅ ", _jsx(_components.strong, { children: "Complete Implementation" }), ": All four required sections are present and properly linked"] }), "\n", _jsx(_components.p, { children: "Your completed study guide should demonstrate professional internal navigation that makes long-form content easily accessible and user-friendly, just like the navigation systems found on major educational and documentation websites." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };