"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", input: "input", 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: Favorite Websites List" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsxs(_components.p, { children: ["You'll create a personal \"Favorite Websites List\" page that showcases your ability to create functional links using the anchor tag (", _jsx(_components.code, { children: "" }), ") and href attribute. This page will contain multiple clickable links organized in a clean, professional layout that demonstrates proper HTML structure and linking techniques."] }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "Creating a collection of favorite websites is perfect for practicing links because:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "You'll work with real websites you actually use and enjoy" }), "\n", _jsx(_components.li, { children: "Each link serves a genuine purpose and provides real value" }), "\n", _jsx(_components.li, { children: "You can immediately test your links to see them work" }), "\n", _jsx(_components.li, { children: "The project demonstrates practical web development skills" }), "\n", _jsx(_components.li, { children: "You'll create something useful that you can share with others" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your finished page will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A main heading introducing your website collection" }), "\n", _jsx(_components.li, { children: "Multiple sections organizing different types of websites" }), "\n", _jsx(_components.li, { children: "At least 5 clickable links to real websites" }), "\n", _jsx(_components.li, { children: "Descriptive text explaining what each link offers" }), "\n", _jsx(_components.li, { children: "Professional organization using headings and lists" }), "\n", _jsx(_components.li, { children: "Clean HTML structure that's easy to read and maintain" }), "\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 proper structure:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the standard DOCTYPE, html, head, and body elements" }), "\n", _jsx(_components.li, { children: "Add a descriptive title that will appear in the browser tab" }), "\n", _jsx(_components.li, { children: "Include a main heading (h1) that introduces your website collection" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your basic page structure before adding content."] }), "\n", _jsx(_components.h3, { children: "Step 2: Create Your First Website Link" }), "\n", _jsx(_components.p, { children: "Add your first clickable link to a website you use regularly:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Choose a website you genuinely visit and enjoy" }), "\n", _jsx(_components.li, { children: "Use the anchor tag with proper href attribute syntax" }), "\n", _jsx(_components.li, { children: "Write descriptive link text that clearly identifies the destination" }), "\n", _jsx(_components.li, { children: "Include the full URL with https:// protocol" }), "\n"] }), "\n", _jsx(_components.p, { children: "Example structure pattern:" }), "\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: "\"" }), "full-website-url", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Descriptive 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" }), " to test that your first link works correctly when clicked."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add Context and Organization" }), "\n", _jsx(_components.p, { children: "Enhance your page with better organization:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a second-level heading (h2) to introduce your links section" }), "\n", _jsx(_components.li, { children: "Include a paragraph explaining what types of websites you're sharing" }), "\n", _jsx(_components.li, { children: "Add 2-3 more links following the same pattern as your first link" }), "\n", _jsx(_components.li, { children: "Ensure each link has clear, descriptive text" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your organized content looks and test all links."] }), "\n", _jsx(_components.h3, { children: "Step 4: Create Categorized Sections" }), "\n", _jsx(_components.p, { children: "Organize your links into logical categories:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create at least two different categories (like \"Learning Sites\" and \"Entertainment\")" }), "\n", _jsx(_components.li, { children: "Use h2 headings to label each category" }), "\n", _jsx(_components.li, { children: "Add 2-3 links under each category" }), "\n", _jsx(_components.li, { children: "Include brief descriptions after each link explaining what users will find" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about categories like:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Educational or learning websites" }), "\n", _jsx(_components.li, { children: "News or information sites" }), "\n", _jsx(_components.li, { children: "Entertainment or hobby sites" }), "\n", _jsx(_components.li, { children: "Useful tools or utilities" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your categorized layout and verify all links function properly."] }), "\n", _jsx(_components.h3, { children: "Step 5: Enhance with Lists" }), "\n", _jsx(_components.p, { children: "Improve your organization using HTML lists:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Convert your link collections into unordered lists (ul and li)" }), "\n", _jsx(_components.li, { children: "Place each link inside its own list item" }), "\n", _jsx(_components.li, { children: "Add helpful descriptions after each link within the list items" }), "\n", _jsx(_components.li, { children: "Maintain proper nesting with links inside list items" }), "\n"] }), "\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 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: "2", 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: "\"" }), "website-url", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Website Name", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " - Brief description", _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: "3", 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 lists improve the visual organization of your links."] }), "\n", _jsx(_components.h3, { children: "Step 6: Add Final Polish" }), "\n", _jsx(_components.p, { children: "Complete your page with professional touches:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Review all your link text to ensure it's descriptive and clear" }), "\n", _jsx(_components.li, { children: "Add a concluding paragraph or section if desired" }), "\n", _jsx(_components.li, { children: "Verify that you have at least 5 working links total" }), "\n", _jsx(_components.li, { children: "Check that all headings create a logical hierarchy" }), "\n", _jsx(_components.li, { children: "Ensure proper HTML structure throughout" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " for a final review of your complete website list."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.h3, { children: "Structural Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Complete HTML document structure (DOCTYPE, html, head, body)" }), "\n", _jsx(_components.li, { children: "✅ Descriptive page title in the head section" }), "\n", _jsx(_components.li, { children: "✅ Main heading (h1) introducing the page purpose" }), "\n", _jsx(_components.li, { children: "✅ At least two section headings (h2) organizing content" }), "\n", _jsx(_components.li, { children: "✅ Minimum of 5 functional links using anchor tags" }), "\n", _jsx(_components.li, { children: "✅ Proper use of unordered lists (ul and li) for organization" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Link Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["✅ All links use proper anchor tag syntax: ", _jsx(_components.code, { children: "text" })] }), "\n", _jsx(_components.li, { children: "✅ All href attributes include full URLs with https:// protocol" }), "\n", _jsx(_components.li, { children: "✅ Link text is descriptive and clearly indicates the destination" }), "\n", _jsx(_components.li, { children: "✅ Links are organized into logical categories or sections" }), "\n", _jsx(_components.li, { children: "✅ Each link includes helpful context or description" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Links point to real, functional websites" }), "\n", _jsx(_components.li, { children: "✅ Website choices reflect genuine usefulness or interest" }), "\n", _jsx(_components.li, { children: "✅ Categories make logical sense and help organize content" }), "\n", _jsx(_components.li, { children: "✅ Descriptions provide value and context for each link" }), "\n", _jsx(_components.li, { children: "✅ Overall page serves a practical purpose" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Functionality Tests" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Link Testing" }), ": Click every link to verify it opens the correct website"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "URL Validation" }), ": Ensure all links include proper https:// protocol"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Browser Tab" }), ": Confirm your page title appears correctly in the browser tab"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Visual Layout" }), ": Check that headings and lists create clear organization"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Expected Results" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ All links should be clickable and lead to the intended websites" }), "\n", _jsx(_components.li, { children: "✅ Page should have clear visual hierarchy with headings and lists" }), "\n", _jsx(_components.li, { children: "✅ Content should be easy to scan and understand" }), "\n", _jsx(_components.li, { children: "✅ Links should open in the same browser tab (default behavior)" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Success Indicators" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Links change appearance when you hover over them (browser default styling)" }), "\n", _jsx(_components.li, { children: "Clicking links successfully navigates to the intended websites" }), "\n", _jsx(_components.li, { children: "Page structure is clean and professional-looking" }), "\n", _jsx(_components.li, { children: "Content is organized logically and easy to follow" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsx(_components.h3, { children: "✅ Technical Achievement" }), "\n", _jsxs(_components.ul, { className: "contains-task-list", children: ["\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Created functional links using anchor tags and href attributes"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Used proper HTML syntax for all elements"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Organized content with headings and lists"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Included minimum of 5 working links"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Applied proper document structure throughout"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "✅ Content Quality" }), "\n", _jsxs(_components.ul, { className: "contains-task-list", children: ["\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Selected genuinely useful or interesting websites"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Wrote clear, descriptive link text for all links"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Organized links into logical categories"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Provided helpful context and descriptions"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Created a page that serves a practical purpose"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "✅ Professional Presentation" }), "\n", _jsxs(_components.ul, { className: "contains-task-list", children: ["\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Clean, readable HTML structure"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Logical content organization and flow"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Consistent formatting and style"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Professional appearance suitable for sharing"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "All links tested and confirmed working"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Troubleshooting Common Issues" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Links don't work when clicked:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Check that href includes full URL with https://" }), "\n", _jsx(_components.li, { children: "Verify there are no spaces in the URL" }), "\n", _jsx(_components.li, { children: "Ensure href value is wrapped in quotes" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Links don't look clickable:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Confirm you have both opening ", _jsx(_components.code, { children: "" }), " and closing ", _jsx(_components.code, { children: "" }), " tags"] }), "\n", _jsx(_components.li, { children: "Check that link text is between the anchor tags" }), "\n", _jsx(_components.li, { children: "Verify proper tag syntax with angle brackets" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Page looks disorganized:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use headings (h1, h2) to create clear sections" }), "\n", _jsx(_components.li, { children: "Organize related links using lists (ul and li)" }), "\n", _jsx(_components.li, { children: "Add paragraphs to provide context and explanation" }), "\n"] }), "\n", _jsx(_components.p, { children: "Remember: The goal is to create a functional, well-organized collection of links that demonstrates your understanding of anchor tags, href attributes, and HTML structure. Focus on creating something useful that you'd actually want to use and share!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };