Skip to content

LONDON|25-ITP-SEP| DABALA GONFA|SPRINT 1 |WIREFRAME TO WEB CODE #792

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 5 commits into
base: main
Choose a base branch
from
Open

LONDON|25-ITP-SEP| DABALA GONFA|SPRINT 1 |WIREFRAME TO WEB CODE #792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ed10c11
Add files via upload
dabalabego Sep 14, 2025
9cac1c5
Create LONDON|25-ITP-SEP| DABALA GONFA|SPRINT 1| WIREFRAME TO CODE
dabalabego Sep 14, 2025
05939db
Add files via upload
dabalabego Sep 14, 2025
de739a7
Merge pull request #2 from dabalabego/wireframe-to-code
dabalabego Sep 14, 2025
2842dc0
Merge pull request #3 from dabalabego/dabalabego-patch-1
dabalabego Sep 15, 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
1 change: 1 addition & 0 deletions LONDON|25-ITP-SEP| DABALA GONFA|SPRINT 1| WIREFRAME TO CODE
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

94 changes: 59 additions & 35 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,68 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coursework</title>
<style>
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
}
body {
background: var(--paper);
color: var(--ink);
font: var(--font);
max-width: 1280px;
margin: 0 auto;
}
</style>
<title>Wireframe, README and Git Branches</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header><h1>🧐 CYF Coursework Disposable Branch Previews</h1></header>
<main>
<ol>
<li>
<h2><a href="/Wireframe">Project 1: Wireframe</a></h2>
<p>
Mentors:
<a href="Wireframe/readme.md">open the assignment in a tab</a>
</p>
</li>
<li>
<h2><a href="/Form-Controls">Project 2: Form Controls</a></h2>
<p>
Mentors:
<a href="Form-Controls/readme.md">open the assignment in a tab</a>
</p>
</li>
</ol>
<article>
<h1>What is the purpose of a README file?</h1>
<p>
A README file serves as the front page and documentation hub for a project.
It explains the project's purpose, functionality, and value proposition to visitors.
The README typically includes installation instructions, usage examples, configuration details,
and guidelines for contributing. It helps users quickly understand whether the project meets
their needs, how to get started, and how to troubleshoot common issues. For developers,
it provides technical details about dependencies, APIs, and development setup.
A well-written README improves project adoption, reduces support requests, and makes
the codebase more accessible to both users and potential contributors.
</p>
<figure>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="README illustration" />
<figcaption>
<a href="https://www.geeksforgeeks.org/git/what-is-github-readme-file-and-markdown/">Read more about README files</a>
</figcaption>
</figure>
</article>

<article>
<h2>What is the purpose of a wireframe?</h2>
<p>
A wireframe is a visual guide that outlines the structure of a website or app.
It shows the placement of content, features, and navigation elements clearly.
Wireframes help teams plan the user experience and organize information effectively.
They make it easier to communicate ideas, gather feedback, and identify issues early.
By focusing on structure rather than design, wireframes save time and improve project efficiency.
</p>
<figure>
<img src="https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress" alt="Wireframe example" />
<figcaption>
<a href="https://www.productplan.com/glossary/wireframe/">Read more about wireframes</a>
</figcaption>
</figure>
</article>

<article>
<h3>What is a branch in Git?</h3>
<p>
A branch in Git is a separate line of development within a repository.
It allows developers to work on new features, fixes, or experiments without affecting the main code.
Branches make it easy to test changes and collaborate with others safely.
They can later be merged back into the main branch once the work is complete.
Using branches helps organize work, reduce errors, and maintain a stable codebase.
</p>
<figure>
<img src="https://cdn.educba.com/academy/wp-content/uploads/2019/10/What-is-Git-Branch.png" alt="Git branch illustration" />
<figcaption>
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more about Git branches</a>
</figcaption>
</figure>
</article>
</main>
<footer><a href="HOW_TO_REVIEW.md">HOW TO REVIEW MD</a></footer>

<footer>

</footer>
</body>
</html>