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

update web and http slides

Browse Source
main
borb 1 month ago
parent 86ce67dbf1
commit ec015a3c0d
4 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File

37
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 ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw */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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="1" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" data-marpit-pagination-total="18">
/* @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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="2" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="3" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="4" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="5" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="6" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="7" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="8" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="9" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="10" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="11" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="12" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="13" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="14" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="15" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="16" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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,17 +297,18 @@
</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="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="17" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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="2" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw" lang="en-US" class="invert" data-marpit-pagination="18" style="--paginate:true;--class:invert;--heading-divider:5;--theme:ocnkjgidt8jjsw1zqouuaioe4dtjthkh93rtkkvpfvw;" 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="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">
<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>
<li data-marpit-fragment="2">Some services require users to have an <a href="https://en.wikipedia.org/wiki/API_key">API key</a></li>
<li data-marpit-fragment="3"><a href="https://jsonplaceholder.typicode.com/">JSON placeholder API</a></li>
</ul>
<div class='centered'>
<p><img src="imgs/third-party-apis.svg" alt="" style="width:900px;" /></p>

4
1-web-introduction.md
Unescape Escape View File

@ -180,7 +180,6 @@ p {
}
```
</div>
<div markdown='1'>
@ -192,8 +191,6 @@ p {
</div>
</div>
### JavaScript
* With a dedicated programming language, JavaScript, your website can become interactive
@ -244,6 +241,7 @@ p {
* Many services have public APIs that anyone can use
* Some services require users to have an [API key](https://en.wikipedia.org/wiki/API_key)
* [JSON placeholder API](https://jsonplaceholder.typicode.com/)
<div class='centered'>

36
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 glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7 */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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="1" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" data-marpit-pagination-total="16">
/* @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">
<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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="2" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="3" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="4" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="5" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="6" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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="5" data-paginate="true" data-class="invert" data-heading-divider="5" data-theme="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="7" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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>
@ -131,12 +131,14 @@
</li>
<li data-marpit-fragment="4">It is a subset of an <em><strong>URI (uniform resource identifier)</strong></em>
<ul>
<li data-marpit-fragment="5">This identifies a resource on a webpage</li>
<li data-marpit-fragment="5">This identifies any type of a resource</li>
<li data-marpit-fragment="6"><code>mailto:info@example.com</code> (an email address)</li>
<li data-marpit-fragment="7"><code>https://www.example.com/index.html#date</code> (A section of a website)</li>
</ul>
</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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="8" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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>
@ -164,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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="9" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<h3 id="http-request-examples">HTTP request examples</h3>
<table>
<thead>
@ -209,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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="10" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<h2 id="http-response-format">HTTP response format</h2>
<ul>
<li data-marpit-fragment="1">HTTP responses have the following format:
@ -237,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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="11" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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:
@ -257,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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="12" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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>
@ -300,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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="13" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="14" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<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
@ -316,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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="15" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<h3 id="port-numbers">Port numbers</h3>
<ul>
@ -327,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="glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7" lang="en-US" class="invert" data-marpit-pagination="16" style="--paginate:true;--class:invert;--heading-divider:5;--theme:glw73uapiap6nt26qdynb3wd8deiecz1p8rcvylbm3n7;" 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="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">
<h3 id="reserved-ports">Reserved ports</h3>
<div class='columns' markdown='1'>
<div markdown='1'>

4
2-http.md
Unescape Escape View File

@ -74,7 +74,9 @@ title: 2. HTTP
* `https://maps.google.com`
* `https://maps.google.com/maps?q=Oulu` (includes a ***query***)
* It is a subset of an ***URI (uniform resource identifier)***
* This identifies a resource on a webpage
* This identifies any type of a resource
* `mailto:info@example.com` (an email address)
* `https://www.example.com/index.html#date` (A section of a website)
### HTTP request format

Write Preview
Loading…
Cancel
Save