vibe-coders/replit-workshop.html at main · itversity/vibe-coders · 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
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Replit Workshop - Vibe Coders</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
  <style>
    .workshop-section {
      max-width: 900px;
      margin: 3rem auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      padding: 2.5rem 2rem;
    }
    .features-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      margin: 2rem 0;
    }
    .feature {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      background: var(--bg-light);
      border-radius: 6px;
      padding: 1.2rem 1rem;
      box-shadow: 0 2px 8px rgba(90,103,216,0.04);
    }
    .feature-icon {
      font-size: 2rem;
      color: var(--primary);
      flex-shrink: 0;
    }
    .exercise {
      background: var(--bg-light);
      border-radius: 6px;
      padding: 1.5rem 1rem;
      margin-top: 2.5rem;
      box-shadow: 0 2px 8px rgba(237,100,166,0.06);
    }
    .repl-container {
      margin: 2rem 0;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    }
    .repl-frame {
      width: 100%;
      border: none;
    }
    @media (min-width: 700px) {
      .features-list {
        grid-template-columns: 1fr 1fr;
      }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="logo">Vibe Coders</div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li class="dropdown">
          <a href="workshops.html" class="dropdown-toggle">Workshops</a>
          <ul class="dropdown-menu">
            <li><a href="cursor-workshop.html">Cursor.dev</a></li>
            <li><a href="replit-workshop.html">Replit</a></li>
            <li><a href="windsurf-workshop.html">Windsurf</a></li>
          </ul>
        </li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="workshop-section">
      <h1 style="color:var(--primary);font-weight:800;">Replit Workshop</h1>
      <p style="font-size:1.2rem;">Learn to code in the browser with Replit's powerful online IDE. No setup required - just open your browser and start coding!</p>

      <h3>Key Features</h3>
      <div class="features-list">
        <div class="feature">
          <span class="feature-icon">✨</span>
          <div>
            <h4>Instant Setup</h4>
            <p>No installation needed - just open your browser and start coding in 50+ programming languages.</p>
          </div>
        </div>
        <div class="feature">
          <span class="feature-icon">👥</span>
          <div>
            <h4>Real-time Collaboration</h4>
            <p>Work together with classmates in real-time, sharing code and ideas instantly.</p>
          </div>
        </div>
        <div class="feature">
          <span class="feature-icon">📱</span>
          <div>
            <h4>Cross-Platform</h4>
            <p>Works on any device with a web browser - desktop, tablet, or mobile.</p>
          </div>
        </div>
        <div class="feature">
          <span class="feature-icon">🚀</span>
          <div>
            <h4>Instant Deployment</h4>
            <p>Share your projects with the world instantly with built-in hosting and deployment.</p>
          </div>
        </div>
      </div>

      <div class="repl-container">
        <h3>Try It Live!</h3>
        <p>Below is an embedded Repl where you can see code running in real-time:</p>
        <iframe
          src="https://replit.com/"
          height="400"
          class="repl-frame"
          title="Replit Live Demo">
        </iframe>
      </div>

      <div class="exercise">
        <h3>Exercise: Hello, Vibe Coders!</h3>
        <ol>
          <li>Click the "Fork" button in the Repl above</li>
          <li>Sign in with your GitHub account (or create one)</li>
          <li>Edit the code to display <b>"Hello, Vibe Coders!"</b> with your name</li>
          <li>Click "Run" to see your changes</li>
          <li>Share your Repl link with the class</li>
        </ol>
        <p><strong>💡 Tips:</strong> Try changing colors with CSS, add emojis, or experiment with different HTML tags!</p>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <p>© 2025 Vibe Coders • Hosted on GitHub Pages</p>
  </footer>
</body>
</html>