Club Name - Brief Description

"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: School Club Website" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "Create a complete homepage for a school club using all the semantic HTML elements you've learned. You'll build a professional, accessible website that demonstrates proper semantic structure, meaningful content organization, and user-friendly navigation. Choose any type of school club that interests you - Drama Club, Science Club, Chess Club, Art Club, or any other club you can imagine." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "This project brings together everything you've learned about semantic HTML structure. You'll create a real-world website that could actually serve a school club's communication needs, demonstrating how semantic elements work together to create professional, accessible web experiences that serve real communities." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your school club website will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Complete semantic page structure" }), " with header, navigation, main content, sidebar, and footer"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Club introduction and mission" }), " organized in clear, meaningful sections"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Navigation menu" }), " with links to different areas of the club's information"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Sidebar content" }), " featuring quick information and upcoming events"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional layout" }), " that looks trustworthy and welcoming to potential members"] }), "\n"] }), "\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 DOCTYPE, html, head, and body elements. Add a descriptive title that includes your club name and purpose." }), "\n", _jsx(_components.p, { children: "Example structure pattern:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "code-highlight", children: [_jsx(_components.span, { className: "code-line line-number", line: "1", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: " Club Name - Brief Description\n" }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: "\n" })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm your basic document structure is working correctly."] }), "\n", _jsx(_components.h3, { children: "Step 2: Create the Header Section" }), "\n", _jsx(_components.p, { children: "Build a welcoming header that introduces your club using the appropriate semantic element. Include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "The club's name as the main heading" }), "\n", _jsx(_components.li, { children: "A brief, welcoming tagline or description that establishes the club's personality" }), "\n"] }), "\n", _jsx(_components.p, { children: "Think about what would make someone feel excited to learn more about your club." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your header introduces the club effectively."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add Navigation Menu" }), "\n", _jsx(_components.p, { children: "Create a semantic navigation section with links to different areas of your club's website. Include 4-5 navigation links such as:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "About the club" }), "\n", _jsx(_components.li, { children: "Activities or programs" }), "\n", _jsx(_components.li, { children: "How to join" }), "\n", _jsx(_components.li, { children: "Contact information" }), "\n", _jsx(_components.li, { children: "Events or meetings" }), "\n"] }), "\n", _jsx(_components.p, { children: "Use proper list structure within your navigation element, and make your link text descriptive and helpful." }), "\n", _jsx(_components.p, { children: "Example navigation pattern:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "code-highlight", children: [_jsx(_components.span, { className: "code-line line-number", line: "1", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: " Descriptive Link Text\n" }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: "\n" })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to check that your navigation menu appears clearly and logically."] }), "\n", _jsx(_components.h3, { children: "Step 4: Build the Main Content Area" }), "\n", _jsx(_components.p, { children: "Create the main content section containing a complete article about your club. Your article should include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A welcoming headline that draws people in" }), "\n", _jsx(_components.li, { children: "An introductory paragraph explaining what the club is about" }), "\n", _jsx(_components.li, { children: "Two sections within the article that provide more specific information" }), "\n"] }), "\n", _jsx(_components.p, { children: "Consider organizing your sections around topics like:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "What the club does or offers" }), "\n", _jsx(_components.li, { children: "Who can join or participate" }), "\n", _jsx(_components.li, { children: "What makes the club special" }), "\n", _jsx(_components.li, { children: "Meeting times and activities" }), "\n"] }), "\n", _jsx(_components.p, { children: "Example main content pattern:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "code-highlight", children: [_jsx(_components.span, { className: "code-line line-number", line: "1", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: " Welcome Message\n" }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: " Club overview...\n" }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: " First Topic\n" }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: " Details...\n" }), _jsx(_components.span, { className: "code-line line-number", line: "9", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "10", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "11", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "12", children: " Second Topic\n" }), _jsx(_components.span, { className: "code-line line-number", line: "13", children: " More details...\n" }), _jsx(_components.span, { className: "code-line line-number", line: "14", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "15", children: " \n" }), _jsx(_components.span, { className: "code-line line-number", line: "16", children: "\n" })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your main content presents the club information clearly and invitingly."] }), "\n", _jsx(_components.h3, { children: "Step 5: Add Sidebar Information" }), "\n", _jsx(_components.p, { children: "Create a sidebar section with supporting information that helps visitors take action or find what they need quickly. Include practical details such as:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Meeting times and location" }), "\n", _jsx(_components.li, { children: "Contact information" }), "\n", _jsx(_components.li, { children: "Upcoming events or important dates" }), "\n", _jsx(_components.li, { children: "Quick facts about the club" }), "\n"] }), "\n", _jsx(_components.p, { children: "Organize this information with clear headings and easy-to-scan formatting." }), "\n", _jsx(_components.p, { children: "Example sidebar pattern:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "code-highlight", children: [_jsx(_components.span, { className: "code-line line-number", line: "1", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "2", children: " Quick Information\n" }), _jsx(_components.span, { className: "code-line line-number", line: "3", children: " Meeting details...\n" }), _jsx(_components.span, { className: "code-line line-number", line: "4", children: " Contact information...\n" }), _jsx(_components.span, { className: "code-line line-number", line: "5", children: "\n" }), _jsx(_components.span, { className: "code-line line-number", line: "6", children: " Upcoming Events\n" }), _jsx(_components.span, { className: "code-line line-number", line: "7", children: " Event information...\n" }), _jsx(_components.span, { className: "code-line line-number", line: "8", children: "\n" })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm your sidebar provides helpful supporting information without overwhelming the main content."] }), "\n", _jsx(_components.h3, { children: "Step 6: Complete with Footer" }), "\n", _jsx(_components.p, { children: "Add a footer section that concludes your page with final information such as:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Club name and basic contact details" }), "\n", _jsx(_components.li, { children: "School affiliation" }), "\n", _jsx(_components.li, { children: "Social media or additional connection information" }), "\n", _jsx(_components.li, { children: "Any other concluding information that helps visitors connect with the club" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete website layout with all semantic elements working together."] }), "\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: "Club focus" }), ": Choose a specific type of school club and create content that fits that club's purpose"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Complete information" }), ": Provide enough detail that someone could understand what the club does and how to get involved"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Professional tone" }), ": Write content that sounds welcoming but trustworthy"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Practical details" }), ": Include specific information like meeting times, location, and contact methods"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Semantic Structure Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "All semantic elements" }), ": Use header, nav, main, article, section, aside, and footer elements appropriately"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Proper nesting" }), ": Ensure elements are nested correctly with sections inside articles, articles inside main, etc."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Meaningful organization" }), ": Each semantic element should serve a clear purpose in organizing your content"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Logical hierarchy" }), ": Create a document structure that makes sense when read by screen readers"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Navigation Requirements" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Descriptive links" }), ": Use link text that clearly explains where each link leads"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Logical organization" }), ": Arrange navigation links in an order that makes sense to users"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Proper structure" }), ": Use list elements within your navigation for accessibility"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Visual Organization Test" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Does your page have a clear visual hierarchy from header to footer?" }), "\n", _jsx(_components.li, { children: "Can you easily identify the main content versus supporting information?" }), "\n", _jsx(_components.li, { children: "Does the navigation stand out as a clear menu system?" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Clarity Test" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Would a student understand what this club does after reading your main content?" }), "\n", _jsx(_components.li, { children: "Is it clear how someone could join or get more information?" }), "\n", _jsx(_components.li, { children: "Does the sidebar provide genuinely helpful quick information?" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Semantic Structure Test" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Does each semantic element serve a distinct purpose?" }), "\n", _jsx(_components.li, { children: "Would the page make sense if read aloud by a screen reader?" }), "\n", _jsx(_components.li, { children: "Is your content organized in a logical hierarchy?" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Complete semantic structure" }), " - All required semantic elements (header, nav, main, article, section, aside, footer) used appropriately"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Meaningful content organization" }), " - Information is grouped logically with clear relationships between sections"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Professional navigation" }), " - Navigation menu uses descriptive links and proper list structure"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Engaging main content" }), " - Article contains welcoming introduction and well-organized sections about the club"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Helpful sidebar information" }), " - Aside element provides practical details that support the main content"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Clear document hierarchy" }), " - Heading levels work with semantic structure to create logical outline"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Accessible structure" }), " - Page would be navigable and understandable when used with screen readers"] }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Real-world applicability" }), " - Website looks professional and could actually serve a school club's needs"] }), "\n", _jsx(_components.p, { children: "Your completed website should demonstrate mastery of semantic HTML while creating a genuinely useful resource for a school club community." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };