Skip to content

Commit 52c6ecb

Browse files
MouawiaElkhalifaMouawiaElkhalifa
committed
Wireframe to Web Code
1 parent 72fe02b commit 52c6ecb

2 files changed

Lines changed: 156 additions & 101 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 83 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,91 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframe</h1>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
7+
<title>README, Wireframes, and Git Branches</title>
8+
9+
<meta
10+
name="description"
11+
content="A simple webpage explaining the purpose of a README file, a wireframe, and a Git branch."
12+
/>
13+
14+
<link rel="stylesheet" href="style.css" />
15+
</head>
16+
17+
<body>
18+
19+
<header class="box">
20+
<h1>README, Wireframes, and Git Branches</h1>
21+
<p>
22+
This page explains the purpose of a README file, the purpose of a wireframe,
23+
and what a branch is in Git.
24+
</p>
25+
</header>
26+
27+
<main class="content-wrapper">
28+
29+
<article class="main-article box">
30+
<h2>What is the purpose of a README file?</h2>
1231
<p>
13-
This is the default, provided code and no changes have been made yet.
32+
A README file introduces a project and helps people understand what it is,
33+
how to run it, and how to use it. It is usually the first file someone reads
34+
when they open a repository.
1435
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
36+
<a
37+
href="https://www.makeareadme.com/"
38+
class="read-more"
39+
target="_blank"
40+
rel="noopener noreferrer"
41+
>
42+
Read more about READMEs
43+
</a>
44+
</article>
45+
46+
<section class="secondary-articles">
47+
48+
<article class="sub-article box">
49+
<h2>What is the purpose of a wireframe?</h2>
2050
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
51+
A wireframe is a simple plan of a webpage layout. It shows structure and
52+
content placement before coding, so you can design the page clearly and
53+
avoid rework later.
2354
</p>
24-
<a href="">Read more</a>
55+
<a
56+
href="https://www.productplan.com/glossary/wireframe/"
57+
class="read-more"
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
>
61+
Read more about wireframes
62+
</a>
2563
</article>
26-
</main>
27-
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
31-
</footer>
32-
</body>
64+
65+
<article class="sub-article box">
66+
<h2>What is a branch in Git?</h2>
67+
<p>
68+
A branch is a separate line of work in a Git repository. It lets you make
69+
changes safely without affecting the main branch, and later merge your
70+
work when ready.
71+
</p>
72+
<a
73+
href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
74+
class="read-more"
75+
target="_blank"
76+
rel="noopener noreferrer"
77+
>
78+
Read more about Git branches
79+
</a>
80+
</article>
81+
82+
</section>
83+
84+
</main>
85+
86+
<footer class="footer">
87+
<p>&copy; 2026 My Coursework Project</p>
88+
</footer>
89+
90+
</body>
3391
</html>

‎Wireframe/style.css‎

Lines changed: 73 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,86 @@
1-
/* Here are some starter styles
2-
You can edit these or replace them entirely
3-
It's showing you a common way to organise CSS
4-
And includes solutions to common problems
5-
As well as useful links to learn more */
6-
7-
/* ====== Design Palette ======
8-
This is our "design palette".
9-
It sets out the colours, fonts, styles etc to be used in this design
10-
At work, a designer will give these to you based on the corporate brand, but while you are learning
11-
You can design it yourself if you like
12-
Inspect the starter design with Devtools
13-
Click on the colour swatches to see what is happening
14-
I've put some useful CSS you won't have learned yet
15-
For you to explore and play with if you are interested
16-
https://web.dev/articles/min-max-clamp
17-
https://scrimba.com/learn-css-variables-c026
18-
====== Design Palette ====== */
191
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
2+
--max: 1000px;
3+
--gap: 16px;
4+
}
5+
6+
/* Reset */
7+
* {
8+
box-sizing: border-box;
9+
margin: 0;
10+
padding: 0;
2611
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
12+
2913
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
14+
margin: 0;
15+
font-family: system-ui, Arial, sans-serif;
16+
line-height: 1.5;
17+
background-color: #f4f4f4;
18+
19+
/* space for fixed footer */
20+
padding-bottom: 90px;
21+
}
22+
23+
/* Header */
24+
header {
25+
text-align: center;
26+
padding: 40px 20px;
27+
background: white;
28+
border-bottom: 1px solid #ddd;
3329
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
30+
31+
/* Main layout */
32+
.content-wrapper {
33+
max-width: var(--max);
34+
margin: 20px auto;
35+
padding: 20px;
36+
37+
display: grid;
38+
gap: var(--gap);
3839
}
39-
img,
40-
svg {
41-
width: 100%;
42-
object-fit: cover;
40+
41+
/* Card styling */
42+
.box {
43+
background: white;
44+
border: 1px solid #ddd;
45+
border-radius: 8px;
46+
padding: 20px;
47+
}
48+
49+
/* Two articles below */
50+
.secondary-articles {
51+
display: grid;
52+
grid-template-columns: 1fr 1fr;
53+
gap: var(--gap);
4354
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
48-
main {
49-
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
55+
56+
@media (max-width: 599px) {
57+
.secondary-articles {
58+
grid-template-columns: 1fr;
59+
}
5160
}
52-
footer {
61+
62+
/* Fixed footer */
63+
.footer {
5364
position: fixed;
65+
left: 0;
66+
right: 0;
5467
bottom: 0;
68+
69+
background: white;
70+
border-top: 1px solid #ddd;
71+
padding: 15px;
5572
text-align: center;
73+
font-size: 0.9rem;
5674
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
64-
main {
65-
display: grid;
66-
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
75+
76+
/* Read more links */
77+
.read-more {
78+
display: inline-block;
79+
margin-top: 8px;
7180
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
77-
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
81+
82+
/* Accessibility: visible focus */
83+
.read-more:focus-visible {
84+
outline: 3px solid #0b5fff;
85+
outline-offset: 3px;
8986
}

0 commit comments

Comments
 (0)