Skip to content

Commit a7dd45a

Browse files
Bluejay600Bluejay600
committed
1. On screens ≥768px, articles are shown in a grid.
2. Uses shadows, spacing, and padding for a clean UI. 3. Stack layout on small screens with readable fonts. 4. Ensures placeholder images don't stretch. 5. Adds interactivity and polish without overcomplicating. 6. Responsive structure hooks (classes + semantics). 7.Improved accessibility (alt text, external link behavior). 8. Semantic improvements (removed unnecessary <header> inside <article>).
1 parent de8c518 commit a7dd45a

File tree

2 files changed

+106
-101
lines changed

2 files changed

+106
-101
lines changed

‎Wireframe/index.html

Lines changed: 22 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,66 +3,46 @@
33
<head>
44
<meta charset="UTF-8" >
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
6-
<title>Wireframe</title>
6+
<title>The Wireframe</title>
77
<link rel="stylesheet" href="style.css" >
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code after the changes have been made.
14-
</p>
11+
<h1>The Wireframe</h1>
12+
<p>This is the default, provided code after the changes have been made.</p>
1513
</header>
14+
1615
<main>
1716
<article>
18-
<header>
19-
<img src="placeholder.svg" alt="" >
20-
<h2>The purpose of README File</h2>
17+
<img src="placeholder.svg" alt="Illustration about README files" >
18+
<h2>The Purpose of a README File</h2>
2119
<p>
22-
In Software Development, clear communication is very important.
23-
Whether you are a solo developer or part of a large team,
24-
effectively conveying the purpose, setup, and usage of your
25-
project is important. This is where the README.md file
26-
comes into play. In this article, we will see What is
27-
README.md File and why it is so important.
20+
In software development, clear communication is essential. Whether you're working solo or with a team, it's important to effectively convey the purpose, setup, and usage of your project. This is where the README.md file comes in. In this article, we explore what a README.md file is and why it matters.
2821
</p>
29-
</header>
30-
<a href="https://www.geeksforgeeks.org/what-is-readme-md-file/">Read more</a>
22+
<a href="https://www.geeksforgeeks.org/what-is-readme-md-file/" target="_blank" rel="noopener noreferrer">Read more</a>
3123
</article>
32-
24+
3325
<article>
34-
<header>
35-
<img src="placeholder.svg" alt="">
36-
<h2>What is the wireframe</h2>
26+
<img src="placeholder.svg" alt="Illustration about wireframes" >
27+
<h2>What is a Wireframe?</h2>
3728
<p>
38-
An essential step in the user experience (UX) design process is
39-
creating a wireframe. It's a graphic representation of a website,
40-
mobile app, or other digital interface that highlights the overall
41-
structure and layout of the design without going into specifics like
42-
colors, fonts, or images. A wireframe is a product outline that shows
43-
what interface elements will be present on important pages.
29+
An essential step in user experience (UX) design is creating a wireframe. It’s a visual blueprint of a website, app, or digital interface, focusing on structure and layout without styling. Wireframes show what interface elements appear on key pages, helping plan content and navigation effectively.
4430
</p>
45-
</header>
46-
<a href="https://www.geeksforgeeks.org/wireframing/">Read more</a>
31+
<a href="https://www.geeksforgeeks.org/wireframing/" target="_blank" rel="noopener noreferrer">Read more</a>
4732
</article>
48-
33+
4934
<article>
50-
<header>
51-
<img src="placeholder.svg" alt="">
52-
<h2>What is Git brunch</h2>
35+
<img src="placeholder.svg" alt="Illustration about Git branches" >
36+
<h2>What is a Git Branch?</h2>
5337
<p>
54-
A Git branch represents an independent line of development from the main codebase. By default, Git projects start with a main branch called "master". When you create a new branch, you're making a parallel version that you can work on without impacting that main code. It's like having alternate realities! The master branch represents the production version that your users see. And feature branches represent experimental states that aren't ready to go live.
38+
A Git branch represents a separate line of development in a codebase. By default, projects start with a "main" branch. Creating a branch allows developers to work on changes without affecting the main version. It's like a sandbox for experiments, while the main branch holds the stable production code.
5539
</p>
56-
</header>
57-
<a href="https://thelinuxcode.com/what-is-a-branch-in-git-and-how-do-we-use-it/">Read more</a>
40+
<a href="https://thelinuxcode.com/what-is-a-branch-in-git-and-how-do-we-use-it/" target="_blank" rel="noopener noreferrer">Read more</a>
5841
</article>
59-
60-
6142
</main>
43+
6244
<footer>
63-
<p>
64-
This is the default, provided code after the changes have been made.
65-
</p>
45+
<p>This is the default, provided code after the changes have been made.</p>
6646
</footer>
67-
</body>
68-
</html>
47+
</body>
48+
</html>

‎Wireframe/style.css

Lines changed: 84 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -15,76 +15,101 @@ As well as useful links to learn more */
1515
For you to explore and play with if you are interested
1616
https://web.dev/articles/min-max-clamp
1717
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;
18+
====== Design Palette ====== *//* General Reset and Base Styling */
19+
* {
20+
box-sizing: border-box;
21+
margin: 0;
22+
padding: 0;
2623
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
24+
2925
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
26+
font-family: Arial, sans-serif;
27+
line-height: 1.6;
28+
padding: 1rem;
29+
background-color: #f9f9f9;
30+
color: #333;
3331
}
3432

35-
a {
36-
padding: var(--space);
37-
border: var(--line);
38-
max-width: fit-content;
33+
/* Header */
34+
header {
35+
text-align: center;
36+
padding: 2rem 1rem;
37+
background-color: #0077cc;
38+
color: white;
39+
border-radius: 8px;
40+
margin-bottom: 2rem;
3941
}
40-
img,
41-
svg {
42-
width: 100%;
43-
object-fit: cover;
42+
43+
header h1 {
44+
margin-bottom: 0.5rem;
4445
}
45-
/* ====== Site Layout ======
46-
Setting the overall rules for page regions
47-
https://www.w3.org/WAI/tutorials/page-structure/regions/
48-
*/
46+
47+
/* Main layout */
4948
main {
50-
max-width: var(--container);
51-
margin: 0 auto calc(var(--space) * 4) auto;
49+
display: flex;
50+
flex-direction: column;
51+
gap: 2rem;
52+
max-width: 1200px;
53+
margin: auto;
54+
}
55+
56+
57+
/* Article Cards */
58+
article {
59+
background-color: white;
60+
border-radius: 8px;
61+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
62+
padding: 1rem;
63+
display: flex;
64+
flex-direction: column;
65+
}
66+
67+
article img {
68+
width: 100%;
69+
max-height: 200px;
70+
object-fit: contain;
71+
border-radius: 4px;
72+
margin-bottom: 1rem;
73+
}
74+
75+
article h2 {
76+
margin: 0.5rem 0;
77+
font-size: 1.4rem;
5278
}
79+
80+
article p {
81+
margin: 1rem 0;
82+
}
83+
84+
article a {
85+
color: #0077cc;
86+
text-decoration: none;
87+
font-weight: bold;
88+
margin-top: auto;
89+
}
90+
91+
article a:hover {
92+
text-decoration: underline;
93+
}
94+
95+
/* Footer */
5396
footer {
54-
position: fixed;
55-
bottom: 0;
5697
text-align: center;
98+
margin-top: 2rem;
99+
padding: 1rem;
100+
font-size: 0.9rem;
101+
color: #777;
57102
}
58-
/* ====== Articles Grid Layout ====
59-
Setting the rules for how articles are placed in the main element.
60-
Inspect this in Devtools and click the "grid" button in the Elements view
61-
Play with the options that come up.
62-
https://developer.chrome.com/docs/devtools/css/grid
63-
https://gridbyexample.com/learn/
64-
*/
65-
main {
66-
display: grid;
67-
grid-template-columns: 1fr 1fr;
68-
gap: var(--space);
69-
> *:first-child {
70-
grid-column: span 2;
71-
}
72-
}
73-
/* ====== Article Layout ======
74-
Setting the rules for how elements are placed in the article.
75-
Now laying out just the INSIDE of the repeated card/article design.
76-
Keeping things orderly and separate is the key to good, simple CSS.
77-
*/
78-
article {
79-
border: var(--line);
80-
padding-bottom: var(--space);
81-
text-align: left;
82-
display: grid;
83-
grid-template-columns: var(--space) 1fr var(--space);
84-
> * {
85-
grid-column: 2/3;
103+
104+
/* Responsive Grid on Larger Screens */
105+
@media (min-width: 768px) {
106+
main {
107+
display: grid;
108+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
109+
gap: 2rem;
86110
}
87-
> img {
88-
grid-column: span 3;
111+
112+
article {
113+
height: 100%;
89114
}
90115
}

0 commit comments

Comments
 (0)