Project 3: Class Timetable

:emoji: Video Tutorial

:emoji:️ Project Roadmap

:clipboard: Before You Start Checklist

• Have you opened the EduBlocks link and cloned the project?
• Do you have your class schedule ready to reference?
• Have you thought about color schemes for different subjects?
• Are you ready to create an organized, professional-looking timetable?

Project Overview & Sample User Interface

Basic Level

Advanced Level

Activity Instruction: Remix this!

(Make sure you click clone word)

Programming Instructions

Phase One: Setup - Building Your Table Structure :emoji:️

:warning: Warning Common Pitfall Alert! Many students forget to add the <table> tag first! Without it, your rows and columns won't display properly. Always start with:

1. <table> tag
2. Then add <tr> (table rows)
3. Inside rows, add <th> (headers) or <td> (data cells)

One. Create a table for your class timetable

Start by dragging the <table> block to create your timetable container. This is like creating the frame for a picture - everything else goes inside!

Real HTML Connection: In real web development, tables use this exact structure:

<table>
  <tr>
    <th>Time</th>
    <th>Monday</th>
  </tr>
  <tr>
    <td>8:00-9:00</td>
    <td>Math</td>
  </tr>
</table>

:white_check_mark: Milestone Check 1

Before moving on, make sure you have:

• Created your <table> block
• Added at least one <tr> (row) block
• Tested that it appears in the preview

Phase 2: Content - Adding Your Schedule Data :books:

2. You may change the style and color of your timetable by using this block:

:bulb: Tip Best Practice: Choose colors that make sense! For example:

• Math = Blue (like graph paper)
• Science = Green (like nature)
• English = Yellow (like a highlighter)
• PE = Red (energetic!) This helps your brain remember your schedule better!

3. To add borders for your timetable, you may use this block:

Real CSS Connection: This block adds the CSS property border: 1px solid black; to your table elements!

4. To make the table border to be single, you can use this block:

:warning: Warning Common Mistake: Forgetting border-collapse makes your table have double borders between cells. Always add this for a professional look!

:white_check_mark: Milestone Check 2

Your table should now have:

• Visible borders around cells
• Single lines between cells (not double)
• At least 2 rows and 2 columns

Phase 3: Styling - Making It Beautiful :art:

5. You can add heading for the table by using the <th> block. To add data in the table, you can use the <td> block and to add rows for your timetable, you can use the <tr> block

Understanding the Difference:

• <th> = Table Header (automatically bold and centered)
• <td> = Table Data (regular text)
• <tr> = Table Row (horizontal line of cells)

:bulb: Tip Pro Tip: Use <th> for:

• Days of the week (Monday, Tuesday, etc.)
• Time periods (8:00-9:00, 9:00-10:00) This makes your timetable easier to read!

6. You can add images in your timetable by using the <img> block

Make your timetable more visual! Add small icons for:

• :emoji: Lunch break
• :books: Different subjects
• :art: Special classes

Phase 4: Polish - Advanced Techniques :star2:

7. You can create a class for each time slot (for example, 8am to 9am & 9am to 10am) of your timetable in order to add details of your class like subjects and lunch break specifically

Real-World CSS Classes: This teaches you how professional developers organize their styles:

.math-class { background-color: lightblue; }
.lunch-break { background-color: lightyellow; }
.pe-class { background-color: lightcoral; }

:bulb: Tip Naming Convention: Use descriptive class names like:

• morning-session
• afternoon-session
• special-event This makes your code easier to understand later!

:bug: Debugging Tips

Having trouble? Check these common issues:

1. Table not showing?

   • Make sure you have the <table> tag
   • Check that all <tr> tags are inside the <table>

2. Cells not aligned?

   • Count your columns - each row should have the same number
   • Use empty <td></td> for blank cells

3. Borders look weird?

   • Did you add the border-collapse property?
   • Check that border styles are applied to the right elements

4. Colors not working?

   • Make sure you're using correct color names or hex codes
   • Check that your CSS class names match exactly

:white_check_mark: Final Milestone Check

Your completed timetable should have:

• All days of the week
• All time periods for your school day
• Different colors for different subjects
• Clean, single borders
• Optional: Images or icons for visual appeal

Required Elements

Make sure your class timetable includes:

• HTML table structure with proper table, tr, th, and td elements
• Table styling with colors and borders
• Border-collapse property for clean appearance
• Table headers for days and time periods
• Images within table cells (optional)
• CSS classes for different time slots
• Complete weekly schedule with subjects and breaks

:rocket: Extension Challenges

Ready to level up your timetable? Try these advanced features:

Challenge One: Hover Effects

Add a hover effect that highlights the cell when you move your mouse over it:

td:hover {
  background-color: lightgray;
  cursor: pointer;
}

Challenge 2: Responsive Design

Make your timetable look good on mobile devices by adding:

• Smaller font sizes for mobile
• Scroll functionality for wide tables
• Abbreviated day names (Mon, Tue, etc.)

Challenge 3: Interactive Features

• Add clickable cells that show more details about each class
• Create a "current time" indicator that highlights the current period
• Add a print-friendly version with black and white styling

Challenge 4: Advanced Styling

• Use gradients instead of solid colors
• Add rounded corners to your table
• Create a shadow effect to make the table "pop" off the page
• Add icons or emojis for each subject

Challenge 5: Data Enhancement

• Add teacher names to each subject
• Include classroom numbers
• Show homework reminders
• Add a legend explaining color codes

:bulb: Final Tips for Success

:bulb: Tip Remember: A great timetable is:

1. Clear - Easy to read at a glance
2. Colorful - But not overwhelming
3. Complete - Has all necessary information
4. Clean - Professional looking with proper alignment

:warning: Warning Before Submitting:

• Test your timetable in the preview window
• Check that all text is readable (good color contrast)
• Verify all days and times are included
• Make sure your borders display correctly
• Double-check spelling of subjects and days!

Project Submission

When you have completed your "Class Timetable" project, submit it using the link below:

Submit Your Project Here

Pre-Submission Checklist:

• All required elements are included
• Colors are applied consistently
• Table displays correctly in preview
• You've tested clicking all links/images
• You're proud of your work!

:tada: Congratulations on creating your digital class timetable! You've just built something that real web developers create for schools, universities, and businesses around the world!