Wireframe-to-Web-Code/index.html at main · FAprogrammerO/Wireframe-to-Web-Code · 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
<html>
<head>
   <title>Wireframe to Web Code</title>
    </head>
<body>
<header>
        <h1>Wireframe to Web Code</h1>
        <p>This page provides an overview of the purpose of the README file and the wireframe, as well as the meaning of the "branch" in Git</p>
    </header>
<main>
         <section class="article-block">
            <div class="image-placeholder">
                <img src="https://tse3.mm.bing.net/th/id/OIP.p-hT4C826KtkfdnLwwtf_wHaEH?pid=ImgDet&w=474&h=263&rs=1" alt="Image for README">
            </div>
            <div class="article-content">
                <h2>README file</h2>
                <p>A README is a text file that introduces and explains a project. It contains information that is commonly required to understand what the project is about.</p>
                <div class="extra-content">
            <p>A good README helps others understand your project quickly. It usually includes installation steps, usage examples, license info, and how to contribute. It's an easy way to answer questions that your audience will likely have regarding how to install and use your project and also how to collaborate with you.</p>
        </div>
<button class="read-more-btn">READ MORE</button>
            </div>
        </section>
 <div class="articles-grid">
            <section class="article-block">
                <div class="image-placeholder">
                    <img src="https://cdn.nulab.com/learn-wp/app/uploads/2018/10/14210238/1-Valeria-Pivovarovas-wireframe-example.png" alt="Wireframe example">
                </div>
                <div class="article-content">
                    <h2>Wireframe</h2>
                    <p>A wireframe is the skeleton of your digital project. Think of it as the foundation for your website, app, or dashboard. It focuses on layout, and content placement-not on colors, fonts, or any visual polish.</p>
                   <div class="extra-content">
            <p>Wireframes are your blueprint: a simple, visual guide to quickly lay out your ideas and show how everything fits together. Before diving into colors, images, or final design details, wireframes help you map structure and functionality so nothing feels out of place.</p>
        </div>

        <button class="read-more-btn">READ MORE</button>
                </div>
            </section>

            <section class="article-block">
                <div class="image-placeholder">
                    <img src="https://miro.medium.com/v2/resize:fit:650/1*K9scAx1Ezd-KJFabaYseCw.jpeg" alt="Git branch diagram">
                </div>
                <div class="article-content">
                    <h2>The branch in Git</h2>
                    <p>In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code.</p>

        <div class="extra-content">
            <p>Branches let you work on different parts of a project, like new features or bug fixes, without interfering with the main branch. The common reasons to create a branch are
developing a new feature,fixing a bug, or experimenting with ideas.
</p>
        </div>


        <button class="read-more-btn">READ MORE</button>
                </div>
            </section>
        </div>
    </main>


    <footer>
        <p>© 2026 Fattouma Ouannassi</p>
    </footer>

</body>
</html>