From a68e694c11597b7da57dd900f5431d6da4e78c7c Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Tue, 20 Jan 2026 23:02:21 +0000
Subject: [PATCH 01/13] my initial foundation for the wireframe website and
 some basic change.

---
 Wireframe/index.html | 45 ++++++++++++++++-----
 Wireframe/style.css  | 93 ++------------------------------------------
 2 files changed, 40 insertions(+), 98 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..4bff5da7c 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -14,15 +14,42 @@ <h1>Wireframe</h1>
       </p>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
+
+      <div>
+        <article>
+          <img src="placeholder.svg" alt="" class="image-size" />
+          <h2>Title</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            voluptates. Quisquam, voluptates.
+          </p>
+           <a href="">Read more</a>
+        </article>
+      </div>
+      <hr>
+      <div>
+        <article>
+          <img src="placeholder.svg" alt="" class="image-size" />
+          <h2>Title</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            voluptates. Quisquam, voluptates.
+          </p>
+           <a href="">Read more</a>
+        </article>
+      </div>
+      <hr>
+      <div>
+        <article>
+          <img src="placeholder.svg" alt="" class="image-size" />
+          <h2>Title</h2>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            voluptates. Quisquam, voluptates.
+          </p>
+           <a href="">Read more</a>
+        </article>
+      </div>
     </main>
     <footer>
       <p>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..d1b34fb9c 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -1,89 +1,4 @@
-/* Here are some starter styles
-You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
-And includes solutions to common problems 
-As well as useful links to learn more */
-
-/* ====== Design Palette ======
- This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
- At work, a designer will give these to you based on the corporate brand, but while you are learning
- You can design it yourself if you like
- Inspect the starter design with Devtools
- Click on the colour swatches to see what is happening
- I've put some useful CSS you won't have learned yet
- For you to explore and play with if you are interested
- https://web.dev/articles/min-max-clamp
- https://scrimba.com/learn-css-variables-c026
-====== Design Palette ====== */
-:root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
-  --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
-  --container: 1280px;
-}
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
-body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
-}
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
-}
-img,
-svg {
-  width: 100%;
-  object-fit: cover;
-}
-/* ====== Site Layout ====== 
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
-main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
-}
-footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
-}
-/* ====== Articles Grid Layout ====
-Setting the rules for how articles are placed in the main element.
-Inspect this in Devtools and click the "grid" button in the Elements view
-Play with the options that come up.
-https://developer.chrome.com/docs/devtools/css/grid
-https://gridbyexample.com/learn/
-*/
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
-}
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
-Now laying out just the INSIDE of the repeated card/article design.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
-article {
-  border: var(--line);
-  padding-bottom: var(--space);
-  text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
-}
+.image-size {
+     width: 300px;
+     height: 300px;
+}
\ No newline at end of file

From 51c864be55c9cf7cebb16d89a719a006343af025 Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Tue, 20 Jan 2026 23:19:51 +0000
Subject: [PATCH 02/13] adding title for each article set up image size and
 height in each article.

---
 Wireframe/index.html | 12 ++++++------
 Wireframe/style.css  |  9 +++++++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 4bff5da7c..d8fce9aaa 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -15,10 +15,10 @@ <h1>Wireframe</h1>
     </header>
     <main>
 
-      <div>
+      <div class="article-border">
         <article>
           <img src="placeholder.svg" alt="" class="image-size" />
-          <h2>Title</h2>
+          <h2>READ ME.md file and what is mean.</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
             voluptates. Quisquam, voluptates.
@@ -27,10 +27,10 @@ <h2>Title</h2>
         </article>
       </div>
       <hr>
-      <div>
+      <div class="article-border">
         <article>
           <img src="placeholder.svg" alt="" class="image-size" />
-          <h2>Title</h2>
+          <h2>What is a wireframe and the purpose of it used</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
             voluptates. Quisquam, voluptates.
@@ -39,10 +39,10 @@ <h2>Title</h2>
         </article>
       </div>
       <hr>
-      <div>
+      <div class="article-border">
         <article>
           <img src="placeholder.svg" alt="" class="image-size" />
-          <h2>Title</h2>
+          <h2>Git, repo and branch</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
             voluptates. Quisquam, voluptates.
diff --git a/Wireframe/style.css b/Wireframe/style.css
index d1b34fb9c..3a5e5a2e1 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -1,4 +1,9 @@
 .image-size {
-     width: 300px;
-     height: 300px;
+     width: 100%;
+     height: 20%;
+}
+.article-border{
+    border: 2px solid black;
+    border-radius: 5px;
+    margin: 0px 15px 0px 25px;
 }
\ No newline at end of file

From 28e63585270966546b3290ab54f0ea35e7a4ca6e Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Tue, 20 Jan 2026 23:47:31 +0000
Subject: [PATCH 03/13] Making some adjustment for Read more link button. 
 Mainly the space between the link and paragraph

---
 Wireframe/index.html | 23 ++++++++---------------
 Wireframe/style.css  | 12 ++++++++++++
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index d8fce9aaa..1f93ef2d8 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -14,42 +14,35 @@ <h1>Wireframe</h1>
       </p>
     </header>
     <main>
-
-      <div class="article-border">
-        <article>
+       <article class="article-border">
           <img src="placeholder.svg" alt="" class="image-size" />
           <h2>READ ME.md file and what is mean.</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
             voluptates. Quisquam, voluptates.
           </p>
-           <a href="">Read more</a>
+           <a href="" class="Link-box-border">Read more</a>
         </article>
-      </div>
-      <hr>
-      <div class="article-border">
-        <article>
+        <hr>
+        <article class="article-border">
           <img src="placeholder.svg" alt="" class="image-size" />
           <h2>What is a wireframe and the purpose of it used</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
             voluptates. Quisquam, voluptates.
           </p>
-           <a href="">Read more</a>
+           <a href="" class="Link-box-border">Read more</a>
         </article>
-      </div>
-      <hr>
-      <div class="article-border">
-        <article>
+        <hr>
+        <article class="article-border">
           <img src="placeholder.svg" alt="" class="image-size" />
           <h2>Git, repo and branch</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
             voluptates. Quisquam, voluptates.
           </p>
-           <a href="">Read more</a>
+           <a href="" class="Link-box-border">Read more</a>
         </article>
-      </div>
     </main>
     <footer>
       <p>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 3a5e5a2e1..318330df6 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -6,4 +6,16 @@
     border: 2px solid black;
     border-radius: 5px;
     margin: 0px 15px 0px 25px;
+    padding-bottom: 20px;
+}
+.Link-box-border{
+    border: 2px solid black;
+    margin: 0px 10px 0px 5px;
+    padding: 10px 10px 10px 10px;
+}
+p{
+    margin: 0px 0px 30px 5px;
+}
+h2{
+    margin-bottom: 5px;
 }
\ No newline at end of file

From cf79dc1e3cfbdfb5486abb852e7856990861465b Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Wed, 21 Jan 2026 23:39:22 +0000
Subject: [PATCH 04/13] Making the layout of each item match with how the
 wireframe should like for the course work.

---
 Wireframe/index.html | 25 ++++++++++++++++---------
 Wireframe/style.css  | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 1f93ef2d8..12c3fdf45 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -3,29 +3,33 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Wireframe-code blog for beginner</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe Basic knowledge</h1>
       <p>
         This is the default, provided code and no changes have been made yet.
       </p>
     </header>
     <main>
+      <div id="div-1">
        <article class="article-border">
-          <img src="placeholder.svg" alt="" class="image-size" />
-          <h2>READ ME.md file and what is mean.</h2>
+          <img src="placeholder.svg" alt="" class="" />
+          <h2>READ ME.md file and what is purpose.</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
             voluptates. Quisquam, voluptates.
           </p>
            <a href="" class="Link-box-border">Read more</a>
         </article>
+        </div>
         <hr>
+        <!--The second Item-->
+        <div id="row-side">
         <article class="article-border">
-          <img src="placeholder.svg" alt="" class="image-size" />
+          <img src="placeholder.svg" alt="" class="" />
           <h2>What is a wireframe and the purpose of it used</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
@@ -33,9 +37,11 @@ <h2>What is a wireframe and the purpose of it used</h2>
           </p>
            <a href="" class="Link-box-border">Read more</a>
         </article>
-        <hr>
+    
+        <!--The third item-->
+        
         <article class="article-border">
-          <img src="placeholder.svg" alt="" class="image-size" />
+          <img src="placeholder.svg" alt="" class="" />
           <h2>Git, repo and branch</h2>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
@@ -43,8 +49,9 @@ <h2>Git, repo and branch</h2>
           </p>
            <a href="" class="Link-box-border">Read more</a>
         </article>
-    </main>
-    <footer>
+       </div>
+      </main>
+      <footer>
       <p>
         This is the default, provided code and no changes have been made yet.
       </p>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 318330df6..1e30cda97 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -1,3 +1,4 @@
+/*Main part of the website content(do not deleted)*/
 .image-size {
      width: 100%;
      height: 20%;
@@ -5,17 +6,46 @@
 .article-border{
     border: 2px solid black;
     border-radius: 5px;
-    margin: 0px 15px 0px 25px;
+    margin: 0px 0px 0px 5px;
     padding-bottom: 20px;
 }
+
+/*This is for the position of the first Item*/
+#div-1{
+   width: 73%;
+   height: 20%;
+   position: relative;
+   left:17%;
+}
+
+/*This part is mainly for item 2 and 3*/
+
+#row-side{
+   width: 74%;
+   display: flex;
+   position: relative;
+   left: 17%;
+   padding: 0px 0px 0px -10px;
+}
+
+
+
+/*This for the read more button do not deleted*/
 .Link-box-border{
     border: 2px solid black;
     margin: 0px 10px 0px 5px;
     padding: 10px 10px 10px 10px;
 }
+
 p{
     margin: 0px 0px 30px 5px;
 }
+
+/*For heading styling*/
 h2{
     margin-bottom: 5px;
+}
+
+h1{
+    text-align: center;
 }
\ No newline at end of file

From 9d30ccece4d382b7f3dd5381dacce34fce932581 Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Fri, 23 Jan 2026 02:00:49 +0000
Subject: [PATCH 05/13] Adding main content for the website such as image,
 paragraph content, other.

---
 Wireframe/index.html | 47 +++++++++++++++++++++++++++-----------------
 Wireframe/style.css  | 35 ++++++++++++++++++++++++++++-----
 2 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 12c3fdf45..51a21bcc7 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -13,42 +13,53 @@ <h1>Wireframe Basic knowledge</h1>
         This is the default, provided code and no changes have been made yet.
       </p>
     </header>
+    <hr>
     <main>
-      <div id="div-1">
+    <div id="div-1">
        <article class="article-border">
-          <img src="placeholder.svg" alt="" class="" />
+          <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="An image with the work Read ME with green color" id="image-size" />
           <h2>READ ME.md file and what is purpose.</h2>
           <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+           Readme.md is a type of file mainly to tell other other programmer, developer
+           and other coder by to serve as the entry point and primary documentation for a software project, 
+           providing an overview that explains what the project does, why it is useful, and how to install and use it. 
+           It helps users quickly understand, set up, and contribute to the code
           </p>
-           <a href="" class="Link-box-border">Read more</a>
+           <a href="https://www.makeareadme.com" target="_blank" class="Link-box-border">Read more</a>
         </article>
         </div>
-        <hr>
+        
         <!--The second Item-->
         <div id="row-side">
+        <div  class="content-size">
         <article class="article-border">
-          <img src="placeholder.svg" alt="" class="" />
+          <img src="https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress" alt="Is an example of how to design web layout" class="image-size-2" />
           <h2>What is a wireframe and the purpose of it used</h2>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+          <p id="paragraph-3" >
+           What is wireframe, wireframe 
+           is a way to design a website service at the structural level. 
+           A wireframe is commonly used to layout content and functionality on a page which takes into account user needs and user journeys. 
+           wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.
           </p>
-           <a href="" class="Link-box-border">Read more</a>
+           <a href="https://www.figma.com/resource-library/what-is-wireframing/" target="_blank" class="Link-box-border">Read more</a>
         </article>
-    
+        </div>
         <!--The third item-->
-        
+        <div class="content-size">
         <article class="article-border">
-          <img src="placeholder.svg" alt="" class="" />
+          <img src="https://media.licdn.com/dms/image/v2/D4D12AQH6ykM-AVoDKg/article-cover_image-shrink_720_1280/B4DZZW5EzAHAAM-/0/1745214525491?e=2147483647&v=beta&t=kB_Gy_FceQSnp1FMZ2lVvoPis3lrcCQjgX0Zur3z4pc" alt="a detail map on what is git and branch" class="image-size-2" />
           <h2>Git, repo and branch</h2>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptates. Quisquam, voluptates.
+          <p >
+            Git, repo and branch are some basic knowledge that you should learn when you start programming. They can be a powerful tool
+            that will help you on your journey, especially later on when you do a group project or your own personal project.
+            Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency,
+            how ever they also allow you save, control and redo your project file version. Repository is when you work on a  group project 
+            you can copy all of the files of the main project and make your self owner of that copy project. Branch is for when you want to make some change like adding image, changing color
+            or add some functionality to the project doesn't effect the main original file.
           </p>
-           <a href="" class="Link-box-border">Read more</a>
+           <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" target="_blank" class="Link-box-border">Read more</a>
         </article>
+        </div>
        </div>
       </main>
       <footer>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 1e30cda97..513b79125 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -1,7 +1,7 @@
 /*Main part of the website content(do not deleted)*/
-.image-size {
-     width: 100%;
-     height: 20%;
+#image-size{
+    width:100%;
+    height: auto;
 }
 .article-border{
     border: 2px solid black;
@@ -10,26 +10,50 @@
     padding-bottom: 20px;
 }
 
+
+body{
+background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
+}
+footer{
+    background-color: black;
+
+}
+
+article{
+    background-color: white;
+}
 /*This is for the position of the first Item*/
 #div-1{
    width: 73%;
    height: 20%;
    position: relative;
    left:17%;
+   overflow: hidden;
+   margin-bottom: 20px;
 }
 
 /*This part is mainly for item 2 and 3*/
 
 #row-side{
-   width: 74%;
+   width:73%;
    display: flex;
    position: relative;
    left: 17%;
    padding: 0px 0px 0px -10px;
 }
 
+.content-size{
+    width: 60%;
+   
+}
 
-
+.image-size-2{
+    width:100%;
+    
+}
+#paragraph-3{
+    margin-bottom: 102px;
+}
 /*This for the read more button do not deleted*/
 .Link-box-border{
     border: 2px solid black;
@@ -41,6 +65,7 @@ p{
     margin: 0px 0px 30px 5px;
 }
 
+
 /*For heading styling*/
 h2{
     margin-bottom: 5px;

From 96915189561f40a5c79eed31b96cd76c5d186dee Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Fri, 23 Jan 2026 23:18:06 +0000
Subject: [PATCH 06/13] Adding some final detail and ready to commit to the
 main branch

---
 Wireframe/style.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 513b79125..64288894c 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -9,8 +9,6 @@
     margin: 0px 0px 0px 5px;
     padding-bottom: 20px;
 }
-
-
 body{
 background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
 }

From 9694030e382e08630ee24eceb87f97264191b266 Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Fri, 23 Jan 2026 23:20:29 +0000
Subject: [PATCH 07/13] Just some more minor bug fix for CSS file

---
 Wireframe/index.html | 16 +++++++++++++---
 Wireframe/style.css  | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 51a21bcc7..d72529724 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,7 +10,7 @@
     <header>
       <h1>Wireframe Basic knowledge</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Hello and welcome to this programming blog, today you will learn about what is wireframe and why it so important in web development.
       </p>
     </header>
     <hr>
@@ -44,6 +44,7 @@ <h2>What is a wireframe and the purpose of it used</h2>
            <a href="https://www.figma.com/resource-library/what-is-wireframing/" target="_blank" class="Link-box-border">Read more</a>
         </article>
         </div>
+        
         <!--The third item-->
         <div class="content-size">
         <article class="article-border">
@@ -62,10 +63,19 @@ <h2>Git, repo and branch</h2>
         </div>
        </div>
       </main>
+      <hr>
       <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <p class="text-position">
+        Tuan Ngoc Nguyen
       </p>
+      <div id="footer-list">
+      <ul>
+          <li><a href="#" target="_blank">Home</a></li>
+          <li><a href="#" target="_blank">Contact</a></li>
+          <li><a href="#" target="_blank">Facebook</a></li>
+          <li><a href="#" target="_blank">Youtube</a></li>
+      </ul>
+      </div>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 64288894c..57410124c 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -3,6 +3,7 @@
     width:100%;
     height: auto;
 }
+
 .article-border{
     border: 2px solid black;
     border-radius: 5px;
@@ -12,9 +13,40 @@
 body{
 background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
 }
+
+header{
+    background-color: white;
+    padding:20px 200px 0px 200px;
+    border: 2px solid white;
+    border-radius: 5px;
+}
+
+/*Footer section*/
 footer{
     background-color: black;
+    color:white;
+    border: 2px solid white;
+    border-radius: 5px;
+}
+
+.text-position{
+    text-align: center;
+    padding-top:
+}
+
+#footer-list ul{
+   display:flex;
+   justify-content:space-evenly;
+   flex-direction: row;
+}
+
+#footer-list li{
+  list-style-type: none;
+}
 
+#footer-list a{
+    text-decoration: none;
+    color: white;
 }
 
 article{

From 0f0b4b22cbd0098140014162b335d993e02d8299 Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Fri, 23 Jan 2026 23:31:29 +0000
Subject: [PATCH 08/13] Fixing more error

---
 Wireframe/style.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 57410124c..5bddeb470 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -27,13 +27,9 @@ footer{
     color:white;
     border: 2px solid white;
     border-radius: 5px;
-}
-
-.text-position{
     text-align: center;
     padding-top:
 }
-
 #footer-list ul{
    display:flex;
    justify-content:space-evenly;

From e08738557f725b91cfe98a82cb58e048d2d1e210 Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Fri, 23 Jan 2026 23:32:06 +0000
Subject: [PATCH 09/13] more change to fix bug

---
 Wireframe/style.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 5bddeb470..6d9253a69 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -45,6 +45,8 @@ footer{
     color: white;
 }
 
+
+
 article{
     background-color: white;
 }

From 78f82be191a9a78855e24d831895d1f0a6d4dc26 Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Fri, 23 Jan 2026 23:38:05 +0000
Subject: [PATCH 10/13] FIxing some error in git change

---
 Wireframe/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index 6d9253a69..d3381b9fd 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -50,6 +50,7 @@ footer{
 article{
     background-color: white;
 }
+
 /*This is for the position of the first Item*/
 #div-1{
    width: 73%;

From 9b8e2ba3647ec93077ce47d1ee7be85ce954340e Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Fri, 23 Jan 2026 23:47:57 +0000
Subject: [PATCH 11/13] Final bug patching

---
 Wireframe/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Wireframe/style.css b/Wireframe/style.css
index d3381b9fd..5aebf0fc5 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -28,7 +28,7 @@ footer{
     border: 2px solid white;
     border-radius: 5px;
     text-align: center;
-    padding-top:
+    padding-top: 20px;
 }
 #footer-list ul{
    display:flex;

From 8ec7adc26d683177fbcbd4e66a0248329f1ab547 Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Sat, 24 Jan 2026 00:35:57 +0000
Subject: [PATCH 12/13] Important change for light house check

---
 Wireframe/index.html | 2 +-
 Wireframe/style.css  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index d72529724..86a4e3b55 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe-code blog for beginner</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="style.css"/>
   </head>
   <body>
     <header>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 5aebf0fc5..795c53e8f 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -53,10 +53,10 @@ article{
 
 /*This is for the position of the first Item*/
 #div-1{
-   width: 73%;
+   width: 58%;
    height: 20%;
    position: relative;
-   left:17%;
+   left:19%;
    overflow: hidden;
    margin-bottom: 20px;
 }
@@ -67,12 +67,12 @@ article{
    width:73%;
    display: flex;
    position: relative;
-   left: 17%;
+   left: 19%;
    padding: 0px 0px 0px -10px;
 }
 
 .content-size{
-    width: 60%;
+    width: 40%;
    
 }
 

From 1e2acc96416090a1775f1e50f15c17ba3c3f73fc Mon Sep 17 00:00:00 2001
From: Jacknguyen4438 <jacknguyen4438@gmail.com>
Date: Sat, 24 Jan 2026 00:45:08 +0000
Subject: [PATCH 13/13] This is for readme homework criteria check

---
 Wireframe/README.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/Wireframe/README.md b/Wireframe/README.md
index 0ae0216d1..8243b7101 100644
--- a/Wireframe/README.md
+++ b/Wireframe/README.md
@@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including a title, summary, and a link
-- [ ] Check a webpage against a wireframe layout
-- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
-- [ ] Use version control by committing often and pushing regularly to GitHub
+- [x] Use semantic HTML tags to structure the webpage
+- [x] Create three articles, each including a title, summary, and a link
+- [x] Check a webpage against a wireframe layout
+- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [x] Use version control by committing often and pushing regularly to GitHub
 <!--{{</objectives>}}>-->
 
 ## Acceptance Criteria
 
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The page header includes a title and description.
-- [ ] The articles section has three unique articles, each including a title, summary, and a link.
-- [ ] The page footer is fixed to the bottom of the viewport.
-- [ ] The webpage is styled using a linked .css file.
-- [ ] The webpage is properly committed and pushed to a branch on GitHub.
+- [x] Semantic HTML tags are used to structure the webpage.
+- [x] The page scores 100 for Accessibility in the Lighthouse audit.
+- [x] The page header includes a title and description.
+- [x] The articles section has three unique articles, each including a title, summary, and a link.
+- [x] The page footer is fixed to the bottom of the viewport.
+- [x] The webpage is styled using a linked .css file.
+- [x] The webpage is properly committed and pushed to a branch on GitHub.
 
 ## Resources