diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 65a866cd..f5d35932 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -3,25 +3,53 @@ - My form exercise + T-Shirt Order Form
-

Product Pick

+

T-Shirt Order

- - -
+
+ Customer Details + +
+

+ +
+

+
+ +
+ T-Shirt Options + +
+

+ +
+

+
+ + +
diff --git a/Wireframe/index.html b/Wireframe/index.html deleted file mode 100644 index 0e014e53..00000000 --- a/Wireframe/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - Wireframe - - - -
-

Wireframe

-

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

-
-
-
- -

Title

-

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

- Read more -
-
- - - diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg deleted file mode 100644 index ac36a0ab..00000000 --- a/Wireframe/placeholder.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css deleted file mode 100644 index be835b6c..00000000 --- a/Wireframe/style.css +++ /dev/null @@ -1,89 +0,0 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ -:root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; - --container: 1280px; -} -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ -body { - background: var(--paper); - color: var(--ink); - font: var(--font); -} -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; -} -img, -svg { - width: 100%; - object-fit: cover; -} -/* ====== Site Layout ====== -Setting the overall rules for page regions -https://www.w3.org/WAI/tutorials/page-structure/regions/ -*/ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; -} -footer { - position: fixed; - bottom: 0; - text-align: center; -} -/* ====== Articles Grid Layout ==== -Setting the rules for how articles are placed in the main element. -Inspect this in Devtools and click the "grid" button in the Elements view -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ -main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } -} -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -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 { - border: var(--line); - 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; - } -} diff --git a/Wireframe/README.md b/wireframe/README.md similarity index 100% rename from Wireframe/README.md rename to wireframe/README.md diff --git a/wireframe/git2.png b/wireframe/git2.png new file mode 100644 index 00000000..c6fe9141 Binary files /dev/null and b/wireframe/git2.png differ diff --git a/wireframe/github.jpg b/wireframe/github.jpg new file mode 100644 index 00000000..61a0418a Binary files /dev/null and b/wireframe/github.jpg differ diff --git a/wireframe/index.html b/wireframe/index.html new file mode 100644 index 00000000..e3f57328 --- /dev/null +++ b/wireframe/index.html @@ -0,0 +1,50 @@ + + + + + + Understanding READMEs, Wireframes, and Git Branches + + + + +
+

Key Concepts in Software Development

+

Exploring the importance of documentation, planning, and version control.

+
+ +
+
+ +
+ +

What is the purpose of a wireframe?

+ +

A wireframe is a visual representation of a webpage or application's layout. It's a low-fidelity design, focusing on the structure and arrangement of elements rather than visual details like colors or fonts. Wireframes help in planning the user interface and user experience before moving to more detailed design stages.

+ Learn More +
+
h +
+
+ +

What is the purpose of a README file?

+

A README file is a crucial document typically included in the root directory of a software project. It serves as an introduction to the project, providing essential information for developers and users. Think of it as the project's welcome guide.

+ Learn More +
+ + + +
+ +

What is a branch in Git?

+

In Git, a branch is a separate line of development. It allows developers to work on new features or bug fixes without affecting the main codebase (often called the "main" or "master" branch). This isolation is crucial for maintaining stability and enabling parallel development. Once the changes are tested and approved, the branch can be merged back into the main branch.

+ Learn More +
+
+
+ + + + \ No newline at end of file diff --git a/wireframe/readme.avif b/wireframe/readme.avif new file mode 100644 index 00000000..5e731cf3 Binary files /dev/null and b/wireframe/readme.avif differ diff --git a/wireframe/redame.png b/wireframe/redame.png new file mode 100644 index 00000000..64c3e896 Binary files /dev/null and b/wireframe/redame.png differ diff --git a/wireframe/style.css b/wireframe/style.css new file mode 100644 index 00000000..a5796277 --- /dev/null +++ b/wireframe/style.css @@ -0,0 +1,71 @@ +body { + font-family: sans-serif; + margin: 0; /* Remove default margins */ + display: flex; + flex-direction: column; + min-height: 100vh; +} + +header { + background-color: #f0f0f0; + padding: 20px; + text-align: center; + +} + +main { + padding: 20px; + flex: 1; /* Allow main content to expand */ +} + +#main-img{ + width: 100%; + height: 300px; +} +#art-img{ + width: 200px; +} + + +article { + border: 1px solid #ccc; + padding: 20px; + border-radius: 5px; + background-color: #f8f8f8; +} + +article h2 { + margin-top: 0; +} + +article a { + display: inline-block; + padding: 10px 20px; + background-color: #007bff; + color: white; + text-decoration: none; + border-radius: 5px; +} + +footer { + background-color: #333; + color: white; + text-align: center; + padding: 10px; + position: relative; /* Needed for sticky footer */ + bottom: 0; /* Stick to bottom */ + width: 100%; /* Full width */ +} + + +#articles { + display: grid; + grid-template-columns: 1fr; /* Single column by default (mobile) */ + gap: 20px; +} + +@media (min-width: 768px) { /* Example breakpoint for larger screens */ + #articles { + grid-template-columns: 1fr 1fr; /* Two columns on larger screens */ + } +} \ No newline at end of file diff --git a/wireframe/webdev.avif b/wireframe/webdev.avif new file mode 100644 index 00000000..06e205fa Binary files /dev/null and b/wireframe/webdev.avif differ diff --git a/Wireframe/wireframe.png b/wireframe/wireframe.png similarity index 100% rename from Wireframe/wireframe.png rename to wireframe/wireframe.png