Skip to content

Commit

Permalink
Merge branch 'TheOdinProject:main' into update_lists_to_styles_guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@Churtified
Churtified authored Jan 17, 2024
2 parents bc6534d + 2a3f3d9 commit 822017e
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 54 deletions.
64 changes: 35 additions & 29 deletions foundations/html_css/html-foundations/links-and-images.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ To get some practice using links and images throughout this lesson we need an HT

To create a link in HTML, we use the anchor element. An anchor element is defined by wrapping the text or another HTML element we want to be a link with an `<a>` tag.

Add the following to the body of the index.html page we created and open it in the browser:
Add the following to the body of the `index.html` page we created and open it in the browser:

```html
<a>click me</a>
Expand Down Expand Up @@ -110,17 +110,17 @@ 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">click me</a>

<a href="about.html">About</a>
<a href="about.html">About</a>
</body>
```

Open the index file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the about page we just created.

This works because the index and about page are in the same directory. That means we can use its name (`about.html`) as the link's href value.

But we will usually want to organize our website directories a little better. Normally we would only have the index.html at the root directory and all other HTML files in their own directory.
But we will usually want to organize our website directories a little better. Normally we would only have the `index.html` at the root directory and all other HTML files in their own directory.

Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory.

Expand All @@ -146,7 +146,6 @@ In many cases, this will work just fine; however, you can still run into unexpec
</body>
```


#### A metaphor

Absolute and relative links are a tricky concept to build a good mental model of, a metaphor may help:
Expand Down Expand Up @@ -183,34 +182,34 @@ To use images that we have on our own websites, we can use a relative path.
</details>

<details markdown="block">
<summary class="dropDown-header">WSL
<summary class="dropDown-header">WSL2
</summary>

When you download a file from the internet, Windows has a security feature that creates a hidden `Zone.Identifier` file with the same name as your downloaded file and it looks like `mypicture.jpg:Zone.Identifier` This file is harmless, but we'd like to avoid copying it over and cluttering up our directories.

1. Create a new directory named `images` within the `odin-links-and-images` project.
1. Create a new directory named `images` within the `odin-links-and-images` project.

2. Next, [download the stock dog image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640).
1. Next, [download the stock dog image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640).

3. Right click on the new download at the bottom of the chrome window and select "Show in folder".
1. Right click on the new download at the bottom of the chrome window and select "Show in folder".

1. Alternatively, if you do not see anything at the bottom of the chrome window, open the "Customize and control Google Chrome kebab menu and select the "Downloads" item. This will show all of your downloads, each with its own "Show in folder" button.
1. Alternatively, if you do not see anything at the bottom of the chrome window, open the "Customize and control Google Chrome kebab menu and select the "Downloads" item. This will show all of your downloads, each with its own "Show in folder" button.

4. Drag the file from your downloads folder to VSCode's file browser into your new `images` directory.
1. Drag the file from your downloads folder to VSCode's file browser into your new `images` directory.

1. Alternatively, using your Ubuntu terminal, navigate to the folder you want to copy the image to (`cd ~/odin-links-and-images` for example)

2. Type `cp <space>`
1. Type `cp <space>`

3. Drag the `dog.jpg` image from a Windows Explorer window and drop it onto the terminal window, it should appear as `"/mnt/c/users/username/Downloads/dog.jpg"`
1. Drag the `dog.jpg` image from a Windows Explorer window and drop it onto the terminal window, it should appear as `"/mnt/c/users/username/Downloads/dog.jpg"`

4. Type `<space> .` to tell cp that you want to copy the file to your current working directory.
1. Type `<space> .` to tell cp that you want to copy the file to your current working directory.

1. The full command will look something like `cp "/mnt/c/users/username/Downloads/dog.jpg" .`

5. Hit <kbd>Enter</kbd> to complete the command, and use ls to confirm the file now exists.
1. Hit <kbd>Enter</kbd> to complete the command, and use ls to confirm the file now exists.

Dragging files from Windows into the VSCode file browser prevents the `Zone.Identifier` files from being copied over. From now on, any time you need to copy pictures or other downloaded files like this into WSL, you can do it in this way. If you ever accidentally copy these `Zone.Identifier` files into WSL, you can safely delete them without any issue.
Dragging files from Windows into the VSCode file browser prevents the `Zone.Identifier` files from being copied over. From now on, any time you need to copy pictures or other downloaded files like this into WSL2, you can do it in this way. If you ever accidentally copy these `Zone.Identifier` files into WSL2, you can safely delete them without any issue.

</details>

Expand All @@ -219,17 +218,18 @@ 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">click me</a>

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

<img src="./images/dog.jpg">
<img src="./images/dog.jpg">
</body>
```

Save the `index.html` file and open it in a browser to view Charles in all his glory.

### Parent directories

What if we want to use the dog image in the about page? We would first have to go up one level out of the pages directory into its parent directory so we could then access the images directory.

<span id="parent-filepath"></span>To go to the parent directory we need to use two dots in the relative filepath like this: `../`. Let's see this in action, within the body of the `about.html` file, add the following image below the heading we added earlier:
Expand Down Expand Up @@ -296,15 +296,22 @@ Go ahead and update the `odin-links-and-images` project with width and height ta

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

- [What element is used to create a link?](#anchor-elements)
- [What is an attribute?](#attribute)
- [What attribute tells links where to go to?](#where-to-go)
- [What security considerations must be taken if you wish to use the target attribute to open links in a new tab/window?](#target-security)
- [What is the difference between an absolute and relative link?](#absolute-and-relative-links)
- [Which element is used to display an image?](#images)
- [What two attributes do images always need to have?](#two-attributes)
- [How do you access a parent directory in a filepath?](#parent-filepath)
- [What are the four main image formats that you can use for images on the web?](https://internetingishard.netlify.app/html-and-css/links-and-images/#image-formats)
- [Introduction](#introduction)
- [Lesson overview](#lesson-overview)
- [Preparation](#preparation)
- [Anchor elements](#anchor-elements)
- [Opening links in a new tab](#opening-links-in-a-new-tab)
- [Absolute and relative links](#absolute-and-relative-links)
- [Absolute links](#absolute-links)
- [Relative links](#relative-links)
- [A metaphor](#a-metaphor)
- [Images](#images)
- [Parent directories](#parent-directories)
- [Alt attribute](#alt-attribute)
- [Image size attributes](#image-size-attributes)
- [Assignment](#assignment)
- [Knowledge check](#knowledge-check)
- [Additional resources](#additional-resources)

### Additional resources

Expand All @@ -313,4 +320,3 @@ This section contains helpful links to related content. It isn’t required, so
- [Interneting is hard's treatment on HTML links and images](https://internetingishard.netlify.app/html-and-css/links-and-images)
- [What happened the day Google decided links including (`/`) were malware](https://www.itpro.co.uk/609724/google-apologises-after-blacklisting-entire-internet)
- [Chris Coyier's When to use target="_blank" on CSS-Tricks](https://css-tricks.com/use-target_blank/)

32 changes: 17 additions & 15 deletions foundations/installations/command_line_basics.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,17 @@ That blank screen or window with a prompt and blinking cursor is the <span id="c

In this introductory lesson to the command line, you'll learn how to navigate around your computer and how to manipulate files and directories (also known as folders) directly from the comfort of the command line. You'll soon see that this isn't as difficult as you may think. The commands you will learn in this lesson are very straightforward. So don't let the prospect of using the command line for the first time intimidate you.

### Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

- Describe what the command line is.
- Open the command line on your computer.
- Use the command line to navigate directories and display directory contents.
- Use the command line to create a new directory and a new file.
- Use the command line to rename or destroy a directory and a file.
- Use the command line to open a file or folder in a program.

### Test drive your terminal

<span id="open-command-line">Open a terminal</span> on your computer.
Expand All @@ -24,37 +35,26 @@ Often guides and instructions for using the terminal will indicate commands by p

You will be making heavy use of the command line throughout this curriculum, and the upcoming installations project will need you to install many different software programs using the command line. Additionally, you will primarily be using Git within the command line (more on this later). As part of the bigger picture, you may well be using the command line on a daily basis in your career as a software developer, making it an indispensable skill in your toolset.

### Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

- Describe what the command line is.
- Open the command line on your computer.
- Use the command line to navigate directories and display directory contents.
- Use the command line to create a new directory and a new file.
- Use the command line to rename or destroy a directory and a file.
- Use the command line to open a file or folder in a program.

### Assignment

<div class="lesson-content__panel" markdown="1">

<div class="lesson-note" markdown="1">
**Note for WSL users**: You will have to use the `wget` command along with the link given in the `Download files` section in order to have the zip file in your WSL installation (`wget https://swcarpentry.github.io/shell-novice/data/shell-lesson-data.zip`). You will also have to install unzip by using the command `sudo apt install unzip` and then `unzip shell-lesson-data.zip` to unzip the file. Keep in mind that throughout the course linked in the first step below, your terminal output may look slightly different to what is shown in the lessons. Anytime the course asks you to go to the Desktop, you will instead be going to the home directory which can be done by using the cd command (`cd ~`).
**Note for WSL2 users**: You will have to use the `wget` command along with the link given in the `Download files` section in order to have the zip file in your WSL2 installation (`wget https://swcarpentry.github.io/shell-novice/data/shell-lesson-data.zip`). You will also have to install unzip by using the command `sudo apt install unzip` and then `unzip shell-lesson-data.zip` to unzip the file. Keep in mind that throughout the course linked in the first step below, your terminal output may look slightly different to what is shown in the lessons. Anytime the course asks you to go to the Desktop, you will instead be going to the home directory which can be done by using the cd command (`cd ~`).
</div>

<div class="lesson-note lesson-note--warning" markdown=1>
Many of these resources assume you're using a Mac or Linux environment. If you did our previous installation lesson, you should already have Linux installed in dual-boot or a virtual machine. Or, you might be using macOS. If you don't have macOS, or any version of Linux installed, please return to the [operating system installation guide](https://www.theodinproject.com/paths/foundations/courses/foundations/lessons/prerequisites).
</div>

1. Visit [The Unix Shell](https://swcarpentry.github.io/shell-novice/) course designed by the Software Carpentry Foundation. There you will find a full complement of lessons on using the CLI, but for now just focus on completing the following lessons:

- [Download files](https://swcarpentry.github.io/shell-novice/#download-files) - only follow the instructions in this section, you don't need to install any software and can move onto the next bullet point in this list.
- [Introducing the Shell](https://swcarpentry.github.io/shell-novice/01-intro.html)
- [Navigating Files and Directories](https://swcarpentry.github.io/shell-novice/02-filedir.html)
- [Working With Files and Directories](https://swcarpentry.github.io/shell-novice/03-create.html)
- [Pipes and Filters](https://swcarpentry.github.io/shell-novice/04-pipefilter.html)

1. With your newly discovered CLI super powers, practice creating a folder and a few files using the `mkdir`, `touch`, and `cd` commands introduced in the previous step. As an example, a basic website might have a main `index.html` file, a CSS stylesheet file called `style.css`, and a folder for `images`. Think about how you could create these files with the commands and put it into practice!

1. Let's practice creating files and directories and deleting them! You'll need to enter the commands for the steps below in your terminal. If you can't recall how to open a terminal, scroll up for a reminder.
Expand All @@ -77,11 +77,13 @@ There's something important that you need to know about programmers. Programmers
First, you might have already noticed that copying and pasting inside the command line doesn't work the way that you'd expect. When you're inside the command line, you'll need to use <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd> (Mac: <kbd>Cmd</kbd> + <kbd>C</kbd>) to copy and <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> (Mac: <kbd>Cmd</kbd> + <kbd>V</kbd>) to paste. For example, to copy and paste commands from your browser into the command line, you'll highlight the command text and use <kbd>Ctrl</kbd> + <kbd>C</kbd> as usual and then paste it in your terminal using <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd>. Test it out!

Second, you need to learn about [tab completion](https://en.wikipedia.org/wiki/Command-line_completion). Seriously, this tip will save you so much time and frustration. Let's say that you're in the command line and that you need to move into a folder that's far away, something like `~/Documents/Odin-Project/foundations/javascript/calculator/`. That's a long command to type out, and everything needs to be exactly right in order for it to work. Nope, we're *way* too lazy for that! Basically, by hitting <kbd>Tab</kbd>, the command line will automatically complete commands that you've started typing once there's only one option. For example, it's pretty common to have a `Documents` folder and a `Downloads` folder in the home directory. If you've typed `cd D` and then press <kbd>Tab</kbd>, the command line will let you know that it's not sure which one you want by showing you the different options that match what you've typed so far:

```bash
$ cd D
Documents/ Downloads/
$ cd D
```

But once you've typed in a little bit more, it will complete the name for you, making it possible to write out the full file path above by typing as little as `cd Doc[tab]O[tab]f[tab]j[tab]cal[tab]` (depending on what other folders exist on your computer). Test it out, and get comfortable with how this works. You're gonna love it.

Third, there's a really handy shortcut for opening everything within a project directory: `.` Once you've installed a text editor, you can use this shortcut to open up an entire project and all its files in one go. This shortcut is also commonly used with Git (later on it's covered in detail) with commands like `git add .` to add all the files inside of a directory into Git's staging area. For example, if you have VS Code installed, you can `cd` into the project directory and then type `code .` (with the period). It will launch VS Code and open up the project folder in the sidebar. See the next section of this lesson for a more detailed example.
Expand All @@ -94,7 +96,7 @@ Third, there's a really handy shortcut for opening everything within a project d

- **macOS**: Some setup is required. After installing VSCode, launch it any way you're comfortable with. Once it's running, open the Command Palette with <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>. In the little dialog that appears, type `shell command`. One of the choices that appears will be `Shell Command: Install 'code' command in PATH`. Select that option, and restart the terminal if you have it open.

- **WSL**: Opening up VSCode from the command line in WSL is just as easy as it is in Linux. Just enter `code` which will open VSCode in WSL.
- **WSL2**: Opening up VSCode from the command line in WSL2 is just as easy as it is in Linux. Just enter `code` which will open VSCode in WSL2.

### Knowledge check

Expand Down
8 changes: 4 additions & 4 deletions foundations/installations/installation_overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@ If you're using a Mac, you're in great shape. The Odin Project instructions assu

Windows, by itself, **is not natively supported** by The Odin Project, or on our Discord server. Because many of the tools you'll be using were written with a Linux environment in mind, you'll need to have one even if you plan to use Windows as your development OS. If you are currently using Windows you can use one of the following options to create your development environment:

* A VirtualBox Virtual Machine
* Dual-boot Ubuntu installation
* Windows Subsystem for Linux (WSL)
- A VirtualBox Virtual Machine
- Dual-boot Ubuntu installation
- Windows Subsystem for Linux (WSL2)

A **virtual machine** is an emulation of a computer that runs within your existing OS. It allows you to use another operating system inside of a program on your current operating system (e.g. Running Linux inside of Windows). Virtual machines are as straightforward to install as any other program and are risk free. If you don't like Linux, you can easily remove the virtual machine. Virtual machines are a great way for new developers to get started quickly.

- [Watch this video](https://youtu.be/yIVXjl4SwVo) on Virtual Machines to achieve an overview of how they work.
- [Watch this video](https://youtu.be/yIVXjl4SwVo) on Virtual Machines to achieve an overview of how they work.

**Dual-booting** means installing two operating systems on your computer, which can give you the option to boot either Linux or Windows when your computer first starts up. The advantage of dual-booting over a virtual machine is that the OS can use all of your computer's resources, resulting in much faster operation. There is some risk to installing a dual-boot system because you're changing your hard drive partitions, but you'll be okay as long as you take your time and read the instructions.

Expand Down
Loading

0 comments on commit 822017e

Please sign in to comment.