diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..bd2adc1e1 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,67 @@ - + - + + Wireframe - - + + +
-

Wireframe

-

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

-
-
-
- -

Title

+

Welcome to Intro to Programming

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Here we will learn about some introductory web development + concepts.

- Read more -
+ +
+
+ example readme file +

The purpose of a README file

+

+ A README file is a text file often included with a software + program or code package which provides the reader with + information they may need to use the software, such as + installation instructions. +

+ Write your own + README file +
+
+ example of a wireframe +

The purpose of a wireframe

+

+ A wireframe is used to express the layout of a visual medium + such as a newspaper, or web page. It helps designers and + programmers to get a simple overview of a design. +

+ Read more about wireframing +
+
+ diagram of git branching +

What is a Git branch

+

+ A git branch is a copy of the code in a git repository. + Branches are created so that developers can work separately + on specific features. Once a feature is completed it is + merged into main. If the creation of a feature is not + successful, for example there are too many bugs, the branch + can be deleted without affecting the main branch. +

+ Read more about Git +
- - + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..6c87f5525 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,44 +16,83 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ + +/* a basic reset to user agent stylesheets */ +* { + margin: 0; + box-sizing: border-box; +} + :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; + --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); + background: var(--paper); + color: var(--ink); + font: var(--font); + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; } + a { - padding: var(--space); - border: var(--line); - max-width: fit-content; + padding: var(--space); + border: var(--line); + max-width: fit-content; } + img, svg { - width: 100%; - object-fit: cover; + width: 100%; + object-fit: cover; +} + +p { + margin-bottom: 0.5rem; +} + +h1 { + margin-bottom: 1rem; +} + +h2 { + margin-bottom: 0.8rem; } + /* ====== 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; + max-width: var(--container); + margin: 0 auto calc(var(--space) * 4) auto; + min-height: 0; +} + +header { + text-align: center; } + footer { - position: fixed; - bottom: 0; - text-align: center; + position: fixed; + bottom: 0; + text-align: center; + border-top: 2px solid rgb(158, 158, 158); + padding: 1rem; + min-width: 100%; + background-color: rgb(54, 53, 53); + color: white; } + /* ====== 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 @@ -62,28 +101,32 @@ https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ main { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space); - > *:first-child { - grid-column: span 2; - } + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); + + >*: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. Keeping things orderly and separate is the key to good, simple CSS. */ article { - border: var(--line); - padding-bottom: var(--space); - text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } -} + border: var(--line); + padding-bottom: var(--space); + text-align: left; + display: grid; + grid-template-columns: var(--space) 1fr var(--space); + + >* { + grid-column: 2/3; + } + + >img { + grid-column: span 3; + } +} \ No newline at end of file