"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { br: "br", code: "code", h1: "h1", h2: "h2", h3: "h3", li: "li", 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 Creation" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "Create a comprehensive study guide for a school subject using all three types of HTML lists. Your study guide will demonstrate proper information organization and help students learn effectively." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "Study guides are essential learning tools that help students organize and review information. By creating one with HTML lists, you'll practice choosing the right list type for different kinds of information while building something genuinely useful." }), "\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: "Multiple sections with different types of information" }), "\n", _jsx(_components.li, { children: "Unordered lists for key points and tips" }), "\n", _jsx(_components.li, { children: "Ordered lists for step-by-step processes" }), "\n", _jsx(_components.li, { children: "Definition lists for vocabulary and concepts" }), "\n", _jsx(_components.li, { children: "Nested lists to show information relationships" }), "\n", _jsx(_components.li, { children: "Clear headings to organize content sections" }), "\n"] }), "\n", _jsxs(_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: Set Up Your Document Structure" }), "\n", _jsx(_components.p, { children: "Create the basic HTML document with a clear title and main heading for your study guide. Choose a school subject you're familiar with (like Science, History, Math, or English)." }), "\n", _jsx(_components.p, { children: "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 doctype", 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: "<" }), "html"] }), _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: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Your Subject Study Guide", _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: "5", 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: "6", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "7", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Study Guide Title", _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: "8", 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: "9", 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 basic document structure."] }), "\n", _jsx(_components.h3, { children: "Step 2: Create a Key Points Section" }), "\n", _jsx(_components.p, { children: "Add a section with important facts or tips that students should remember. Use an unordered list since these points don't need to be in any specific order." }), "\n", _jsx(_components.p, { children: "Think about:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "What are the most important things to remember about this subject?" }), "\n", _jsx(_components.li, { children: "What tips would help someone studying this topic?" }), "\n", _jsx(_components.li, { children: "What key facts should students know?" }), "\n"] }), "\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: ">" })] }), "Section Title", _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: ">" })] }), "Important point", _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: [" ", _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: ">" })] }), "Another key fact", _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: "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 how your key points display with bullet points."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add a Step-by-Step Process Section" }), "\n", _jsx(_components.p, { children: "Create a section that shows a process or procedure that must be done in a specific order. Use an ordered list to show the sequence clearly." }), "\n", _jsx(_components.p, { children: "Consider:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "What processes or procedures are important in this subject?" }), "\n", _jsx(_components.li, { children: "What steps must be followed in order?" }), "\n", _jsx(_components.li, { children: "What would help students remember the correct sequence?" }), "\n"] }), "\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: ">" })] }), "Process Title", _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: "<" }), "ol"] }), _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: ">" })] }), "First step", _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: [" ", _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: ">" })] }), "Second step", _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: "5", 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: ">" })] }), "Final step", _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: "6", 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 how the numbered list shows the sequence."] }), "\n", _jsx(_components.h3, { children: "Step 4: Build a Vocabulary Section" }), "\n", _jsx(_components.p, { children: "Add a section with important terms and their definitions using a definition list. This creates a clear connection between terms and their meanings." }), "\n", _jsx(_components.p, { children: "Think about:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "What key terms do students need to know?" }), "\n", _jsx(_components.li, { children: "How can you explain these terms clearly?" }), "\n", _jsx(_components.li, { children: "What definitions would be most helpful?" }), "\n"] }), "\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: ">" })] }), "Important Terms", _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: "<" }), "dl"] }), _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: "<" }), "dt"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Term", _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: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "dd"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Clear definition", _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: "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 how definition lists format terms and definitions."] }), "\n", _jsx(_components.h3, { children: "Step 5: Create a Complex Information Section" }), "\n", _jsx(_components.p, { children: "Add a section that uses nested lists to show how information relates to each other. This might be topics with subtopics, or main ideas with supporting details." }), "\n", _jsx(_components.p, { children: "Consider:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "What information has natural subcategories?" }), "\n", _jsx(_components.li, { children: "How can you show relationships between different pieces of information?" }), "\n", _jsx(_components.li, { children: "What would help students understand the hierarchy?" }), "\n"] }), "\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: ">" })] }), "Main Topics", _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: ">" })] }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: " Main topic\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: "<" }), "ul"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "6", 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: ">" })] }), "Subtopic detail", _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: "7", 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: ">" })] }), "Another detail", _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: "8", 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: "9", 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: "10", 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 how nested lists show information relationships."] }), "\n", _jsx(_components.h3, { children: "Step 6: Add Study Tips Section" }), "\n", _jsx(_components.p, { children: "Create a final section with study strategies or exam tips. Use the most appropriate list type for this information." }), "\n", _jsx(_components.p, { children: "Think about:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "What study strategies work best for this subject?" }), "\n", _jsx(_components.li, { children: "What tips would help students prepare for tests?" }), "\n", _jsx(_components.li, { children: "Should these tips be in any particular order?" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete study guide."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.p, { children: "Your study guide must include:" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Document Structure" }), ": Proper HTML document with title and main heading", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Unordered List" }), ": At least one section using ", _jsx(_components.code, { children: "ul" }), " and ", _jsx(_components.code, { children: "li" }), " for unordered information", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Ordered List" }), ": At least one section using ", _jsx(_components.code, { children: "ol" }), " and ", _jsx(_components.code, { children: "li" }), " for sequential information", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Definition List" }), ": At least one section using ", _jsx(_components.code, { children: "dl" }), ", ", _jsx(_components.code, { children: "dt" }), ", and ", _jsx(_components.code, { children: "dd" }), " for terms and definitions", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Nested Lists" }), ": At least one example of lists within lists", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Clear Headings" }), ": Descriptive ", _jsx(_components.code, { children: "h2" }), " headings for each section", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Appropriate Content" }), ": Information that would actually help someone study the subject"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Visual Organization Test" }), ": Does each section use the most appropriate list type for its content?"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Content Clarity Test" }), ": Would this study guide actually help someone learn about the subject?"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Structure Test" }), ": Are headings clear and is information logically organized?"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Nesting Test" }), ": Do nested lists show clear relationships between main topics and subtopics?"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsx(_components.p, { children: "Your study guide is successful when:" }), "\n", _jsxs(_components.p, { children: ["✅ You've used all three types of HTML lists appropriately", _jsx(_components.br, {}), "\n", "✅ Each list type matches the kind of information it contains", _jsx(_components.br, {}), "\n", "✅ Nested lists show clear information relationships", _jsx(_components.br, {}), "\n", "✅ The content is organized logically with clear headings", _jsx(_components.br, {}), "\n", "✅ The study guide would be genuinely helpful for learning", _jsx(_components.br, {}), "\n", "✅ All HTML syntax is correct and displays properly in the browser"] }), "\n", _jsx(_components.p, { children: "Remember: The goal is to choose the right list type for each kind of information, not just to use every type of list. Think about what would make the most sense for someone trying to learn from your study guide!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };