Update articles with meaningful images

Author: SandzSoft

Wireframe/git-branch-svgrepo-com.svg

@@ -15,23 +15,23 @@ <h1>Web Development Basics</h1>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>The Purpose of a README File</h2>
+        <img src="readme.svg" alt="README file illustration" />
+         <h2>The Purpose of a README File</h2>
         <p>
           A README file is a plain text or Markdown document (usually named README.md) placed at the root of a project folder. It serves as a project's "welcome mat," giving visitors and contributors a quick summary of what the project does, how to install it, and how to use it.
         </p>
         <a href="https://www.makeareadme.com/">Read more</a>
       </article>
       <article>
-        <img src="placeholder.svg" alt="" />
+        <img src="wireframe-icon.svg" alt="Wireframe layout illustration" />
         <h2>The Purpose of a Wireframe</h2>
         <p>
           A wireframe is a simple visual layout of a webpage or application. It helps developers and designers plan the structure and content before building the final product.
         </p>
         <a href="https://www.nngroup.com/articles/wireframes/">Read more</a>
       </article>
       <article>
-        <img src="placeholder.svg" alt="" />
+        <img src="git-branch-svgrepo-com.svg" alt="Git branch diagram" />
         <h2>The Purpose of Git Branches</h2>
         <p>
           A Git branch is a separate workspace used to make changes safely. Developers use branches to work on new features without affecting the main project.

Wireframe/index.html

@@ -42,6 +42,8 @@ a {
   border: var(--line);
   max-width: fit-content;
 }
+
+
 img,
 svg {
   width: 100%;
@@ -84,6 +86,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
 article {
   border: var(--line);
   padding-bottom: var(--space);
+  padding: 10px;
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);