Skip to content

Commit 739b440

Browse files
MacDonald91MacDonald91
committed
Fix HTML validation warnings, remove unnecessary section wrapper, adjust layout to match wireframe, and prevent footer overlap
1 parent ed402d8 commit 739b440

2 files changed

Lines changed: 100 additions & 113 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 59 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Wireframe Task</title>
77
<meta
88
name="description"
99
content="A simple explanation of README files, wireframes, and Git branches."
10-
/>
11-
<link rel="stylesheet" href="style.css" />
10+
>
11+
<link rel="stylesheet" href="style.css">
1212
</head>
1313

1414
<body>
@@ -21,65 +21,63 @@ <h1>Web Development Fundamentals</h1>
2121
</header>
2222

2323
<main>
24-
<section>
25-
<!-- README ARTICLE -->
26-
<article>
27-
<img
28-
src="placeholder.svg"
29-
alt="Illustration representing a README file"
30-
/>
31-
<h2>What is a README file?</h2>
32-
<p>
33-
A README file explains what a project is about, how to use it, and
34-
any important information someone needs before contributing to the
35-
project.
36-
</p>
37-
<a
38-
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
39-
target="_blank"
40-
>
41-
Read more
42-
</a>
43-
</article>
24+
<!-- README ARTICLE -->
25+
<article>
26+
<img
27+
src="placeholder.svg"
28+
alt="Illustration representing a README file"
29+
>
30+
<h2>What is a README file?</h2>
31+
<p>
32+
A README file explains what a project is about, how to use it, and
33+
any important information someone needs before contributing to the
34+
project.
35+
</p>
36+
<a
37+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
38+
target="_blank"
39+
>
40+
Read more
41+
</a>
42+
</article>
4443

45-
<!-- WIREFRAME ARTICLE -->
46-
<article>
47-
<img
48-
src="wireframe.png"
49-
alt="Example of a webpage wireframe layout"
50-
/>
51-
<h2>What is a wireframe?</h2>
52-
<p>
53-
A wireframe is a simple visual guide that shows the structure and
54-
layout of a webpage before design and development begins.
55-
</p>
56-
<a
57-
href="https://www.figma.com/resource-library/what-is-a-wireframe/"
58-
target="_blank"
59-
>
60-
Read more
61-
</a>
62-
</article>
44+
<!-- WIREFRAME ARTICLE -->
45+
<article>
46+
<img
47+
src="wireframe.png"
48+
alt="Example of a webpage wireframe layout"
49+
>
50+
<h2>What is a wireframe?</h2>
51+
<p>
52+
A wireframe is a simple visual guide that shows the structure and
53+
layout of a webpage before design and development begins.
54+
</p>
55+
<a
56+
href="https://www.figma.com/resource-library/what-is-a-wireframe/"
57+
target="_blank"
58+
>
59+
Read more
60+
</a>
61+
</article>
6362

64-
<!-- GIT BRANCH ARTICLE -->
65-
<article>
66-
<img
67-
src="placeholder.svg"
68-
alt="Diagram representing Git branches"
69-
/>
70-
<h2>What is a Git branch?</h2>
71-
<p>
72-
A Git branch allows developers to work on new features or fixes
73-
without affecting the main version of a project.
74-
</p>
75-
<a
76-
href="https://docs.github.com/en/get-started/using-git/about-branches"
77-
target="_blank"
78-
>
79-
Read more
80-
</a>
81-
</article>
82-
</section>
63+
<!-- GIT BRANCH ARTICLE -->
64+
<article>
65+
<img
66+
src="placeholder.svg"
67+
alt="Diagram representing Git branches"
68+
>
69+
<h2>What is a Git branch?</h2>
70+
<p>
71+
A Git branch allows developers to work on new features or fixes
72+
without affecting the main version of a project.
73+
</p>
74+
<a
75+
href="https://docs.github.com/en/get-started/using-git/about-branches"
76+
target="_blank"
77+
>
78+
Read more
79+
</a>
80+
</article>
8381
</main>
8482

8583
<footer>

‎Wireframe/style.css‎

Lines changed: 41 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,4 @@
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 ====== */
1+
/* ====== Design Palette ====== */
192
:root {
203
--paper: oklch(7 0 0);
214
--ink: color-mix(in oklab, var(--color) 5%, black);
@@ -24,66 +7,72 @@ As well as useful links to learn more */
247
--line: 1px solid;
258
--container: 1280px;
269
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
10+
11+
/* ====== Base Elements ====== */
2912
body {
3013
background: var(--paper);
3114
color: var(--ink);
3215
font: var(--font);
16+
padding-bottom: 100px; /* prevents footer overlap */
3317
}
18+
3419
a {
3520
padding: var(--space);
3621
border: var(--line);
3722
max-width: fit-content;
23+
display: inline-block;
3824
}
25+
3926
img,
4027
svg {
4128
width: 100%;
4229
object-fit: cover;
4330
}
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;
51-
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
31+
32+
/* ====== Header ====== */
33+
header {
5534
text-align: center;
35+
margin: var(--space);
5636
}
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-
*/
37+
38+
/* ====== Site Layout ====== */
6439
main {
40+
max-width: var(--container);
41+
margin: 0 auto calc(var(--space) * 4) auto;
42+
6543
display: grid;
6644
grid-template-columns: 1fr 1fr;
6745
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
7146
}
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-
*/
47+
48+
main > *:first-child {
49+
grid-column: span 2;
50+
}
51+
52+
/* ====== Article Layout ====== */
7753
article {
7854
border: var(--line);
7955
padding-bottom: var(--space);
8056
text-align: left;
57+
8158
display: grid;
8259
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
60+
}
61+
62+
article > * {
63+
grid-column: 2/3;
64+
}
65+
66+
article > img {
67+
grid-column: span 3;
68+
}
69+
70+
/* ====== Footer ====== */
71+
footer {
72+
position: fixed;
73+
bottom: 0;
74+
width: 100%;
75+
background: var(--paper);
76+
text-align: center;
77+
padding: var(--space);
8978
}

0 commit comments

Comments
 (0)