Webframe/index.html at main · KernelaKlees/Webframe · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Web Development Basics</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <h1>Web Development Basics</h1>
    <p>Understanding key tools in coding projects.</p>
  </header>

  <main>
  <section class="top-feature">
  <article class="image-text">
    <img src="https://i.postimg.cc/V6fdM6P6/mrrobot-jpg.jpg" alt="README file example" class="readme-img" />
    <div class="text-block">
      <h2>What is a README file?</h2>
      <p>A README file explains the purpose, setup, and usage of a project. It helps others understand how to use or contribute to your code.</p>
      <a href="https://www.makeareadme.com/" class="button" target="_blank">Read More</a>
    </div>
  </article>
</section>

     <section class="bottom-grid">
  <article class="image-text">
    <img src="https://i.postimg.cc/2yHv3Wqr/wireframe-jpg.jpg" alt="Wireframe example" />
    <div class="text-block">
      <h2>What is a wireframe?</h2>
      <p>A wireframe is a visual guide that outlines the structure of a webpage or app. It focuses on layout and functionality, not design details.</p>
      <a href="https://www.invisionapp.com/inside-design/wireframes/" class="button" target="_blank">Explore Wireframes</a>
    </div>
  </article>

        <article class="image-text">
    <img src="https://i.postimg.cc/jj9FnW76/gitbranch-png.png" alt="Git branch diagram" />
    <div class="text-block">
      <h2>What is a branch in Git?</h2>
      <p>A branch in Git lets you work on new features or fixes without affecting the main codebase. It’s a safe space to experiment and collaborate.</p>
      <a href="https://www.atlassian.com/git/tutorials/using-branches" class="button" target="_blank">Learn About Branching</a>
    </div>
  </article>
</section>
  </main>

  <footer>
    <p>© 2025 Web Dev Basics | <a href="index.html">Back to homepage</a></p>
  </footer>
</body>
</html>