CINXE.COM

IPFS Tutorial | Blogging on the Decentralized Web | ProtoSchool

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="google-site-verification" content="kex8f9OaacZS2GAJ_M5UupW0x-h4X3zYj8qaPJNV2JM"><link rel="icon" href="/favicon.png"><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"><style>body { font-family: 'Roboto', sans-serif; }</style><link href="/css/build~contribute~course~error~events~home~host~lessons~news~resources~tutorial~tutorials.9f55d702.css" rel="prefetch"><link href="/css/course.31c08d4e.css" rel="prefetch"><link href="/css/course~tutorials.27374047.css" rel="prefetch"><link href="/css/events.4c481b3e.css" rel="prefetch"><link href="/css/home.c0f58b45.css" rel="prefetch"><link href="/css/host.31c08d4e.css" rel="prefetch"><link href="/css/lessons~news~resources.20a35763.css" rel="prefetch"><link href="/css/lessons~resources.3652ded5.css" rel="prefetch"><link href="/css/news.e977f534.css" rel="prefetch"><link href="/css/tutorial.03be5c30.css" rel="prefetch"><link href="/css/tutorials.add412f2.css" rel="prefetch"><link href="/js/build.943932f9.js" rel="prefetch"><link href="/js/build~contribute~course~error~events~home~host~lessons~news~resources~tutorial~tutorials.b8a0a0f7.js" rel="prefetch"><link href="/js/chunk-2d2308b7.6545c029.js" rel="prefetch"><link href="/js/chunk-57f93a34.17161cb9.js" rel="prefetch"><link href="/js/contribute.e80e18ae.js" rel="prefetch"><link href="/js/course.bbd1c058.js" rel="prefetch"><link href="/js/course~home~lessons~resources~tutorial~tutorials.079464d3.js" rel="prefetch"><link href="/js/course~tutorials.e74c9221.js" rel="prefetch"><link href="/js/error.40b634fd.js" rel="prefetch"><link href="/js/events.e291911a.js" rel="prefetch"><link href="/js/home.c4f67a23.js" rel="prefetch"><link href="/js/host.8f5c6970.js" rel="prefetch"><link href="/js/lessons.bc344ab5.js" rel="prefetch"><link href="/js/lessons~news~resources.22b8280e.js" rel="prefetch"><link href="/js/lessons~resources.b1f7d577.js" rel="prefetch"><link href="/js/news.8f7b61c4.js" rel="prefetch"><link href="/js/resources.4d6694a0.js" rel="prefetch"><link href="/js/tutorial.844a23e6.js" rel="prefetch"><link href="/js/tutorials.afeff307.js" rel="prefetch"><link href="/css/app.1237bf28.css" rel="preload" as="style"><link href="/css/chunk-vendors.a4530562.css" rel="preload" as="style"><link href="/js/app.2bf6cc0e.js" rel="preload" as="script"><link href="/js/chunk-vendors.15f6ce0a.js" rel="preload" as="script"><link href="/css/chunk-vendors.a4530562.css" rel="stylesheet"><link href="/css/app.1237bf28.css" rel="stylesheet"><style type="text/css">.resize-observer[data-v-8859cc6c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-8859cc6c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}</style><link rel="stylesheet" type="text/css" href="/css/build~contribute~course~error~events~home~host~lessons~news~resources~tutorial~tutorials.9f55d702.css"><script charset="utf-8" src="/js/build~contribute~course~error~events~home~host~lessons~news~resources~tutorial~tutorials.b8a0a0f7.js"></script><script charset="utf-8" src="/js/course~home~lessons~resources~tutorial~tutorials.079464d3.js"></script><link rel="stylesheet" type="text/css" href="/css/tutorial.03be5c30.css"><script charset="utf-8" src="/js/tutorial.844a23e6.js"></script><title>IPFS Tutorial | Blogging on the Decentralized Web | ProtoSchool</title><link data-vue-meta="1" rel="canonical" href="https://proto.school/blog/"><meta data-vue-meta="1" property="og:url" content="https://proto.school/blog/" data-vmid="og:url"><meta data-vue-meta="1" property="og:type" content="website" data-vmid="og:type"><meta data-vue-meta="1" property="og:site_name" content="ProtoSchool" data-vmid="og:site_name"><meta data-vue-meta="1" name="twitter:card" content="summary_large_image" data-vmid="twitter:card"><meta data-vue-meta="1" name="twitter:site" content="@ProtoSchool" data-vmid="twitter:site"><meta data-vue-meta="1" property="og:title" content="IPFS Tutorial | Blogging on the Decentralized Web" data-vmid="og:title"><meta data-vue-meta="1" property="og:description" content="Cool content addresses don't change. Create a chain of links from one CID to another with the IPFS DAG API." data-vmid="og:description"><meta data-vue-meta="1" name="description" content="Cool content addresses don't change. Create a chain of links from one CID to another with the IPFS DAG API." data-vmid="description"><meta data-vue-meta="1" property="og:image" content="https://proto.school/social-tiles/twitter/tutorials/blog.jpg" data-vmid="og:image"><meta data-vue-meta="1" name="twitter:image" content="https://proto.school/social-tiles/twitter/tutorials/blog.jpg" data-vmid="twitter:image"><meta data-vue-meta="1" name="twitter:image:alt" content="IPFS Tutorial | Blogging on the Decentralized Web" data-vmid="twitter:image:alt"></head><body><noscript><strong>We're sorry but ProtoSchool doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"><div><div data-v-4cf932a9="" class="home"><header data-v-4cf932a9=""><section data-v-4cf932a9="" class="bg-navy white pv3"><div data-v-4cf932a9="" class="flex-auto flex items-center center mw7 ph3"><a data-v-4cf932a9="" href="/" class="router-link-active"><svg data-v-4cf932a9="" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116 135" alt="ProtoSchool" class="w3"><path data-v-4cf932a9="" d="M58.291 0L0 33.518v67.035l58 33.517 58-33.517V33.518L58.291 0zm53.92 44.593l-33.226-27.98 33.518 19.236v8.744h-.292zM13.407 63.246L25.94 28.563l8.16-1.457-20.693 36.14zm23.025-34.1h43.719l21.859 37.89-21.86 37.889H36.433l-21.86-37.89 21.86-37.89zM11.658 67.909l20.694 36.141L8.744 75.779l2.914-7.87zm65.578 39.93l-36.14 6.412-5.247-6.412h41.387zm25.94-37.015l-12.533 34.684-8.16 1.457 20.693-36.14zm1.749-4.663L83.94 30.02l23.608 28.27-2.623 7.87zm-65.87-39.93l36.141-6.412 5.246 6.412H39.055zm35.85-9.035l-44.01 7.87 37.014-13.408 6.995 5.538zM23.316 27.688L8.16 69.658l6.995-39.055 8.16-2.915zM6.704 77.528l28.562 34.392L4.955 86.271l1.749-8.743zm34.974 39.638l44.01-7.87-37.306 13.408-6.704-5.538zm51.588-10.784l15.156-41.97-6.995 39.055-8.16 2.915zm16.613-49.84l-28.854-34.1L111.337 47.8l-1.458 8.744zM65.869 9.036L24.774 23.9 58.29 4.663l7.578 4.372zM11.95 31.477L4.08 74.613V35.85l7.87-4.372zm-7.869 58l33.518 27.98L4.08 98.221v-8.744zm46.634 35.558l41.095-14.864-33.517 19.236-7.578-4.372zm53.919-22.442l7.578-43.136v38.764l-7.578 4.372z" fill="url(#paint0_linear)"></path><defs data-v-4cf932a9=""><linearGradient data-v-4cf932a9="" id="paint0_linear" x1=".136" y1="67.052" x2="116.42" y2="67.052" gradientUnits="userSpaceOnUse"><stop data-v-4cf932a9="" stop-color="#22F2AD"></stop><stop data-v-4cf932a9="" offset="1" stop-color="#AB21F4"></stop></linearGradient></defs></svg></a><div data-v-4cf932a9="" class="header-text ml3"><a data-v-4cf932a9="" href="/" class=" header-title ma0 fw4 white router-link-active"><span data-v-4cf932a9="" class="montserrat fw4">Proto</span><span data-v-4cf932a9="" class="montserrat fw2">School</span></a><div data-v-4cf932a9="" class="header-slogan ma0 montserrat fw3"> Interactive tutorials on decentralized web protocols </div></div></div></section><nav data-v-133bbc60="" data-v-4cf932a9="" class="bg-aqua"><div data-v-133bbc60="" class="dn db-ns center mw7 pv3 ph3"><div data-v-133bbc60="" class="link-list flex overflow-auto items-center bg-aqua navy f5 fw6 center tc mw7"><a data-v-133bbc60="" href="/tutorials" class="nav-link navy">Tutorials</a><span data-v-133bbc60="" class="fw4">&gt;</span><a data-v-133bbc60="" href="/blog" aria-current="page" class="nav-link navy router-link-exact-active router-link-active" data-cy="tutorial-landing-link">Blog</a></div></div><div data-v-133bbc60="" class="db dn-ns"><div data-v-133bbc60="" class="flex items-center bg-aqua ph3 pv3 w-100"><div data-v-133bbc60="" class="flex-auto link fw5 f5 db bb border-aqua navy"><a data-v-133bbc60="" href="/tutorials" class="nav-link navy">Tutorials</a><span data-v-133bbc60="" class="fw4"> &gt; </span><a data-v-133bbc60="" href="/blog" aria-current="page" class="nav-link navy router-link-exact-active router-link-active">Blog</a></div><button data-v-133bbc60="" class="menu-toggle button-reset bg-transparent b--transparent"><svg data-v-133bbc60="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="#2c3e50" stroke-width="3" style="display:inline-block;vertical-align:middle;overflow:visible;" alt="open navigation menu" class=""><path data-v-133bbc60="" d="M0 2.5 L16 2.5"></path><path data-v-133bbc60="" d="M0 8 L16 8"></path><path data-v-133bbc60="" d="M0 13.5 L16 13.5"></path></svg></button></div><div data-v-133bbc60="" class="dn"><div data-v-133bbc60="" class="tc bg-aqua-muted white"><div data-v-133bbc60=""><a data-v-133bbc60="" href="/" class="router-link-active navy link pa3 fw5 f4 db bb border-aqua">Home</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/tutorials" class="navy link pa3 fw5 f4 db bb border-aqua">Tutorials</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/events" class="navy link pa3 fw5 f4 db bb border-aqua">Events</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/contribute" class="navy link pa3 fw5 f4 db bb border-aqua">Contribute</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/host" class="navy link pa3 fw5 f4 db bb border-aqua">Host</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/build" class="navy link pa3 fw5 f4 db bb border-aqua">Build</a></div><div data-v-133bbc60=""><a data-v-133bbc60="" href="/news" class="navy link pa3 fw5 f4 db bb border-aqua">News</a></div></div></div></div></nav></header></div><section data-v-64098914="" class="mw7 w-100 center ph3 flex items-start pv3 mt3"><svg data-v-64098914="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="dn db-ns mr3" style="height: 53px;"><defs><linearGradient id="a" y2="771.51" gradientUnits="userSpaceOnUse" x2="527.72" y1="771.51" x1="84.315"><stop stop-color="#4a9ea1" offset="0"></stop></linearGradient><linearGradient id="b" y2="771.48" gradientUnits="userSpaceOnUse" x2="512.36" y1="771.48" x1="99.675"><stop stop-color="#63d3d7" offset="0"></stop></linearGradient></defs><path d="M84.315 899.51l221.7 128 221.7-128v-256l-221.7-127.99-221.7 128z" fill="url(#a)" transform="translate(-50.017 -515.51)"></path><path fill="url(#b)" d="M283.13 546.35l-160.74 92.806a38.396 38.396 0 010 8.59l160.75 92.805c13.554-10 32.043-10 45.597 0l160.75-92.807a38.343 38.343 0 01-.001-8.588l-160.74-92.806c-13.554 10.001-32.044 10.001-45.599 0zm221.79 127.03L344 767.22c1.884 16.739-7.361 32.751-22.799 39.489l.18 184.58a38.386 38.386 0 017.439 4.294l160.75-92.805c-1.884-16.739 7.36-32.752 22.799-39.49v-185.61a38.397 38.397 0 01-7.44-4.294zm-397.81 1.032a38.387 38.387 0 01-7.438 4.295v185.61c15.438 6.738 24.683 22.75 22.799 39.489l160.74 92.806a38.4 38.4 0 017.44-4.295v-185.61c-15.439-6.738-24.684-22.75-22.8-39.49l-160.74-92.81z" transform="translate(-50.017 -515.51)"></path><path d="M256 512l221.7-128V128L256 256v256z" fill-opacity=".251"></path><path d="M256 512V256L34.3 128v256L256 512z" fill-opacity=".039"></path><path d="M34.298 128l221.7 128 221.7-128-221.7-128-221.7 128z" fill-opacity=".13"></path></svg><div data-v-64098914="" class="w-100"><div data-v-64098914="" class="flex items-center"><svg data-v-64098914="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="dn-ns mr1 mb1" style="height: 23px;"><defs><linearGradient id="a" y2="771.51" gradientUnits="userSpaceOnUse" x2="527.72" y1="771.51" x1="84.315"><stop stop-color="#4a9ea1" offset="0"></stop></linearGradient><linearGradient id="b" y2="771.48" gradientUnits="userSpaceOnUse" x2="512.36" y1="771.48" x1="99.675"><stop stop-color="#63d3d7" offset="0"></stop></linearGradient></defs><path d="M84.315 899.51l221.7 128 221.7-128v-256l-221.7-127.99-221.7 128z" fill="url(#a)" transform="translate(-50.017 -515.51)"></path><path fill="url(#b)" d="M283.13 546.35l-160.74 92.806a38.396 38.396 0 010 8.59l160.75 92.805c13.554-10 32.043-10 45.597 0l160.75-92.807a38.343 38.343 0 01-.001-8.588l-160.74-92.806c-13.554 10.001-32.044 10.001-45.599 0zm221.79 127.03L344 767.22c1.884 16.739-7.361 32.751-22.799 39.489l.18 184.58a38.386 38.386 0 017.439 4.294l160.75-92.805c-1.884-16.739 7.36-32.752 22.799-39.49v-185.61a38.397 38.397 0 01-7.44-4.294zm-397.81 1.032a38.387 38.387 0 01-7.438 4.295v185.61c15.438 6.738 24.683 22.75 22.799 39.489l160.74 92.806a38.4 38.4 0 017.44-4.295v-185.61c-15.439-6.738-24.684-22.75-22.8-39.49l-160.74-92.81z" transform="translate(-50.017 -515.51)"></path><path d="M256 512l221.7-128V128L256 256v256z" fill-opacity=".251"></path><path d="M256 512V256L34.3 128v256L256 512z" fill-opacity=".039"></path><path d="M34.298 128l221.7 128 221.7-128-221.7-128-221.7 128z" fill-opacity=".13"></path></svg><h2 data-v-64098914="" class="f6 mv0 fw2">IPFS</h2></div><div data-v-64098914="" class="flex justify-between flex-row items-start mb1"><div data-v-64098914="" class="flex flex-row items-start mt1"><h1 data-v-64098914="" class="ma0 f3 fw5"> Blogging on the Decentralized Web </h1><!----></div><svg data-v-64098914="" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 50 50" xml:space="preserve" alt="JavaScript code challenges" class="h2 ml3 type-icon has-tooltip" data-original-title="null"><path fill="currentColor" d="M15.1 36c-.4 0-.8-.1-1.1-.4l-9.5-9.5c-.3-.3-.4-.7-.4-1.1 0-.4.2-.8.4-1.1l9.6-9.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L7.6 25l8.4 8.4c.6.6.6 1.5 0 2.1-.2.4-.5.5-.9.5zM34.6 36c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l8.6-8.6-8.4-8.4c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l9.4 9.4c.6.6.6 1.5 0 2.1l-9.6 9.6c-.2.4-.6.5-1 .5zM22.9 38.3h-.2c-.8-.1-1.4-.9-1.2-1.7L25.3 13c.1-.8.9-1.4 1.7-1.2.8.1 1.4.9 1.2 1.7L24.4 37c-.2.8-.8 1.3-1.5 1.3z"></path></svg></div><p data-v-64098914="" class="f5 fw5 mt2 mb3 lh-copy charcoal-muted"><p>Cool content addresses don't change. Create a chain of links from one CID to another with the IPFS DAG API.</p> </p><!----><ul data-v-64098914="" class="lessons-list mv2 pa0 f5 br3"><li data-v-64098914=""><a data-v-62d9e11c="" data-v-64098914="" href="/blog/01" class="link db pa3 green bb b--white" data-cy="lesson-link-standard"><div data-v-62d9e11c="" class="flex items-start justify-between"><div data-v-62d9e11c="" class="flex flex-row"><div data-v-62d9e11c="" class="flex-ns items-center dn tl green ttu f6" style="min-width: 93px;">Lesson 1</div><div data-v-62d9e11c="" class="flex-ns items-center-ns pr3" style="flex-shrink: 0;"><svg data-v-62d9e11c="" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="not yet started" class="" style="height: 0.9rem;"><circle data-v-62d9e11c="" cx="8" cy="8" r="8" fill="#B4C3C4"></circle><path data-v-62d9e11c="" d="M10 8l.707.707a1 1 0 000-1.414L10 8zm-3.707 2.293a1 1 0 101.414 1.414l-1.414-1.414zm1.414-6a1 1 0 00-1.414 1.414l1.414-1.414zm1.586 3l-3 3 1.414 1.414 3-3-1.414-1.414zm-3-1.586l3 3 1.414-1.414-3-3-1.414 1.414z" fill="#fff"></path></svg></div><div data-v-62d9e11c="" class="navy fw5 mw6">Link an author to a blog post using its CID</div></div><svg data-v-62d9e11c="" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 50 50" xml:space="preserve" alt="JavaScript code challenge" class="link-icon ml3 has-tooltip" data-original-title="null"><path fill="currentColor" d="M15.1 36c-.4 0-.8-.1-1.1-.4l-9.5-9.5c-.3-.3-.4-.7-.4-1.1 0-.4.2-.8.4-1.1l9.6-9.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L7.6 25l8.4 8.4c.6.6.6 1.5 0 2.1-.2.4-.5.5-.9.5zM34.6 36c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l8.6-8.6-8.4-8.4c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l9.4 9.4c.6.6.6 1.5 0 2.1l-9.6 9.6c-.2.4-.6.5-1 .5zM22.9 38.3h-.2c-.8-.1-1.4-.9-1.2-1.7L25.3 13c.1-.8.9-1.4 1.7-1.2.8.1 1.4.9 1.2 1.7L24.4 37c-.2.8-.8 1.3-1.5 1.3z"></path></svg></div></a></li><li data-v-64098914=""><a data-v-62d9e11c="" data-v-64098914="" href="/blog/02" class="link db pa3 green bb b--white" data-cy="lesson-link-standard"><div data-v-62d9e11c="" class="flex items-start justify-between"><div data-v-62d9e11c="" class="flex flex-row"><div data-v-62d9e11c="" class="flex-ns items-center dn tl green ttu f6" style="min-width: 93px;">Lesson 2</div><div data-v-62d9e11c="" class="flex-ns items-center-ns pr3" style="flex-shrink: 0;"><svg data-v-62d9e11c="" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="not yet started" class="" style="height: 0.9rem;"><circle data-v-62d9e11c="" cx="8" cy="8" r="8" fill="#B4C3C4"></circle><path data-v-62d9e11c="" d="M10 8l.707.707a1 1 0 000-1.414L10 8zm-3.707 2.293a1 1 0 101.414 1.414l-1.414-1.414zm1.414-6a1 1 0 00-1.414 1.414l1.414-1.414zm1.586 3l-3 3 1.414 1.414 3-3-1.414-1.414zm-3-1.586l3 3 1.414-1.414-3-3-1.414 1.414z" fill="#fff"></path></svg></div><div data-v-62d9e11c="" class="navy fw5 mw6">Update posts with tags and watch their CIDs change</div></div><svg data-v-62d9e11c="" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 50 50" xml:space="preserve" alt="JavaScript code challenge" class="link-icon ml3 has-tooltip" data-original-title="null"><path fill="currentColor" d="M15.1 36c-.4 0-.8-.1-1.1-.4l-9.5-9.5c-.3-.3-.4-.7-.4-1.1 0-.4.2-.8.4-1.1l9.6-9.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L7.6 25l8.4 8.4c.6.6.6 1.5 0 2.1-.2.4-.5.5-.9.5zM34.6 36c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l8.6-8.6-8.4-8.4c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l9.4 9.4c.6.6.6 1.5 0 2.1l-9.6 9.6c-.2.4-.6.5-1 .5zM22.9 38.3h-.2c-.8-.1-1.4-.9-1.2-1.7L25.3 13c.1-.8.9-1.4 1.7-1.2.8.1 1.4.9 1.2 1.7L24.4 37c-.2.8-.8 1.3-1.5 1.3z"></path></svg></div></a></li><li data-v-64098914=""><a data-v-62d9e11c="" data-v-64098914="" href="/blog/03" class="link db pa3 green bb b--white" data-cy="lesson-link-standard"><div data-v-62d9e11c="" class="flex items-start justify-between"><div data-v-62d9e11c="" class="flex flex-row"><div data-v-62d9e11c="" class="flex-ns items-center dn tl green ttu f6" style="min-width: 93px;">Lesson 3</div><div data-v-62d9e11c="" class="flex-ns items-center-ns pr3" style="flex-shrink: 0;"><svg data-v-62d9e11c="" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="not yet started" class="" style="height: 0.9rem;"><circle data-v-62d9e11c="" cx="8" cy="8" r="8" fill="#B4C3C4"></circle><path data-v-62d9e11c="" d="M10 8l.707.707a1 1 0 000-1.414L10 8zm-3.707 2.293a1 1 0 101.414 1.414l-1.414-1.414zm1.414-6a1 1 0 00-1.414 1.414l1.414-1.414zm1.586 3l-3 3 1.414 1.414 3-3-1.414-1.414zm-3-1.586l3 3 1.414-1.414-3-3-1.414 1.414z" fill="#fff"></path></svg></div><div data-v-62d9e11c="" class="navy fw5 mw6">Build a tag cloud with arrays of links</div></div><svg data-v-62d9e11c="" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 50 50" xml:space="preserve" alt="JavaScript code challenge" class="link-icon ml3 has-tooltip" data-original-title="null"><path fill="currentColor" d="M15.1 36c-.4 0-.8-.1-1.1-.4l-9.5-9.5c-.3-.3-.4-.7-.4-1.1 0-.4.2-.8.4-1.1l9.6-9.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L7.6 25l8.4 8.4c.6.6.6 1.5 0 2.1-.2.4-.5.5-.9.5zM34.6 36c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l8.6-8.6-8.4-8.4c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l9.4 9.4c.6.6.6 1.5 0 2.1l-9.6 9.6c-.2.4-.6.5-1 .5zM22.9 38.3h-.2c-.8-.1-1.4-.9-1.2-1.7L25.3 13c.1-.8.9-1.4 1.7-1.2.8.1 1.4.9 1.2 1.7L24.4 37c-.2.8-.8 1.3-1.5 1.3z"></path></svg></div></a></li><li data-v-64098914=""><a data-v-62d9e11c="" data-v-64098914="" href="/blog/04" class="link db pa3 green bb b--white" data-cy="lesson-link-standard"><div data-v-62d9e11c="" class="flex items-start justify-between"><div data-v-62d9e11c="" class="flex flex-row"><div data-v-62d9e11c="" class="flex-ns items-center dn tl green ttu f6" style="min-width: 93px;">Lesson 4</div><div data-v-62d9e11c="" class="flex-ns items-center-ns pr3" style="flex-shrink: 0;"><svg data-v-62d9e11c="" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="not yet started" class="" style="height: 0.9rem;"><circle data-v-62d9e11c="" cx="8" cy="8" r="8" fill="#B4C3C4"></circle><path data-v-62d9e11c="" d="M10 8l.707.707a1 1 0 000-1.414L10 8zm-3.707 2.293a1 1 0 101.414 1.414l-1.414-1.414zm1.414-6a1 1 0 00-1.414 1.414l1.414-1.414zm1.586 3l-3 3 1.414 1.414 3-3-1.414-1.414zm-3-1.586l3 3 1.414-1.414-3-3-1.414 1.414z" fill="#fff"></path></svg></div><div data-v-62d9e11c="" class="navy fw5 mw6">Add a new blog post linked to an author and tags</div></div><svg data-v-62d9e11c="" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 50 50" xml:space="preserve" alt="JavaScript code challenge" class="link-icon ml3 has-tooltip" data-original-title="null"><path fill="currentColor" d="M15.1 36c-.4 0-.8-.1-1.1-.4l-9.5-9.5c-.3-.3-.4-.7-.4-1.1 0-.4.2-.8.4-1.1l9.6-9.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L7.6 25l8.4 8.4c.6.6.6 1.5 0 2.1-.2.4-.5.5-.9.5zM34.6 36c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l8.6-8.6-8.4-8.4c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l9.4 9.4c.6.6.6 1.5 0 2.1l-9.6 9.6c-.2.4-.6.5-1 .5zM22.9 38.3h-.2c-.8-.1-1.4-.9-1.2-1.7L25.3 13c.1-.8.9-1.4 1.7-1.2.8.1 1.4.9 1.2 1.7L24.4 37c-.2.8-.8 1.3-1.5 1.3z"></path></svg></div></a></li><li data-v-64098914=""><a data-v-62d9e11c="" data-v-64098914="" href="/blog/05" class="link db pa3 green bb b--white" data-cy="lesson-link-standard"><div data-v-62d9e11c="" class="flex items-start justify-between"><div data-v-62d9e11c="" class="flex flex-row"><div data-v-62d9e11c="" class="flex-ns items-center dn tl green ttu f6" style="min-width: 93px;">Lesson 5</div><div data-v-62d9e11c="" class="flex-ns items-center-ns pr3" style="flex-shrink: 0;"><svg data-v-62d9e11c="" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="not yet started" class="" style="height: 0.9rem;"><circle data-v-62d9e11c="" cx="8" cy="8" r="8" fill="#B4C3C4"></circle><path data-v-62d9e11c="" d="M10 8l.707.707a1 1 0 000-1.414L10 8zm-3.707 2.293a1 1 0 101.414 1.414l-1.414-1.414zm1.414-6a1 1 0 00-1.414 1.414l1.414-1.414zm1.586 3l-3 3 1.414 1.414 3-3-1.414-1.414zm-3-1.586l3 3 1.414-1.414-3-3-1.414 1.414z" fill="#fff"></path></svg></div><div data-v-62d9e11c="" class="navy fw5 mw6">Add a new tag linked to multiple blog posts</div></div><svg data-v-62d9e11c="" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 50 50" xml:space="preserve" alt="JavaScript code challenge" class="link-icon ml3 has-tooltip" data-original-title="null"><path fill="currentColor" d="M15.1 36c-.4 0-.8-.1-1.1-.4l-9.5-9.5c-.3-.3-.4-.7-.4-1.1 0-.4.2-.8.4-1.1l9.6-9.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L7.6 25l8.4 8.4c.6.6.6 1.5 0 2.1-.2.4-.5.5-.9.5zM34.6 36c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l8.6-8.6-8.4-8.4c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l9.4 9.4c.6.6.6 1.5 0 2.1l-9.6 9.6c-.2.4-.6.5-1 .5zM22.9 38.3h-.2c-.8-.1-1.4-.9-1.2-1.7L25.3 13c.1-.8.9-1.4 1.7-1.2.8.1 1.4.9 1.2 1.7L24.4 37c-.2.8-.8 1.3-1.5 1.3z"></path></svg></div></a></li><li data-v-64098914=""><a data-v-62d9e11c="" data-v-64098914="" href="/blog/06" class="link db pa3 green bb b--white" data-cy="lesson-link-standard"><div data-v-62d9e11c="" class="flex items-start justify-between"><div data-v-62d9e11c="" class="flex flex-row"><div data-v-62d9e11c="" class="flex-ns items-center dn tl green ttu f6" style="min-width: 93px;">Lesson 6</div><div data-v-62d9e11c="" class="flex-ns items-center-ns pr3" style="flex-shrink: 0;"><svg data-v-62d9e11c="" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="not yet started" class="" style="height: 0.9rem;"><circle data-v-62d9e11c="" cx="8" cy="8" r="8" fill="#B4C3C4"></circle><path data-v-62d9e11c="" d="M10 8l.707.707a1 1 0 000-1.414L10 8zm-3.707 2.293a1 1 0 101.414 1.414l-1.414-1.414zm1.414-6a1 1 0 00-1.414 1.414l1.414-1.414zm1.586 3l-3 3 1.414 1.414 3-3-1.414-1.414zm-3-1.586l3 3 1.414-1.414-3-3-1.414 1.414z" fill="#fff"></path></svg></div><div data-v-62d9e11c="" class="navy fw5 mw6">List posts chronologically with a chain of links</div></div><svg data-v-62d9e11c="" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 50 50" xml:space="preserve" alt="JavaScript code challenge" class="link-icon ml3 has-tooltip" data-original-title="null"><path fill="currentColor" d="M15.1 36c-.4 0-.8-.1-1.1-.4l-9.5-9.5c-.3-.3-.4-.7-.4-1.1 0-.4.2-.8.4-1.1l9.6-9.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L7.6 25l8.4 8.4c.6.6.6 1.5 0 2.1-.2.4-.5.5-.9.5zM34.6 36c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l8.6-8.6-8.4-8.4c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l9.4 9.4c.6.6.6 1.5 0 2.1l-9.6 9.6c-.2.4-.6.5-1 .5zM22.9 38.3h-.2c-.8-.1-1.4-.9-1.2-1.7L25.3 13c.1-.8.9-1.4 1.7-1.2.8.1 1.4.9 1.2 1.7L24.4 37c-.2.8-.8 1.3-1.5 1.3z"></path></svg></div></a></li><li data-v-64098914=""><a data-v-62d9e11c="" data-v-64098914="" href="/blog/07" class="link db pa3 green bb b--white" data-cy="lesson-link-standard"><div data-v-62d9e11c="" class="flex items-start justify-between"><div data-v-62d9e11c="" class="flex flex-row"><div data-v-62d9e11c="" class="flex-ns items-center dn tl green ttu f6" style="min-width: 93px;">Lesson 7</div><div data-v-62d9e11c="" class="flex-ns items-center-ns pr3" style="flex-shrink: 0;"><svg data-v-62d9e11c="" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="not yet started" class="" style="height: 0.9rem;"><circle data-v-62d9e11c="" cx="8" cy="8" r="8" fill="#B4C3C4"></circle><path data-v-62d9e11c="" d="M10 8l.707.707a1 1 0 000-1.414L10 8zm-3.707 2.293a1 1 0 101.414 1.414l-1.414-1.414zm1.414-6a1 1 0 00-1.414 1.414l1.414-1.414zm1.586 3l-3 3 1.414 1.414 3-3-1.414-1.414zm-3-1.586l3 3 1.414-1.414-3-3-1.414 1.414z" fill="#fff"></path></svg></div><div data-v-62d9e11c="" class="navy fw5 mw6">Traverse through all posts, starting with the most recent</div></div><svg data-v-62d9e11c="" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 50 50" xml:space="preserve" alt="JavaScript code challenge" class="link-icon ml3 has-tooltip" data-original-title="null"><path fill="currentColor" d="M15.1 36c-.4 0-.8-.1-1.1-.4l-9.5-9.5c-.3-.3-.4-.7-.4-1.1 0-.4.2-.8.4-1.1l9.6-9.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L7.6 25l8.4 8.4c.6.6.6 1.5 0 2.1-.2.4-.5.5-.9.5zM34.6 36c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l8.6-8.6-8.4-8.4c-.6-.6-.6-1.5 0-2.1.6-.6 1.5-.6 2.1 0l9.4 9.4c.6.6.6 1.5 0 2.1l-9.6 9.6c-.2.4-.6.5-1 .5zM22.9 38.3h-.2c-.8-.1-1.4-.9-1.2-1.7L25.3 13c.1-.8.9-1.4 1.7-1.2.8.1 1.4.9 1.2 1.7L24.4 37c-.2.8-.8 1.3-1.5 1.3z"></path></svg></div></a></li><a data-v-62d9e11c="" data-v-64098914="" href="/blog/resources" class="link db pa3 green bb b--white" data-cy="lesson-link-resources"><div data-v-62d9e11c="" class="flex items-start justify-between"><div data-v-62d9e11c="" class="flex flex-row"><div data-v-62d9e11c="" class="flex-ns items-center-ns dn tl green ttu f6" style="min-width: 93px;">Resources</div><div data-v-62d9e11c="" class="flex-ns items-center-ns pr3" style="flex-shrink: 0;"><svg data-v-62d9e11c="" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" alt="not yet started" class="" style="height: 0.9rem;"><circle data-v-62d9e11c="" cx="8" cy="8" r="8" fill="#B4C3C4"></circle><path data-v-62d9e11c="" d="M10 8l.707.707a1 1 0 000-1.414L10 8zm-3.707 2.293a1 1 0 101.414 1.414l-1.414-1.414zm1.414-6a1 1 0 00-1.414 1.414l1.414-1.414zm1.586 3l-3 3 1.414 1.414 3-3-1.414-1.414zm-3-1.586l3 3 1.414-1.414-3-3-1.414 1.414z" fill="#fff"></path></svg></div><div data-v-62d9e11c="" class="navy fw5 mw6">More to explore</div></div><svg data-v-62d9e11c="" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" alt="Resource links" class="link-icon ml3 has-tooltip" data-original-title="null"><path d="M39.27 24.52v11a3.78 3.78 0 01-3.79 3.79h-21a3.78 3.78 0 01-3.79-3.79v-21a3.78 3.78 0 013.79-3.79h11M30.68 10.73h7.88a.71.71 0 01.71.71V19M38.56 11.44l-9.41 9.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3px"></path></svg></div></a></ul></div></section><footer data-v-a0fc7dd0="" data-cy="footer-component" class="bg-navy white pt5-m pt5-l pt4 pb2 footer-margin"><div data-v-a0fc7dd0="" class="flex mw7 ph3 center flex-wrap"><div data-v-a0fc7dd0="" class="w-33-l w-100 mb0-l mb3"><a data-v-a0fc7dd0="" href="/" class="flex items-center link router-link-active"><svg data-v-a0fc7dd0="" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116 135" alt="ProtoSchool" class="w2 mr2 "><path data-v-a0fc7dd0="" d="M58.291 0L0 33.518v67.035l58 33.517 58-33.517V33.518L58.291 0zm53.92 44.593l-33.226-27.98 33.518 19.236v8.744h-.292zM13.407 63.246L25.94 28.563l8.16-1.457-20.693 36.14zm23.025-34.1h43.719l21.859 37.89-21.86 37.889H36.433l-21.86-37.89 21.86-37.89zM11.658 67.909l20.694 36.141L8.744 75.779l2.914-7.87zm65.578 39.93l-36.14 6.412-5.247-6.412h41.387zm25.94-37.015l-12.533 34.684-8.16 1.457 20.693-36.14zm1.749-4.663L83.94 30.02l23.608 28.27-2.623 7.87zm-65.87-39.93l36.141-6.412 5.246 6.412H39.055zm35.85-9.035l-44.01 7.87 37.014-13.408 6.995 5.538zM23.316 27.688L8.16 69.658l6.995-39.055 8.16-2.915zM6.704 77.528l28.562 34.392L4.955 86.271l1.749-8.743zm34.974 39.638l44.01-7.87-37.306 13.408-6.704-5.538zm51.588-10.784l15.156-41.97-6.995 39.055-8.16 2.915zm16.613-49.84l-28.854-34.1L111.337 47.8l-1.458 8.744zM65.869 9.036L24.774 23.9 58.29 4.663l7.578 4.372zM11.95 31.477L4.08 74.613V35.85l7.87-4.372zm-7.869 58l33.518 27.98L4.08 98.221v-8.744zm46.634 35.558l41.095-14.864-33.517 19.236-7.578-4.372zm53.919-22.442l7.578-43.136v38.764l-7.578 4.372z" fill="url(#paint0_linear)"></path><defs data-v-a0fc7dd0=""><linearGradient data-v-a0fc7dd0="" id="paint0_linear" x1=".136" y1="67.052" x2="116.42" y2="67.052" gradientUnits="userSpaceOnUse"><stop data-v-a0fc7dd0="" stop-color="#22F2AD"></stop><stop data-v-a0fc7dd0="" offset="1" stop-color="#AB21F4"></stop></linearGradient></defs></svg><div data-v-a0fc7dd0="" class="ma0 fw4 white f3"><span data-v-a0fc7dd0="" class="montserrat fw4">Proto</span><span data-v-a0fc7dd0="" class="montserrat fw2">School</span></div></a></div><div data-v-a0fc7dd0="" class="w-20-l w-25-m w-33 column "><span data-v-a0fc7dd0="" class="fw7">Courses</span><ul data-v-a0fc7dd0="" class="list pl0"><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/course/ipfs" class="link underline-hover white o-80 glow">IPFS </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/course/ipld" class="link underline-hover white o-80 glow">IPLD </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/course/filecoin" class="link underline-hover white o-80 glow">Filecoin </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/course/multiformats" class="link underline-hover white o-80 glow">Multiformats </a></li></ul></div><div data-v-a0fc7dd0="" class="w-20-l w-25-m w-33 column "><span data-v-a0fc7dd0="" class="fw7">Community</span><ul data-v-a0fc7dd0="" class="list pl0"><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://github.com/protoschool" class="link underline-hover white o-80 glow">GitHub </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://twitter.com/protoschool" class="link underline-hover white o-80 glow">Twitter </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/news" class="link underline-hover white o-80 glow">Newsletter </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/contribute" class="link underline-hover white o-80 glow">Contribute </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="" data-cy="footer-link-internal" href="/contribute#contact" class="link underline-hover white o-80 glow">Contact </a></li></ul></div><div data-v-a0fc7dd0="" class="w-20-l w-25-m w-33 column "><span data-v-a0fc7dd0="" class="fw7">Related Projects</span><ul data-v-a0fc7dd0="" class="list pl0"><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://ipfs.io" class="link underline-hover white o-80 glow">IPFS </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://filecoin.io" class="link underline-hover white o-80 glow">Filecoin </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://ipld.io" class="link underline-hover white o-80 glow">IPLD </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://libp2p.io" class="link underline-hover white o-80 glow">libp2p </a></li><li data-v-a0fc7dd0="" class="pv1"><a data-v-a0fc7dd0="" target="_blank" data-cy="footer-link-external" href="https://multiformats.io" class="link underline-hover white o-80 glow">Multiformats </a></li></ul></div></div><div data-v-a0fc7dd0="" class="flex justify-start mt4 mw7 center ph3 f7 o-70"><div data-v-a0fc7dd0="" class="w-33-l"></div><p data-v-a0fc7dd0="">漏 <a data-v-a0fc7dd0="" target="_blank" href="https://protocol.ai" class="link underline white o-80 glow">Protocol Labs</a> | Except as <a data-v-a0fc7dd0="" target="_blank" href="https://protocol.ai/legal/" class="link underline white o-80 glow">noted</a>, content licensed <a data-v-a0fc7dd0="" target="_blank" href="https://creativecommons.org/licenses/by/3.0/deed.en" class="link underline white o-80 glow">CC-BY 3.0</a>.</p></div></footer></div><div class="vue-portal-target"></div></div><script type="text/javascript" async="" src="https://countly.proto.school/sdk/web/countly.min.js"></script><script>// https://github.com/schalkneethling/dnt-helper/blob/master/js/dnt-helper.js function _dntEnabled (dnt, userAgent) { 'use strict' var dntStatus = dnt || navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack var ua = userAgent || navigator.userAgent var anomalousWinVersions = ['Windows NT 6.1', 'Windows NT 6.2', 'Windows NT 6.3'] var fxMatch = ua.match(/Firefox\/(\d+)/) var ieRegEx = /MSIE|Trident/i var isIE = ieRegEx.test(ua) var platform = ua.match(/Windows.+?(?=;)/g) if (isIE && typeof Array.prototype.indexOf !== 'function') { return false } else if (fxMatch && parseInt(fxMatch[1], 10) < 32) { dntStatus = 'Unspecified' } else if (isIE && platform && anomalousWinVersions.indexOf(platform.toString()) !== -1) { dntStatus = 'Unspecified' } else { dntStatus = { '0': 'Disabled', '1': 'Enabled' }[dntStatus] || 'Unspecified' } return dntStatus === 'Enabled' } // Some default pre init var Countly = Countly || {}; Countly.q = Countly.q || []; const COUNTLY_KEY_PROTOSCHOOL = 'c785b6eaa9c61617e1a7db83cb437e5f3dfe4280'; const COUNTLY_KEY_PROTOSCHOOL_TEST = '50f696b92cba4fe18cf60f37349f7c757625a871'; const COUNTLY_URL = 'https://countly.proto.school'; (function(){ if (!window.Cypress && !_dntEnabled()) { // Provide countly initialization parameters Countly.app_key = location.hostname === 'proto.school' ? COUNTLY_KEY_PROTOSCHOOL : COUNTLY_KEY_PROTOSCHOOL_TEST; Countly.url = COUNTLY_URL; // Choose what to track Countly.q.push(['track_sessions']); Countly.q.push(['track_pageview']); Countly.q.push(['track_clicks']); Countly.q.push(['track_scrolls']); Countly.q.push(['track_links']); // Load countly script asynchronously var cly = document.createElement('script'); cly.type = 'text/javascript'; cly.async = true; cly.src = 'https://countly.proto.school/sdk/web/countly.min.js'; cly.onload = function(){ Countly.init() Countly.getViewUrl = function () { return location.pathname + location.search + location.hash; } }; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s); } })();</script><script src="/js/chunk-vendors.15f6ce0a.js"></script><script src="/js/app.2bf6cc0e.js"></script></body></html>

Pages: 1 2 3 4 5 6 7 8 9 10