Skip to content

Commit df3980f

Browse files
huangwtings-hubhuangwtings-hub
committed
Complete wireframe layout
1 parent 9d674aa commit df3980f

2 files changed

Lines changed: 108 additions & 109 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 66 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,69 @@
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>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
25-
</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>
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+
10+
<body>
11+
<header>
12+
<h1>Wireframe</h1>
13+
</header>
14+
15+
<main>
16+
<section class="articles-container">
17+
<h2 class="visually-hidden">Core Web Development Articles</h2>
18+
19+
<article>
20+
<img src="./images/readme-concept.jpg"
21+
alt="A laptop screen showing a project documentation file">
22+
<h3>What is the purpose of a README file?</h3>
23+
<p>
24+
A README file is the front page of a repository. It introduces the
25+
project, explains how to install or run the code, and guides other
26+
developers on how to contribute.
27+
</p>
28+
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">
29+
Read more about READMEs
30+
</a>
31+
</article>
32+
33+
<article>
34+
<img src="./images/wireframe-concept.jpg"
35+
alt="A simple sketch of a website layout using lines and boxes">
36+
<h3>What is the purpose of a wireframe?</h3>
37+
<p>
38+
A wireframe acts as a blueprint for a user interface. It defines the
39+
structural layout, content hierarchy, and functionality of a page
40+
before any visual design or code is added.
41+
</p>
42+
<a href="https://en.wikipedia.org/wiki/Website_wireframe">
43+
Read more about Wireframes
44+
</a>
45+
</article>
46+
47+
<article>
48+
<img src="./images/git-branch-concept.jpg"
49+
alt="A diagram showing a main code branch splitting into a feature branch">
50+
<h3>What is a branch in Git?</h3>
51+
<p>
52+
A branch is an independent line of development in Git. It allows you
53+
to work on new features or fixes safely without affecting the stable
54+
'main' codebase until it is fully tested.
55+
</p>
56+
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">
57+
Read more about Git Branches
58+
</a>
59+
</article>
60+
61+
</section>
62+
</main>
63+
64+
<footer>
65+
<p>&copy; 2026 Code Your Future Onboarding Coursework. Created by Tiffany.</p>
66+
</footer>
67+
</body>
3368
</html>
69+

‎Wireframe/style.css‎

Lines changed: 42 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,52 @@
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 ====== */
19-
: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;
1+
/* Hide content visually but keep it available to screen readers */
2+
.visually-hidden {
3+
position: absolute;
4+
left: -9999px;
265
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
6+
7+
/* General page styling */
298
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
33-
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
38-
}
39-
img,
40-
svg {
41-
width: 100%;
42-
object-fit: cover;
43-
}
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;
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
padding: 20px;
5112
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
13+
14+
/* Center the page title */
15+
header {
5516
text-align: center;
17+
margin-bottom: 20px;
5618
}
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 {
19+
20+
/* Layout for the articles */
21+
.articles-container {
6522
display: grid;
6623
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
24+
gap: 20px;
25+
}
26+
27+
/* Article 1 spans both columns */
28+
.articles-container article:first-of-type {
29+
grid-column: 1 / 3;
7130
}
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-
*/
31+
32+
/* Article styling */
7733
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-
}
34+
border: 1px solid #ccc;
35+
padding: 15px;
36+
}
37+
38+
/* Make images responsive */
39+
article img {
40+
width: 100%;
41+
height: auto;
42+
display: block;
43+
margin-bottom: 10px;
8944
}
45+
46+
/* Center footer */
47+
footer {
48+
text-align: center;
49+
margin-top: 20px;
50+
padding: 10px;
51+
}
52+

0 commit comments

Comments
 (0)