diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..2a6b63b4b 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -14,11 +14,11 @@ There are some provided HTML and CSS files you can use to get started. You can u -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including a title, summary, and a link -- [ ] Check a webpage against a wireframe layout -- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [ ] Use version control by committing often and pushing regularly to GitHub +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including a title, summary, and a link +- [x] Check a webpage against a wireframe layout +- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [x] Use version control by committing often and pushing regularly to GitHub ## Acceptance Criteria diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..fb3b07983 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,61 @@ - Wireframe + Wireframe to Webcode Assignment-Sprint 1
-

Wireframe

+

Wireframe Webcode Assignment

- This is the default, provided code and no changes have been made yet. + A brief summary of the three most important constituents of Github.

- -

Title

+ Welcome mat, Headline -What is a ReadMe +

What is the Purpose of a Readme File

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A readme file serves as a guide for users and developers, providing + essential information about a project, including its purpose, + installation instructions, usage guidelines, and contribution + protocols. It helps ensure that everyone involved understands how to + effectively use and contribute to the project.

- Read more + Read more +
+
+ Wireframe example. Headline- What is the Purpose of a Wireframe +

What is the Purpose of a Wireframe

+

+ A wireframe is a visual guide that represents the skeletal framework + of a website or application. Its purpose is to outline the layout, + structure, and functionality of a page before the actual design and + development process begins. Wireframes help stakeholders visualize + the user interface, plan content placement, and ensure that the user + experience is intuitive and effective. +

+ Read more +
+
+ Git logo, Headline -What is a branch in Git +

What is a branch in Git

+

+ A branch in Git is a separate line of development that allows + multiple versions of a project to coexist. It enables developers to + work on new features, bug fixes, or experiments without affecting the + main codebase. Branches facilitate collaboration, as team members can + work independently and later merge their changes back into the main + branch when ready. +

+ Read more
- + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..8350c1042 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -31,6 +31,12 @@ body { color: var(--ink); font: var(--font); } + +header{ + text-align: center; + padding: calc(var(--space) * 2) var(--space); +} + a { padding: var(--space); border: var(--line);