Skip to content

Commit 01bf042

Browse files
serveyanoserveyano
committed
Update wireframe layout and assets
1 parent c44123d commit 01bf042

6 files changed

Lines changed: 178 additions & 105 deletions

File tree

‎Wireframe/images/branch.png‎

14.9 KB
Loading

‎Wireframe/images/readme.png‎

191 KB
Loading

‎Wireframe/images/wireframe.png‎

23.9 KB
Loading

‎Wireframe/index.html‎

Lines changed: 72 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,76 @@
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.
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.
2331
</p>
24-
<a href="">Read more</a>
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+
53+
<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>
2565
</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>
33-
</html>
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>

‎Wireframe/style.css‎

Lines changed: 106 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,119 @@
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 */
1+
* {
2+
box-sizing: border-box;
3+
}
4+
295
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
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;
3346
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
47+
48+
.image-wrapper {
49+
width: 100%;
50+
aspect-ratio: 16 / 9;
51+
overflow: hidden;
52+
border-bottom: 2px solid #000;
53+
background: #f3f4f6;
3854
}
39-
img,
40-
svg {
55+
56+
.image-wrapper img {
4157
width: 100%;
58+
height: 100%;
4259
object-fit: cover;
4360
}
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;
61+
62+
.article-details {
63+
padding: 20px;
5164
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
55-
text-align: center;
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;
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 {
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;
92+
}
93+
94+
/* GRID */
95+
.articles-grid {
6596
display: grid;
6697
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
98+
gap: 30px;
7199
}
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;
100+
101+
@media (max-width: 768px) {
102+
.articles-grid {
103+
grid-template-columns: 1fr;
88104
}
89105
}
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
Binary file not shown.

0 commit comments

Comments
 (0)