Skip to content

Commit d726f11

Browse files
Dipa-SarkerDipa-Sarker
committed
final wireframe submission
1 parent ff7b9d0 commit d726f11

2 files changed

Lines changed: 91 additions & 58 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 71 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -8,26 +8,86 @@
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
11+
<h1>WIREFRAME</h1>
1212
<p>
13-
This is the default, provided code and no changes have been made yet.
13+
A Wireframe is a simple visual layout or blueprint of a website, mobile
14+
app or software interface. It shows the basic structure of a page
15+
without detailed colors, images or final design elements.
1416
</p>
1517
</header>
1618
<main>
1719
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20+
<img
21+
src="https://i.ytimg.com/vi/jeOfS90Flf8/maxresdefault.jpg"
22+
alt="Readme.md"
23+
/>
24+
<h2>What is the purpose of a README file?</h2>
25+
<h3>Summary</h3>
2026
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
27+
A README file is a simple text file (usually named README.md) that
28+
explains what your project about and how to use it. When someone opens
29+
a GitHub repo, the README is usually the first thing they see. It
30+
helps them quickly understand:
2331
</p>
24-
<a href="">Read more</a>
32+
<ul>
33+
<li>What the project does</li>
34+
<li>How to run it</li>
35+
<li>How to install it (if needed)</li>
36+
<li>Any important instructions or notes</li>
37+
</ul>
38+
<a href="https://en.wikipedia.org/wiki/README">Read more</a>
39+
</article>
40+
<article>
41+
<img
42+
src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?w=2880&h=1440&q=75&fit=max&auto=format"
43+
alt="Wireframe"
44+
/>
45+
<h2>What is the purpose of a wireframe?</h2>
46+
<h3>Summary</h3>
47+
<p>
48+
A wireframe is a simple visual blueprint of a website, app, or digital
49+
product. It shows the structure and layout of a screen or page without
50+
focusing on final colors, graphics, or detailed styling. Think of it
51+
like an architectural sketch for a building:
52+
</p>
53+
<ul>
54+
<li>It outlines where things go</li>
55+
<li>It shows how users move through the interface</li>
56+
<li>
57+
It helps teams agree on functionality before design and development
58+
begin
59+
</li>
60+
</ul>
61+
<p>
62+
Wireframes are usually made with boxes, lines, placeholders and labels
63+
instead of polished visuals.
64+
</p>
65+
<a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
66+
</article>
67+
<article>
68+
<img
69+
src="https://koliber.com/static/images/articles/trunk-flow.png"
70+
alt="Git Branch"
71+
/>
72+
<h2>What is a branch in Git?</h2>
73+
<h3>Summary</h3>
74+
<p>
75+
A branch in Git is an independent line of development. It lets you
76+
work on changes without affecting the main version of the project. You
77+
can think of a branch like a parallel workspace:
78+
</p>
79+
<ul>
80+
<li>The main project stays stable</li>
81+
<li>You make changes safely in another branch</li>
82+
<li>Later, you can merge those changes back into the main project</li>
83+
</ul>
84+
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github"
85+
>Read more</a
86+
>
2587
</article>
2688
</main>
2789
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
90+
<p>Web Development Basics | README, Wireframe & Git Branches</p>
3191
</footer>
3292
</body>
3393
</html>

‎Wireframe/style.css‎

Lines changed: 20 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,6 @@
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+
header {
2+
text-align: center;
3+
}
194
:root {
205
--paper: oklch(7 0 0);
216
--ink: color-mix(in oklab, var(--color) 5%, black);
@@ -24,8 +9,7 @@ As well as useful links to learn more */
249
--line: 1px solid;
2510
--container: 1280px;
2611
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
12+
2913
body {
3014
background: var(--paper);
3115
color: var(--ink);
@@ -36,54 +20,43 @@ a {
3620
border: var(--line);
3721
max-width: fit-content;
3822
}
23+
3924
img,
4025
svg {
4126
width: 100%;
4227
object-fit: cover;
4328
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
29+
4830
main {
4931
max-width: var(--container);
5032
margin: 0 auto calc(var(--space) * 4) auto;
5133
}
5234
footer {
53-
position: fixed;
5435
bottom: 0;
5536
text-align: center;
5637
}
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-
*/
6438
main {
6539
display: grid;
6640
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
41+
gap: 10px;
7142
}
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-
*/
43+
main > *:first-child {
44+
grid-column: 1/ -1;
45+
}
46+
7747
article {
7848
border: var(--line);
7949
padding-bottom: var(--space);
8050
text-align: left;
8151
display: grid;
8252
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
53+
}
54+
article > * {
55+
grid-column: 2/3;
56+
}
57+
article > img {
58+
grid-column: span 3;
59+
height: auto;
60+
width: 100%;
61+
object-fit: cover;
8962
}

0 commit comments

Comments
 (0)