From 8e53a0ead5988094fa7f4f58190bdbf16510d260 Mon Sep 17 00:00:00 2001 From: Samiuk <156331030+HoussamLh@users.noreply.github.com> Date: Sat, 10 May 2025 10:24:22 +0100 Subject: [PATCH 1/7] Update index.html this is the update the index page --- Wireframe/index.html | 67 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 54 insertions(+), 13 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..c7f1f96c9 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,25 +8,66 @@
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

+

What is a Wireframe

+

+ A wireframe is a visual representation of a user interface, + often used in the early stages of design to outline the structure and layout of a website or application. +

-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. +

+ A basic wireframe layout +

What is the purpose of a wireframe?

+

+ A wireframe serves as a visual guide that represents the skeletal framework of a website or application. + The primary purpose of a wireframe is to establish the basic structure and layout of a website + or application before visual design and content are added. It acts as a blueprint, outlining the + placement of elements like headings, paragraphs, images, buttons, and navigation. Wireframes help designers, developers, + and stakeholders visualize the user experience and identify potential issues early in the project. +

+ Read more +
+
+ README File +

What is the README File?

+

+ A README file is a text file that
information about a project. + It is typically included in the root directory of a
project + and is often the first file that users see when they access the project,
+ providing users with essential information about the
project, + its purpose, how to use it, and where to find help or support.
+ It's often the first thing someone will see when they access a project, + making it a crucial tool for communication and documentation.
+ A well-structured README file can help users understand the project quickly and effectively.
+
+ A typical README file might include:
+ Project Overview,Installation Instructions,Usage Examples,Contribution Guidelines,Troubleshooting,Changelog.
+
+ README files are often written in Markdown, a lightweight markup language that allows for easy formatting.
+

+ Read more +
+ +
+ Git-Branch +

What is a branch in Git?

+

+ A branch in Git is a pointer to a specific
+ commit in the repository's history. When you create a new branch,
+ you're essentially creating a new line of development that diverges
+ from the main line (usually the master branch).A branch in
+ Git is simply a lightweight movable pointer to one
+ of these commits.The default branch name in Git is master. As you
+ start making commits, you'regiven a master branch that points to the last commit you made.
+ Every time you commit,the master branch pointer moves forward automatically. Note.

- Read more + Read more
From d40f2e1ce80b44575c04caa1c7bd189860e8abaf Mon Sep 17 00:00:00 2001 From: Samiuk <156331030+HoussamLh@users.noreply.github.com> Date: Sat, 10 May 2025 10:31:54 +0100 Subject: [PATCH 2/7] Update style.css --- Wireframe/style.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..93d2489ca 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,11 +31,20 @@ body { color: var(--ink); font: var(--font); } +#wireframe-definition { + text-align: center; +} a { padding: var(--space); border: var(--line); max-width: fit-content; } + +h1 { + font-size: clamp(1.5rem, 1.5rem + 2vw, 3rem); + margin: var(--space) 0; + text-align: center; +} img, svg { width: 100%; @@ -47,7 +56,7 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ */ main { max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + margin: 0 auto calc(var(--space) * 4) auto } footer { position: fixed; From df8ade737237abb6e849e7e593f2709da55d2099 Mon Sep 17 00:00:00 2001 From: HoussamLh <156331030+HoussamLh@users.noreply.github.com> Date: Fri, 16 May 2025 12:44:50 +0100 Subject: [PATCH 3/7] Update index.html --- Wireframe/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index c7f1f96c9..1761c5945 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,21 +3,21 @@ - Wireframe + Wireframe

What is a Wireframe

- A wireframe is a visual representation of a user interface, + A wireframe is a visual representation of a user interface, often used in the early stages of design to outline the structure and layout of a website or application.

A basic wireframe layout -

What is the purpose of a wireframe?

+

What is the purpose of a wireframe?

A wireframe serves as a visual guide that represents the skeletal framework of a website or application. The primary purpose of a wireframe is to establish the basic structure and layout of a website From 7661a825322b4886a289790368bc0363a7bd7e4f Mon Sep 17 00:00:00 2001 From: HoussamLh <156331030+HoussamLh@users.noreply.github.com> Date: Sat, 24 May 2025 11:21:45 +0100 Subject: [PATCH 4/7] No CSS and No JAVAScript --- Form-Controls/index.html | 56 +++++++++++++++++++++++++++++++++++----- 1 file changed, 50 insertions(+), 6 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cdb..37ae1c8c7 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -8,20 +8,64 @@ -

+

Product Pick

- - +

Order Form

+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
-

By HOMEWORK SOLUTION

+

HOMEWORK SOLUTION

+

Created By @Houssam Lahlah

From 8e835be5534cfdada3708bf6fb14ce0253124091 Mon Sep 17 00:00:00 2001 From: HoussamLh <156331030+HoussamLh@users.noreply.github.com> Date: Sun, 7 Sep 2025 14:59:01 +0100 Subject: [PATCH 5/7] index.html - Cleaning my form control branch. --- Wireframe/index.html | 69 +++++++++----------------------------------- 1 file changed, 14 insertions(+), 55 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 1761c5945..0e014e535 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,71 +3,30 @@ - Wireframe + Wireframe
-

What is a Wireframe

-

- A wireframe is a visual representation of a user interface, - often used in the early stages of design to outline the structure and layout of a website or application. -

+

Wireframe

+

+ This is the default, provided code and no changes have been made yet. +

-
- A basic wireframe layout -

What is the purpose of a wireframe?

-

- A wireframe serves as a visual guide that represents the skeletal framework of a website or application. - The primary purpose of a wireframe is to establish the basic structure and layout of a website - or application before visual design and content are added. It acts as a blueprint, outlining the - placement of elements like headings, paragraphs, images, buttons, and navigation. Wireframes help designers, developers, - and stakeholders visualize the user experience and identify potential issues early in the project. -

- Read more -
-
- README File -

What is the README File?

-

- A README file is a text file that
information about a project. - It is typically included in the root directory of a
project - and is often the first file that users see when they access the project,
- providing users with essential information about the
project, - its purpose, how to use it, and where to find help or support.
- It's often the first thing someone will see when they access a project, - making it a crucial tool for communication and documentation.
- A well-structured README file can help users understand the project quickly and effectively.
-
- A typical README file might include:
- Project Overview,Installation Instructions,Usage Examples,Contribution Guidelines,Troubleshooting,Changelog.
-
- README files are often written in Markdown, a lightweight markup language that allows for easy formatting.
-

- Read more -
- -
- Git-Branch -

What is a branch in Git?

-

- A branch in Git is a pointer to a specific
- commit in the repository's history. When you create a new branch,
- you're essentially creating a new line of development that diverges
- from the main line (usually the master branch).A branch in
- Git is simply a lightweight movable pointer to one
- of these commits.The default branch name in Git is master. As you
- start making commits, you'regiven a master branch that points to the last commit you made.
- Every time you commit,the master branch pointer moves forward automatically. Note.
+

+ +

Title

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, + voluptates. Quisquam, voluptates.

- Read more + Read more
-

- © 2025 Houssam Lahlah | - CodeYourFuture | All rights reserved. +

+ This is the default, provided code and no changes have been made yet.

From d809ce68a0b8c60cca479f2c146b2839ca40871e Mon Sep 17 00:00:00 2001 From: HoussamLh <156331030+HoussamLh@users.noreply.github.com> Date: Tue, 9 Sep 2025 14:21:41 +0100 Subject: [PATCH 6/7] index.html - I cleaned my branch Feature/FormControl. - Validate my code on the Html validator online. --- Form-Controls/index.html | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 37ae1c8c7..00b9d91d9 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,14 +1,13 @@ - - + My form exercise - - + + -
+

Product Pick

@@ -23,7 +22,7 @@

Order Form

required pattern="^[a-zA-Z\s'-]+$" title="Please enter a valid name containing only letters, spaces, hyphens, and apostrophes." - /> + >
@@ -33,7 +32,7 @@

Order Form

id="customerEmail" name="customerEmail" required - /> + >
@@ -47,7 +46,7 @@

Order Form

- +