From 3143d8cd45c4745d080465a727081fec9b340450 Mon Sep 17 00:00:00 2001 From: Fattouma Ouannassi Date: Tue, 20 Jan 2026 22:17:26 +0000 Subject: [PATCH 1/2] Glasgow| 26-ITP-Jan|Fattouma Ouannassi| Sprint 1 | Wireframe/coursework ## Learners, PR Template Self checklist - [x] I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title - [x] My changes meet the requirements of the task - [x] I have tested my changes - [x] My changes follow the [style guide](https://curriculum.codeyourfuture.io/guides/reviewing/style-guide/) ## Changelist This PR includes modifications to the HTML and CSS to create a webpage that follows the provided wireframe layout. The webpage explains the purpose of a README file and the wireframe, aswell as the meaning of a branch in Git, with each topic presented as an article section. ## Questions / --- Wireframe/index.html | 175 +++++++++++++++++++++++++++++++++++++++---- 1 file changed, 159 insertions(+), 16 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..0d49b0266 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,174 @@ - Wireframe + Wireframe to Web Code|Coursework + + +
-

Wireframe

+

Wireframe to Web Code|Coursework

- This is the default, provided code and no changes have been made yet. + This page provides an overview of the purpose of the README file and the wireframe, as well as the meaning of the "branch" in Git

-
- -

Title

-

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

- Read more -
-
+
+
+ Image for README +
+
+

README file

+

A README is a text file that introduces and explains a project. It contains information that is commonly required to understand what the project is about.
A good README helps others understand your project quickly. It usually includes installation steps, usage examples, license info, and how to contribute. It's an easy way to answer questions that your audience will likely have regarding how to install and use your project and also how to collaborate with you.

+
+
+
+
+
+ Wireframe example +
+
+

Wireframe

+

A wireframe is the skeleton of your digital project. Think of it as the foundation for your website, app, or dashboard. It focuses on layout, and content placement-not on colors, fonts, or any visual polish.
Wireframes are your blueprint: a simple, visual guide to quickly lay out your ideas and show how everything fits together. Before diving into colors, images, or final design details, wireframes help you map structure and functionality so nothing feels out of place.

+
+ +
+ +
+
+ Git branch diagram +
+
+

The branch in Git

+

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.
Branches let you work on different parts of a project, like new features or bug fixes, without interfering with the main branch. The common reasons to create a branch are +developing a new feature,fixing a bug, or experimenting with ideas.

+
+ + +
+
+ +

+ + From f9daf80b00a83bd53559e6e9ad66e4946c2420a1 Mon Sep 17 00:00:00 2001 From: Fattouma Ouannassi Date: Tue, 27 Jan 2026 18:51:14 +0000 Subject: [PATCH 2/2] Apply requested changes from" PR review". --- Wireframe/index.html | 245 ++++++++++++++----------------------------- Wireframe/style.css | 176 +++++++++++++++++-------------- 2 files changed, 177 insertions(+), 244 deletions(-) diff --git a/Wireframe/index.html b/Wireframe/index.html index 0d49b0266..ccd2b591a 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,176 +1,85 @@ - - - - Wireframe to Web Code|Coursework - - - - - - -
-

Wireframe to Web Code|Coursework

-

- This page provides an overview of the purpose of the README file and the wireframe, as well as the meaning of the "branch" in Git -

-
-
-
-
- Image for README -
-
-

README file

-

A README is a text file that introduces and explains a project. It contains information that is commonly required to understand what the project is about.
A good README helps others understand your project quickly. It usually includes installation steps, usage examples, license info, and how to contribute. It's an easy way to answer questions that your audience will likely have regarding how to install and use your project and also how to collaborate with you.

-
-
-
-
-
- Wireframe example -
-
-

Wireframe

-

A wireframe is the skeleton of your digital project. Think of it as the foundation for your website, app, or dashboard. It focuses on layout, and content placement-not on colors, fonts, or any visual polish.
Wireframes are your blueprint: a simple, visual guide to quickly lay out your ideas and show how everything fits together. Before diving into colors, images, or final design details, wireframes help you map structure and functionality so nothing feels out of place.

-
- -
- -
-
- Git branch diagram -
-
-

The branch in Git

-

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.
Branches let you work on different parts of a project, like new features or bug fixes, without interfering with the main branch. The common reasons to create a branch are -developing a new feature,fixing a bug, or experimenting with ideas.

-
- - -
-
-
-
-

© 2026 Fattouma Ouannassi

-
+ +
+

Wireframe to Web Code|Coursework

+

+ This page provides an overview of the purpose of the README file and the wireframe, as well as the meaning of the + "branch" in Git

- - - - +
+
+
+
+ Image for README +
+
+

README file

+

A README is a text file that introduces and explains a project. It contains information that is commonly + required to understand what the project is about.
A good README helps others understand your project + quickly. It usually includes installation steps, usage examples, license info, and how to contribute. It's an + easy way to answer questions that your audience will likely have regarding how to install and use your project + and also how to collaborate with you.

+
+ Read more +
+
+
+
+ Wireframe example +
+
+

Wireframe

+

A wireframe is the skeleton of your digital project. Think of it as the foundation for your website, app, + or dashboard. It focuses on layout, and content placement-not on colors, fonts, or any visual + polish.
Wireframes are your blueprint: a simple, visual guide to quickly lay out your ideas and show how + everything fits together. Before diving into colors, images, or final design details, wireframes help you + map structure and functionality so nothing feels out of place.

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

The branch in Git

+

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.
Branches let you work on + different parts of a project, like new features or bug fixes, without interfering with the main branch. The + common reasons to create a branch are + developing a new feature,fixing a bug, or experimenting with ideas.

+
+ Read more + + +
+
+
+ + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..b82c34b27 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,113 @@ -/* 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; +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + body { - background: var(--paper); - color: var(--ink); - font: var(--font); + background-color: #f1f4f5; + color: #000; + line-height: 1.6; + font-size: 16px; +} + +header { + max-width: 1200px; + margin: 2rem auto 0; + padding: 2rem 1rem; + background: #eee; + border: 3px solid #ffffff; + text-align: center; } -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + +header p { + font-style: italic; + font-size: 0.9rem; + letter-spacing: 1px; + margin-top: 0.5rem; } -img, -svg { + +main { + max-width: 1200px; + margin: 2rem auto; + padding: 1rem; + background: #fff; + border: 1px solid #eee; +} + +.article { + padding: 20px; + border: 1px solid #eee; + margin-bottom: 20px; + background-color: #eee; +} + +.full { + width: 100%; +} + +.articles-row { + display: flex; + gap: 20px; +} + +.half { + flex: 1; +} + +.image-placeholder { width: 100%; + height: 200px; + background: #eee; + border: 1px solid #eee; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + overflow: hidden; +} + +.image-placeholder img { + width: 90%; + height: 95%; object-fit: cover; + display: block; } -/* ====== 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; + +.article-content h2 { + margin-bottom: 0.5rem; + font-size: 1.2rem; } -footer { - position: fixed; - bottom: 0; - text-align: center; + +.article-content p { + font-size: 0.95rem; } -/* ====== 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 { + +.articles-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + gap: 1.5rem; } -/* ====== 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; - } + +.read-more { + display: inline-block; + margin-top: 15px; + padding: 10px 18px; + background-color: #eee; + color: #060606; + text-decoration: none; + font-size: 14px; + border-radius: 5px; + transition: background-color 0.3s ease; + border: 2px solid #f7fbfa; } + +footer { + position: fixed; + bottom: 0; + text-align: center; + height: 60px; + background-color: #eee; + width: 100%; +} \ No newline at end of file