education
/
webdev-basics
12
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

update svgs

Browse Source
main
borb 1 month ago
parent e5ffc8a78a
commit e66e68beff
5 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File

36
1-web-introduction-slides.html
Unescape Escape View File

@ -13,10 +13,10 @@
/* buutti.css */
/* @theme buutti */div#\:\$p>svg>foreignObject>section .columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns12{display:grid;grid-template-columns:1fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns21{display:grid;grid-template-columns:2fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns32{display:grid;grid-template-columns:3fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns23{display:grid;grid-template-columns:2fr 3fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns111{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .centered{display:flex;flex-direction:column;justify-content:center;text-align:center}div#\:\$p>svg>foreignObject>section .tableborderless td,div#\:\$p>svg>foreignObject>section th{border:none!important;border-collapse:collapse}div#\:\$p>svg>foreignObject>section.extra{background-color:#5d275d;background-image:linear-gradient(to bottom,#401a40,#1d0c1d);color:white}div#\:\$p>svg>foreignObject>section.extra a{color:rgb(145,255,209)}div#\:\$p>svg>foreignObject>section.exercise{background-color:#29366f;background-image:linear-gradient(to bottom,#20636a,#173742);color:white}div#\:\$p>svg>foreignObject>section.exercise a{color:rgb(211,173,255)}
/* @theme 6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="1" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
/* @theme 5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="1" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h1 id="introduction-to-the-web">Introduction to the Web</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="2" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="2" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h2 id="contents">Contents</h2>
<ol>
<li data-marpit-fragment="1">Web and the Internet</li>
@ -25,10 +25,10 @@
<li data-marpit-fragment="4">Web APIs</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="3" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="3" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h2 id="web-and-the-internet">Web and the Internet</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-marpit-fragments="10" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="4" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-marpit-fragments="10" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="4" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="what-is-the-internet">What is the Internet?</h3>
<div class='columns' style='grid-template-columns: 4fr 1fr;' markdown='1'>
<div markdown='1'>
@ -61,7 +61,7 @@
<li data-marpit-fragment="10">In other words, the Internet is an infrastructure and WWW is served via it</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="5" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="5" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="what-is-the-web">What is the Web?</h3>
<div class='columns21' markdown='1'>
<div markdown='1'>
@ -110,7 +110,7 @@
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="6" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="6" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h2 id="frontend-vs-backend">Frontend vs Backend</h2>
<ul>
<li data-marpit-fragment="1">Web development is split into <a href="https://en.wikipedia.org/wiki/Frontend_and_backend"><strong><em>frontend</em></strong> and <strong><em>backend</em></strong></a></li>
@ -128,7 +128,7 @@
<li data-marpit-fragment="7"><em><strong>Full stack development</strong></em> refers to working on both backend and frontend!</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="7" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="7" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="what-is-a-server-or-the-cloud">What is a server or &quot;the cloud&quot;</h3>
<div class='columns32' markdown='1'>
<div markdown='1'>
@ -148,7 +148,7 @@
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="8" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="8" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="backend">Backend</h3>
<div class='columns21' markdown='1'>
<div markdown='1'>
@ -173,10 +173,10 @@
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="9" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="9" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h2 id="anatomy-of-a-website">Anatomy of a website</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="10" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="10" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="building-blocks-of-a-website">Building blocks of a website</h3>
<ul>
<li data-marpit-fragment="1">Historically, websites looked something like this
@ -194,7 +194,7 @@
<li data-marpit-fragment="7">The third building block of a website is JavaScript, or <strong><em>JS</em></strong>, which is used to add <strong><em>interactivity</em></strong></li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="11" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="11" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="html">HTML</h3>
<div class='columns32' markdown='1'>
<div markdown='1'>
@ -217,7 +217,7 @@
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="12" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="12" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="css">CSS</h3>
<div class='columns' markdown='1'>
<div markdown='1'>
@ -248,7 +248,7 @@
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-marpit-fragments="2" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="13" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-marpit-fragments="2" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="13" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="javascript">JavaScript</h3>
<ul>
<li data-marpit-fragment="1">With a dedicated programming language, JavaScript, your website can become interactive</li>
@ -263,10 +263,10 @@
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="14" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="14" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h2 id="web-apis">Web APIs</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="15" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="15" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="what-is-a-web-api">What is a Web API</h3>
<ul>
<li data-marpit-fragment="1"><em><strong>API (Application Programming Interface)</strong></em> defines a way of communicating between applications</li>
@ -276,7 +276,7 @@
<li data-marpit-fragment="5">There are some architectural models like <strong><em>REST (Representational State Transfer)</em></strong> that exist to generalize API design</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="16" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="16" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="client-side-and-server-side-apis">Client-side and Server-side APIs</h3>
<ul>
<li data-marpit-fragment="1"><a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Client-side APIs</a> — called on the web browser (client side):
@ -297,13 +297,13 @@
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="17" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="17" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h3 id="api-communication">API communication</h3>
<div class='centered'>
<p><img src="imgs/web-apis.svg" alt="" style="width:800px;" /></p>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-marpit-fragments="3" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj" lang="en-US" class="invert" data-marpit-pagination="18" style="--paginate:true;--class:invert;--heading-divider:5;--theme:6hz0ycll4vx6jf3fbro5e8uoid2bmzibesypjswz74pj;" data-marpit-pagination-total="18">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-marpit-fragments="3" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r" lang="en-US" class="invert" data-marpit-pagination="18" style="--paginate:true;--class:invert;--heading-divider:5;--theme:5ifermzeppq51ngimcbc69mhzvikyj8toqe3bqmag0r;" data-marpit-pagination-total="18">
<h2 id="third-party-apis">Third party APIs</h2>
<ul>
<li data-marpit-fragment="1">Many services have public APIs that anyone can use</li>

32
2-http-slides.html
Unescape Escape View File

@ -13,10 +13,10 @@
/* buutti.css */
/* @theme buutti */div#\:\$p>svg>foreignObject>section .columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns12{display:grid;grid-template-columns:1fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns21{display:grid;grid-template-columns:2fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns32{display:grid;grid-template-columns:3fr 2fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns23{display:grid;grid-template-columns:2fr 3fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .columns111{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(var(--marpit-root-font-size, 1rem) * 1)}div#\:\$p>svg>foreignObject>section .centered{display:flex;flex-direction:column;justify-content:center;text-align:center}div#\:\$p>svg>foreignObject>section .tableborderless td,div#\:\$p>svg>foreignObject>section th{border:none!important;border-collapse:collapse}div#\:\$p>svg>foreignObject>section.extra{background-color:#5d275d;background-image:linear-gradient(to bottom,#401a40,#1d0c1d);color:white}div#\:\$p>svg>foreignObject>section.extra a{color:rgb(145,255,209)}div#\:\$p>svg>foreignObject>section.exercise{background-color:#29366f;background-image:linear-gradient(to bottom,#20636a,#173742);color:white}div#\:\$p>svg>foreignObject>section.exercise a{color:rgb(211,173,255)}
/* @theme tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="1" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
/* @theme houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="1" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h1 id="http">HTTP</h1>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="2" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="2" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h2 id="contents">Contents</h2>
<ol>
<li data-marpit-fragment="1">What is HTTP?</li>
@ -25,7 +25,7 @@
<li data-marpit-fragment="4">IP address and ports</li>
</ol>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="3" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="3" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h2 id="what-is-http">What is HTTP?</h2>
<ul>
<li data-marpit-fragment="1"><strong><em>HTTP</em></strong> (Hypertext Transfer Protocol) is a TCP/IP based communication protocol, which provides a standardized way for computers to communicate with each other</li>
@ -42,7 +42,7 @@
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="4" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="4" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="but-what-is-tcpip">But what is TCP/IP?</h3>
<ul>
<li data-marpit-fragment="1">It is known as the <a href="https://en.wikipedia.org/wiki/Internet_protocol_suite">Internet protocol suite</a></li>
@ -62,7 +62,7 @@
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-marpit-fragments="3" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="5" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-marpit-fragments="3" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="5" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="http-structure">HTTP structure</h3>
<div class='columns' markdown='1'>
<div markdown='1'>
@ -77,7 +77,7 @@
</div>
</div>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="6" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="6" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h2 id="http-requests">HTTP requests</h2>
<ul>
<li data-marpit-fragment="1">HTTP defines a set of request methods</li>
@ -120,7 +120,7 @@
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="7" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="7" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="note-uri-vs-url">Note: URI vs URL</h3>
<ul>
<li data-marpit-fragment="1">The website address is more formally known as the <em><strong>URL (uniform resource locator)</strong></em>
@ -138,7 +138,7 @@
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="8" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="8" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="http-request-format">HTTP request format</h3>
<ul>
<li data-marpit-fragment="1">Request line: <code>&lt;request method&gt; &lt;request URI&gt;</code>
@ -166,7 +166,7 @@
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="9" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="9" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="http-request-examples">HTTP request examples</h3>
<table>
<thead>
@ -211,7 +211,7 @@
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="10" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-marpit-fragments="7" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="10" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h2 id="http-response-format">HTTP response format</h2>
<ul>
<li data-marpit-fragment="1">HTTP responses have the following format:
@ -239,7 +239,7 @@
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="11" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-marpit-fragments="6" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="11" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="http-status-codes">HTTP status codes</h3>
<ul>
<li data-marpit-fragment="1">The status line of HTTP a response sent by an API should accurately describe the status of what happened on the server after each request:
@ -259,7 +259,7 @@
</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-marpit-fragments="2" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="12" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-marpit-fragments="2" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="12" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="status-codes-for-a-crud-app">Status codes for a CRUD app</h3>
<ul>
<li data-marpit-fragment="1">Your APIs should use the following status codes for responses to CRUD operations</li>
@ -302,10 +302,10 @@
</tbody>
</table>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="13" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="13" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h2 id="ip-and-ports">IP and ports</h2>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="14" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="14" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="ip-addresses">IP addresses</h3>
<ul>
<li data-marpit-fragment="1">Every node, or <em><strong>host</strong></em> on a computer network needs an IP (Internet Protocol) address
@ -318,7 +318,7 @@
<li data-marpit-fragment="5">The 128-bit IPv6 addresses are of the form <code>2001:0db8:0000:0000:0000:8a2e:0370:7334</code> (can be shortened to <code>2001:db8::8a2e:370:7334</code>)</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="15" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-marpit-fragments="5" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="15" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="port-numbers">Port numbers</h3>
<ul>
@ -329,7 +329,7 @@
<li data-marpit-fragment="5">Computers have several different ports at their disposal</li>
</ul>
</section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr" lang="en-US" class="invert" data-marpit-pagination="16" style="--paginate:true;--class:invert;--heading-divider:5;--theme:tfihh97aqqqu44gs17adsfqsahod2914s02n0qn5o77sr;" data-marpit-pagination-total="16">
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-marpit-fragments="4" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p" lang="en-US" class="invert" data-marpit-pagination="16" style="--paginate:true;--class:invert;--heading-divider:5;--theme:houu5zlwl5gvg2xmcmaurjb2zxt89nxd7hxzwvzqj1p;" data-marpit-pagination-total="16">
<h3 id="reserved-ports">Reserved ports</h3>
<div class='columns' markdown='1'>
<div markdown='1'>

12
imgs/http-protocol.svg
Unescape Escape View File

@ -7,8 +7,8 @@
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
</clipPath>
<g clip-path="url(#_clip1)">
<g transform="matrix(2.57489,0,0,2.57489,-361.638,-258.165)">
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Client</text>
<g transform="matrix(2.57489,0,0,2.57489,-367.935,-258.243)">
<text x="185.844px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">W<tspan x="194.329px " y="170.366px ">e</tspan>b Client 1</text>
</g>
</g>
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
@ -19,8 +19,8 @@
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
</clipPath>
<g clip-path="url(#_clip2)">
<g transform="matrix(2.57489,0,0,2.57489,-359.101,-258.165)">
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Client</text>
<g transform="matrix(2.57489,0,0,2.57489,-367.555,-258.243)">
<text x="184.871px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">W<tspan x="193.356px " y="170.366px ">e</tspan>b Client 2</text>
</g>
</g>
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>
@ -31,8 +31,8 @@
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z"/>
</clipPath>
<g clip-path="url(#_clip3)">
<g transform="matrix(2.57489,0,0,2.57489,-359.101,-258.165)">
<text x="182.034px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:12px;">W<tspan x="191.667px " y="170.366px ">e</tspan>b Client</text>
<g transform="matrix(2.57489,0,0,2.57489,-368.07,-258.243)">
<text x="184.806px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">W<tspan x="193.292px " y="170.366px ">e</tspan>b Client 3</text>
</g>
</g>
<path d="M276.094,143.082C276.094,136.843 271.028,131.777 264.789,131.777L99.279,131.777C93.039,131.777 87.974,136.843 87.974,143.082L87.974,195.84C87.974,202.08 93.039,207.146 99.279,207.146L264.789,207.146C271.028,207.146 276.094,202.08 276.094,195.84L276.094,143.082Z" style="fill:none;stroke:white;stroke-width:2.28px;"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

2
imgs/third-party-apis.svg
Unescape Escape View File

@ -8,7 +8,7 @@
</clipPath>
<g clip-path="url(#_clip1)">
<g transform="matrix(2.57489,0,0,2.57489,-372.081,-275.239)">
<text x="186.026px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 1</text>
<text x="189.203px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application</text>
<text x="200.706px" y="180.937px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">(User)</text>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 248 KiB

After

Width:  |  Height:  |  Size: 248 KiB

4
imgs/web-apis.svg
Unescape Escape View File

@ -21,7 +21,7 @@
</clipPath>
<g clip-path="url(#_clip2)">
<g transform="matrix(2.57489,0,0,2.57489,-372.081,-275.239)">
<text x="186.026px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 1</text>
<text x="185.053px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 2</text>
<text x="200.706px" y="180.937px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">(User)</text>
</g>
</g>
@ -34,7 +34,7 @@
</clipPath>
<g clip-path="url(#_clip3)">
<g transform="matrix(2.57489,0,0,2.57489,-372.081,-275.239)">
<text x="186.026px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 1</text>
<text x="184.988px" y="170.366px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">Application 3</text>
<text x="200.706px" y="180.937px" style="font-family:'Bahnschrift', sans-serif;font-size:10.571px;">(User)</text>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Write Preview
Loading…
Cancel
Save