Choose your next design practice.

Every course is written for a real beginner: clear language, focused exercises, and a useful result by the final lesson.

View fallows

Loading the studio shelf…

Studio margin note

Beginners learn best when pages are deliberately left open for mistakes. A course that celebrates revision is the one that stays with you.

`; document.getElementById('site-header').innerHTML = headerHTML; document.getElementById('site-footer').innerHTML = footerHTML; const state = {items:[],page:1,size:6}; const favKey = "rcs-favorites", cartKey = "rcs-cart"; const $ = id => document.getElementById(id); const esc = s => String(s).replace(/[&<>"']/g, m => ({"&":"&","<":"<",">":">",'"':""","'":"'"}[m])); function favorites(){return JSON.parse(localStorage.getItem(favKey)||"[]")} function cart(){return JSON.parse(localStorage.getItem(cartKey)||"[]")} function saveCart(c){localStorage.setItem(cartKey,JSON.stringify(c))} function applyTheme(t){document.documentElement.style.setProperty('--accent',t==='dark'?'#513326':'#6B4632')} function initTheme(){const saved=localStorage.getItem('rcs-theme')||'light';applyTheme(saved);document.documentElement.dataset.theme=saved} function toggleTheme(){const cur=document.documentElement.dataset.theme||'light';const next=cur==='light'?'dark':'light';localStorage.setItem('rcs-theme',next);applyTheme(next);document.documentElement.dataset.theme=next} function renderFilters(items){ const cats = [...new Set(items.map(i=>i.category))];const lvls=[...new Set(items.map(i=>i.level))]; const catSel=$("category");catSel.innerHTML=''+cats.map(c=>``).join(''); const lvlSel=$("level");lvlSel.innerHTML=''+lvls.map(l=>``).join(''); } function render(){ let q=$("search").value.toLowerCase(),c=$("category").value,l=$("level").value; let a=state.items.filter(x=>(!q||`${x.title} ${x.summary} ${x.category}`.toLowerCase().includes(q))&&(!c||x.category===c)&&(!l||x.level===l)); let pages=Math.max(1,Math.ceil(a.length/state.size));state.page=Math.min(state.page,pages); let visible=a.slice((state.page-1)*state.size,state.page*state.size); $("status").textContent=`${a.length} course${a.length===1?"":"s"} found`; $("grid").innerHTML=visible.map(x=>`

${esc(x.category)} · ${esc(x.level)}

${esc(x.title)}

${esc(x.summary)}

$${x.price.toFixed(2)} · ${esc(x.duration)}

`).join(""); $("pagination").innerHTML=Array.from({length:pages},(_,i)=>`${i+1}`).join(""); } function detail(id){let x=state.items.find(i=>i.id===id);$("detail-content").innerHTML=`

${esc(x.category)}

${esc(x.title)}

${esc(x.description)}

${x.lessons} lessons · ${esc(x.duration)} · $${x.price.toFixed(2)}

${esc(o)}

`;$("details").showModal()} document.addEventListener("click",e=>{ let p=e.target.dataset.page;if(p){e.preventDefault();state.page=+p;render()} if(e.target.dataset.detail)detail(e.target.dataset.detail); if(e.target.dataset.fav){let a=favorites(),id=e.target.dataset.fav;a=a.includes(id)?a.filter(x=>x!==id):[...a,id];localStorage.setItem(favKey,JSON.stringify(a));render()} if(e.target.dataset.cart){let c=cart(),id=e.target.dataset.cart,r=c.find(x=>x.id===id);r?r.quantity++:c.push({id,quantity:1});saveCart(c);e.target.textContent="Added";} if(e.target.id==="theme-toggle")toggleTheme(); if(e.target.dataset.open){const m=document.createElement('dialog');m.innerHTML=`

${e.target.dataset.open==='login'?'Sign in':'Create account'}

`;document.body.appendChild(m);m.showModal();m.onclose=()=>m.remove()} }); $("search").oninput=render;$("category").onchange=render;$("level").onchange=render; $("close-detail").onclick=()=>$("details").close(); fetch("./catalog.json").then(r=>r.json()).then(d=>{ state.items=d;renderFilters(d);render();$("status").textContent=`${d.length} courses available`; }).catch(()=>{$("status").textContent="Could not load catalog."}); initTheme(); const cb=document.getElementById("cookie-banner");if(!localStorage.getItem("rcs-cookie-consent")){cb.classList.remove("hidden")} document.getElementById("cookie-close").onclick=()=>{localStorage.setItem("rcs-cookie-consent","accepted");cb.classList.add("hidden")} const mt=$("menu-toggle"),nav=$("main-nav");mt.onclick=()=>nav.classList.toggle("hidden");