Skip to content

Commit d4f038d

Browse files
author
russom
committed
css lines added to fix the image layout
1 parent ff29aa3 commit d4f038d

8 files changed

Lines changed: 64 additions & 58 deletions

File tree

‎Wireframe/README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ Using the provided wireframe and resources, write a new webpage explaining:
2323

2424
The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted.
2525

26-
There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this criteria yourself before you submit your work.
26+
There are some provided HTML and CSS files you can use to get started. You can use these files as a starting point or create
27+
your own files from scratch. You _must_ modify the HTML and CSS files to meet the acceptance criteria and you must check this
28+
criteria yourself before you submit your work.
2729

2830
## Acceptance Criteria
2931

‎Wireframe/images/Git-logo.svg‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎Wireframe/images/branchGit1.png‎

166 KB
Loading

‎Wireframe/images/wireframe.png‎

-55.4 KB
Binary file not shown.

‎Wireframe/images/wireframeInB&W.jpg‎

204 KB
Loading

‎Wireframe/index.html‎

Lines changed: 40 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,78 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Wireframe</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
9+
910
<body>
1011
<header>
1112
<h1>Wireframe to Web Code</h1>
1213
<h2>
13-
Learn the fundamentals of wireframes, README files, and Git branches in modern web development.
14+
Learn the fundamentals of wireframes, README files, and Git branches in
15+
modern web development.
1416
</h2>
1517
</header>
1618
<main>
1719
<article>
1820
<img src="images/README.png" alt="" />
1921
<h3>The purpose of a README file</h3>
2022
<p>
21-
A README file is a text file that provides information about a project. It typically
22-
includes instructions on how to install and use the project, as well as any other relevant
23-
information such as the project's purpose, features, and how to contribute. The README file
24-
is often the first thing that users see when they visit a project's repository, so it is important
25-
to make it clear and informative.
23+
A README file, usually written as README.md, is a document that
24+
provides information about a project. It is commonly found in the root
25+
folder of repositories, especially on platforms like GitHub. A README
26+
includes instructions for installing and using the project, along with
27+
details about its purpose, features, and contribution guidelines.
28+
Since it is often the first thing users see, it should be clear and
29+
informative. A good README helps users understand the project and use
30+
or contribute to it easily.
2631
</p>
27-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">
32+
<a
33+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
34+
>
2835
Read more about README files
2936
</a>
3037
</article>
3138
<article>
32-
<img src="images/wireframe.png" alt="" />
39+
<img src="images/wireframeInB&W.jpg" alt="Wireframe example" />
3340
<h3>The purpose of a wireframe</h3>
3441
<p>
35-
A wireframe is a simple line diagram representing the skeleton of a website
36-
or an application’s user interface (UI) and core functionality. It shows where
37-
components should be in relation to each other and what, roughly, they should do.
42+
A wireframe is a simple diagram that shows the basic structure and
43+
layout of a website or application’s user interface (UI). It displays
44+
the placement of components and gives an idea of how they will
45+
function. Wireframes are used in the early stages of design to plan
46+
layouts, navigation, and user interaction before development starts.
47+
They help designers and developers understand the interface structure,
48+
improve communication, save time, and ensure the final design meets
49+
user requirements effectively and clearly.
3850
</p>
3951
<a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/"
40-
>Read more about wireframing
41-
</a>
52+
>Read more about wireframing
53+
</a>
4254
</article>
4355
<article>
44-
<img src="images/Git-logo.svg" alt="" />
45-
<h3>Branch in Git</h3>
56+
<img src="images/branchGit1.png" alt="" />
57+
<h3>The Purpose of Branch in Git</h3>
4658
<p>
47-
A branch is a sequence of commits in a project. It is a way to work on different
48-
versions of a project at the same time. When you create a branch, you are creating
49-
a new line of development that diverges from the main codebase. This allows you to
50-
work on new features, fix bugs, or experiment with changes without affecting the main
51-
codebase until you are ready to merge your changes back in.
59+
A branch is a sequence of commits that allows developers to work on
60+
different versions of a project at the same time. It creates a
61+
separate line of development from the main codebase, making it easier
62+
to add features, fix bugs, or test changes safely. After the work is
63+
completed, the changes can be merged back into the main branch.
64+
Branches are important in version control systems because they support
65+
teamwork, improve project management, and reduce errors during
66+
software development and updates efficiently.
5267
</p>
53-
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">
54-
Read more about branche in Git
68+
<a
69+
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
70+
>Read more about branche in Git
5571
</a>
5672
</article>
5773
</main>
5874
<footer>
59-
<p>
60-
Russom Gebremeskel Wireframe ITP May 2026
61-
</p>
75+
<p>Russom Gebremeskel | Wireframe | ITP May 2026</p>
6276
</footer>
6377
</body>
6478
</html>

‎Wireframe/practical_guide.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
- More details: https://code.visualstudio.com/docs/editing/codebasics#_formatting
1212

1313
---
14+
1415
### 2. Enabling automatic formatting
1516

1617
- Open your VS Code settings (user or workspace settings).
@@ -27,6 +28,7 @@ This ensures your code stays clean without needing manual formatting each time.
2728
Creating small, focused commits improves both your workflow and team collaboration.
2829

2930
Why this matters:
31+
3032
- **Clarity**: Each commit tells a clear story (one feature, one fix, one change).
3133
- **Debugging**: Easy to find and undo the commit that caused a bug.
3234
- **Collaboration**: Teammates can review and understand changes faster.
@@ -42,15 +44,17 @@ Why this matters:
4244
#### Approach 2: Using Git commands
4345

4446
1. Stage a changed file (`git add`)
45-
47+
4648
e.g.: To stage a modified file named `index.html`
49+
4750
```
4851
git add index.html
4952
```
5053

5154
2. Commit the staged changes: (`git commit`)
5255

5356
e.g.: To commit the staged changes with a short commit message
57+
5458
```
5559
git commit -m "Fix syntax error"
5660
```

‎Wireframe/style.css‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -31,30 +31,20 @@ h1 {
3131
text-align: center;
3232
padding: var(--space);
3333
}
34-
h2 {
35-
text-align: center;
36-
font-size: 1.25em;
37-
}
38-
h3 {
39-
40-
font-size: 1.25em;
41-
}
34+
h2 {
35+
text-align: center;
36+
font-size: 1.25em;
37+
}
38+
h3 {
39+
font-size: 1.25em;
40+
}
4241
body {
4342
background: var(--paper);
4443
color: var(--ink);
4544
font: var(--font);
4645
padding-bottom: 5px; /* Make space for the fixed footer according to the wireframe requirements */
4746
}
48-
a {
49-
padding: var(--space);
50-
border: var(--line);
51-
max-width: fit-content;
52-
}
53-
img,
54-
svg {
55-
width: 100%;
56-
object-fit: cover;
57-
}
47+
5848
/* ====== Site Layout ======
5949
Setting the overall rules for page regions
6050
https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -65,16 +55,12 @@ main {
6555
}
6656
footer {
6757
position: fixed;
68-
top:;
6958
bottom: 0;
7059
left: 0;
7160
border-top: 1px solid black;
7261
text-align: center;
7362
width: 100%; /* Make the footer span the entire width of the viewport */
7463
background: var(--paper); /* Optional: Add a background color to the footer */
75-
76-
77-
7864
}
7965
/* ====== Articles Grid Layout ====
8066
Setting the rules for how articles are placed in the main element.
@@ -98,15 +84,22 @@ Keeping things orderly and separate is the key to good, simple CSS.
9884
*/
9985
article {
10086
border: var(--line);
87+
10188
padding-bottom: var(--space);
10289
text-align: left;
10390
display: grid;
10491
grid-template-columns: var(--space) 1fr var(--space);
10592
> * {
10693
grid-column: 2/3;
94+
grid-template-rows: auto auto 1fr auto;
95+
height: 100%;
10796
}
97+
/* The below added lines fixed the image layout which was uneven*/
10898
> img {
10999
grid-column: span 3;
110-
100+
width: 100%;
101+
height: 250px;
102+
object-fit: cover;
103+
display: block;
111104
}
112105
}

0 commit comments

Comments
 (0)