OpenBrackets

Beginning Web Development

Week 1 Day 2

Welcome!

Welcome to class!

This is the Beginning Web Development class. Make sure you’re in the right place!

​

Schedule for today:

• 50 minutes of instruction and exercises
• 10 minutes for a break
• 30 minutes for a Kahoot!

Introductions

Say hello to our teachers and TAs!

Asking Questions

Type in chat

Or

1. Click Reactions
2. Click Raise Hand

How are you doing?

1. From a scale of 1 to 10, how’s your day so far and why?
2. How would you place the emotes on this scale? (From left to right, these emotes are named weary, frowning, neutral_face, slight_smile, smile, and sunglasses.)

1 2 3 4 5 6 7 8 9 10

File Systems and URLs

How are file systems used? (a.k.a. Why do we care?)

You can use file systems to keep your computer organized so that you can easily find things.

Many websites (including the ones we’ll build) use file systems to structure content. When you access a page on a website, you’re going through a file system to get to the file/webpage you want.

Folders and Files

Computers have a lot of files. Many home computers have over a million different files.

These files are organized into folders. Folders can have files and other folders inside them.

The largest folder on a computer, which contains everything else, is called the root.

Visualizing File Systems

You can think of file systems as a bunch of physical folders inside other folders. Everything is contained in one massive folder, which is the root. Then inside that massive folder, we have more folders and some pieces of paper, which are files.

You can also think of file systems as trees. The root is the trunk of the tree, each folder is a branch, and each file is a leaf.

A small example of a file system as a tree

example1.com

├── file6.html

├── folder1

│ ├── file1.txt

│ ├── file2.txt

│ ├── file3.html

│ └── folder3

│ └── file4.css

├── folder2

│ └── file5.html

└── index.html

Paths

The path to a file is a list of all the folders the file is in, plus the file name. The folders are in order from top to bottom (biggest to smallest)

The root is written as a /, and each folder is separated by a /. For example, the path to nestedFile.html is /folder/secondFolder/nestedFile.html.

We’ll go through more examples in a bit.

Technically there are two types of paths: absolute and relative. What we’re talking about here is the absolute path. Both are useful, but we’ll get by with just absolute paths for now.

More Examples of Paths

The path for file2.txt is /folder1/file2.txt.

What is the path for:

• index.html
• file1.txt
• file3.html
• file4.css
• file5.html

Extras:

• folder2
• folder3

.

├── file6.html

├── folder1

│ ├── file1.txt

│ ├── file2.txt

│ ├── file3.html

│ └── folder3

│ └── file4.css

├── folder2

│ └── file5.html

└── index.html

Paths in Websites

When you’re accessing pages on a website, you’re asking for a file inside the server’s file system. If the example file structure was in Example.qpwoeirut0.repl.co, then to view nestedFile.html we’d go to https://Example.qpwoeirut0.repl.co/folder/secondFolder/nestedFile.html.

To access style.css, we’d go to https://Example.qpwoeirut0.repl.co/style.css.

Uniform Resource Locators (URLs)

This is the thing that you type into your browser in order to go to a website. Some websites use URLs as paths. For example, openbrackets.us/fall2021/webDevelopment.html gets the file called webDevelopment.html inside the fall2021 folder, inside the server’s file system.

Each URL has a domain and path. The domain is everything before the first /, and the path is everything after. The domain in the URL above is openbrackets.us, and the path is /fall2021/webDevelopment.html.

index.html

When you created your Repl, you may have noticed that the HTML file that was created was called index.html. This is a special name in websites. The index.html page is shown when the user requests a folder instead of a file.

If we went to https://Example.qpwoeirut0.repl.co, we’d get the index.html file.

index.html (continued)

Each folder can have its own index.html. If we went to example1.com, we’d get the blue index.html. But if we went to example1.com/folder1, we’d get the red index.html.

If we went to a folder without an index.html (like folder2), we’d get an error.

example1.com

├── file1.html

├── folder1

│ ├── file2.html

│ └── index.html

├── folder2

│ └── file3.html

└── index.html

10 minute break!

• Turn your camera off
• Get a drink
• Stand up and stretch

Kahoot!

Feedback

Please take a moment to fill out the Zoom poll before the end of class!

When you need help outside of class

Email openbracketscoding@gmail.com with your class name, teacher, and question

If you are age 13 or older, you can try Discord

• https://discord.gg/ZRtk534

The age restriction is because of Discord’s Terms of Service

Thanks for coming to class!

Please let us know if you have any questions!