diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..6556cbe0d 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -23,7 +23,9 @@ Using the provided wireframe and resources, write a new webpage explaining: The page layout should closely match the wireframe. Exact replication is the goal, but small differences may be accepted. -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. +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. ## Acceptance Criteria diff --git a/Wireframe/images/README.png b/Wireframe/images/README.png new file mode 100644 index 000000000..53786072b Binary files /dev/null and b/Wireframe/images/README.png differ diff --git a/Wireframe/images/branchGit.png b/Wireframe/images/branchGit.png new file mode 100644 index 000000000..e82864d4a Binary files /dev/null and b/Wireframe/images/branchGit.png differ diff --git a/Wireframe/images/wireframe.jpg b/Wireframe/images/wireframe.jpg new file mode 100644 index 000000000..4697384e2 Binary files /dev/null and b/Wireframe/images/wireframe.jpg differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..fc6321ea4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -6,28 +6,85 @@ Wireframe +
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

+

Wireframe to Web Code

+

+ Learn the fundamentals of wireframes, README files, and Git branches in + modern web development. +

- -

Title

+ GitHub README page for the Wireframe project showing learning objectives and project requirements +

The purpose of a README file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file, usually written as README.md, is a document that + provides information about a project. It is commonly found in the root + folder of repositories, especially on platforms like GitHub. A README + includes instructions for installing and using the project, along with + details about its purpose, features, and contribution guidelines. + Since it is often the first thing users see, it should be clear and + informative. A good README helps users understand the project and use + or contribute to it easily.

- Read more + Read more about README files + +
+
+ Wireframes website mockup showing a browser window layout with a large hero section, image placeholder, navigation elements, and the text 'Wire Frames' +

The purpose of a wireframe

+

+ A wireframe is a simple diagram that shows the basic structure and + layout of a website or application’s user interface (UI). It displays + the placement of components and gives an idea of how they will + function. Wireframes are used in the early stages of design to plan + layouts, navigation, and user interaction before development starts. + They help designers and developers understand the interface structure, + improve communication, save time, and ensure the final design meets + user requirements effectively and clearly. +

+ Read more about wireframing + +
+
+ Git Branching graphic featuring the Git logo and the text 'Git Branching' on a dark background +

The Purpose of Branch in Git

+

+ A branch is a sequence of commits that allows developers to work on + different versions of a project at the same time. It creates a + separate line of development from the main codebase, making it easier + to add features, fix bugs, or test changes safely. After the work is + completed, the changes can be merged back into the main branch. + Branches are important in version control systems because they support + teamwork, improve project management, and reduce errors during + software development and updates efficiently. +

+ Read more about branches in Git +
diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg deleted file mode 100644 index ac36a0abc..000000000 --- a/Wireframe/placeholder.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/practical_guide.md b/Wireframe/practical_guide.md similarity index 99% rename from practical_guide.md rename to Wireframe/practical_guide.md index 90537cd76..c014bd8db 100644 --- a/practical_guide.md +++ b/Wireframe/practical_guide.md @@ -11,6 +11,7 @@ - More details: https://code.visualstudio.com/docs/editing/codebasics#_formatting --- + ### 2. Enabling automatic formatting - 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. Creating small, focused commits improves both your workflow and team collaboration. Why this matters: + - **Clarity**: Each commit tells a clear story (one feature, one fix, one change). - **Debugging**: Easy to find and undo the commit that caused a bug. - **Collaboration**: Teammates can review and understand changes faster. @@ -42,8 +44,9 @@ Why this matters: #### Approach 2: Using Git commands 1. Stage a changed file (`git add`) - + e.g.: To stage a modified file named `index.html` + ``` git add index.html ``` @@ -51,6 +54,7 @@ git add index.html 2. Commit the staged changes: (`git commit`) e.g.: To commit the staged changes with a short commit message + ``` git commit -m "Fix syntax error" ``` diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..9d48ff33f 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -26,33 +26,49 @@ As well as useful links to learn more */ } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ + +h1 { + text-align: center; + padding: var(--space); +} +h2 { + text-align: center; + font-size: 1.25em; +} +h3 { + font-size: 1.25em; + margin-top: 0; + margin-bottom: 0px; +} +p { + margin-top: 0; + margin-bottom: 0; +} body { background: var(--paper); color: var(--ink); font: var(--font); + padding-bottom: 5px; /* Make space for the fixed footer according to the wireframe requirements */ } a { padding: var(--space); border: var(--line); max-width: fit-content; } -img, -svg { - width: 100%; - object-fit: cover; -} + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ -main { - max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; -} footer { position: fixed; bottom: 0; + left: 0; + padding: 10px; + border-top: 1px solid black; text-align: center; + width: 100%; /* Make the footer span the entire width of the viewport */ + background: var(--paper); /* Optional: Add a background color to the footer */ } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -62,6 +78,8 @@ https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ main { + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); @@ -82,8 +100,16 @@ article { grid-template-columns: var(--space) 1fr var(--space); > * { grid-column: 2/3; + grid-template-rows: auto auto 1fr auto; + overflow: hidden; + padding-bottom: 15px; } + /* The below added lines fixed the image layout which was uneven*/ > img { grid-column: span 3; + width: 100%; + height: 250px; + object-fit: cover; + display: block; } } diff --git a/Wireframe/wireframe.png b/Wireframe/wireframe.png deleted file mode 100644 index 731f01503..000000000 Binary files a/Wireframe/wireframe.png and /dev/null differ