CoderV/resources.html at main · Ishanpathak1/CoderV · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CoderV | Extra Resources</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div class="mobile-top">
    <strong>CoderV Resources</strong>
    <button class="hamburger" id="menuToggleResources">Menu</button>
  </div>

  <div class="app-shell">
    <aside class="sidebar" id="resourcesSidebar">
      <a href="profile.html" class="user-chip user-chip-link">
        <div class="avatar">TC</div>
        <div>
          <div class="name">Team Name</div>
          <div class="mini">Student account</div>
        </div>
      </a>

      <nav class="menu">
        <a href="dashboard.html">Home</a>
        <a href="lesson.html">Learning</a>
        <a href="quiz.html">Extra Quiz</a>
        <a href="ai.html">Ask AI</a>
      </nav>
    </aside>

    <main class="main">
      <header class="topbar">
        <div class="topbar-inner">
          <nav class="tabs">
            <a href="dashboard.html">How to use</a>
            <a href="resources.html" class="active">Resources</a>
            <a href="about.html">About</a>
          </nav>
          <a class="logout-link" href="login.html">Log out</a>
        </div>
      </header>

      <section class="content">
        <div class="resources-hero">
          <h1>Learning Resources</h1>
          <p>Curated materials to supplement your learning journey</p>
        </div>

        <h2 class="section-title">📚 Documentation & Guides</h2>
        <div class="resource-grid">
          <article class="resource-card">
            <div class="resource-icon">📖</div>
            <h3>Programming Basics</h3>
            <p>Comprehensive guide covering fundamental programming concepts</p>
            <a href="#" class="btn btn-ghost">View Guide</a>
          </article>

          <article class="resource-card">
            <div class="resource-icon">💻</div>
            <h3>Code Style Guide</h3>
            <p>Best practices for writing clean, maintainable code</p>
            <a href="#" class="btn btn-ghost">View Guide</a>
          </article>

          <article class="resource-card">
            <div class="resource-icon">🎯</div>
            <h3>Problem Solving Tips</h3>
            <p>Strategies and techniques for tackling coding challenges</p>
            <a href="#" class="btn btn-ghost">View Guide</a>
          </article>
        </div>

        <h2 class="section-title">🎥 Video Tutorials</h2>
        <div class="resource-grid">
          <article class="resource-card video-card">
            <div class="video-thumbnail">▶️</div>
            <h3>Data Structures Explained</h3>
            <p>Visual guide to common data structures</p>
            <span class="video-duration">42 min</span>
            <a href="#" class="btn btn-primary">Watch Now</a>
          </article>

          <article class="resource-card video-card">
            <div class="video-thumbnail">▶️</div>
            <h3>Algorithm Fundamentals</h3>
            <p>Step-by-step algorithm explanations</p>
            <span class="video-duration">38 min</span>
            <a href="#" class="btn btn-primary">Watch Now</a>
          </article>

          <article class="resource-card video-card">
            <div class="video-thumbnail">▶️</div>
            <h3>Debugging Techniques</h3>
            <p>Master the art of finding and fixing bugs</p>
            <span class="video-duration">25 min</span>
            <a href="#" class="btn btn-primary">Watch Now</a>
          </article>
        </div>

        <h2 class="section-title">🔗 External Resources</h2>
        <div class="link-list">
          <a href="#" class="link-card">
            <div class="link-icon">🌐</div>
            <div>
              <h4>MDN Web Docs</h4>
              <p>Comprehensive web development documentation</p>
            </div>
            <span class="link-arrow">→</span>
          </a>

          <a href="#" class="link-card">
            <div class="link-icon">📚</div>
            <div>
              <h4>Stack Overflow</h4>
              <p>Community-driven Q&A for programmers</p>
            </div>
            <span class="link-arrow">→</span>
          </a>

          <a href="#" class="link-card">
            <div class="link-icon">💡</div>
            <div>
              <h4>GitHub Learning Lab</h4>
              <p>Interactive courses on Git and GitHub</p>
            </div>
            <span class="link-arrow">→</span>
          </a>

          <a href="#" class="link-card">
            <div class="link-icon">🎓</div>
            <div>
              <h4>FreeCodeCamp</h4>
              <p>Free coding bootcamp with certificates</p>
            </div>
            <span class="link-arrow">→</span>
          </a>
        </div>
      </section>
    </main>
  </div>

  <script src="js/app.js"></script>
</body>
</html>