"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: Personal Homepage with Navigation" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "A complete personal homepage that showcases your interests and demonstrates professional HTML structure. Your page will include internal navigation that jumps to different sections, external links to websites you recommend, and clear, accessible content organization." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "Personal homepages are one of the most common and practical types of websites. This project lets you create something meaningful while practicing all the HTML concepts you've learned through Module 4, including document structure, text content, lists, and linking." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your homepage will feature:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A page header with your name and navigation menu" }), "\n", _jsx(_components.li, { children: "Multiple content sections with clear headings" }), "\n", _jsx(_components.li, { children: "Internal links that jump to different page sections" }), "\n", _jsx(_components.li, { children: "External links to websites you find interesting" }), "\n", _jsx(_components.li, { children: "Lists to organize your interests and information" }), "\n", _jsx(_components.li, { children: "Professional, accessible HTML structure throughout" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Step-by-Step Instructions" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the Basic Document Structure" }), "\n", _jsx(_components.p, { children: "Set up your HTML document with the proper foundation:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create the complete HTML document structure with doctype, html, head, and body elements" }), "\n", _jsx(_components.li, { children: "Add a descriptive page title that will appear in the browser tab" }), "\n", _jsx(_components.li, { children: "Include your name in the title (like \"Alex's Personal Homepage\")" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm your basic structure is working and the title appears correctly in the browser tab."] }), "\n", _jsx(_components.h3, { children: "Step 2: Build the Page Header and Navigation" }), "\n", _jsx(_components.p, { children: "Create the top section of your page with your name and navigation menu:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a main heading with your name as the page header" }), "\n", _jsx(_components.li, { children: "Create a navigation menu using an unordered list" }), "\n", _jsx(_components.li, { children: "Include 4-5 navigation links that will jump to different sections of your page" }), "\n", _jsx(_components.li, { children: "Use descriptive link text like \"About Me\", \"My Interests\", \"Favorite Links\", and \"Contact\"" }), "\n", _jsx(_components.li, { children: "Remember to use the internal linking pattern you learned for navigation" }), "\n"] }), "\n", _jsx(_components.p, { children: "Example navigation 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: "<" }), "nav"] }), _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: [" ", _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 your header and navigation menu. The links won't work yet since you haven't created the sections they point to."] }), "\n", _jsx(_components.h3, { children: "Step 3: Create the Introduction Section" }), "\n", _jsx(_components.p, { children: "Add a welcoming introduction section:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create a section with a clear heading (this should match one of your navigation links)" }), "\n", _jsx(_components.li, { children: "Add 2-3 paragraphs introducing yourself" }), "\n", _jsx(_components.li, { children: "Include information about who you are and what visitors can expect to find on your page" }), "\n", _jsx(_components.li, { children: "Use text emphasis (strong or em) to highlight important points about yourself" }), "\n", _jsx(_components.li, { children: "Don't forget to add the id attribute that matches your navigation link" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your introduction section and test that your navigation link now jumps to this section when clicked."] }), "\n", _jsx(_components.h3, { children: "Step 4: Build an About or Interests Section" }), "\n", _jsx(_components.p, { children: "Create a detailed section about your background or interests:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add another section with a descriptive heading and matching id attribute" }), "\n", _jsx(_components.li, { children: "Write 2-3 paragraphs about your background, hobbies, or current interests" }), "\n", _jsx(_components.li, { children: "Use an unordered list to organize 4-6 specific interests or activities" }), "\n", _jsx(_components.li, { children: "Include brief descriptions for each list item to make them more engaging" }), "\n", _jsx(_components.li, { children: "Consider using text emphasis to highlight key terms or activities" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm this section displays properly and your navigation link works correctly."] }), "\n", _jsx(_components.h3, { children: "Step 5: Add External Links Section" }), "\n", _jsx(_components.p, { children: "Create a section featuring links to external websites:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add a section for sharing websites you find interesting or useful" }), "\n", _jsx(_components.li, { children: "Include 3-5 external links to real websites (educational sites, news sources, hobby sites, etc.)" }), "\n", _jsx(_components.li, { children: "Write descriptive link text that clearly explains what each site offers" }), "\n", _jsx(_components.li, { children: "Use the target attribute appropriately for external links" }), "\n", _jsx(_components.li, { children: "Organize the links using either a list or paragraphs with clear context" }), "\n"] }), "\n", _jsx(_components.p, { children: "Example external link 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: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: " For learning web development, I recommend\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: "<" }), "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 attr-name", children: "target" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "_blank", _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"] }), _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: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to test that your external links open correctly and lead to the intended websites."] }), "\n", _jsx(_components.h3, { children: "Step 6: Create a Contact or Final Section" }), "\n", _jsx(_components.p, { children: "Add a concluding section to your homepage:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create a final section with appropriate heading and id" }), "\n", _jsx(_components.li, { children: "Include information about how people might connect with you or learn more" }), "\n", _jsx(_components.li, { children: "This could be social media links, email contact, or simply a closing message" }), "\n", _jsx(_components.li, { children: "Keep any contact information appropriate for a public webpage" }), "\n", _jsx(_components.li, { children: "Consider adding a brief statement about your goals or what you're currently learning" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to ensure your complete page flows well and all navigation links work properly."] }), "\n", _jsx(_components.h3, { children: "Step 7: Review and Polish Your Content" }), "\n", _jsx(_components.p, { children: "Review your complete homepage for quality and accessibility:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Check that all navigation links jump to the correct sections" }), "\n", _jsx(_components.li, { children: "Verify that external links open in new tabs and lead to appropriate sites" }), "\n", _jsx(_components.li, { children: "Ensure all link text is descriptive and makes sense out of context" }), "\n", _jsx(_components.li, { children: "Confirm your content is well-organized with clear headings and logical flow" }), "\n", _jsx(_components.li, { children: "Test that your page tells a cohesive story about who you are" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to experience your homepage as a visitor would and make any final adjustments."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.p, { children: "Your completed homepage must include:" }), "\n", _jsx(_components.h3, { children: "Technical Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Proper HTML document structure (doctype, html, head, body, title)" }), "\n", _jsx(_components.li, { children: "✅ At least 4 distinct content sections with clear headings" }), "\n", _jsx(_components.li, { children: "✅ Navigation menu with internal links to all major sections" }), "\n", _jsx(_components.li, { children: "✅ All navigation links must work correctly (jump to proper sections)" }), "\n", _jsx(_components.li, { children: "✅ At least 3 external links with descriptive text and appropriate target attributes" }), "\n", _jsx(_components.li, { children: "✅ At least one unordered list organizing related information" }), "\n", _jsx(_components.li, { children: "✅ Proper use of id attributes for internal linking" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Personal introduction explaining who you are" }), "\n", _jsx(_components.li, { children: "✅ Detailed section about your interests, hobbies, or background" }), "\n", _jsx(_components.li, { children: "✅ External links to real, appropriate websites with context" }), "\n", _jsx(_components.li, { children: "✅ Professional, welcoming tone throughout" }), "\n", _jsx(_components.li, { children: "✅ Content that represents you authentically while remaining appropriate for a public webpage" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Accessibility Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ All links have descriptive text that makes sense out of context" }), "\n", _jsx(_components.li, { children: "✅ Headings create a logical document structure" }), "\n", _jsx(_components.li, { children: "✅ Content is organized clearly with proper HTML elements" }), "\n", _jsx(_components.li, { children: "✅ Page has a meaningful title that describes its purpose" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.p, { children: "Test your homepage by:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Navigation Testing" }), ": Click each navigation link to ensure it jumps to the correct section"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "External Link Testing" }), ": Click external links to verify they open properly and lead to intended sites"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Content Flow" }), ": Read through your page to ensure it tells a cohesive story about you"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Accessibility Check" }), ": Verify all link text is descriptive and clear"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional Review" }), ": Ensure content is appropriate and represents you well"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsx(_components.p, { children: "Your homepage is complete when:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ All navigation links work correctly and jump to appropriate sections" }), "\n", _jsx(_components.li, { children: "✅ External links open in new tabs and lead to real, relevant websites" }), "\n", _jsx(_components.li, { children: "✅ Content is well-organized with clear headings and logical structure" }), "\n", _jsx(_components.li, { children: "✅ Link text is descriptive and accessible" }), "\n", _jsx(_components.li, { children: "✅ Page provides a welcoming introduction to who you are" }), "\n", _jsx(_components.li, { children: "✅ HTML structure demonstrates all concepts learned in Modules 1-4" }), "\n", _jsx(_components.li, { children: "✅ Page could realistically serve as your actual personal homepage" }), "\n"] }), "\n", _jsx(_components.p, { children: "Remember: This is your opportunity to create something personal and meaningful while demonstrating your HTML skills. Focus on building a page that represents you while showcasing everything you've learned about web page structure and navigation." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };