"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: Information Page Layout" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "You'll create a complete information page for a community center that demonstrates professional page layout using navigation and sidebar elements. The page will include a main navigation menu, primary content about the center's programs, and a sidebar with helpful supporting information like hours and contact details." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "This project brings together all the semantic elements you've learned to create a realistic, professional web page structure. You'll practice organizing content in a way that helps users find information quickly while making your page accessible to everyone, including people using screen readers." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your community center page will feature:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A semantic header with the center's name and tagline" }), "\n", _jsx(_components.li, { children: "A navigation menu with links to main sections" }), "\n", _jsx(_components.li, { children: "Primary content about programs and services" }), "\n", _jsx(_components.li, { children: "A sidebar with hours, contact information, and quick links" }), "\n", _jsx(_components.li, { children: "A footer with additional contact details" }), "\n"] }), "\n", _jsx(_components.p, { children: "This structure demonstrates how real websites organize information to help users navigate and find what they need efficiently." }), "\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 semantic foundation:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create a complete HTML document with head and body sections" }), "\n", _jsx(_components.li, { children: "Add a descriptive page title that includes \"Community Center\"" }), "\n", _jsx(_components.li, { children: "Build the basic semantic layout using header, main, and footer elements" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your basic page structure taking shape."] }), "\n", _jsx(_components.h3, { children: "Step 2: Build the Header Section" }), "\n", _jsx(_components.p, { children: "Create a welcoming header that introduces the community center:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Add the center name \"Riverside Community Center\" as the main heading" }), "\n", _jsx(_components.li, { children: "Include a tagline: \"Building stronger communities together\"" }), "\n", _jsx(_components.li, { children: "Use semantic heading hierarchy appropriately" }), "\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: "<" }), "header"] }), _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: "<" }), "main-heading"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Center Name", _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: "<" }), "tagline"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Descriptive tagline", _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 see how your header introduces the page."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add Navigation Menu" }), "\n", _jsx(_components.p, { children: "Create a semantic navigation section with links to main areas:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the appropriate semantic element for site navigation" }), "\n", _jsxs(_components.li, { children: ["Create a list-based menu structure with these sections:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "\"Programs\" (linking to #programs)" }), "\n", _jsx(_components.li, { children: "\"Events\" (linking to #events)" }), "\n", _jsx(_components.li, { children: "\"Membership\" (linking to #membership)" }), "\n", _jsx(_components.li, { children: "\"Contact\" (linking to #contact)" }), "\n"] }), "\n"] }), "\n", _jsx(_components.li, { children: "Organize navigation links in a logical, accessible way" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about which semantic element is specifically designed for navigation menus." }), "\n", _jsx(_components.p, { children: "Example navigation 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: "<" }), "navigation-element"] }), _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: "<" }), "list-container"] }), _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: "<" }), "list-item"] }), _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: "<" }), "link"] }), _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 navigation menu and test the link structure."] }), "\n", _jsx(_components.h3, { children: "Step 4: Create the Main Content Area" }), "\n", _jsx(_components.p, { children: "Build the primary content section about community programs:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic element designed for main page content" }), "\n", _jsx(_components.li, { children: "Create an article about \"Our Community Programs\"" }), "\n", _jsxs(_components.li, { children: ["Include two sections within the article:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "\"Youth Programs\" - describing activities for children and teens" }), "\n", _jsx(_components.li, { children: "\"Adult Services\" - describing programs for adults" }), "\n"] }), "\n"] }), "\n", _jsx(_components.li, { children: "Add descriptive content for each program type" }), "\n"] }), "\n", _jsx(_components.p, { children: "Content to include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Youth Programs: \"After-school tutoring, sports leagues, and arts and crafts classes for ages 5-17.\"" }), "\n", _jsx(_components.li, { children: "Adult Services: \"Job training workshops, fitness classes, and social events for community members.\"" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your main content is organized and structured."] }), "\n", _jsx(_components.h3, { children: "Step 5: Add Sidebar Content" }), "\n", _jsx(_components.p, { children: "Create a sidebar with supporting information using the appropriate semantic element:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic element designed for supporting/sidebar content" }), "\n", _jsxs(_components.li, { children: ["Include three sections in your sidebar:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "\"Hours\" with operating schedule" }), "\n", _jsx(_components.li, { children: "\"Contact Info\" with phone and address" }), "\n", _jsx(_components.li, { children: "\"Quick Links\" with helpful links" }), "\n"] }), "\n"] }), "\n", _jsx(_components.li, { children: "Organize information to be easily scannable" }), "\n"] }), "\n", _jsx(_components.p, { children: "Sidebar content to include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Hours: Monday-Friday 8am-9pm, Saturday 9am-6pm, Sunday 12pm-5pm" }), "\n", _jsx(_components.li, { children: "Phone: (555) 123-4567" }), "\n", _jsx(_components.li, { children: "Address: 123 Community Lane" }), "\n", _jsx(_components.li, { children: "Quick Links: \"Register for Programs\", \"Volunteer Opportunities\", \"Facility Rental\"" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about which semantic element represents content that supports but is separate from the main content." }), "\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 6: Complete the Footer" }), "\n", _jsx(_components.p, { children: "Add a footer with additional contact and organizational information:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Include the center's full contact information" }), "\n", _jsx(_components.li, { children: "Add a copyright or organizational statement" }), "\n", _jsx(_components.li, { children: "Use appropriate semantic structure for footer content" }), "\n"] }), "\n", _jsx(_components.p, { children: "Footer content: \"Riverside Community Center - Serving our neighborhood since 1985 - (555) 123-4567\"" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete page layout with all semantic elements working together."] }), "\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 with proper DOCTYPE and structure" }), "\n", _jsx(_components.li, { children: "✅ Semantic header with center name and tagline" }), "\n", _jsx(_components.li, { children: "✅ Navigation menu using appropriate semantic element" }), "\n", _jsx(_components.li, { children: "✅ Main content area with article and sections" }), "\n", _jsx(_components.li, { children: "✅ Sidebar using appropriate semantic element for supporting content" }), "\n", _jsx(_components.li, { children: "✅ Footer with contact information" }), "\n", _jsx(_components.li, { children: "✅ All navigation links use proper anchor syntax" }), "\n", _jsx(_components.li, { children: "✅ Content is organized logically and accessibly" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Page title includes \"Community Center\"" }), "\n", _jsx(_components.li, { children: "✅ Navigation includes all four specified sections" }), "\n", _jsx(_components.li, { children: "✅ Main content describes both youth and adult programs" }), "\n", _jsx(_components.li, { children: "✅ Sidebar includes hours, contact info, and quick links" }), "\n", _jsx(_components.li, { children: "✅ All content is realistic and appropriate for a community center" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Accessibility Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Navigation uses list structure for screen reader compatibility" }), "\n", _jsx(_components.li, { children: "✅ All sections have appropriate headings" }), "\n", _jsx(_components.li, { children: "✅ Semantic elements are used correctly for their intended purpose" }), "\n", _jsx(_components.li, { children: "✅ Content hierarchy is clear and logical" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Visual Layout Test" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " and verify:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Header clearly introduces the community center" }), "\n", _jsx(_components.li, { children: "Navigation menu is easily identifiable" }), "\n", _jsx(_components.li, { children: "Main content is the primary focus of the page" }), "\n", _jsx(_components.li, { children: "Sidebar information is visually separate but related" }), "\n", _jsx(_components.li, { children: "Footer provides concluding information" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Navigation Test" }), "\n", _jsx(_components.p, { children: "Test each navigation link:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Links should be properly formatted with href attributes" }), "\n", _jsx(_components.li, { children: "Link text should be descriptive and clear" }), "\n", _jsx(_components.li, { children: "Navigation should be organized in a logical order" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Organization Test" }), "\n", _jsx(_components.p, { children: "Verify content structure:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Each semantic element serves its intended purpose" }), "\n", _jsx(_components.li, { children: "Information is organized logically within each section" }), "\n", _jsx(_components.li, { children: "Supporting information enhances rather than distracts from main content" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Complete Semantic Structure" }), ": Page uses header, nav, main, aside, and footer elements appropriately"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Functional Navigation" }), ": Navigation menu uses proper semantic element and list structure"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Organized Main Content" }), ": Primary content is structured with article and section elements"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Effective Sidebar" }), ": Supporting information is contained in appropriate semantic element"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Professional Layout" }), ": All elements work together to create a cohesive, accessible page structure"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Realistic Content" }), ": All text content is appropriate and realistic for a community center website"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Accessibility Ready" }), ": Structure supports screen readers and other assistive technologies"] }), "\n", _jsx(_components.p, { children: "When you've completed all requirements, you'll have created a professional community center page that demonstrates proper semantic HTML structure and accessibility best practices!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };