Skip to content

Commit

Permalink
Links and Images && Project: Recipes: Provided descriptive link texts #…
Browse files Browse the repository at this point in the history 
…27681 (#27749)

* Replace 'click me' with 'About The Odin Project'

* Updated descriptive links for recipes project

* Update link description in Project: Recipes

Replace the reference on line 128 to Part 5 with a more descriptive title ["Learning Code" from "Becoming a TOP Success Story"].
  • Loading branch information
@yuusan64
yuusan64 committed Apr 6, 2024
1 parent d78f59e commit 9b8800c
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 13 deletions.
12 changes: 6 additions & 6 deletions foundations/html_css/html-foundations/links-and-images.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ To create a link in HTML, we use the anchor element. An anchor element is define
Add the following to the body of the `index.html` page we created and open it in the browser:

```html
<a>click me</a>
<a>About The Odin Project</a>
```

You may have noticed that clicking this link doesn't do anything. This is because an anchor tag on its own won't know where we want to link to. We have to tell it a destination to go to. We do this by using an HTML attribute.
Expand All @@ -43,7 +43,7 @@ You may have noticed that clicking this link doesn't do anything. This is becaus
Add the following href attribute to the anchor element we created previously and try clicking it again, don't forget to refresh the browser so the new changes can be applied.

```html
<a href="https://www.theodinproject.com/about">click me</a>
<a href="https://www.theodinproject.com/about">About The Odin Project</a>
```

By default, any text wrapped with an anchor tag without an `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
Expand All @@ -57,7 +57,7 @@ The method shown above opens links in the same tab as the webpage containing the
While `href` specifies the destination link, `target` specifies where the linked resource will be opened. If it is not present, then, by default, it will take on the `_self` value which opens the link in the current tab. To open the link in a new tab or window (depends on browser settings) you can set it to `_blank` as follows:

```html
<a href="https://www.theodinproject.com/about" target="_blank" rel="noopener noreferrer">click me</a>
<a href="https://www.theodinproject.com/about" target="_blank" rel="noopener noreferrer">About The Odin Project</a>
```

<span id="target-security"></span>You may have noticed that we snuck in the `rel` attribute above. This attribute is used to describe the relation between the current page and the linked document.
Expand Down Expand Up @@ -110,7 +110,7 @@ Back in the index page, add the following anchor element to create a link to the
```html
<body>
<h1>Homepage</h1>
<a href="https://www.theodinproject.com/about">click me</a>
<a href="https://www.theodinproject.com/about">About The Odin Project</a>

<a href="about.html">About</a>
</body>
Expand Down Expand Up @@ -176,7 +176,7 @@ To use images that we have on our own websites, we can use a relative path.
</summary>

1. Create a new directory named `images` within the `odin-links-and-images` project.
1. Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory we just created.
1. Next, [download our practice image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory we just created.
1. Rename the image to `dog.jpg`.

</details>
Expand Down Expand Up @@ -218,7 +218,7 @@ Finally add the image to the `index.html` file:
```html
<body>
<h1>Homepage</h1>
<a href="https://www.theodinproject.com/about">click me</a>
<a href="https://www.theodinproject.com/about">About The Odin Project</a>

<a href="./pages/about.html">About</a>

Expand Down
14 changes: 7 additions & 7 deletions foundations/html_css/html-foundations/project-recipes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ But it's important to keep in mind that this project is just to build your HTML

### Setting up your project's GitHub repository

As mentioned in the [introduction to Git](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/introduction-to-git), you'll want to organize all your projects like a portfolio and link them to GitHub so it can be seen by others.
As mentioned in the [Introduction to Git lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/introduction-to-git), you'll want to organize all your projects like a portfolio and link them to GitHub so it can be seen by others.

<div class="lesson-note lesson-note--warning" markdown="1">

Expand All @@ -33,13 +33,13 @@ If you are having trouble:

- All Git commands need to be run from inside your project's folder (did you forget to `cd` into the `odin-recipes` folder?).

- Ensure you followed the steps [here on Step 2.3](/paths/foundations/courses/foundations/lessons/setting-up-git#step-2-configure-git-and-github) to clone from GitHub with SSH.
- Ensure you followed the steps on how to [create an SSH key](https://www.theodinproject.com/lessons/foundations-setting-up-git#step-2-configure-git-and-github:~:text=Step%202.3%3A%20Create%20an%20SSH%20key) to clone from GitHub with SSH.

- Refer to the [workflow](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/git-basics) in the Git Basics Lesson.
- Refer to the workflow in the [Git Basics lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/git-basics).

#### Tips on when to commit

Don't forget everything we went over in the [previous lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages) about commit messages!
Don't forget everything we went over in the [Commit Messages lesson](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/commit-messages)!

When you're building your project, you will probably end up doing several `git add` + `git commit` cycles before being ready to push it up to GitHub with `git push origin main`.

Expand All @@ -61,15 +61,15 @@ Okay, that's enough Git for the moment -- time to actually build stuff!
#### Iteration 2: recipe page

1. Create a new directory within the `odin-recipes` directory and name it `recipes`.
1. Create a new HTML file within the `recipes` directory and name it after the recipe it will contain. For example `lasagna.html`. You can use the name of your favorite dish or, if you need some inspiration, you can [find a recipe to use here](https://www.allrecipes.com/).
1. Create a new HTML file within the `recipes` directory and name it after the recipe it will contain. For example `lasagna.html`. You can use the name of your favorite dish or, if you need some inspiration, you can find a recipe to use at [Allrecipes](https://www.allrecipes.com/).
1. For now, just include an `h1` heading with the recipe's name as its content.
1. Back in the `index.html` file, add a link to the recipe page you just created. Example: Under the `<h1>Odin Recipes</h1>` heading, write out the link like so: `<a href="recipes/recipename.html">Recipe Title</a>`. The text of the link should again be the recipe name.

#### Iteration 3: recipe page content

Your new recipe page should have the following content:

1. An image of the finished dish under the h1 heading that you added earlier. You can find images of the dish on Google or the [recipe site](https://www.allrecipes.com/) we linked to earlier.
1. An image of the finished dish under the h1 heading that you added earlier. You can find images of the dish on Google or [Allrecipes](https://www.allrecipes.com/).

1. Under the image, it should have an appropriately sized "Description" heading followed by a paragraph or two describing the recipe.

Expand Down Expand Up @@ -125,5 +125,5 @@ Here is the answer:
1. Your project should not look like that. Focus mainly on the requirements of the project.

This applies for future projects too.
For more information read [Part 5](https://dev.to/theodinproject/learning-code-f56) of [Becoming a TOP Success Story](https://dev.to/theodinproject/becoming-a-top-success-story-mindset-3dp2)
For more information read ["Learning Code" from "Becoming a TOP Success Story"](https://dev.to/theodinproject/learning-code-f56).
</div>

0 comments on commit 9b8800c

Please sign in to comment.