Skip to content

CYF_Glasgow | Mansoor Munawar | Module-Onboarding | WEEK1 #252

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

CYF_Glasgow | Mansoor Munawar | Module-Onboarding | WEEK1 #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d5d03cc
created an image folder and added two images to it
MansoorM11 Feb 6, 2025
37b8806
Added content of the website by using semantic htmls elements such as…
MansoorM11 Feb 6, 2025
469fb4d
changed the background color using online style picker, also changed …
MansoorM11 Feb 6, 2025
443adde
centered the footer element by giving it a width. and gave it a bac…
MansoorM11 Feb 6, 2025
a8892ff
added contact address to the footer
MansoorM11 Feb 6, 2025
18b2044
fixed html indentation and spacing
MansoorM11 Mar 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Wireframe/Images/Git-Logo-1788C.webp
View file
Open in desktop
Binary file not shown.
Binary file added Wireframe/Images/mohammad-rahmani-unsplash.webp
View file
Open in desktop
Binary file not shown.
68 changes: 56 additions & 12 deletions Wireframe/index.html
View file
Open in desktop
Copy link

@A-O-Emmanuel A-O-Emmanuel Feb 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is okay, I would suggest you read through this article on How to write better git commit messages. Also I think you need to improve your html indentation and spacing, you can read through this article How to indent HTML code and why it's important.

Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,70 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<h1>Git</h1>
<p>Free,Open Source Distributed Version Control</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img
src="./images/mohammad-rahmani-unsplash.webp"
alt="A desktop screen showing programming code in a dark theme editor."
/>
<h2>What is git</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
Git is a distributed version control system that tracks code changes
and enables collaboration. Created by Linus Torvalds, it stores a
project’s history in "commits," snapshots of all files at specific
points.<br /><br />
Key features include branches, which allow for multiple development
lines, and merging, to combine changes. Users can work offline and
sync updates with remote repositories (like GitHub) using push and
pull commands.
</p>
<a href="">Read more</a>
<a
href="https://en.wikipedia.org/wiki/Git"
aria-label="read more about git on wikipedia page"
>For more information</a
>
</article>
<article>
<img src="./images/Git-Logo-1788C.webp" alt="Git logo" loading="lazy" />
<h2>Why do developers need Git?</h2>
<p>
Git provides a distributed, offline-friendly system for tracking code
changes and supporting collaboration. Its branching and merging allow
parallel development without impacting the main codebase.<br /><br />
Git’s detailed history simplifies tracking and reverting changes,
while integration with platforms like GitHub enhances team workflows,
code reviews, and project deployment.
</p>
<a
href="https://en.wikipedia.org/wiki/Git"
aria-label="read more about git on wikipedia page"
>Read more</a
>
</article>
<article>
<img src="./images/Git-Logo-1788C.webp" alt="Git logo" loading="lazy" />
<h2>What is a branch in Git?</h2>
<p>
Git branch is essentially a pointer to a snapshot of your changes.When
working on fixing a bug, or adding a new features, you create a new
branch. This allows multiple people to work on different issues
without interfering with each other code.<br /><br />
Git branch also allows for smooth code review and testing via pull
request or merge request.
</p>
<a
href="https://www.atlassian.com/git/tutorials/using-branches#:~:text=Git%20branches%20are%20effectively%20a,branch%20to%20encapsulate%20your%20changes."
aria-label="read more about git branches on artlassian website"
>Read more</a
>
</article>
</main>

<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>For more information please contact: [email protected]</p>
</footer>
</body>
</html>
19 changes: 17 additions & 2 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ As well as useful links to learn more */
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--paper: oklch(93.94% 0.059 95.72);
--ink: color-mix(in oklab, var(--color) 5%, black);
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--container: 1280px;
--container: 600px;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
Expand All @@ -31,6 +31,16 @@ body {
color: var(--ink);
font: var(--font);
}

header, header p {
text-align: center;
font-weight: bold;
}

header h1{
margin-bottom: 0px;
}

a {
padding: var(--space);
border: var(--line);
Expand All @@ -53,7 +63,12 @@ footer {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
background-color: antiquewhite;
}



/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Inspect this in Devtools and click the "grid" button in the Elements view
Expand Down