Skip to content

Commit 52559c0

Browse files
committed
Remove change of title/image/colors from overview (distracting)
1 parent bb95f20 commit 52559c0

File tree

1 file changed

+0
-66
lines changed

1 file changed

+0
-66
lines changed

docs/01-introduction.md

Lines changed: 0 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -47,72 +47,6 @@ To start the app, complete the following steps:
4747

4848
4. Open your browser to http://localhost:3000. You should see the Memes-R-Us website!
4949

50-
51-
52-
## 🐳 Your first change
53-
54-
**CHANGE REQUEST INCOMING!** We need to update the website to use a different title, image, and colors. Fortunately, it is up to you to determine what title, image, and colors to use.
55-
56-
Let's get to it! 🏃
57-
58-
### Updating the title
59-
60-
1. Open the `src/index.js` file in the VS Code editor.
61-
62-
2. Find the line that looks like the following:
63-
64-
```javascript
65-
message: "Whalecome to Docker!",
66-
```
67-
68-
This line is specifying the message to be displayed on the website. Since it's something we need to update, let's update it!
69-
70-
3. Update the message to whatever you'd like. For example, this would change the message to "Good day to you!":
71-
72-
```javascript
73-
message: "Good day to you!",
74-
```
75-
76-
Make sure you keep the surrounding `"` marks and the comma at the end.
77-
78-
4. Go back to your website (http://localhost:3000) and refresh the page. Validate the change worked. Hooray! 🎉
79-
80-
### Updating the image
81-
82-
1. Now, find the following line in the `src/index.js` file:
83-
84-
```javascript
85-
memeUrl: "https://media.giphy.com/media/yoJC2A59OCZHs1LXvW/giphy.gif"
86-
```
87-
88-
This is specifying the location of the image to display for our meme. Let's update that!
89-
90-
2. Open [giphy.com](https://giphy.com) and find an image you'd like.
91-
92-
3. Click the "chain link" icon to copy the URL. And then paste it in, replacing the URL that was there before.
93-
94-
The following update would change the image to use a different whale meme:
95-
96-
```javascript
97-
memeUrl: "https://media.giphy.com/media/CAmbqvnwDk4jAqnLg9/giphy.gif"
98-
```
99-
100-
4. Go back to your page and refresh the page to validate it worked.
101-
102-
### Updating the color palette
103-
104-
1. Open the `src/assets/styles.css` file in the VS Code editor.
105-
106-
2. Update the `background-color` attributes for the `body` and `#content` sections.
107-
108-
- The `body` update will change the entire page background
109-
- The `#content` update will change the background color for only the card displaying the image and title
110-
111-
3. Go back to your page and refresh the page to validate the changes worked.
112-
113-
114-
Phew! Our website has been updated!
115-
11650
## Next steps
11751

11852
Now that you have the site up and running and a few changes applied to it, we're ready for the next feature!

0 commit comments

Comments
 (0)