Skip to content

Commit ded00ab

Browse files
committed
update web intro
1 parent f47bac9 commit ded00ab

File tree

1 file changed

+13
-3
lines changed

1 file changed

+13
-3
lines changed

0-web.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,35 @@
55
The content of the world wide web is made up of three parts:
66

77
- **HTML** (Hypertext Markup Language) provides the structure and content
8-
- **CSS** (Cascading Style Sheets) provides the style
8+
- **CSS** (Cascading Style Sheets) provides the style and presentation
99
- **JS** (JavaScript) provides the interactivity
1010

11-
When you access a website the owner's server sends your computer the code (written in HTML, CSS, and JS) which your browser then renders into a web page that you can view and interact with.
11+
When you enter a link into your web browser's address bar, it sends a request to a server.
12+
The server processes the request and sends your computer the code (written in HTML, CSS, and JS).
13+
Your browser then renders that code to display a web page that you can view and interact with.
1214

1315
## View Source
1416

17+
One fascinating aspect of the web is that everyone must share code to participate.
18+
You send a request to a server, they send back some code.
19+
Your browser is not a black box--you can always peek under the hood!
20+
1521
**Right click** on any web page and select "**View page source**" from the context menu to see the code that is being rendered by your browser (shortcut: `Ctrl + U` / `Command + U`).
1622

1723
Or put `view-source:` in front of any URL in your address bar, for example:
1824

19-
`view-source:https://evanwill.github.io/web-crash-course/`
25+
`view-source:https://evanwill.github.io/power-browser/`
2026

2127
This is HTML!
2228
(We'll learn more in the next lesson, but just take a peak now)
2329

2430
On another web page, right click on any element in the page and select "Inspect" or "Inspect Element" from the context menu to open your browser's built in **developer tools**.
2531
Dev tools let you look at the code in context, which can be a great way to learn about HTML and to understand how others created the sites you use.
2632

33+
You can use dev tools to manipulate the page you are looking at by applying your own styles that override what the server sends.
34+
In the area of your dev tools window that says "element.style", try typing in `display: none;`.
35+
What happens?
36+
2737
## Uniform Resource Locators (URLs)
2838

2939
To retrieve that code we need a web address.

0 commit comments

Comments
 (0)