diff --git a/Wireframe/images/branch.png b/Wireframe/images/branch.png new file mode 100644 index 000000000..42f87bc06 Binary files /dev/null and b/Wireframe/images/branch.png differ diff --git a/Wireframe/images/readme.png b/Wireframe/images/readme.png new file mode 100644 index 000000000..2542bad45 Binary files /dev/null and b/Wireframe/images/readme.png differ diff --git a/Wireframe/images/wireframe-topic.png b/Wireframe/images/wireframe-topic.png new file mode 100644 index 000000000..2405dadb9 Binary files /dev/null and b/Wireframe/images/wireframe-topic.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..99f95dfb1 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,78 @@ - - - - Wireframe - - - -
-

Wireframe

+ + + + + Wireframe + + + + +
+

Web Development Concepts

+

Understanding README files, Wireframes and Git Branches

+
+ +
+
+ README documentation example + + +

What is a README File?

+

- This is the default, provided code and no changes have been made yet. + A README file explains a project. It usually contains information + about the purpose of the project, installation instructions, + usage examples and important notes for developers.

-
-
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
-
- - - + + + Read More + + + + +
+ Git branching workflow diagram + +

What is a Git Branch?

+ +

+ A Git branch is an independent line of development. + It allows developers to work on new features without + affecting the main version of a project. +

+ + + Read More + + +
+ + + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..6ee97e199 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,6 +24,7 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { @@ -31,29 +32,32 @@ body { color: var(--ink); font: var(--font); } + 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; + margin: 0 auto 120px auto; } + footer { - position: fixed; - 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 @@ -65,10 +69,12 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { + + >*:first-child { 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. @@ -80,10 +86,38 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; } } + +header { + text-align: center; + margin: 2rem 0; +} + +header h1 { + margin-bottom: 0.5rem; +} + +footer { + width: 100%; + background-color: white; + border-top: 1px solid black; + padding: 10px; +} + +article img { + width: 100%; + height: 250px; + object-fit: contain; +} + +main { + padding-bottom: 180px; +}