"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", 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: Community Center Website" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "A complete community center website that demonstrates professional semantic HTML structure. Your page will feature a welcoming header, clear navigation, organized main content, helpful sidebar information, and a professional footer - all using proper semantic elements." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "This project brings together everything you've learned about semantic HTML elements. You'll create a real-world website structure that demonstrates how semantic elements work together to create accessible, professional web pages that serve actual community needs." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your community center website will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Semantic page layout with proper document structure" }), "\n", _jsx(_components.li, { children: "Navigation menu linking to different site sections" }), "\n", _jsx(_components.li, { children: "Main content area with organized program information" }), "\n", _jsx(_components.li, { children: "Sidebar with quick reference information" }), "\n", _jsx(_components.li, { children: "Professional footer with contact and legal details" }), "\n"] }), "\n", _jsx(_components.p, { children: "Expected completion time: 10-15 minutes" }), "\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 a complete HTML document with DOCTYPE, html, head, and body elements" }), "\n", _jsx(_components.li, { children: "Add a descriptive page title that includes \"Riverside Community Center\"" }), "\n", _jsx(_components.li, { children: "Ensure your document is ready for semantic content" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm your basic structure is working."] }), "\n", _jsx(_components.h3, { children: "Step 2: Build the Page Header" }), "\n", _jsx(_components.p, { children: "Create a welcoming header section that introduces the community center:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the appropriate semantic element for page introductory content" }), "\n", _jsx(_components.li, { children: "Include the community center name as the main heading: \"Riverside Community Center\"" }), "\n", _jsx(_components.li, { children: "Add a tagline paragraph: \"Building stronger communities together\"" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about which semantic element is designed specifically for introductory page content." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your header section rendered."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add Site Navigation" }), "\n", _jsx(_components.p, { children: "Create a navigation menu that helps users find different sections:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic element designed specifically for navigation links" }), "\n", _jsxs(_components.li, { children: ["Create a navigation menu with these links:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "\"About Us\" (linking to #about)" }), "\n", _jsx(_components.li, { children: "\"Programs\" (linking to #programs)" }), "\n", _jsx(_components.li, { children: "\"Events\" (linking to #events)" }), "\n", _jsx(_components.li, { children: "\"Contact\" (linking to #contact)" }), "\n"] }), "\n"] }), "\n", _jsx(_components.li, { children: "Organize your navigation links using an unordered list structure" }), "\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: "<" }), "semantic-nav-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-element"] }), _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: ">" })] }), "Navigation text", _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: [" ", _jsx(_components.span, { className: "token comment", 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: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your navigation menu displayed."] }), "\n", _jsx(_components.h3, { children: "Step 4: Create the Main Content Area" }), "\n", _jsx(_components.p, { children: "Build the primary content section using semantic elements:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic element that contains a page's primary content" }), "\n", _jsx(_components.li, { children: "Within that, create a complete article about community programs" }), "\n", _jsx(_components.li, { children: "Give your article the heading: \"Our Community Programs\"" }), "\n", _jsx(_components.li, { children: "Add an introductory paragraph: \"We offer diverse programs designed to bring neighbors together and strengthen our community bonds.\"" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about which semantic element represents the main content area, and which element contains complete, standalone content." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your main content structure."] }), "\n", _jsx(_components.h3, { children: "Step 5: Organize Content with Sections" }), "\n", _jsx(_components.p, { children: "Within your main article, create organized sections for different program types:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Create a section for \"Youth Programs\" with these offerings:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "After-school tutoring and homework help" }), "\n", _jsx(_components.li, { children: "Youth sports leagues and activities" }), "\n", _jsx(_components.li, { children: "Summer camp and holiday programs" }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["Create a section for \"Adult Services\" with these offerings:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Job training and career development" }), "\n", _jsx(_components.li, { children: "Health and wellness programs" }), "\n", _jsx(_components.li, { children: "Social events and community gatherings" }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Each section should have its own heading and use appropriate list formatting for the program offerings." }), "\n", _jsx(_components.p, { children: "Example section 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: "<" }), "section-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: "<" }), "section-heading"] }), _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: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "list-element"] }), _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: "<" }), "list-item"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Program item", _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: [" ", _jsx(_components.span, { className: "token comment", 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"] }), _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: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your organized content sections."] }), "\n", _jsx(_components.h3, { children: "Step 6: Add Supporting Sidebar Information" }), "\n", _jsx(_components.p, { children: "Create a sidebar with helpful quick-reference information:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic element designed for supporting content that's separate from the main content" }), "\n", _jsxs(_components.li, { children: ["Add a \"Quick Information\" section with:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Operating hours: \"Monday-Friday: 8am-8pm, Saturday: 9am-5pm, Sunday: Closed\"" }), "\n", _jsx(_components.li, { children: "Phone number: \"(555) 123-4567\"" }), "\n", _jsxs(_components.li, { children: ["Email: \"", _jsx(_components.a, { href: "mailto:info@riversidecc.org", children: "info@riversidecc.org" }), "\""] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["Add an \"Important Dates\" section with:", "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "\"Registration for fall programs begins September 1st\"" }), "\n", _jsx(_components.li, { children: "\"Annual community picnic - September 15th\"" }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about which semantic element is used for content that supports but is separate from the main content." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your sidebar information displayed alongside your main content."] }), "\n", _jsx(_components.h3, { children: "Step 7: Complete with Professional Footer" }), "\n", _jsx(_components.p, { children: "Create a footer section with essential organizational information:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use the semantic element designed for concluding page content" }), "\n", _jsx(_components.li, { children: "Include copyright information: \"© 2024 Riverside Community Center\"" }), "\n", _jsx(_components.li, { children: "Add the organization's address: \"123 Community Lane, Riverside, CA 92501\"" }), "\n", _jsx(_components.li, { children: "Include a final line: \"A 501(c)(3) nonprofit organization serving our community since 1985\"" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete page structure with all semantic elements working together."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.p, { children: "Your completed website must include:" }), "\n", _jsx(_components.h3, { children: "Semantic Structure Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Proper header element with organization name and tagline" }), "\n", _jsx(_components.li, { children: "✅ Navigation element with organized menu links" }), "\n", _jsx(_components.li, { children: "✅ Main element containing primary page content" }), "\n", _jsx(_components.li, { children: "✅ Article element with complete program information" }), "\n", _jsx(_components.li, { children: "✅ Section elements organizing content within the article" }), "\n", _jsx(_components.li, { children: "✅ Aside element with supporting sidebar information" }), "\n", _jsx(_components.li, { children: "✅ Footer element with organizational details" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ All specified text content included exactly as described" }), "\n", _jsx(_components.li, { children: "✅ Navigation links properly formatted with href attributes" }), "\n", _jsx(_components.li, { children: "✅ Appropriate heading hierarchy (h1 for main title, h2 for article, h3 for sections)" }), "\n", _jsx(_components.li, { children: "✅ Lists used appropriately for navigation and program offerings" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Accessibility Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Logical document outline created by semantic elements" }), "\n", _jsx(_components.li, { children: "✅ Clear heading hierarchy that makes sense when read aloud" }), "\n", _jsx(_components.li, { children: "✅ Navigation links with descriptive text" }), "\n", _jsx(_components.li, { children: "✅ Content organized in a way that's easy to scan and understand" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Visual Structure Test" }), "\n", _jsx(_components.p, { children: "Your page should display:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Clear header section at the top with center name and tagline" }), "\n", _jsx(_components.li, { children: "Horizontal navigation menu below the header" }), "\n", _jsx(_components.li, { children: "Main content area with article title and organized sections" }), "\n", _jsx(_components.li, { children: "Sidebar information displayed alongside main content" }), "\n", _jsx(_components.li, { children: "Footer information at the bottom of the page" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Semantic Structure Test" }), "\n", _jsx(_components.p, { children: "When you view your HTML code:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Each semantic element should have a clear, distinct purpose" }), "\n", _jsx(_components.li, { children: "Content should be logically organized within appropriate containers" }), "\n", _jsx(_components.li, { children: "The document structure should make sense when read without visual styling" }), "\n", _jsx(_components.li, { children: "All content should be contained within appropriate semantic elements" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Accessibility Test" }), "\n", _jsx(_components.p, { children: "Your page should:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Create a logical document outline that screen readers can navigate" }), "\n", _jsx(_components.li, { children: "Have clear headings that describe each section's content" }), "\n", _jsx(_components.li, { children: "Use semantic elements that communicate content meaning" }), "\n", _jsx(_components.li, { children: "Organize information in a way that's easy to understand and navigate" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Complete Semantic Structure" }), ": All seven semantic elements (header, nav, main, article, section, aside, footer) used appropriately"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Logical Content Organization" }), ": Information grouped meaningfully with clear relationships between sections"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Professional Presentation" }), ": Content organized in a way that serves real community center needs"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Accessibility Focus" }), ": Structure that works well for all users, including those using assistive technologies"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Real-World Application" }), ": Website structure that demonstrates practical semantic HTML skills"] }), "\n", _jsx(_components.p, { children: "Your completed community center website should demonstrate mastery of semantic HTML structure and serve as a foundation for professional web development projects." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };