Skip to content

Commit d3f0ea0

Browse files
serveyanoserveyano
committed
Clean wireframe submission matching task requirements
1 parent 73928b8 commit d3f0ea0

4 files changed

Lines changed: 111 additions & 178 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 29 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,33 @@
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>Web Development Essentials</title>
7-
<link rel="stylesheet" href="style.css">
8-
</head>
9-
10-
<body>
11-
12-
<header class="page-header">
13-
<h1>Web Development Essentials</h1>
14-
<p class="description">
15-
An informational overview of modern software engineering tools and processes.
16-
</p>
17-
</header>
18-
19-
<main class="content-container">
20-
21-
<!-- HERO ARTICLE -->
22-
<article class="hero-article">
23-
<div class="image-wrapper">
24-
<img src="images/readme.png" alt="Workspace showing README documentation setup">
25-
</div>
26-
27-
<div class="article-details">
28-
<h2>What is the purpose of a README file?</h2>
29-
<p class="summary">
30-
A README explains how a project works, how to install it, and how to use it.
31-
</p>
32-
<a class="read-more-btn" href="https://programming.codeyourfuture.io/">Read More</a>
33-
</div>
34-
</article>
35-
36-
<!-- GRID ARTICLES -->
37-
<div class="articles-grid">
38-
39-
<article>
40-
<div class="image-wrapper">
41-
<img src="images/wireframe.png" alt="Wireframe sketch showing layout structure">
42-
</div>
43-
44-
<div class="article-details">
45-
<h2>What is the purpose of a wireframe?</h2>
46-
<p class="summary">
47-
A wireframe is a simple layout plan showing structure before design is added.
48-
</p>
49-
<a class="read-more-btn" href="https://www.productplan.com/glossary/wireframe/">Read More</a>
50-
</div>
51-
</article>
52-
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>
5317
<article>
54-
<div class="image-wrapper">
55-
<img src="images/branch.png" alt="Git branching diagram showing version control structure">
56-
</div>
57-
58-
<div class="article-details">
59-
<h2>What is a branch in Git?</h2>
60-
<p class="summary">
61-
A branch allows developers to work on features separately from the main codebase.
62-
</p>
63-
<a class="read-more-btn" href="https://git-scm.com">Read More</a>
64-
</div>
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>
6525
</article>
66-
67-
</div>
68-
69-
</main>
70-
71-
<footer class="page-footer">
72-
<p>&copy; 2026 Web Development Essentials</p>
73-
</footer>
74-
75-
</body>
76-
</html>
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>
33+
</html>

‎Wireframe/placeholder.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎Wireframe/style.css‎

Lines changed: 76 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,89 @@
1-
* {
2-
box-sizing: border-box;
3-
}
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 ====== */
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;
26+
}
27+
/* ====== Base Elements ======
28+
General rules for basic HTML elements in any context */
529
body {
6-
margin: 0;
7-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
8-
background: #fff;
9-
color: #000;
10-
min-height: 100vh;
11-
display: flex;
12-
flex-direction: column;
13-
padding-bottom: 80px;
14-
}
15-
16-
/* HEADER */
17-
.page-header {
18-
text-align: center;
19-
padding: 40px 20px 20px;
20-
}
21-
22-
.page-header h1 {
23-
font-size: 2.5rem;
24-
margin: 0 0 10px;
25-
text-transform: uppercase;
26-
}
27-
28-
.description {
29-
font-style: italic;
30-
color: #4b5563;
31-
}
32-
33-
/* MAIN */
34-
.content-container {
35-
width: 100%;
36-
max-width: 1200px;
37-
margin: 0 auto;
38-
padding: 0 20px;
39-
}
40-
41-
/* ARTICLES */
42-
article {
43-
border: 2px solid #000;
44-
background: #fff;
45-
margin-bottom: 30px;
30+
background: var(--paper);
31+
color: var(--ink);
32+
font: var(--font);
4633
}
47-
48-
.image-wrapper {
49-
width: 100%;
50-
aspect-ratio: 16 / 9;
51-
overflow: hidden;
52-
border-bottom: 2px solid #000;
53-
background: #f3f4f6;
34+
a {
35+
padding: var(--space);
36+
border: var(--line);
37+
max-width: fit-content;
5438
}
55-
56-
.image-wrapper img {
39+
img,
40+
svg {
5741
width: 100%;
58-
height: 100%;
5942
object-fit: cover;
6043
}
61-
62-
.article-details {
63-
padding: 20px;
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;
6451
}
65-
66-
.article-details h2 {
67-
margin: 0 0 10px;
68-
}
69-
70-
.summary {
71-
margin-bottom: 15px;
72-
line-height: 1.5;
73-
color: #1f2937;
74-
}
75-
76-
/* BUTTON */
77-
.read-more-btn {
78-
display: inline-block;
79-
border: 2px solid #000;
80-
padding: 8px 16px;
81-
text-decoration: none;
82-
text-transform: uppercase;
83-
font-size: 0.85rem;
84-
font-weight: bold;
85-
color: #000;
86-
transition: 0.2s;
87-
}
88-
89-
.read-more-btn:hover {
90-
background: #000;
91-
color: #fff;
52+
footer {
53+
position: fixed;
54+
bottom: 0;
55+
text-align: center;
9256
}
93-
94-
/* GRID */
95-
.articles-grid {
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 {
9665
display: grid;
9766
grid-template-columns: 1fr 1fr;
98-
gap: 30px;
67+
gap: var(--space);
68+
> *:first-child {
69+
grid-column: span 2;
70+
}
9971
}
100-
101-
@media (max-width: 768px) {
102-
.articles-grid {
103-
grid-template-columns: 1fr;
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;
10488
}
10589
}
106-
107-
/* FOOTER */
108-
.page-footer {
109-
position: fixed;
110-
bottom: 0;
111-
left: 0;
112-
width: 100%;
113-
height: 60px;
114-
border-top: 2px solid #000;
115-
background: #fff;
116-
display: flex;
117-
justify-content: center;
118-
align-items: center;
119-
}

‎Wireframe/wireframe.png‎

55.4 KB
Loading

0 commit comments

Comments
 (0)