From 9297087cfb2278bdad77cca8837818605352d235 Mon Sep 17 00:00:00 2001 From: connorpar Date: Sat, 31 Jan 2026 10:38:43 +0000 Subject: [PATCH 01/14] Layout updated to match guide --- Wireframe/index.html | 46 ++++++++++++++++++++++++++++++++------------ Wireframe/style.css | 25 ++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 12 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..42505b725 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,53 @@ - Wireframe + Three Key Tech Tips
-

Wireframe

-

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

Three Key Tech Tips

+

+ Here are some useful things to know when learning to create your own websites

-

Title

-

+

The Purpose of a Readme File

+

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

- Read more + Read More
+
+

+ The Purpose of A Wireframe +

+ +

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

+ Read More +
+
+

+ What is a Git Branch +

+ +

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

+ Read More +
- + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..1443b55aa 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -22,8 +22,11 @@ As well as useful links to learn more */ --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; + --line2: 5px solid; --container: 1280px; } + + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { @@ -31,6 +34,23 @@ body { color: var(--ink); font: var(--font); } +h1 { + text-align: center; + font-size: 50px; +} +h2 { + text-align: center; + font-size: 30px; +} + +#p_readme { + text-align: left; + font-size: 22px; +} +#p_description { + text-align: center; + font-size: 26px; +} a { padding: var(--space); border: var(--line); @@ -50,8 +70,13 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { + border: var(--line2); position: fixed; bottom: 0; + left: 0; + width: 100%; + background-color: rgb(172, 29, 29); + border-color: black; text-align: center; } /* ====== Articles Grid Layout ==== From 0717994822f51ec8ce30a64c4c47bff89cf5ffd0 Mon Sep 17 00:00:00 2001 From: connorpar Date: Sun, 15 Feb 2026 19:14:01 +0000 Subject: [PATCH 02/14] articles updated and links added to each section --- Wireframe/index.html | 33 +++++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 10 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 42505b725..36f8ab40e 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -18,10 +18,12 @@

Three Key Tech Tips

The Purpose of a Readme File

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A readme file is a very important part of any GitHub repository. It is often the first item a visitor will see + when landing on a repository. A readme file should provide users with information about the purpose of a + project, how to use it effectively and who the contributers and maintainers of the project are.

- Read More + Read More

@@ -29,10 +31,14 @@

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A wireframe in web design is a basic visual representation of a webpage + that helps to outline its overall stucture and functionality. + Wireframes are used early in the development process to demonstrate the basic + structure of a page before visual design and content are added. The simplicity + of wireframes allow for changes and iterations to be made quickly and easily.

- Read More + Read More

@@ -40,15 +46,22 @@

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A git branch is a pointer to a snapshot of all the changes that occured + on that branch. Upon creating a new GitHub repository you will usually + be on the main branch by default. You can create additional branches which + are like separate workspaces to make changes to a project or test other features + without compromising the base project. Branches are useful when working + on a project with many collaborators as each individual can make changes on their own local + copy of a project and propose their changes to be integrated to the main branch + after approval.

- Read More + Read More
From 70d61063172db3be3859fa9a021681eae370368e Mon Sep 17 00:00:00 2001 From: connorpar Date: Sun, 15 Feb 2026 20:08:33 +0000 Subject: [PATCH 03/14] Updated footer --- Wireframe/style.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 1443b55aa..f6008450a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -70,11 +70,12 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - border: var(--line2); + border: var(--line); position: fixed; - bottom: 0; - left: 0; - width: 100%; + bottom: -2px; + left: 50%; + transform: translateX(-50%); + width: 1280px; background-color: rgb(172, 29, 29); border-color: black; text-align: center; From cb2c56d3bef279e154433feb65781bd221c25b09 Mon Sep 17 00:00:00 2001 From: connorpar Date: Sun, 15 Feb 2026 20:11:29 +0000 Subject: [PATCH 04/14] changed footer background colour --- Wireframe/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index f6008450a..b1a6c9580 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -76,7 +76,7 @@ footer { left: 50%; transform: translateX(-50%); width: 1280px; - background-color: rgb(172, 29, 29); + background-color: rgb(202, 160, 160); border-color: black; text-align: center; } From ef1f534664b8378e41b8bb7ac651101fa2c00a53 Mon Sep 17 00:00:00 2001 From: connorpar Date: Sun, 15 Feb 2026 20:17:47 +0000 Subject: [PATCH 05/14] Title description update --- Wireframe/index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 36f8ab40e..6253afdef 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,9 +8,10 @@
-

Three Key Tech Tips

+

Three Tech Tips

- Here are some useful things to know when learning to create your own websites + Here are some useful things to know when learning to create your own websites + and manage tech projects.

From f1d57f0d07d1c9c4eeace617878d4ee63ae67263 Mon Sep 17 00:00:00 2001 From: connorpar Date: Mon, 16 Feb 2026 01:49:21 +0000 Subject: [PATCH 06/14] added images --- Wireframe/index.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 6253afdef..534fc1e46 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -16,7 +16,7 @@

Three Tech Tips

- + Readme

The Purpose of a Readme File

A readme file is a very important part of any GitHub repository. It is often the first item a visitor will see @@ -30,7 +30,7 @@

The Purpose of a Readme File

The Purpose of A Wireframe

- + Wireframe

A wireframe in web design is a basic visual representation of a webpage that helps to outline its overall stucture and functionality. @@ -45,7 +45,8 @@

What is a Git Branch

- + Git Branch Model

A git branch is a pointer to a snapshot of all the changes that occured on that branch. Upon creating a new GitHub repository you will usually From d4157c4d07ed2a791d7d1240f83952d0f555038a Mon Sep 17 00:00:00 2001 From: connorpar Date: Mon, 16 Feb 2026 01:51:46 +0000 Subject: [PATCH 07/14] syntax errors fix --- Wireframe/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 534fc1e46..f9caf7452 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,10 +1,10 @@ - - + + Three Key Tech Tips - +

@@ -16,7 +16,7 @@

Three Tech Tips

- Readme + Readme

The Purpose of a Readme File

A readme file is a very important part of any GitHub repository. It is often the first item a visitor will see @@ -30,7 +30,7 @@

The Purpose of a Readme File

The Purpose of A Wireframe

- Wireframe + Wireframe

A wireframe in web design is a basic visual representation of a webpage that helps to outline its overall stucture and functionality. @@ -46,7 +46,7 @@

What is a Git Branch

Git Branch Model + alt="Git Branch Model">

A git branch is a pointer to a snapshot of all the changes that occured on that branch. Upon creating a new GitHub repository you will usually From 8663cfb5db30d5719e78a75b28735d80a628e484 Mon Sep 17 00:00:00 2001 From: connorpar Date: Mon, 16 Feb 2026 14:23:53 +0000 Subject: [PATCH 08/14] changed indentation with format document --- Wireframe/index.html | 136 ++++++++++++++++++++++--------------------- 1 file changed, 70 insertions(+), 66 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index f9caf7452..77b7e61a6 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,70 +1,74 @@ - - - - Three Key Tech Tips - - - -

-

Three Tech Tips

-

- Here are some useful things to know when learning to create your own websites - and manage tech projects. + + + + + Three Key Tech Tips + + + + +

+

Three Tech Tips

+

+ Here are some useful things to know when learning to create your own websites + and manage tech projects. +

+
+
+
+ Readme +

The Purpose of a Readme File

+

+ A readme file is a very important part of any GitHub repository. It is often the first item a visitor will see + when landing on a repository. A readme file should provide users with information about the purpose of a + project, how to use it effectively and who the contributers and maintainers of the project are.

-
-
-
- Readme -

The Purpose of a Readme File

-

- A readme file is a very important part of any GitHub repository. It is often the first item a visitor will see - when landing on a repository. A readme file should provide users with information about the purpose of a - project, how to use it effectively and who the contributers and maintainers of the project are. -

- Read More -
-
-

- The Purpose of A Wireframe -

- Wireframe -

- A wireframe in web design is a basic visual representation of a webpage - that helps to outline its overall stucture and functionality. - Wireframes are used early in the development process to demonstrate the basic - structure of a page before visual design and content are added. The simplicity - of wireframes allow for changes and iterations to be made quickly and easily. -

- Read More -
-
-

- What is a Git Branch -

- Git Branch Model -

- A git branch is a pointer to a snapshot of all the changes that occured - on that branch. Upon creating a new GitHub repository you will usually - be on the main branch by default. You can create additional branches which - are like separate workspaces to make changes to a project or test other features - without compromising the base project. Branches are useful when working - on a project with many collaborators as each individual can make changes on their own local - copy of a project and propose their changes to be integrated to the main branch - after approval. -

- Read More -
-
-
- -
- - +
+
+

+ The Purpose of A Wireframe +

+ Wireframe +

+ A wireframe in web design is a basic visual representation of a webpage + that helps to outline its overall stucture and functionality. + Wireframes are used early in the development process to demonstrate the basic + structure of a page before visual design and content are added. The simplicity + of wireframes allow for changes and iterations to be made quickly and easily. +

+ Read More +
+
+

+ What is a Git Branch +

+ Git Branch Model +

+ A git branch is a pointer to a snapshot of all the changes that occured + on that branch. Upon creating a new GitHub repository you will usually + be on the main branch by default. You can create additional branches which + are like separate workspaces to make changes to a project or test other features + without compromising the base project. Branches are useful when working + on a project with many collaborators as each individual can make changes on their own local + copy of a project and propose their changes to be integrated to the main branch + after approval. +

+ Read More +
+
+
+ +
+ + + \ No newline at end of file From 504aeff7a08d43f51938cce7e8b247251eeed62a Mon Sep 17 00:00:00 2001 From: connorpar Date: Mon, 16 Feb 2026 14:58:18 +0000 Subject: [PATCH 09/14] Changed article 2 and 3 structures --- Wireframe/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 77b7e61a6..0c82c9d9d 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -30,11 +30,11 @@

The Purpose of a Readme File

target="_blank">Read More
+ Wireframe

The Purpose of A Wireframe

- Wireframe

A wireframe in web design is a basic visual representation of a webpage that helps to outline its overall stucture and functionality. @@ -45,12 +45,12 @@

Read More

+ Git Branch Model

What is a Git Branch

- Git Branch Model

A git branch is a pointer to a snapshot of all the changes that occured on that branch. Upon creating a new GitHub repository you will usually From 1f2d33c520d4f741a5025053214f5ff7d4719041 Mon Sep 17 00:00:00 2001 From: connorpar Date: Mon, 16 Feb 2026 15:26:03 +0000 Subject: [PATCH 10/14] changed to relative units for font size --- Wireframe/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index b1a6c9580..56ab44a0b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -36,20 +36,20 @@ body { } h1 { text-align: center; - font-size: 50px; + font-size: 3rem; } h2 { text-align: center; - font-size: 30px; + font-size: 2rem; } #p_readme { text-align: left; - font-size: 22px; + font-size: 1rem; } #p_description { text-align: center; - font-size: 26px; + font-size: 1rem; } a { padding: var(--space); From 711ee39f23cdbcac935f29eb4a06fb8a94e4a00e Mon Sep 17 00:00:00 2001 From: connorpar Date: Mon, 16 Feb 2026 15:53:27 +0000 Subject: [PATCH 11/14] updated image --- Wireframe/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0c82c9d9d..8a2d8b2b0 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -46,7 +46,7 @@

Git Branch Model

What is a Git Branch From 4c87e5170257df538c9685aee3e267e57bed5c84 Mon Sep 17 00:00:00 2001 From: connorpar Date: Mon, 16 Feb 2026 18:28:47 +0000 Subject: [PATCH 12/14] changed article alignment and footer --- Wireframe/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index 56ab44a0b..2fe044833 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -39,7 +39,7 @@ h1 { font-size: 3rem; } h2 { - text-align: center; + text-align: left; font-size: 2rem; } @@ -60,6 +60,7 @@ img, svg { width: 100%; object-fit: cover; + aspect-ratio: 16/9; } /* ====== Site Layout ====== Setting the overall rules for page regions @@ -75,7 +76,7 @@ footer { bottom: -2px; left: 50%; transform: translateX(-50%); - width: 1280px; + width: 100%; background-color: rgb(202, 160, 160); border-color: black; text-align: center; @@ -106,6 +107,7 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); + align-content: start; > * { grid-column: 2/3; } From 9731ecffb39d69ee1c5aecc216760921f3fbde4e Mon Sep 17 00:00:00 2001 From: connorpar Date: Mon, 16 Feb 2026 18:42:11 +0000 Subject: [PATCH 13/14] indentation update --- Wireframe/index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 8a2d8b2b0..c5fb9facf 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -45,8 +45,7 @@

Read More

- Git Branch Model

What is a Git Branch From b2d2529f870dacc4c8ff2c488149f3637ef12da7 Mon Sep 17 00:00:00 2001 From: connorpar Date: Mon, 16 Feb 2026 18:57:29 +0000 Subject: [PATCH 14/14] renamed selectors to be more flexible --- Wireframe/index.html | 4 ++-- Wireframe/style.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index c5fb9facf..7ef6d57fa 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -11,7 +11,7 @@

Three Tech Tips

-

+

Here are some useful things to know when learning to create your own websites and manage tech projects.

@@ -21,7 +21,7 @@

Three Tech Tips

Readme

The Purpose of a Readme File

-

+

A readme file is a very important part of any GitHub repository. It is often the first item a visitor will see when landing on a repository. A readme file should provide users with information about the purpose of a project, how to use it effectively and who the contributers and maintainers of the project are. diff --git a/Wireframe/style.css b/Wireframe/style.css index 2fe044833..3a7f07952 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -43,11 +43,11 @@ h2 { font-size: 2rem; } -#p_readme { +article > p { text-align: left; font-size: 1rem; } -#p_description { +header > p { text-align: center; font-size: 1rem; }