From 136970af02f1cb09ec47653ab36733a8fd3768b9 Mon Sep 17 00:00:00 2001 From: Lavanya-Projects Date: Thu, 7 May 2026 09:16:11 +0100 Subject: [PATCH 1/9] My First Commit I changed the title a bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 80aa49666..b237de98e 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Coursework + CourseWork +

+ + +

+

+ + +

+

+ + +

+ \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 5b96a9603..6e21459a4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,51 +1,66 @@ - - - - Wireframe - - - -
-

WIREFRAME

-

-A wireframe is a simple visual outline of a webpage or app screen. Think of it like a blueprint for a house; it shows the structure, not the decoration.

-
-
-
- ReadMe file Image -

README file

-

- A README is the first file people read when they open a project. It explains what the project is, how to install it, how to use it, and any important notes. It helps users and contributors understand the project quickly without reading all the code. -

- Read more -
-
- Image of wireframe -

Wireframe

-

- A wireframe is a simple sketch that maps out the layout of a webpage before any design work begins. It focuses on the placement of elements like headings, images, buttons, and text blocks.
-Instead of thinking about colours or styling, a wireframe helps you understand how information is organised and how users will move through the page. It’s a planning tool that shows structure first, design later. -

- Read more -
-
- Git Branch Image -

Git Branch

-

- A Git branch is a separate workspace where you can make changes without affecting the main project.
-It lets you develop features, fix bugs, or experiment safely. When the work is ready, the branch is merged back into the main codebase. -

- Read more -
+ + + + Wireframe + + -
- - - + Read + more + +
+ Image of wireframe +

Wireframe

+

+ A wireframe is a simple sketch that maps out the layout of a webpage before any design work begins. It focuses + on the placement of elements like headings, images, buttons, and text blocks.
+ + Instead of thinking about colours or styling, a wireframe helps you understand how information is organised and + how users will move through the page. It’s a planning tool that shows structure first, design later. +

+ Read more +
+
+ Git Branch Image +

Git Branch

+

+ A Git branch is a separate workspace where you can make changes without affecting the main project.
+ It lets you develop features, fix bugs, or experiment safely. When the work is ready, the branch is merged back + into the main codebase. +

+ Read more +
+ + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..e3620490e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,96 @@ -/* 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; - } -} +/* 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 */ + h1{ + text-align: center; + } + .description{ + text-align: center; + + } +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/trailform/trailform.html b/trailform/trailform.html new file mode 100644 index 000000000..f77a77d04 --- /dev/null +++ b/trailform/trailform.html @@ -0,0 +1,77 @@ +
+ + + + + + + + + + + +
\ No newline at end of file From 6b1afa2ac0614c60055e401503680eac4a145429 Mon Sep 17 00:00:00 2001 From: Lavanya-Projects Date: Sun, 24 May 2026 02:07:43 +0100 Subject: [PATCH 6/9] deleted my local files --- Form-Controls/firstform.html | 79 ------------------------------------ trailform/trailform.html | 77 ----------------------------------- 2 files changed, 156 deletions(-) delete mode 100644 Form-Controls/firstform.html delete mode 100644 trailform/trailform.html diff --git a/Form-Controls/firstform.html b/Form-Controls/firstform.html deleted file mode 100644 index 654fc91b1..000000000 --- a/Form-Controls/firstform.html +++ /dev/null @@ -1,79 +0,0 @@ -
- -

- - -

-

- - -

-

- - -

-
\ No newline at end of file diff --git a/trailform/trailform.html b/trailform/trailform.html deleted file mode 100644 index f77a77d04..000000000 --- a/trailform/trailform.html +++ /dev/null @@ -1,77 +0,0 @@ -
- - - - - - - - - - - -
\ No newline at end of file From e087edcd76f0571a4960de27141fb4399e05432d Mon Sep 17 00:00:00 2001 From: Lavanya-Projects Date: Sun, 24 May 2026 02:55:03 +0100 Subject: [PATCH 7/9] Centered page title and description and footer content set to center and bottom --- Wireframe/style.css | 43 +++++++------------------------------------ 1 file changed, 7 insertions(+), 36 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index e3620490e..d264c97d7 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,21 +1,4 @@ -/* 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); @@ -24,8 +7,7 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + h1{ text-align: center; } @@ -48,26 +30,19 @@ 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; + position:relative; bottom: 0; + width: 100%; + color:black; 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; @@ -76,11 +51,7 @@ main { 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); From ab586d1f8a0dc884f5d2d5a2e674deda195f1d6d Mon Sep 17 00:00:00 2001 From: Lavanya-Projects Date: Sun, 24 May 2026 14:03:20 +0100 Subject: [PATCH 8/9] Revert "My First Commit" This reverts commit 136970af02f1cb09ec47653ab36733a8fd3768b9. --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b237de98e..80aa49666 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - CourseWork + Coursework