Skip to content

Commit ea41e7c

Browse files
KhotKeysKhotKeys
committed
feat: complete wireframe layout layout assignment with semantic html and css
1 parent ff7b9d0 commit ea41e7c

5 files changed

Lines changed: 184 additions & 105 deletions

File tree

‎Wireframe/images/branch.jpeg‎

13.2 KB
Loading

‎Wireframe/images/tech-setup.jpeg‎

59.5 KB
Loading

‎Wireframe/images/visual.jpeg‎

102 KB
Loading

‎Wireframe/index.html‎

Lines changed: 57 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,61 @@
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>
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+
<body>
10+
11+
<header class="page-header">
12+
<h1>Web Development Essentials</h1>
13+
<p class="description">An informational overview of critical modern software engineering documentation, tools, and processes.</p>
14+
</header>
15+
16+
<main class="content-container">
17+
18+
<article class="hero-article">
19+
<div class="image-wrapper">
20+
<img src="images/tech-setup.jpeg" alt="A clean workspace laptop simulating project planning documentation setup.">
21+
</div>
22+
<div class="article-details">
23+
<h2>What is the purpose of a README file?</h2>
24+
<p class="summary">A README file acts as the explicit architectural manual and introductory portal for a codebase. It equips incoming engineers with implementation steps, installation variables, testing assertions, and dependency maps required to evaluate the repository cleanly.</p>
25+
<a href="https://programming.codeyourfuture.io/" class="read-more-btn">Read More</a>
26+
</div>
27+
</article>
28+
29+
<div class="articles-grid">
30+
31+
<article class="grid-article">
32+
<div class="image-wrapper">
33+
<img src="images/visual.jpeg" alt="A schematic visual wireframe outline grid sketch.">
34+
</div>
35+
<div class="article-details">
36+
<h2>What is the purpose of a wireframe?</h2>
37+
<p class="summary">A wireframe functions as a visual blueprint isolating structural placement schemas from aesthetic design choices. It validates content flow priority mappings across screens prior to writing code layers.</p>
38+
<a href="https://www.productplan.com/glossary/wireframe/" class="read-more-btn">Read More</a>
39+
</div>
2540
</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>
41+
42+
<article class="grid-article">
43+
<div class="image-wrapper">
44+
<img src="images/branch.jpeg" alt="An abstract pathway network representing code branching versions.">
45+
</div>
46+
<div class="article-details">
47+
<h2>What is a branch in Git?</h2>
48+
<p class="summary">A Git branch establishes an isolated workspace path branching off the central source master stream. It enables developers to implement isolated changes smoothly without corrupting production environments.</p>
49+
<a href="https://git-scm.com" class="read-more-btn">Read More</a>
50+
</div>
51+
</article>
52+
53+
</div>
54+
</main>
55+
56+
<footer class="page-footer">
57+
<p>&copy; 2023 Web Development Essentials. All rights reserved.</p>
58+
</footer>
59+
60+
</body>
3361
</html>

‎Wireframe/style.css‎

Lines changed: 127 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,140 @@
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+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
7+
margin: 0;
8+
padding: 0 0 80px 0;
9+
background-color: #ffffff;
10+
color: #000000;
11+
min-height: 100vh;
12+
display: flex;
13+
flex-direction: column;
14+
}
15+
16+
.page-header {
17+
text-align: center;
18+
padding: 40px 20px 20px 20px;
19+
}
20+
21+
.page-header h1 {
22+
font-size: 2.5rem;
23+
margin: 0 0 10px 0;
24+
text-transform: uppercase;
25+
letter-spacing: 0.05em;
26+
}
27+
28+
.page-header .description {
29+
font-style: italic;
30+
font-size: 1.1rem;
31+
margin: 0;
32+
color: #4b5563;
33+
}
34+
35+
.content-container {
36+
width: 100%;
37+
max-width: 1200px;
38+
margin: 0 auto;
39+
padding: 0 20px;
3340
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
41+
42+
article {
43+
border: 2px solid #000000;
44+
background-color: #ffffff;
45+
display: flex;
46+
flex-direction: column;
47+
margin-bottom: 30px;
48+
}
49+
50+
.image-wrapper {
51+
width: 100%;
52+
border-bottom: 2px solid #000000;
53+
overflow: hidden;
54+
background-color: #f3f4f6;
55+
aspect-ratio: 16 / 7;
3856
}
39-
img,
40-
svg {
57+
58+
.image-wrapper img {
4159
width: 100%;
60+
height: 100%;
4261
object-fit: cover;
62+
display: block;
4363
}
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;
64+
65+
.article-details {
66+
padding: 20px;
5167
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
55-
text-align: center;
68+
69+
.article-details h2 {
70+
font-size: 1.4rem;
71+
margin: 0 0 10px 0;
72+
}
73+
74+
.article-details .summary {
75+
font-size: 1rem;
76+
line-height: 1.5;
77+
margin: 0 0 20px 0;
78+
color: #1f2937;
79+
}
80+
81+
.read-more-btn {
82+
display: inline-block;
83+
border: 2px solid #000000;
84+
padding: 8px 16px;
85+
color: #000000;
86+
text-decoration: none;
87+
font-weight: bold;
88+
text-transform: uppercase;
89+
font-size: 0.85rem;
90+
transition: background-color 0.2s;
5691
}
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 {
92+
93+
.read-more-btn:hover {
94+
background-color: #000000;
95+
color: #ffffff;
96+
}
97+
98+
.articles-grid {
6599
display: grid;
66100
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
101+
gap: 30px;
102+
margin-bottom: 30px;
71103
}
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;
104+
105+
.articles-grid article {
106+
margin-bottom: 0;
107+
}
108+
109+
.articles-grid .image-wrapper {
110+
aspect-ratio: 16 / 10;
111+
}
112+
113+
114+
@media (max-width: 768px) {
115+
.articles-grid {
116+
grid-template-columns: 1fr;
88117
}
89118
}
119+
120+
.page-footer {
121+
position: fixed;
122+
bottom: 0;
123+
left: 0;
124+
width: 100%;
125+
height: 60px;
126+
border-top: 2px solid #000000;
127+
background-color: #ffffff;
128+
display: flex;
129+
justify-content: center;
130+
align-items: center;
131+
z-index: 1000;
132+
}
133+
134+
.page-footer p {
135+
margin: 0;
136+
font-size: 0.9rem;
137+
font-style: italic;
138+
text-align: center;
139+
padding: 0 20px;
140+
}

0 commit comments

Comments
 (0)