Skip to content

Fix: md files images paths #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KhaledTaymour wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: md files images paths #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion markdown/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ There are so many amazing courses that teach you how to **create** web applicati

## Who am I?

![Jon Kuperman](jon.jpeg)
![Jon Kuperman](../public/jon.jpeg)

My name is Jon Kuperman. I'm an engineer at Adobe working on their Creative Cloud. Before that I worked on the Brave Browser and Twitter.com.

Expand Down
8 changes: 4 additions & 4 deletions markdown/lessons/CPU.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ In this lesson we'll learn:

## Rail

![Chrome's RAIL model](/rail.png)
![Chrome's RAIL model](../../public/rail.png)

**0 to 16 ms** Users are exceptionally good at tracking motion, and they dislike it when animations aren't smooth. They perceive animations as smooth so long as 60 new frames are rendered every second. That's 16 ms per frame, including the time it takes for the browser to paint the new frame to the screen, leaving an app about 10 ms to produce a frame.

Expand Down Expand Up @@ -48,19 +48,19 @@ Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). I
var h1 = element1.clientHeight;

// Write (invalidates layout)
element1.style.height = (h1 * 2) + 'px'
element1.style.height = h1 * 2 + "px";

// Read (triggers layout)
var h2 = element2.clientHeight;

// Write (invalidates layout)
element2.style.height = (h2 * 2) + 'px'
element2.style.height = h2 * 2 + "px";

// Read (triggers layout)
var h3 = element3.clientHeight;

// Write (invalidates layout)
element3.style.height = (h3 * 2) + 'px'
element3.style.height = h3 * 2 + "px";
```

Enter `requestAnimationFrame()`
Expand Down
6 changes: 3 additions & 3 deletions markdown/lessons/Editing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
- Accessible color picker
- Accessibility panel

![CSS Specifishity](/specifishity.png)
![CSS Specifishity](../../public/specifishity.png)

After watching the quick edits video, please move on to the [Exercise](/exercise/Editing)

Expand All @@ -36,9 +36,9 @@ It helps me to think about the Sources tab as an IDE. Pretend it's VSCode or Sub

Compare:

![Sources](/sources.png)
![Sources](../../public/sources.png)

![VSCode](/vscode.png)
![VSCode](../../public/vscode.png)

The sources tab is best for debugging more complex problems. It's much easier to edit large amounts of JavaScript, set breakpoints or view an Error stack with this panel.

Expand Down
12 changes: 6 additions & 6 deletions markdown/lessons/Introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,33 +12,33 @@ Right click on a website and click **Inspect** or use the keyboard shortcut Comm

You should get something like this!

![Chrome DevTools](/chrome-devtools.png)
![Chrome DevTools](../../public/chrome-devtools.png)

But... what are we looking at?

## History

Before we had DevTools, we had source code.

![View Source](/view-source.png)
![View Source](../../public/view-source.png)

And if you wanted to check the value of something, we had `alert`

![Alert example](/alert.png)
![Alert example](../../public/alert.png)

But if you needed to check the value of anything that wasn't primitive you would get

![Alert example with an object](/alert-object.png)
![Alert example with an object](../../public/alert-object.png)

## Let there be DOM

[Hixie's Live Dom Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/)

## Our first DevTool 🐞

![Firebug](/firebug.png)
![Firebug](../../public/firebug.png)

![Firebug Discontinued](/firebug-discontinued.png)
![Firebug Discontinued](../../public/firebug-discontinued.png)

## Who this course is made for

Expand Down
6 changes: 3 additions & 3 deletions markdown/lessons/Network.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

> Google loses 20% of their traffic for every additional 100 milliseconds it takes for a page to load.

![Google Marketing](/google-marketing.png)
![Google Marketing](../../public/google-marketing.png)

In this lesson, we'll learn about

Expand Down Expand Up @@ -55,9 +55,9 @@ We spend so much energy compressing and combining JavaScript into dense bundles

This entire [article](https://medium.com/reloading/javascript-start-up-performance-69200f43b201) is worth a read but the TL;DR is that parse time is a huge performance problem, especially for mobile devices.

![JS parse cost](/js-parse.png)
![JS parse cost](../../public/js-parse.png)

![JS parse cost](/parse-time.png)
![JS parse cost](../../public/parse-time.png)

## Measuring real user performance

Expand Down