"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", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { children: "Practice Instructions: Complete Personal Website" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "Create a comprehensive personal website that showcases all your HTML skills in one professional, cohesive project. Your website will include an introduction, skills display, project showcase, and contact form - all organized with semantic HTML structure and proper accessibility features." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "This final project demonstrates your mastery of HTML fundamentals by creating a real-world website type that professionals use to showcase their skills and connect with opportunities. Every element you'll use has been thoroughly practiced in previous lessons, but now you'll combine them into a complete, professional presentation." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your personal website will feature:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional header" }), " with your name and navigation"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "About section" }), " with personal introduction and profile image"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Skills table" }), " displaying your technical abilities"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Projects section" }), " showcasing your accomplishments"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Contact form" }), " for professional inquiries"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Sidebar" }), " with quick information and links"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Footer" }), " with professional details"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Step-by-Step Instructions" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the Document Foundation" }), "\n", _jsx(_components.p, { children: "Set up your HTML document with proper meta information for a professional website:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use HTML5 document structure with proper DOCTYPE" }), "\n", _jsx(_components.li, { children: "Add essential meta tags for character encoding and mobile compatibility" }), "\n", _jsx(_components.li, { children: "Create a descriptive page title that includes your name and \"Portfolio\" or \"Personal Website\"" }), "\n", _jsx(_components.li, { children: "Add a meta description that summarizes what visitors will find on your site" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm your document structure is set up correctly."] }), "\n", _jsx(_components.h3, { children: "Step 2: Build the Header Section" }), "\n", _jsx(_components.p, { children: "Create a professional header that introduces you and provides navigation:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic header element to contain your site introduction" }), "\n", _jsx(_components.li, { children: "Add your name as the main page heading (this should be the primary heading for the entire page)" }), "\n", _jsx(_components.li, { children: "Include a brief professional tagline or description paragraph" }), "\n", _jsx(_components.li, { children: "Create navigation using semantic nav element with an unordered list" }), "\n", _jsx(_components.li, { children: "Include navigation links for: About, Skills, Projects, and Contact (use internal links that will connect to sections you'll create)" }), "\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 professional header and navigation structure."] }), "\n", _jsx(_components.h3, { children: "Step 3: Create the Main Content Container" }), "\n", _jsx(_components.p, { children: "Set up the main content area that will hold your primary website sections:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic main element to contain all primary page content" }), "\n", _jsx(_components.li, { children: "This element should wrap around all your main sections but not include the header, navigation, or footer" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm your main content structure is properly established."] }), "\n", _jsx(_components.h3, { children: "Step 4: Build the About Section" }), "\n", _jsx(_components.p, { children: "Create an about section that introduces you professionally:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use a semantic section element with an appropriate id for navigation linking" }), "\n", _jsx(_components.li, { children: "Add a section heading that describes this area" }), "\n", _jsx(_components.li, { children: "Include an article element containing your personal introduction" }), "\n", _jsx(_components.li, { children: "Add a professional profile image with descriptive alt text" }), "\n", _jsx(_components.li, { children: "Write 2-3 paragraphs about your background, interests, or professional goals" }), "\n", _jsx(_components.li, { children: "Use text formatting elements like strong or em where appropriate for emphasis" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about what information would be most relevant for someone visiting your professional website." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your about section displays with text and image content."] }), "\n", _jsx(_components.h3, { children: "Step 5: Create the Skills Table" }), "\n", _jsx(_components.p, { children: "Build a table that displays your technical skills in an organized format:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use a semantic section element with appropriate id for navigation" }), "\n", _jsx(_components.li, { children: "Add a section heading for your skills area" }), "\n", _jsx(_components.li, { children: "Create a table with proper semantic structure (table, caption, thead, tbody)" }), "\n", _jsx(_components.li, { children: "Include a descriptive table caption" }), "\n", _jsx(_components.li, { children: "Design table headers for: Skill Category, Specific Skills, and Experience Level" }), "\n", _jsx(_components.li, { children: "Add 4-5 rows of skills data covering different categories (like Web Development, Design Tools, Programming Languages, etc.)" }), "\n", _jsx(_components.li, { children: "Use appropriate table headers and data cells" }), "\n"] }), "\n", _jsx(_components.p, { children: "Example table 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: "<" }), "table"] }), _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: "<" }), "caption"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: " Your Table Description\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: "<" }), "thead"] }), _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: "<" }), "tr"] }), _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: "<" }), "th"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Header 1", _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: "<" }), "th"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Header 2", _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"] }), _jsxs(_components.span, { className: "code-line line-number", line: "11", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tbody"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "12", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "tr"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line line-number", line: "13", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Data 1", _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: "14", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "td"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Data 2", _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: "15", 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: "16", 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: "17", 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 skills displayed in a professional table format."] }), "\n", _jsx(_components.h3, { children: "Step 6: Build the Projects Section" }), "\n", _jsx(_components.p, { children: "Create a section showcasing your projects or accomplishments:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use a semantic section element with appropriate id for navigation" }), "\n", _jsx(_components.li, { children: "Add a section heading for your projects area" }), "\n", _jsx(_components.li, { children: "Create an unordered list of projects or accomplishments" }), "\n", _jsx(_components.li, { children: "Include 3-4 projects with descriptive names" }), "\n", _jsx(_components.li, { children: "For each project, add a brief description of what it involved or accomplished" }), "\n", _jsx(_components.li, { children: "Consider using nested lists if you want to include specific details or technologies used" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your projects are organized and displayed."] }), "\n", _jsx(_components.h3, { children: "Step 7: Create the Contact Form" }), "\n", _jsx(_components.p, { children: "Build a professional contact form for inquiries:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use a semantic section element with appropriate id for navigation" }), "\n", _jsx(_components.li, { children: "Add a section heading for your contact area" }), "\n", _jsx(_components.li, { children: "Create a form element to contain all form controls" }), "\n", _jsxs(_components.li, { children: ["Include these form fields with proper labels:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Name (text input)" }), "\n", _jsx(_components.li, { children: "Email address (email input)" }), "\n", _jsx(_components.li, { children: "Subject (text input)" }), "\n", _jsx(_components.li, { children: "Message (textarea for longer content)" }), "\n"] }), "\n"] }), "\n", _jsx(_components.li, { children: "Add a submit button with descriptive text like \"Send Message\"" }), "\n", _jsx(_components.li, { children: "Ensure all form controls are properly labeled and connected" }), "\n"] }), "\n", _jsx(_components.p, { children: "Example form 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: "<" }), "form"] }), _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: "<" }), "label"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "for" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "input-id", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Label 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: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _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: "\"" }), "input-id", _jsx(_components.span, { className: "token punctuation", 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 your contact form's layout and accessibility."] }), "\n", _jsx(_components.h3, { children: "Step 8: Add the Sidebar" }), "\n", _jsx(_components.p, { children: "Create a sidebar with supporting information:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic aside element to contain supporting content" }), "\n", _jsx(_components.li, { children: "Add a heading for your sidebar content" }), "\n", _jsx(_components.li, { children: "Include quick contact information (email, phone, or social links)" }), "\n", _jsx(_components.li, { children: "Add a section with important dates, availability, or other relevant quick facts" }), "\n", _jsx(_components.li, { children: "Use appropriate text formatting and list elements to organize the information" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your sidebar complements the main content."] }), "\n", _jsx(_components.h3, { children: "Step 9: Build the Footer" }), "\n", _jsx(_components.p, { children: "Create a professional footer to conclude your website:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic footer element to contain concluding information" }), "\n", _jsx(_components.li, { children: "Include copyright information with the current year" }), "\n", _jsx(_components.li, { children: "Add your location or other professional details" }), "\n", _jsx(_components.li, { children: "Consider including a brief statement about your professional focus or availability" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete website structure from header to footer."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Personal Information" }), ": Use your real name or create a fictional professional persona"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional Tone" }), ": All content should sound professional and appropriate for a portfolio website"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Complete Sections" }), ": Every section should have meaningful content, not placeholder text"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Realistic Skills" }), ": Include skills that make sense for your chosen professional focus"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Technical Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Semantic Structure" }), ": Use all major semantic elements (header, nav, main, section, article, aside, footer)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Proper Headings" }), ": Maintain logical heading hierarchy (h1, h2, h3) throughout"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Accessible Forms" }), ": All form inputs properly labeled and connected"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Image Accessibility" }), ": All images include descriptive alt text"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Valid HTML" }), ": Clean, properly nested HTML structure"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Meta Information" }), ": Include essential meta tags for mobile compatibility and SEO"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Navigation Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Internal Links" }), ": Navigation links should connect to appropriate page sections"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Descriptive Link Text" }), ": All links use clear, meaningful text"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Logical Flow" }), ": Content organization follows a logical progression"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Visual Testing" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Header Impact" }), ": Does your header create a strong professional first impression?"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Content Organization" }), ": Can visitors easily find and read different types of information?"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Form Usability" }), ": Is your contact form easy to understand and complete?"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional Appearance" }), ": Does the overall site look organized and professional?"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Accessibility Testing" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Keyboard Navigation" }), ": Can you navigate through all links and form fields using only the Tab key?"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Screen Reader Simulation" }), ": Do headings create a logical document outline when read in sequence?"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Form Labels" }), ": Can you click on any label text to focus its associated form field?"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Image Context" }), ": Do your alt text descriptions provide meaningful information about each image?"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Technical Testing" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Link Functionality" }), ": Do all navigation links jump to the correct page sections?"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Form Structure" }), ": Are all form elements properly labeled and organized?"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Semantic Meaning" }), ": Does your HTML structure communicate the content's meaning and organization?"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Complete HTML Structure" }), ": Website includes all required semantic elements and sections"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Professional Content" }), ": All sections contain meaningful, professional-quality content"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Accessible Design" }), ": Forms, images, and navigation work for all users"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Technical Quality" }), ": HTML is clean, valid, and properly organized"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Mobile Compatibility" }), ": Meta tags ensure the site works on mobile devices"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Navigation Functionality" }), ": All internal links connect to appropriate page sections"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Professional Presentation" }), ": Website creates a strong, organized professional impression"] }), "\n", _jsx(_components.p, { children: "Your completed personal website should demonstrate mastery of all HTML fundamentals while creating something you'd be proud to show as an example of your web development skills." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };