Climate-Action/validation_ST2.html at main · isuru38/Climate-Action · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Validation - Student 2</title>
  <link rel="stylesheet" href="validation.css" />
</head>
<body>
  <div class="validation-page">
    <h1>Validation Report – Student 2</h1>

    <!-- Back to Home Button -->
    <p><a href="home.html" class="back-button">← Go to Home</a></p>

    <!-- Internal Section Links as Table -->
    <table class="nav-table">
      <tr>
        <td><a href="#home">Home</a></td>
        <td><a href="#table">Table</a></td>
        <td><a href="#content">Content</a></td>
        <td><a href="#css">CSS Files</a></td>
      </tr>
    </table>

    <!-- Home Page Validation -->
    <div id="home" class="section">
      <h2>home.html</h2>
      <p><strong>HTML Validation:</strong> Passed without errors or critical warnings.</p>
      <img src="images/homeval.png" alt="Validation Screenshot for home.html" class="screenshot" />
      <p><strong>Reflection:</strong> Semantic HTML was used with proper image alt text and heading structure. Navigation is responsive. Passed W3C validation successfully.</p>
    </div>

    <!-- Table Page Validation -->
    <div id="table" class="section">
      <h2>table.html</h2>
      <p><strong>HTML Validation:</strong> Passed without errors. Proper use of <code>rowspan</code>, <code>colspan</code>, and data classes.</p>
      <img src="images/tableval.png" alt="Validation Screenshot for table.html" class="screenshot" />
      <p><strong>Reflection:</strong> Table layout passed successfully with hover effects and column formatting. All images had descriptive alt tags.</p>
    </div>

    <!-- Content Page Validation -->
    <div id="content" class="section">
      <h2>content_ST2.html</h2>
      <p><strong>HTML Validation:</strong> Passed cleanly with no warnings. Internal links and anchor navigation were implemented correctly.</p>
      <img src="images/Contentval.png" alt="Validation Screenshot for content_ST2.html" class="screenshot" />
      <p><strong>Reflection:</strong> Internal sections and navigation passed W3C validation. Responsive design worked well across breakpoints.</p>
    </div>

    <!-- CSS Validations -->
    <div id="css" class="section">
      <h2>CSS Files</h2>

      <!-- global.css -->
      <h3>global.css</h3>
      <p><strong>Validation:</strong> Passed with no errors or warnings.</p>
      <img src="images/globalcssval.png" alt="CSS Validation Screenshot for global.css" class="screenshot" />
      <p><strong>Reflection:</strong> The global stylesheet ensures consistent styling across all pages and passed W3C CSS validation successfully.</p>

      <!-- home.css -->
      <h3>home.css</h3>
      <p><strong>Validation:</strong> Passed with no issues.</p>
      <img src="images/homecssval.png" alt="CSS Validation Screenshot for home.css" class="screenshot" />
      <p><strong>Reflection:</strong> Custom styling for the homepage used responsive layouts, grid cards, and hover effects without validation errors.</p>

      <!-- table.css -->
      <h3>table.css</h3>
      <p><strong>Validation:</strong> Passed successfully.</p>
      <img src="images/tablecssval.png" alt="CSS Validation Screenshot for table.css" class="screenshot" />
      <p><strong>Reflection:</strong> Styling included zebra striping, color indicators, and responsive design techniques. All rules passed validation cleanly.</p>

      <!-- content.css -->
      <h3>content.css</h3>
      <p><strong>Validation:</strong> Passed successfully.</p>
      <img src="images/contentcssval.png" alt="CSS Validation Screenshot for content.css" class="screenshot" />
      <p><strong>Reflection:</strong> Content page used media queries, consistent padding, and heading styles that followed CSS best practices.</p>

      <!-- page-editor.css -->
      <h3>page-editor.css</h3>
      <p><strong>Validation:</strong> Passed with no warnings or errors.</p>
      <img src="images/pageeditorval.png" alt="CSS Validation Screenshot for page-editor.css" class="screenshot" />
      <p><strong>Reflection:</strong> The separate stylesheet improves modularity and keeps editor styles independent. All rules passed validation successfully.</p>
    </div>
  </div>
</body>
</html>