diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..443b70a1f 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -6,6 +6,59 @@ My form exercise +
@@ -13,15 +66,76 @@

Product Pick

- - +
+ + + Must be at least 2 characters long +
+ +
+ + + Must be at least 2 characters long +
+ +
+ + + Must be a valid email address +
+ +
+ + + Must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character +
+ +
+ Shirt Color + + +
+ +
+ + +
+ + +
+ +
+ +
diff --git a/Wireframe/Wireframe.png b/Wireframe/Wireframe.png new file mode 100644 index 000000000..3b9177fa8 Binary files /dev/null and b/Wireframe/Wireframe.png differ diff --git a/Wireframe/git_branch.png b/Wireframe/git_branch.png new file mode 100644 index 000000000..3ffd45196 Binary files /dev/null and b/Wireframe/git_branch.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..3d63e6cb7 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,24 +10,129 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + An Article about the purpose of a readme file ,and a wireframe, + and also on what a Git branch is and how to use it.

- -

Title

+ Readme diagram Image +

What is the Purpose of a Readme File?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + The purpose of a readme file is to provide, + information about a project, + and can be summarized under these headings below.

- Read more +
    +
  1. Project Overview
    2. + +
  2. Installation Instructions
    3. + +
  3. Usage Guidelines
    4. + +
  4. Usage Examples
    5. + +
  5. Contributing Guidelines
    6. + +
+

It gives a clear overview of what the project does and why it exists. + This helps users immediately understand the purpose.

+

It provides step-by-step instructions on how to install and set up the project, + making it easier for users to get started.

+

It offers guidance on how to use the project effectively, + including examples and best practices.

+

It provides practical examples + of how to use the project in real-world scenarios.

+

It outlines the process for + contributing to the project, + including code style guidelines + and pull request procedures.

+ Read more
+ + +
+ A Wireframe diagram +

What is the Purpose of a Wireframe?

+

+ In short, a wireframe’s purpose is to visualize the skeleton of a digital product, + helping teams plan, test, and communicate ideas efficiently before moving to detailed design. + The can be summarized under these headings below.

+
    +
  1. Clarify Structure and Layout
    2. + +
  2. Focus on Functionality, Not Aesthetics
    3. + +
  3. Facilitate Communication
    4. + +
  4. Test User Flow Early
    5. + +
  5. Save Time and Cost
    6. + +
  6. Serve as a Blueprint for Design and Development
    7. + +
+

It defines where elements like headers, buttons, + forms, and navigation will appear, + ensuring logical flow and usability.

+

Wireframes strip away colors and + visuals so teams can concentrate on user experience + (UX) and interaction design first.

+

They help designers, + developers, and + stakeholders align on what the product will do + — reducing misunderstandings late

+

Wireframes allow quick validation of navigation paths + and task completion before investing in full design or development..

+

By catching usability issues early, + wireframes prevent expensive redesigns later in the project.

+

BThey act as a reference point for UI designers and developers, + ensuring consistency and clarity throughout the build.

+ Read more +
+ + +
+ + A Git branch diagram +

What Is a Git Branch?

+

+ In Git, a branch is like a separate workspace + where you can make changes and try new ideas without affecting the main project. + Think of it as a "parallel universe" for your code.The purpose of a Git branch is as highlisted below.

+
    +
  1. Isolate Work.
    2. + +
  2. Enable Collaboration.
    3. + +
  3. Experiment Safely.
    4. + +
  4. Simplify Version Control.
    5. +
  5. Facilitate Code Reviews.
    6. + +
+

Branches let you work on new features or + fixes without affecting the stable version of your project.

+

Multiple developers can work on different branches at the same time — + Git merges their work later, + ensuring smooth teamwork.

+

You can test ideas or refactor code in a branch. + If it doesn’t work, you can delete the branch without harming the main project

+

Branches make it easy to manage releases, hotfixes, + and long-term development lines..

+

They allow for code reviews and discussions before merging changes into the main branch, + improving code quality.

+ Read more +
diff --git a/Wireframe/readme.png b/Wireframe/readme.png new file mode 100644 index 000000000..c83cbfcfd Binary files /dev/null and b/Wireframe/readme.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..1585c4ab4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -86,4 +86,4 @@ article { > img { grid-column: span 3; } -} +} \ No newline at end of file diff --git a/Wireframe/wireframe.png b/Wireframe/wireframe.png deleted file mode 100644 index 731f01503..000000000 Binary files a/Wireframe/wireframe.png and /dev/null differ