@ -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 " the cloud" < / 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 >
borb
1 month ago
