"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: Class Schedule Table" }), "\n", _jsx(_components.h2, { children: "What You'll Build" }), "\n", _jsx(_components.p, { children: "You'll create a weekly class schedule table that displays different subjects across various time periods and days. This table will help students quickly find what class they have at any given time during the week." }), "\n", _jsx(_components.h2, { children: "Why This Project" }), "\n", _jsx(_components.p, { children: "Class schedules are perfect for learning tables because they naturally organize information in a grid format. Students need to find information by looking at the intersection of time periods and days - exactly what tables are designed for. This project demonstrates how tables make complex scheduling information easy to read and navigate." }), "\n", _jsx(_components.h2, { children: "Project Overview" }), "\n", _jsx(_components.p, { children: "Your class schedule table will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Time periods as row headers (9:00 AM, 10:00 AM, 11:00 AM)" }), "\n", _jsx(_components.li, { children: "Days of the week as column headers (Monday, Tuesday, Wednesday)" }), "\n", _jsx(_components.li, { children: "Subject names in the appropriate time/day cells" }), "\n", _jsx(_components.li, { children: "A clean, organized structure that's easy to scan" }), "\n"] }), "\n", _jsx(_components.p, { children: "This project should take 10-15 minutes to complete and will demonstrate all the core table concepts from the lesson." }), "\n", _jsx(_components.h2, { children: "Step-by-Step Instructions" }), "\n", _jsx(_components.h3, { children: "Step 1: Create the Table Container" }), "\n", _jsx(_components.p, { children: "Start by creating the main table structure that will hold all your schedule information. You'll need the primary table element that acts as the container for all your rows and cells." }), "\n", _jsx(_components.p, { children: "Think about which HTML element creates the overall table structure." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see the basic table container (it won't show much yet, but the structure is there)."] }), "\n", _jsx(_components.h3, { children: "Step 2: Add the Header Row" }), "\n", _jsx(_components.p, { children: "Create the first row that will contain your column headers. This row should include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "A cell for \"Time\" (the row header column)" }), "\n", _jsx(_components.li, { children: "A cell for \"Monday\"" }), "\n", _jsx(_components.li, { children: "A cell for \"Tuesday\"" }), "\n", _jsx(_components.li, { children: "A cell for \"Wednesday\"" }), "\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: "<" }), "table-row"] }), _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: "<" }), "table-cell"] }), _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: "3", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "table-cell"] }), _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: "4", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "table-cell"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Header 3", _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: "<" }), "table-cell"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Header 4", _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 column headers displayed in the first row."] }), "\n", _jsx(_components.h3, { children: "Step 3: Add the 9:00 AM Time Period Row" }), "\n", _jsx(_components.p, { children: "Create a second row for the 9:00 AM time period with:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "\"9:00 AM\" as the time cell" }), "\n", _jsx(_components.li, { children: "\"Math\" for Monday" }), "\n", _jsx(_components.li, { children: "\"Science\" for Tuesday" }), "\n", _jsx(_components.li, { children: "\"English\" for Wednesday" }), "\n"] }), "\n", _jsx(_components.p, { children: "Remember that each row should have the same number of cells as your header row to maintain proper column alignment." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how your first data row aligns with the headers."] }), "\n", _jsx(_components.h3, { children: "Step 4: Add the 10:00 AM Time Period Row" }), "\n", _jsx(_components.p, { children: "Create a third row for the 10:00 AM time period with:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "\"10:00 AM\" as the time cell" }), "\n", _jsx(_components.li, { children: "\"History\" for Monday" }), "\n", _jsx(_components.li, { children: "\"Art\" for Tuesday" }), "\n", _jsx(_components.li, { children: "\"Music\" for Wednesday" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see how multiple data rows create a clear schedule grid."] }), "\n", _jsx(_components.h3, { children: "Step 5: Add the 11:00 AM Time Period Row" }), "\n", _jsx(_components.p, { children: "Create a fourth row for the 11:00 AM time period with:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "\"11:00 AM\" as the time cell" }), "\n", _jsx(_components.li, { children: "\"PE\" for Monday" }), "\n", _jsx(_components.li, { children: "\"Math\" for Tuesday" }), "\n", _jsx(_components.li, { children: "\"Science\" for Wednesday" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to see your complete class schedule table with all time periods filled in."] }), "\n", _jsx(_components.h3, { children: "Step 6: Review Table Structure" }), "\n", _jsx(_components.p, { children: "Check that your table has:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Consistent structure with 4 cells in each row" }), "\n", _jsx(_components.li, { children: "Clear time periods in the first column" }), "\n", _jsx(_components.li, { children: "Logical subject placement across days" }), "\n", _jsx(_components.li, { children: "Proper nesting of all table elements" }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "View in Browser" }), " to confirm your table displays as a clean, organized schedule that's easy to read."] }), "\n", _jsx(_components.h2, { children: "Requirements & Validation" }), "\n", _jsx(_components.p, { children: "Your completed table must include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Table container" }), ": Proper table element wrapping all content"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Four rows total" }), ": One header row plus three time period rows"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Four columns" }), ": Time, Monday, Tuesday, Wednesday"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Consistent structure" }), ": Every row has exactly 4 cells"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Meaningful content" }), ": Realistic class subjects and time periods"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Proper nesting" }), ": All table elements correctly nested"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Content Requirements" }), "\n", _jsx(_components.p, { children: "Use these exact time periods and subjects:" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Header Row" }), ": Time, Monday, Tuesday, Wednesday"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "9:00 AM Row" }), ": 9:00 AM, Math, Science, English"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "10:00 AM Row" }), ": 10:00 AM, History, Art, Music"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "11:00 AM Row" }), ": 11:00 AM, PE, Math, Science"] }), "\n", _jsx(_components.h2, { children: "Testing Your Solution" }), "\n", _jsx(_components.h3, { children: "Visual Check" }), "\n", _jsx(_components.p, { children: "Your table should display as a clear grid where:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Column headers are clearly visible across the top" }), "\n", _jsx(_components.li, { children: "Time periods are clearly visible down the left side" }), "\n", _jsx(_components.li, { children: "Subject names are easy to read in each cell" }), "\n", _jsx(_components.li, { children: "All columns align properly" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Structure Check" }), "\n", _jsx(_components.p, { children: "Verify that:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "You can easily find any class by looking at the intersection of time and day" }), "\n", _jsx(_components.li, { children: "The table has a logical, consistent structure" }), "\n", _jsx(_components.li, { children: "All information is organized and easy to scan" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Success Criteria" }), "\n", _jsx(_components.p, { children: "✅ Table container properly wraps all content" }), "\n", _jsx(_components.p, { children: "✅ Header row contains Time, Monday, Tuesday, Wednesday" }), "\n", _jsx(_components.p, { children: "✅ 9:00 AM row contains correct subjects for each day" }), "\n", _jsx(_components.p, { children: "✅ 10:00 AM row contains correct subjects for each day" }), "\n", _jsx(_components.p, { children: "✅ 11:00 AM row contains correct subjects for each day" }), "\n", _jsx(_components.p, { children: "✅ All rows have exactly 4 cells for proper alignment" }), "\n", _jsx(_components.p, { children: "✅ Table displays as a clean, readable schedule grid" }), "\n", _jsx(_components.p, { children: "✅ Information is easy to find by time and day intersection" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };