Jan-2025 | Fatimatou Bah | Onboarding | WEEK1 | Form control

Form-Controls/index.html

@@ -13,15 +13,48 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
+        <div>
+          <label for="name">Name</label>
+          <input type="text" name="name" id="name" required>
+        </div>
+        <div>
+          <label for="email">Email</label>
+          <input type="email" name="email" id="email" required>
+        </div>
+        <div>
+          <label for="colour">T-shirt Colour</label>
+          <select name="colour" id="colour" single>
+            <option>Red</option>
+            <option>Green</option>
+            <option>Blue</option>
+          </select>
+        </div>
+        <div>
+          <label>Size</label>
+          <select name="size" id="size" single>
+            <option>XS</option>
+            <option>S</option>
+            <option>M</option>
+            <option>L</option>
+            <option>XL</option>
+            <option>XLL</option>
+          </select>
+        </div>
+        <div>
+          <button type="submit">Submit</button>
+        </div>
         <!-- write your html here-->
         <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+          1. What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.
+2. What is the customer's email? I must make sure the email is valid. Email addresses have a consistent pattern.
+3. What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?
+4. What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL
+-->
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Fatimatou Bah</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

@@ -10,23 +10,38 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Understanding README files, wireframes, and Git branches.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="placeholder.svg" alt="Illustration of README file" />
+        <h2>What is a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file provides an overview of a project, including setup and usage instructions.
         </p>
-        <a href="">Read more</a>
+        <a href="#">Read more</a>
+      </article>
+      <article>
+        <img src="placeholder.svg" alt="Illustration of a wireframe" />
+        <h2>What is a Wireframe?</h2>
+        <p>
+          A wireframe is a visual guide that represents the structure of a webpage.
+        </p>
+        <a href="#">Read more</a>
+      </article>
+      <article>
+        <img src="placeholder.svg" alt="Illustration of a Git branch" />
+        <h2>What is a Git Branch?</h2>
+        <p>
+          A Git branch allows developers to work on features seperately before merging them.
+        </p>
+        <a href="#">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        &copy; 2025 Wireframe.
       </p>
     </footer>
   </body>

Wireframe/style.css

@@ -30,17 +30,21 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
-}
-img,
-svg {
+header {
+  text-align: center;
+  padding: 20px;
+  background-color: rgb(77, 190, 196);
+  color: Black;
   width: 100%;
-  object-fit: cover;
 }
+
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -50,9 +54,13 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
+  width: 100%;
   position: fixed;
   bottom: 0;
+  background: rgb(77, 190, 196);
+  color: Black;
   text-align: center;
+  padding: 10px;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -65,6 +73,7 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
+  padding: var(--space);
   > *:first-child {
     grid-column: span 2;
   }
@@ -75,15 +84,46 @@ 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 {
+  background: white;
   border: var(--line);
+  border-radius: 8px;
+  overflow: hidden;
   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;
-  }
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+}
+/* First article spans full width */
+article:first-child {
+  grid-column: span 2; /* Make first article span full width */
+}
+article img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+article h2 {
+  margin-top: var(--space);
 }
+
+article p {
+  font-size: 1rem;
+}
+
+article a {
+  text-align: center;
+  background: #007bff;
+  color: white;
+  text-decoration: none;
+  margin-top: auto; /* Push button to bottom */
+  padding: var(--space);
+  border: var(--line);
+  max-width: fit-content;
+}
+
+article a:hover {
+  background: #0056b3;
+}
+