HTML:

- Corrected list tags: updated list points to use <li> instead of <ul>
- Cleaned up spacing between elements

CSS:
- Added "Text Formatting" section
- Added property specifications for selectors: h1, h1, p, ul
- article (selector): added property: "text-align: justify"

Author: CraigStodd

Wireframe/index.html

@@ -13,86 +13,94 @@ <h1>Wireframe To Web Code</h1>
        Wireframes, README & Git branches, explained.
       </p>
     </header>
+
     <main>
       <article>
         <img src="wireframe.png" alt="Picture of an example wireframe" />
+        
         <h2>Wireframe</h2>
+        
         <p>
       A wireframe is a plan outlining the basic structure of the elements of a website, webpage or digital interface - 
       its purpose is to give the viewer a rough idea of how content will be displayed and function in the final product, 
       such as banners, navigation bars, buttons, images, and articles. 
-      In essence, a wireframe is the architectural "blueprint" of a web document.    
-        </p>
+      In essence, a wireframe is the architectural "blueprint" of a web document.
+    </p>
+
         <a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
       </article>
     </main>
 
-      <main>
+      
       <article>
         <img src="README-File-Example.jpg" alt="Picture of an example README file" />
-        <h2>README</h2>
+        
+        <h2>README</h2>]
+
         <p>
           The purpose of a README file is to provide important information for a project or piece of software. 
           This may include things such as:
-         
-          <ul>installation instructions</ul>
-
-          <ul>Version info</ul>
-
-          <ul>System requirements</ul>
-
-          <ul>A basic description of the software</ul>
-
-          <ul>Troubleshooting and support contact info</ul>
-
-          <ul>Copyright and licensing info</ul>
+        </p>
 
-          <ul>Source links</ul>
+          <ul>
+             <li>instructions</li>
+            
+            <li>Version info</li>
+            
+            <li>System requirements</li>
+            
+            <li>A basic description of the software</li>
+            
+            <li>Troubleshooting and support contact info</li>
+            
+            <li>Copyright and licensing info</li>
+            
+            <li>Source links</li> 
+          </ul>
 
-          README files are commonly written in Markdown (.md) plaintext format. 
-        </p>
+          <p>
+            README files are commonly written in Markdown (.md), plaintext format.
+          </p>
         <a href="https://www.makeareadme.com/">Read more</a>
       </article>
-    </main>
 
-        <main>
+    
       <article>
         <img src="CYF-Git-Branch-Example.png" alt="Picture of CYF Example Git Branch Diagram" />
+        
         <h2>Git Branches</h2>
-        <p>
 
-         <ul>In Git, repositories take the form of "branches."</ul>
+         <ul>
+          <li>In Git, repositories take the form of "branches."</li>
 
-         <ul>The default branch is called "main" - this represents the original code, developmental history and
-          final version of a project.</ul>
+         <li>The default branch is called "main" - this represents the original code, developmental history and
+          final version of a project.</li>
 
-         <ul>Branches create a copy off of "main" to work on specific issues or parts of a project in isolation.</ul>
+         <li>Branches create a copy off of "main" to work on specific issues or parts of a project in isolation.</li>
 
-         <ul>Individual edits made and saved to a repository are called "commits."</ul>
+         <li>Individual edits made and saved to a repository are called "commits."</li>
 
-         <ul>Essentially, a "branch" is a specific sequence of "commits" representing a specific version of a project.</ul>
+         <li>Essentially, a "branch" is a specific sequence of "commits" representing a specific version of a project.</li>
 
-         <ul>Once finalised, a branch can be merged with the "main" via a "Pull Request"</ul>
-        
-         <br>
+         <li>Once finalised, a branch can be merged with the "main" via a "Pull Request"</li> 
+        </ul>
 
-         Branches themselves can also be branched. This allows edits and issues to be specified even further.
+         <p>
+          Branches themselves can also be branched. This allows edits and issues to be specified even further.
+        </p>
 
-         <br>
-         
-         As an example: A user is working on their own branch of a project and identifies issues with two specific areas of code, 
-         but the rest of the project is otherwise fine. Individual branches could be created to focus on addressing these problems 
-         separately, without worry of accidentally making any drastic changes to the overall project.  
+         <p>
+          As an example: A user is working on their own branch of a project and identifies issues with two specific ares of code, 
+          but the rest of the project is otherwise fine. Individual branches could be created to focus on addressing these
+          problems separately, without worry of accidentally making any drastic changes to the overall project.
+        </p>  
 
-        </p>
         <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">
-          Read more</a>
+          Read more
+        </a>
       </article>
-    </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
     </footer>
   </body>
 </html>

Wireframe/style.css

@@ -41,6 +41,20 @@ svg {
   width: 100%;
   object-fit: cover;
 }
+
+/* ====== Text Formatting ===== */
+
+h1, h2 {
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+p, ul{ 
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  width: clamp(45ch, 50%, 75ch);
+  margin: 20px;
+
+}
+
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -77,7 +91,8 @@ Keeping things orderly and separate is the key to good, simple CSS.
 article {
   border: var(--line);
   padding-bottom: var(--space);
-  text-align: left;
+  text-align: justify;
+  width: clamp(45ch, 50%, 75ch);
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
   > * {