CodeYourFuture · Jacknguyen4438 · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026 · Jan 21, 2026
diff --git 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
 

diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,31 +3,79 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css" />
+    <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.
+        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>
     <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>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+    <div id="div-1">
+       <article class="article-border">
+          <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>
+           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="https://www.makeareadme.com" target="_blank" class="Link-box-border">Read more</a>
+        </article>
+        </div>
+
+        <!--The second Item-->
+        <div id="row-side">
+        <div  class="content-size">
+        <article class="article-border">
+          <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 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="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="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 >
+            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="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>
+      <hr>
+      <footer>
+      <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
@@ -1,89 +1,105 @@
-/* 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;
-  }
+/*Main part of the website content(do not deleted)*/
+#image-size{
+    width:100%;
+    height: auto;
 }
+
+.article-border{
+    border: 2px solid black;
+    border-radius: 5px;
+    margin: 0px 0px 0px 5px;
+    padding-bottom: 20px;
+}
+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-align: center;
+    padding-top: 20px;
+}
+#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{
+    background-color: white;
+}
+
+/*This is for the position of the first Item*/
+#div-1{
+   width: 58%;
+   height: 20%;
+   position: relative;
+   left:19%;
+   overflow: hidden;
+   margin-bottom: 20px;
+}
+
+/*This part is mainly for item 2 and 3*/
+
+#row-side{
+   width:73%;
+   display: flex;
+   position: relative;
+   left: 19%;
+   padding: 0px 0px 0px -10px;
+}
+
+.content-size{
+    width: 40%;
+
+}
+
+.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;
+    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;
+}