diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..5c9388825 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -13,7 +13,7 @@ ## Task -![Wireframe](./wireframe.png) +![Wireframe](./images/wireframe.png) Using the provided wireframe and resources, write a new webpage explaining: diff --git a/Wireframe/images/image_branch.png b/Wireframe/images/image_branch.png new file mode 100644 index 000000000..501ceeed9 Binary files /dev/null and b/Wireframe/images/image_branch.png differ diff --git a/Wireframe/images/image_git.png b/Wireframe/images/image_git.png new file mode 100644 index 000000000..ca80db075 Binary files /dev/null and b/Wireframe/images/image_git.png differ diff --git a/Wireframe/images/image_readme.png b/Wireframe/images/image_readme.png new file mode 100644 index 000000000..ee5f0f7b5 Binary files /dev/null and b/Wireframe/images/image_readme.png differ diff --git a/Wireframe/images/image_wireframe.png b/Wireframe/images/image_wireframe.png new file mode 100644 index 000000000..a64bf6ec8 Binary files /dev/null and b/Wireframe/images/image_wireframe.png differ diff --git a/Wireframe/wireframe.png b/Wireframe/images/wireframe.png similarity index 100% rename from Wireframe/wireframe.png rename to Wireframe/images/wireframe.png diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7cfc79715 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,30 +3,81 @@ + Wireframe
-

Wireframe

-

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

+

Basic of Web Development

+

+ Web development is the process of creating and maintaining websites and web applications.
+ Good web developers, they have a strong understanding of Git, README files and wireframes(Design) before the actual development process.
+ This articles introduce the purpose of README files,wireframes and how to create branches in Git. +

+
- -

Title

+ + README file illustration +

Purpose of README file

+

+ README files to communicate important information about a project for users and developers. + A README is often the first item a visitor will see when visiting your repository. + From the readme, users can easily understand what your project is about, how to use it. +

+

+ README files typically include information on:

+ + + Read more +
+
+ Wireframe Example +

Purpose of a wireframe

+

+ Wireframe graphic representation of a website, mobile app, or other digital interface that highlights the overall structure and layout of the design without going into specifics like colors, fonts, or images. A wireframe is a product outline that shows what interface elements will be present on important pages. + + Wireframes are used to: +

+ + Read more +
+
+ branch in git +

Branch in Git

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + 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 +

+ Common Reasons to Create a Branch: +

+ + + Read more
diff --git a/Wireframe/pages/branch_git.html b/Wireframe/pages/branch_git.html new file mode 100644 index 000000000..5adac049d --- /dev/null +++ b/Wireframe/pages/branch_git.html @@ -0,0 +1,13 @@ + + + + + + + + +
+

Branch in Git

+
+ + \ No newline at end of file diff --git a/Wireframe/pages/purpose_readme.html b/Wireframe/pages/purpose_readme.html new file mode 100644 index 000000000..2c9182a9b --- /dev/null +++ b/Wireframe/pages/purpose_readme.html @@ -0,0 +1,15 @@ + + + + + + + Purpose of README file + + + +
+

Purpose of README file

+
+ + \ No newline at end of file diff --git a/Wireframe/pages/purpose_wireframe.html b/Wireframe/pages/purpose_wireframe.html new file mode 100644 index 000000000..e0c1e7280 --- /dev/null +++ b/Wireframe/pages/purpose_wireframe.html @@ -0,0 +1,15 @@ + + + + + + + Purpose of a wireframe + + +
+

Purpose of a wireframe

+
+

A wireframe is a visual guide that represents the skeletal framework of a website or application. It outlines the layout, structure, and content placement without focusing on the final design elements like colors, images, or typography.

+ + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..99dc4b52b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -21,8 +21,11 @@ As well as useful links to learn more */ --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: 2px solid; --container: 1280px; + --yellow: oklch(0.8 0.2 90); + --footer-color:#4D4D4D; + --white:#FFF; } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ @@ -30,29 +33,41 @@ body { background: var(--paper); color: var(--ink); font: var(--font); + } a { padding: var(--space); border: var(--line); max-width: fit-content; + font:var(--yellow); + font-weight: bold; } img, svg { width: 100%; - object-fit: cover; + height: 475px; 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; +header{ + text-align: center; } +/* sytle for the foooter, which should be at the bottom of the page, and have a different background colour to the main content. +*/ footer { - position: fixed; - bottom: 0; - text-align: center; + height: 60px; + background-color: var(--footer-color); + color: var(--white); + display: flex; + justify-content: center; + bottom: 0; +} +footer a { + color: var(--white); + text-decoration: none; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element.