From c4521ba59d430ceb2b721e13dc16fb2b56ccf72e Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Tue, 5 May 2026 14:52:58 +0100 Subject: [PATCH 1/3] README explanation --- Wireframe/index.html | 66 +++++++++++++++++++++++--------------------- 1 file changed, 35 insertions(+), 31 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..8103a0a6b 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,37 @@ - + - - - - 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 -
-
- - + + + + Wireframe + + + +
+

Welcome to Intro to Programming

+

+ Here we will learn about some introductory web development + concepts. +

+
+
+
+ +

The purpose of a README file

+

+ A README file is text file often included with a software + program or code package which provides the reader with + information they may need to use the software, such + installation instructions. +

+ Read more +
+
+ + From a1043c7d409bacd4fd5fdc417efb3f093188854a Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Tue, 5 May 2026 14:55:27 +0100 Subject: [PATCH 2/3] text content completed --- Wireframe/index.html | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 8103a0a6b..1dc1012dc 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -24,13 +24,36 @@

The purpose of a README file

information they may need to use the software, such installation instructions.

- Read more + Read more about README files + +
+ +

The purpose of a wireframe

+

+ A wireframe is used to express the layout of a visual medium + such as a newspaper, or web page. It helps designers and + programmers to get a simple overview of a design. +

+ Read more about wireframing +
+
+ +

What is a Git branch

+

+ A git branch is a copy of the code in a git repository. + Branches are created so that developers can work separately + on specific features. Once a feature is completed it is + merged into main. If the creation of a feature is not + successful, for example there are too many bugs, the branch + can be deleted without affecting the main branch. +

+ Read more about Git

- This is the default, provided code and no changes have been made - yet. + Completed by Raihan Sharif for Intro to programming at Code Your + Future.

From 4d24ed04f40d675cd81f0f0513aee476a05695cb Mon Sep 17 00:00:00 2001 From: Raihan Sharif Date: Tue, 5 May 2026 14:57:34 +0100 Subject: [PATCH 3/3] Add CSS style for footer and header positioning --- Wireframe/style.css | 102 ++++++++++++++++++++++++++++---------------- 1 file changed, 66 insertions(+), 36 deletions(-) diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..0aac7b044 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,43 +16,73 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ + +/* a basic reset to user agent stylesheets */ +* { + margin: 0; + box-sizing: border-box; +} + :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; + --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); + background: var(--paper); + color: var(--ink); + font: var(--font); + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; } a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + padding: var(--space); + border: var(--line); + max-width: fit-content; } img, svg { - width: 100%; - object-fit: cover; + width: 100%; + object-fit: cover; +} +p { + margin-bottom: 0.5rem; +} +h1 { + margin-bottom: 1rem; +} +h2 { + margin-bottom: 0.8rem; } /* ====== 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; + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; + min-height: 0; +} + +header { + text-align: center; } footer { - position: fixed; - bottom: 0; - text-align: center; + position: fixed; + bottom: 0; + text-align: center; + border-top: 2px solid rgb(158, 158, 158); + padding: 1rem; + min-width: 100%; + background-color: rgb(54, 53, 53); + color: white; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -62,12 +92,12 @@ 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; - } + 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. @@ -75,15 +105,15 @@ 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; - } + 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; + } }