fixed typos in the index.html file and added more

descriptive alt text to the images.

Author: JorvanW

Wireframe/README.md

@@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u
 These practices reflect the level of quality expected in professional work.
 They ensure your code is reliable, maintainable, and presents a polished, credible experience to users.
 
-- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/
-- [ ] My code is consistently formatted
-- [ ] My page content is free of typos and grammatical mistakes
-- [ ] I commit often and push regularly to GitHub
+- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/
+- [x] My code is consistently formatted
+- [x] My page content is free of typos and grammatical mistakes
+- [x] I commit often and push regularly to GitHub
 
 ## Resources
 

Wireframe/index.html

@@ -12,27 +12,27 @@ <h1>Wireframe Task</h1>
     </header>
     <main>
       <article id="readme-article">
-        <img src="https://user-images.githubusercontent.com/6750572/90517585-e483a280-e165-11ea-8945-3d289eeeaa1d.png" alt=" example of Readme" />
+        <img src="https://user-images.githubusercontent.com/6750572/90517585-e483a280-e165-11ea-8945-3d289eeeaa1d.png" alt="README file example" />
         <h2>README file</h2>
         <p>
           ReadME file is a plain text document that is used as a user manual or official document for a project. 
           This file is useful because it helps communicate important information to those using or collaborating on the project. 
         </p>
         <a href="https://www.makeareadme.com" target="_blank" rel="noopener noreferrer">Read more</a>
       </article>
-      <article id="Wireframe-article">
-        <img src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png" alt="Wireframe" />
+      <article id="wireframe-article">
+        <img src="https://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png" alt="Website wireframe example" />
         <h2>Wireframe</h2>
         <p>
          A wireframe is a minimal skeletal blueprint of a website or app interface. It is important in order to plan a project in advance.
         </p>
         <a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank" rel="noopener noreferrer">Read more</a>
       </article>
-      <article id="Git-Branch-article">    
-        <img id="Git-Branch-image" src="https://phoenixnap.com/kb/wp-content/uploads/2023/11/git-workflow-example.png" alt="GitBranch" />
-        <h2>Git Branch </h2>
+      <article id="git-branch-article">    
+        <img id="git-branch-image" src="https://phoenixnap.com/kb/wp-content/uploads/2023/11/git-workflow-example.png" alt="Git branch workflow diagram" />
+        <h2>Git Branch</h2>
         <p>
-         In Git a branch is an identical copy of a projects code which is then used to make changes on without having any effect on the main original project.
+         In Git, a branch is an identical copy of a project's code which is then used to make changes on without having any effect on the main original project.
         </p>
         <a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github" target="_blank" rel="noopener noreferrer">Read more</a>
       </article>

Wireframe/style.css

@@ -30,11 +30,11 @@ H1 {
   justify-content: center;  
 }
 
-#Git-Branch-image {
+#git-branch-image {
   height: 107%
 }
 
-#Git-Branch-article h2 {
+#git-branch-article h2 {
     margin-top: 55px;
 }
 /* ====== Base Elements ======