From 18240d2b0b2b0132f182e72b0663d9603dd14800 Mon Sep 17 00:00:00 2001
From: IslamFawzy25 <135343366+IslamFawzy25@users.noreply.github.com>
Date: Tue, 30 Jul 2024 13:02:55 +0200
Subject: [PATCH] Update readme.md

add html and css  best practices
---
 The-one-and-only-week1/readme.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/The-one-and-only-week1/readme.md b/The-one-and-only-week1/readme.md
index bf891c5..6f69b1a 100644
--- a/The-one-and-only-week1/readme.md
+++ b/The-one-and-only-week1/readme.md
@@ -1,5 +1,30 @@
 # Order form exercise
 
+# HTML & CSS Best Practices Exercise
+
+## HTML Best Practices
+
+- **HTML Element Structure**
+  - Use semantic elements like `<main>`, `<section>`, `<header>`, and `<footer>` and smaller elements like `<div>`, `<h1>`, `<p>`, `<form>`, and `<input>`.
+
+- **Form Elements**
+  - Focus on various `<input>` types: `text`, `number`, `tel`, `email`, and `checkbox`.
+  - Implement attributes like `required` to ensure proper form validation.
+  - Learn how to wrap elements like `<img>` and `<input type="checkbox">` in a container to trigger checkbox selection via image click.
+
+## CSS Best Practices
+
+- **Class Naming and Structure**
+  - Use meaningful class names and structure for maintainable CSS.
+  - Target child elements efficiently using parent class selectors.
+
+- **Flexbox Layout**
+  - Utilize CSS Flexbox for creating flexible and responsive layouts.
+
+- **Responsive Design**
+  - Apply responsive design principles using media queries and flexible grid systems.
+
+
 Use the `Session-exercise-template` to get started!
 
 Design: