diff --git a/Wireframe/BranchGit.jpg b/Wireframe/BranchGit.jpg new file mode 100644 index 000000000..58fd1b96d Binary files /dev/null and b/Wireframe/BranchGit.jpg differ diff --git a/Wireframe/Violet-Reed-README.jpg b/Wireframe/Violet-Reed-README.jpg new file mode 100644 index 000000000..dbe66b0fc Binary files /dev/null and b/Wireframe/Violet-Reed-README.jpg differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..82317f91f 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -2,31 +2,46 @@ - - Wireframe + + Wireframe to Code
-

Wireframe

+

Understanding Web Development Concepts

- This is the default, provided code and no changes have been made yet. + Welcome! This is a simple guide on understanding some basic concepts and tools used in web development.

- -

Title

+ A line art illustration showing multiple accessibility icons arranged in a circuit-style layout. +

What is the purpose of a README file?

+

A README file is essential to any project file. It is a text document that provides an overview of a project, with information explaining what the project is, how to use it, and how others can contribute. +
It can also contain other important information, like installation instructions, features, and updates. +

+ More on README files here +
+
+ Hand drawing example of a wireframe for a website +

What is the purpose of a wireframe?

+

A wireframe is a simple, minimally detailed visual layout of a website (or app), showing the basic structure with the indications of where buttons, text and images will go. + These are considered blueprints to help plan how a page will look and how users will move through it before creating the final design. +

+ Read more about wireframes here +
+
+ An orange stylized drawing of a Git branch, next to an illustration of Github's Mascot +

What is a branch in Git?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A branch is an isolated line of development where you can make changes, without it affecting the main project. A branch lets you safetly work on new features, fixes or even experiments. You then merge those changes back into the main code when they're ready.

- Read more + More information on branches here
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/Wireframe/style.css b/Wireframe/style.css index be835b6c7..5515027f4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,31 +1,17 @@ -/* 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; + --container: 900px; } -/* ====== Base Elements ====== - General rules for basic HTML elements in any context */ + +header { + text-align: center; +} + body { background: var(--paper); color: var(--ink); @@ -35,31 +21,24 @@ a { padding: var(--space); border: var(--line); max-width: fit-content; + text-align: center; } -img, -svg { +img{ width: 100%; - object-fit: cover; + object-fit: fill; } -/* ====== 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; + position: float; bottom: 0; text-align: center; } -/* ====== 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/ + */ main { display: grid; @@ -69,11 +48,7 @@ main { grid-column: span 2; } } -/* ====== 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); diff --git a/Wireframe/wireframe-example.jpg b/Wireframe/wireframe-example.jpg new file mode 100644 index 000000000..21a8370dc Binary files /dev/null and b/Wireframe/wireframe-example.jpg differ 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