Brussels | itp-2025-1 | Tam Huynh | Onboarding | Feature/wireframe

Form-Controls/README.md

@@ -4,10 +4,10 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] Interpret requirements and check against a list of criteria
-- [ ] Write a valid form
-- [ ] Test with Devtools
-- [ ] Refactor using Devtools
+- [x] Interpret requirements and check against a list of criteria
+- [x] Write a valid form
+- [x] Test with Devtools
+- [x] Refactor using Devtools
 <!--{{<objectives>}}>-->
 
 ## Task
@@ -30,18 +30,18 @@ Do not write a form action for this project.
 
 Let's write out our testable criteria. Check each one off as you complete it.
 
-- [ ] I have used HTML only.
+- [x] I have used HTML only.
 - [x] I have not used any CSS or JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic html.
-- [ ] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more.
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
+- [x] My form is semantic html.
+- [x] All inputs have associated labels.
+- [x] My Lighthouse Accessibility score is 100.
+- [x] I require a valid name. I have defined a valid name as a text string of two characters or more.
+- [x] I require a valid email.
+- [x] I require one colour from a defined set of 3 colours.
+- [x] I require one size from a defined set of 6 sizes.
 
 ## Resources
 

Form-Controls/index.html

@@ -17,11 +17,42 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
+       <label for="name">What's your name?</label>
+       <br>
+       <input type="text" name="text" id="name" minlength="3" required value="yourName">
+       <br>
+
+       <label for="mail">What's your email?</label>
+       <br>
+       <input type="email" id="mail" name="mail" required placeholder="[email protected]">
+
+       <p>What color do you like?</p>
+
+       <label for="black">black</label>
+       <input type="radio" id="black" name="answer" value="black">
+       <br>
+       <label for="white">white</label>
+       <input type="radio" id="white" name="answer" value="white">
+       <br>
+       <label for="blue">blue</label>
+       <input type="radio" id="blue" name="answer" value="blue">
+       <br>
+
+       <label for="size">What's size?</label>
+       <select id="size" name="size">
+        <option value="xs">XS</option>
+        <option value="s">S</option>
+        <option value="m">M</option>
+        <option value="l">L</option>
+        <option value="xl">XL</option>
+        <option value="xxl">XXL</option>
+       </select>
+
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Tam</h2>
     </footer>
   </body>
 </html>

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
 

Wireframe/index.html

@@ -1,33 +1,63 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Intro to Web Development</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <!--add tittle to header-->
+      <h1>Web Development for Dummies</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Explanation of the purpose of a README file, a wireframe, and what a Git branch is. These three elements are
+        fundamental to structuring, planning, and collaborating effectively in software development.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <!--add first image to main content-->
+        <img src="images/readme-github1.jpg" alt="image of a symbol from a readme file" />
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          Including a clear and well-structured README is considered a best practice as it helps others quickly
+          understand the project, encourages adoption or contributions, and makes maintenance easier for everyone
+          involved.
         </p>
-        <a href="">Read more</a>
+        <!--add external link-->
+        <a href="https://www.makeareadme.com/">Read more</a>
+      </article>
+
+      <article>
+        <!--add second image on the left to main content-->
+        <img src="images/wireframe1.png" alt="image of a wireframe" />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          The purpose of a wireframe is to visually map out the basic structure and functionality of a website, app, or
+          digital product before adding any detailed design elements or content. Wireframes focus on layout, user flow,
+          and placement of key elements like menus, buttons, and content sections, helping teams to plan and refine
+          usability, navigation, and information architecture at an early stage.
+        </p>
+        <a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/">Read more</a>
+      </article>
+
+      <article>
+        <!--add third image on the right to main content-->
+        <img src="images/branchGit.jpeg" alt="image of a example of a git branch" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch in Git is an independent line of development that allows you to work on new features, bug fixes, or
+          experiments in isolation from the main code base (usually the main or master branch). It works like a parallel
+          workspace where changes can be made without affecting other branches, enabling multiple streams of work to
+          happen simultaneously.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
       </article>
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Made with love, Tam.</p>
     </footer>
   </body>
-</html>
+</html>

Wireframe/style.css

@@ -30,6 +30,7 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  text-align: center;
 }
 a {
   padding: var(--space);

readme.md

@@ -2,15 +2,9 @@
 
 ## 🔑 Do the prep
 
-Before you try to complete the work in this repo, go to your curriculum and work through the prep. The prep shows you how to complete the work in this repo. Start with the prep.
+I deleted some texts here.
+Hope that works!!
 
+https://github.com/HackYourFutureBelgium
 
-## 📅 Planning and managing your work
-
-All the coursework is listed as issues on this repo. 
-
-You will copy these issues to your Coursework Planner, which is one repo that will hold all your coursework and assignments for the entire course.
-
-If you do not already have your own Coursework Planner, set one up now:
-
-https://github.com/HackYourFutureBelgium/My-Coursework-Planner
+I change something here!