diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..d62d04eb6 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,32 +1,92 @@ - + - Wireframe + + + The purpose of wireframe and readme and what branch means in git +
-

Wireframe

+

What is Branch in Git, The Purpose of README & Wireframing

- This is the default, provided code and no changes have been made yet. + This page covers three essential concepts in software development. It + explains what a Git branch is and why it is used to manage code changes + safely, explores the purpose of a README file and how it helps others + understand your project, and walks through the wireframing process from + initial structural sketches to a fully designed application page.

- -

Title

+ A laptop and book representing a README documentation guide +

The Purpose of README

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file contains descriptive information about the content of a + directory in which the file is located. The scope of the information + generally includes the files of the directory, and may include + descendant directories, or even the full directory tree. The name is + intended to draw a user's attention to important and orientational + information about the directory content. A rule of thumb for one + unfamiliar with the content of a directory is to read the README file + before other files. Although the name README is often used, there are + many other similar names used for the same purpose including "Read Me" + and "READ.ME". Sometimes the file name includes an extension to + indicate the file format such as "README.txt" for plain text or + "README.md" for Markdown.The file's name is often all caps.

- Read more + Read more about README files +
+
+ Wireframe progression showing structural sketch to fully designed app page +

The Purpose of Wireframe

+

+ Wireframing is a way to design a website service at the structural + level. A wireframe is commonly used to layout content and + functionality on a page which takes into account user needs and user + journeys. Wireframes are used early in the development process to + establish the basic structure of a page before visual design and + content is added. +

+ Read more about Wireframing +
+
+ Git branch diagram showing branching and merging workflow +

What is Branch in Git

+

+ In Git, a branch is like a separate workspace where you can make + changes and try new ideas without affecting the main project. Think of + it as a "parallel universe" for your code. +

+ Read more about Git branches
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..78c169f8d 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,10 +18,11 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); + --color: white; --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); - --line: 1px solid; + --line: 3px solid; --container: 1280px; } /* ====== Base Elements ====== @@ -30,29 +31,47 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + padding-bottom: 50px; +} +header { + text-align: center; + margin-bottom: 40px; +} +header p { + text-align: left; + text-indent: 40px; + max-width: 1500px; + margin: 0 auto; } a { padding: var(--space); border: var(--line); max-width: fit-content; + background-color: #ebcb6e; } img, svg { width: 100%; + height: 400px; object-fit: cover; } +main > *:first-child > img { + height: 800px; + width: 70%; + margin: 0 auto; + display: block; +} /* ====== 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; + left: 0; bottom: 0; + width: 100%; text-align: center; + background-color: #ebcb6e; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -62,6 +81,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);