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,6 +14,11 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 <!--{{<objectives>}}>-->
 
+- [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
 - [ ] Use semantic HTML tags to structure the webpage
 - [ ] Create three articles, each including an image, title, summary, and a link
 - [ ] Check a webpage against a wireframe layout
@@ -23,6 +28,13 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 ## Acceptance Criteria
 
+- [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.
 - [ ] 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.

diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,107 @@
 <!DOCTYPE html>
 <html lang="en">
-  <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" />
-  </head>
-  <body>
-    <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </header>
-    <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+
+<head>
+  <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" />
+</head>
+
+<body>
+  <header>
+    <h1>Wireframe Basic knowledge</h1>
+    <p>
+      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 id="main-div">
+    <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>
-          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="">Read more</a>
+        <a href="https://www.makeareadme.com" target="_blank" class="Link-box-border">Read more</a>
       </article>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
-</html>
+    </div>
+
+    <!--The second Item-->
+    <div id="row-side">
+      <div class="content-size">
+        <article class="article-border" id="article-2">
+          <div>
+            <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>
+              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>
+          </div>
+          <div>
+            <a href="https://www.figma.com/resource-library/what-is-wireframing/" target="_blank"
+              class="Link-box-border">Read more</a>
+          </div>
+        </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,125 @@
-/* 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 */
+/*Main part of the website content(do not deleted)*/
+#image-size {
+    width: 100%;
+    height: 400px;
+}
+
+.article-border {
+    border: 2px solid black;
+    border-radius: 5px;
+    margin: 0px 0px 0px 5px;
+    padding: 20px;
+}
+
 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;
+    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
+}
+
+header {
+    background-color: white;
+    padding: 0px 0px 0px 5px;
+    border: 2px solid white;
+    border-radius: 5px;
 }
+
+header p {
+    text-align: center;
+}
+
+/*Footer section*/
 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.
-*/
+    background-color: black;
+    color: white;
+    border: 2px solid white;
+    border-radius: 5px;
+    text-align: center;
+    padding-top: 20px;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    left: 0;
+}
+
+#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 {
-  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;
-  }
+    background-color: white;
+}
+
+#main-div {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+    padding-bottom: 150px;
 }
+
+/*This is for the position of the first Item*/
+#div-1 {
+    width: 60%;
+    height: 20%;
+    display: flex;
+    margin-bottom: 15.5px;
+}
+
+/*This part is mainly for item 2 and 3*/
+
+#row-side {
+    display: flex;
+    justify-content: center;
+}
+
+.content-size {
+    width: 30%;
+    display:flex;
+}
+
+.image-size-2 {
+    width: 100%;
+    height: 300px;
+}
+
+#article-2{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: space-between;
+}
+
+
+
+/*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;
+}