diff --git a/Wireframe/Content/Wireframe_Penpot.webp b/Wireframe/Content/Wireframe_Penpot.webp new file mode 100644 index 000000000..0a74a5e79 Binary files /dev/null and b/Wireframe/Content/Wireframe_Penpot.webp differ diff --git a/Wireframe/Content/git-branches-merge.png b/Wireframe/Content/git-branches-merge.png new file mode 100644 index 000000000..4c8d4f192 Binary files /dev/null and b/Wireframe/Content/git-branches-merge.png differ diff --git a/Wireframe/Content/readme.png.webp b/Wireframe/Content/readme.png.webp new file mode 100644 index 000000000..9392d43b7 Binary files /dev/null and b/Wireframe/Content/readme.png.webp differ diff --git a/Wireframe/article.md b/Wireframe/article.md new file mode 100644 index 000000000..64825f887 --- /dev/null +++ b/Wireframe/article.md @@ -0,0 +1,8 @@ +1. What is the purpose of a README file? + A README file provides essential information about a project, including what it does, how to install and use it, dependencies, and how to contribute. It's often the first thing users or developers see when they visit your repository, and it helps them understand and get started quickly. + +2. What is the purpose of a wireframe? + A wireframe is a visual guide or blueprint that represents the layout and structure of a web page or app before it's developed. It focuses on functionality and placement of elements (like buttons, menus, and content areas), helping teams plan and agree on the design before writing any code. + +3. What is a branch in Git? + A branch in Git is a separate line of development that allows you to work on features, bug fixes, or experiments independently from the main codebase (usually the main or master branch). Once changes are complete, a branch can be merged back into the main project. diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..f1f0df3cf 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -5,29 +5,62 @@ Wireframe +
-

Wireframe

+

Q & A

- This is the default, provided code and no changes have been made yet. + Take a look at the answers to some common questions about wireframe and their purpose in our articles section.

- -

Title

+ Illustration representing a README file +

README

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + What is the purpose of a README file?

- Read more + Read more +
+
+ Low-fidelity wireframe example +

Wireframe

+

+ What is the purpose of a wireframe? +

+ Read more +
+
+ Diagram showing a Git branch and merge flow +

Git

+

+ What is a branch in Git? +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..29376878a 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,89 +1,166 @@ -/* Here are some starter styles -You can edit these or replace them entirely -It's showing you a common way to organise CSS -And includes solutions to common problems -As well as useful links to learn more */ - -/* ====== Design Palette ====== - This is our "design palette". - It sets out the colours, fonts, styles etc to be used in this design - At work, a designer will give these to you based on the corporate brand, but while you are learning - You can design it yourself if you like - Inspect the starter design with Devtools - Click on the colour swatches to see what is happening - I've put some useful CSS you won't have learned yet - For you to explore and play with if you are interested - https://web.dev/articles/min-max-clamp - https://scrimba.com/learn-css-variables-c026 -====== Design Palette ====== */ -: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; - --container: 1280px; -} -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ body { - background: var(--paper); - color: var(--ink); - font: var(--font); -} -a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + margin: 0; + min-height: 100vh; + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + background: AliceBlue; + color: Black; + overflow-x: hidden; } -img, -svg { + +header { width: 100%; - object-fit: cover; + text-align: center; + padding: 15px; + background: MidnightBlue; + color: White; } -/* ====== 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; + +header p { + color: White; + margin: 0; } + footer { position: fixed; + left: 0; bottom: 0; + width: 100%; text-align: center; + padding: 15px; + background: MidnightBlue; + color: White; + z-index: 100; } -/* ====== 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 -Play with the options that come up. -https://developer.chrome.com/docs/devtools/css/grid -https://gridbyexample.com/learn/ -*/ + +footer p { + color: White; + margin: 0; +} + main { + flex: 1; display: grid; grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + gap: 20px; + max-width: 1200px; + margin: 0 auto 80px auto; + padding: 20px; + box-sizing: border-box; + width: 100vw; /* Prevent horizontal overflow from grid */ } -/* ====== Article Layout ====== -Setting the rules for how elements are placed in the article. -Now laying out just the INSIDE of the repeated card/article design. -Keeping things orderly and separate is the key to good, simple CSS. -*/ + article { - border: var(--line); - padding-bottom: var(--space); + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0,0,0,0.08); + display: flex; + flex-direction: column; + align-items: center; text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; +} + +img { + width: 100%; + max-width: 200px; + margin-bottom: 10px; +} + +h1 { + margin: 0; + font-size: 2em; +} +h2 { + margin: 10px 0 0 0; + color: MidnightBlue; +} +p { + color: DarkSlateGray; +} + +.button-link { + display: inline-block; + margin-top: 10px; + padding: 8px 18px; + background: RoyalBlue; + color: White; + border-radius: 4px; + text-decoration: none; + font-size: 1em; + transition: background 0.2s; +} +.button-link:hover { + background: Navy; +} + +.social-media { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 10px; +} +.social-media a { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background: Gainsboro; + color: Black; + text-decoration: none; + transition: background 0.2s, color 0.2s; +} +.social-media a:hover { + background: RoyalBlue; + color: White; +} +.social-media svg { + width: 18px; + height: 18px; +} + + +main > article:first-child { + grid-column: 1 / -1; + order: -1; + background: #fff; + padding: 32px 20px; + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0,0,0,0.10); + display: flex; + flex-direction: column; + align-items: center; + text-align: left; + font-size: 1.35em; +} + +main > article img { + width: 100%; + max-width: 200px; + margin-bottom: 10px; + object-fit: contain; + aspect-ratio: 1.5/1; +} + +main > article:first-child img { + max-width: 200px; + aspect-ratio: unset; +} + +@media (max-width: 768px) { + main { + grid-template-columns: 1fr; + padding: 10px; + } + article { + width: 100%; + max-width: 100%; } - > img { - grid-column: span 3; + main > article:first-child { + font-size: 1.1em; + padding: 20px 8px; } } diff --git a/Wireframe/wireframe.png b/wireframe.png similarity index 100% rename from Wireframe/wireframe.png rename to wireframe.png