Skip to content

Dev #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lauriefish22 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Dev #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a7ee373
added wirefreame to readme
lauriefish22 Jan 3, 2023
7f72ce9
added monkey pic
lauriefish22 Jan 4, 2023
ae3c0ac
finish site
lauriefish22 Jan 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 1 addition & 27 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1 @@
## The Golden Rule:

🦸 🦸‍♂️ `Stop starting and start finishing.` 🏁

If you work on more than one feature at a time, you are guaranteed to multiply your bugs and your anxiety.

## Making a plan

1. **Make a drawing of your app. Simple "wireframes"**
1. **Look at the drawing and name the HTML elements you'll need to realize your vision**
1. **Look at the drawing and imagine using the app. What _state_ do you need to track?**
1. **For each HTML element ask: Why do I need this? (i.e., "we need div to display the results in")**
1. **Once we know _why_ we need each element, think about how to implement the "Why" as a "How" (i.e., `resultsEl.textContent = newResults`)**
1. **Find all the 'events' (user clicks, form submit, on load etc) in your app. Ask one by one, "What happens when" for each of these events. Does any state change? Does any DOM update?**
1. **Think about how to validate each of your features according to a Definition of Done. (Hint: console.log usually helps here.)**
1. **Consider what features _depend_ on what other features. Use this dependency logic to figure out what order to complete tasks.**

Additional considerations:

- Ask: which of your HTML elements need to be hard coded, and which need to be dynamically generated?
- Consider your data model.
- What kinds of objects (i.e., Dogs, Friends, Todos, etc) will you need?
- What are the key/value pairs?
- What arrays might you need?
- What needs to live in a persistence layer?
- Is there some state we need to initialize?
- Ask: should any of this work be abstracted into functions? (i.e., is the work complicated? can it be reused?)
![wireframe of about monkeys](./assets/Wired.png)
Binary file added assets/Screenshot 2023-01-03 at 3.32.37 PM.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/Wired.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/monkey.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
82 changes: 45 additions & 37 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,47 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- metadata -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<!-- title and favicon -->
<title>Web App</title>
<link rel="icon" type="image/x-icon" href="assets/alchemy-favicon.png" />

<!-- js -->
<script type="module" src="app.js"></script>

<!-- fonts -->
<!-- see https://fonts.google.com/ -->

<!-- css -->
<link rel="stylesheet" href="styles/reset.css" />
<link rel="stylesheet" href="styles/global.css" />
<!-- add link for page specific css -->

</head>

<body>
<header>
<img class="logo" src="assets/html_css_js.png" alt="logo">
<h1>Web App</h1>
</header>

<main>

</main>

</body>

</html>
<head>
<!-- metadata -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<!-- title and favicon -->
<title>Web App</title>
<link rel="icon" type="image/x-icon" href="assets/alchemy-favicon.png" />

<!-- js -->
<script type="module" src="app.js"></script>

<!-- fonts -->
<!-- see https://fonts.google.com/ -->

<!-- css -->
<link rel="stylesheet" href="styles/reset.css" />
<link rel="stylesheet" href="styles/global.css" />
<!-- add link for page specific css -->
</head>

<body>
<header>
<img class="logo" src="assets/html_css_js.png" alt="logo" />
<h1>Web App</h1>
</header>

<main>
<h1>All About Monkeys</h1>
<img src="./assets/monkey.jpeg" id="image" alt="picture of monkey" />
<h2 id="monkeyfacts">Fun Facts About Monkeys</h2>
<ul>
<li>A group of monkeys is referred to as a troop.</li>
<li>Monkeys like hot baths</li>
<li>Monkeys sneeze when it rains</li>
</ul>
<p class="paramonkey">
There are almost 200 species of monkeys in the world. The vast majority live in
tropical forests, mostly in Central and South America. Monkeys are know for their
intelligence and inquisitiveness.
</p>
</main>
</body>
</html>
9 changes: 9 additions & 0 deletions styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,12 @@ header .logo {
main {
padding: 20px;
}

#monkeyfacts {
font-style: italic;
font-weight: 800;
}

.paramonkey {
background-color: darkkhaki;
}