https://setka.design/_nuxt/Cu_BGidg.js

1import{u as re,s as T,_ as ce,a as de,b as ue,c as pe,d as me}from"./DEl0AWqY.js";import{_ as ve}from"./CcshyFAC.js";import{_ as ge}from"./Bns4Yckk.js";import{_ as _e}from"./6Sw3QniB.js";import{F as f,_ as he,r as a,G as we,o as fe,e as ye,y as u,C as o,A as e,D as q,E as v,H as g,I as _,J as k,K as O,z as p,L as $}from"./CETJL9Iw.js";import"./D25-w8FY.js";const ke=f("/images/web/waves.svg"),be=f("/images/web/eye_3d.svg"),xe=f("/video/web/superpower_compressed.mp4"),Me=f("/video/web/keikku_compressed.mp4"),Se=f("/video/web/romanelli_compressed.mp4"),ze=f("/video/web/fonts_compressed.mp4"),Ce=f("/images/web/eye.svg"),Le=[{title:"Не умею программировать",question:"Я ещё не умею программировать. Мне подойдёт курс?",answer:"Да, курс рассчитан на новичков. Мы обучаем программированию с нуля и начинаем с самых-самых основ."},{title:"Не умею верстать",question:"Я не знаком с HTML/CSS. Мне подойдёт курс?",answer:`Совсем без знаний HTML и CSS многое будет непонятно. Не нужно быть профессиональным верстальщиком, но нужно примерно понимать, какие бывают элементы, как создавать текст, блоки, ссылки, и знать основы CSS.
2Для курса будет достаточно прочитать две статьи: <a href='https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics'>Основы HTML</a> и <a href='https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics'>Основы CSS</a>, или пройти любой курс по основам вёрстки — например, <a href='https://intuition.news/ru/how-to-design-with-code'>от&nbsp;Интуиции</a>.`},{title:"Не умею дизайнить",question:"Я не умею дизайнить. Мне подойдёт ваш курс?",answer:`Большинство наших учеников — дизайнеры, но для вёрстки и программирования специфические дизайнерские навыки не нужны. Достаточно будет знать, что такое координаты X и Y и что такое RGB.
3(Если вы хоть раз открывали Фигму, Иллюстратор или Фотошоп, — вы знаете.)`},{title:"Программирование — это страшно",question:"Программирование — это страшно? Нужно знать математику? Нужно вводить непонятные команды в консоли и общаться на выдуманном разработческом языке?",answer:`Код — это ещё один инструмент дизайнера. Здесь как с любым инструментом: начать просто, а стать мастером — сложно.
4За последние тридцать лет порог входа в программирование сильно снизился — разобраться в Джаваскрипте не сложнее, чем разобраться в Фигме. А скоро умение кодить станет базовым навыком в работе с компьютером.
5Мы рассказываем самые-самые основы языка программирования, поэтому для курса хватит базовых знаний математики, на уровне 5–6 класса.`},{title:"Уже умею программировать",question:"Я уже умею программировать на JS или другом языке. Мне будет интересно на курсе?",answer:`Пожалуйста, посмотрите на примеры выше ↑. Если у вас в голове выстраивается целостный алгоритм, как такое запрограммировать, вам будет интереснее попробовать реализовать такое самостоятельно без подсказок.
6Мы не отговариваем прийти на курс — даже изначально скилловые участники говорят, что у нас классная атмосфера и они получили удовольствие от встреч и занятий.`},{title:"Устроиться на работу",question:"Можно будет пройти курс, а потом устроиться на работу программистом?",answer:"Пройдя курс, вы не станете фронтендером. Зато вы освоите новый инструмент, который полезен и в дизайне, и в разработке. Вы расширите свои компетенции, станете круче и сможете выполнять более сложные и дорогие заказы, а если в будущем будете заниматься фронтендом — знания JS станут хорошей базой."},{title:"Расписание",question:"Есть ли расписание курса? Можно учиться в своём темпе?",answer:"Все материалы доступны сразу после оплаты в виде набора телеграм-каналов. Доступ к каналам остаётся навсегда — можно будет пересмотреть записи через полгода или изучать материалы в своём темпе."},{title:"Время на домашку",question:"Сколько времени нужно выделить на выполнение домашних заданий?",answer:"Сколько угодно. Мы задаём домашние задания в конце каждого занятия, но не обязываем их делать. Как правило, они помогают закрепить материал занятия или узнать что-то дополнительное, но можно просто смотреть записи занятий или делать в качестве практики что-нибудь своё."},{title:"Способы оплаты",question:"Как можно оплатить курс?",answer:`Сейчас можно:
71. Оплатить с российской карты на сайте. Платёж обрабатывается ЮКассой.
82. Оплатить по реквизитам на счёт ИП.
9Мы работаем над тем, чтобы принимать иностранные карты и другие способы оплаты. Если у вас нет российской карты или вы хотите заплатить по СБП — <a href='https://t.me/adam_arutyunov'>пишите</a> в телеграм, мы что-нибудь придумаем.`},{title:"Провести в компании",question:"Можно ли купить курс по безналу для своих сотрудников?",answer:"Да, мы принимаем безналичную оплату от юрлиц, выставляем счёт, а после окончания курса составляем акт. Пишите в <a href='https://t.me/adam_arutyunov'>телеграм</a>."},{title:"Сертификат об обучении",question:"Что я получу после обучения? Будет какой-нибудь сертификат?",answer:"Мы не выдаём сертификатов об окончании курса, но если вам нужен какой-то доÐ

9ºÑƒÐ¼ÐµÐ½Ñ‚ для отчётности, мы можем вместе составить его и подписать электронной подписью ИП."},{title:"Ещё что-то",question:"Моего вопроса тут нет",answer:"Пишите в <a href='https://t.me/adam_arutyunov'>телеграм</a>."}],je=[{name:"Артем Река",description:"дизайнер",login:"ignoteit",content:`Я как-то сидел на сайте «<a href="https://intuition.news/ru/archive?filter=archive">Интуиции</a>» и тупо водил мышкой по картинкам, проговаривая про себя: «Ебать кайф». То же самое повторилось у «<a href="https://petrick.co/">Петрика</a>».
10А потом на курсе мне показали, как делать такие эффекты. Меня восхитило, насколько <span class='accent'>это просто и при этом волшебно</span>. До курса я не делал ничего серьёзнее калькулятора с возведением в степень, поэтому для меня всё, что выходило за рамки базового CSS, казалось магией.
11<em>Теперь я могу использовать магию и превращать её в фокусы.</em>
12Пропало ощущение, что мир волшебства — для избранных. Сорри за абстракции, реально так ощущается.
13Адам не зря читал рэп в школе — фристайл получается достойный. Мне очень нравится такой стиль преподавания. Спасибо за ответы на вопросы и классные проекты.
14Ване тоже респект за атмосферу и слежку за тем, чтобы Адам не вводил новые термины без объяснений. Привет из Школы Бюро, кстати.`},{name:"Софья Келемзина",link:"",description:"дизайнер в <a href='https://nikitakozin.com'>nikitakozin.com</a>",login:"wankershim",content:`<em>Вёрстка — ван лав, JS — целый новый мир.</em>
15У меня теперь есть новая игрушка! Вместо того, чтоб вечером залипнуть в какую-нибудь компьютерную игру, я сажусь ковырять вёрстку и JS :-) Так же увлекательно! И гайды есть: теперь я всегда знаю куда подсмотреть, если что-то не получается.`},{name:"Нателла",description:"дизайнер",login:"nanogiena",content:`Пока прошла половину курса.
16Поняла, что совсем ничего не знаю в программировании. Круто, что есть основы — первые уроки. Много всякого полезного, сложно что-то выделить. Прикольно, что всё легко применить. Ещё мне показались полезными уроки, где Адам разбирал разные штуки с сайта Додо-пиццы. Мне захотелось <span class='accent'>сделать что-то подобное для рабочих проектов</span>.
17Одна из сложностей — продержаться весь курс и пройти его, делать и смотреть регулярно, у меня вот не получилось.
18А ожидания от курса превзошли все мои... ожидания). Курс суперполезный. Ребята, вы классно всё рассказали. Мне понравилось, как взаимодействуют Адам и Иван на лекциях. Всё, что узнала, можно пробовать, делать, применять или просто поиграться.`},{name:"Ирина Коломина",description:"разработчик, консультант",login:"irinakolomina",content:`У меня случилась революция.
19Шла на курс попрактиковать JS через визуализацию, чтобы развить свои навыки и работать быстрее, Ð

19½Ð¾ по ходу обучения поняла, что новые знания позволяют перейти на совсем другой уровень.
20Моя работа заключается во внедрении готового продукта, но после обучения границы возможностей расширились, появились новые идеи, которые хочется <span class='accent'>вкладывать в свои решения, а не улучшать готовые продукты</span> в процессе внедрения.
21Самое полезное на курсе — живой код от Адама с вопросами и предложениями от Вани.
22<em>На занятиях не просто слушаешь теорию и практикуешь на домашках, а погружаешься в процесс разработки и понимаешь, как надо подходить к решениям.</em>
23Занятия на курсе шли по плотному расписанию. Мне такой формат очень понравился, так как была возможность погрузиться с головой, но, возможно, для других ребят не так. В начале мне не хватало уверенных знаний вёрстки, несмотря на то, что я предварительно прошлась по материалам. Дальше погружалась на ходу.
24Думаю, важно отметить, что к таким преподавателям, как Адам и Ваня, идешь на занятия, потому что интересно узнать новое, а не просто надо пройти курс. Программа курса нестандартная, и она очень правильная — <span class='accent'>идеальный баланс</span> теории, достаточной для того, чтобы взять и писать код, и при этом очень подробные разборы практических примеров, освоив которые, можно фантазировать и смело идти дальше.`},{name:"Рустам Мушраипов",link:"https://www.instagram.com/gekkonidd",description:"дизайнер",login:"gecko25101",content:`Узнал, что всё не так сложно, как казалось всегда. Пока что пробую играться с инструментом и прощупать возможности дальше. Готовлю обновление портфолио.
25<em>Самое полезное на курсе — принципы и живость. Это не туториалы, а именно обучение.</em>
26Круто, что рассказываете больше о принципах работы. Понравилось, что оставляете темы открытыми, типа «<span class='accent'>про все остальные элементы можно гуглить</span>» или «<span class='accent'>тут техническая заморочка, можно не углубляться</span>». Кажется, что так и должно быть в живой работе над проектом.
27
28Готовился, что местами будет муторно и скучно. Ожидания не оправдались. Ожидал, что месяц 3 раза в неделю — это много. Пролетело незаметно.`},{name:"Антонина Печерская",link:"https://www.behance.net/5d2fbb2bap",description:"начинающий UI/UX-дизайнер",login:"AntoninaPecherskaya",content:"Очень большие плюсы, которые мне помогали: объяснение HTML сразу в паре с CSS и уточняющие вопросы Ивана во время лекций. И само собой, разжёвывание даже самых простых вещей от Адама."}],Te={class:"page"},qe={id:"header",class:"compensated"},$e={class:"item-container"},He={class:"item film"},We={class:"item questions"},Be={id:"program"},Ie={class:"lessons"},Re={class:"lesson"},Ee={class:"lesson"},Ye={class:"lesson"},Ae={class:"lesson"},Ge={class:"lesson"},Je={class:"lesson"},Xe={id:"slider-sketch",class:"sketch"}

28,Pe=["src"],Fe={class:"lesson"},Ve={class:"line"},Ne=["innerHTML"],Ue={class:"lesson"},De={class:"lesson"},Qe={class:"sketch"},Ke={class:"lesson"},Oe={class:"sketch"},Ze={class:"text center grid primary rounded"},es={class:"grid-item"},ss={class:"promo-code-wrapper"},ts={key:0},ns={key:1},ls={id:"faq",class:"separator"},is={class:"dark"},os={class:"channel"},as={class:"column"},rs={class:"preview"},cs={class:"preview"},ds={class:"preview"},us={class:"preview"},ps={class:"preview"},ms={class:"column"},vs={class:"preview"},gs={class:"preview"},_s={class:"preview"},hs={class:"preview"},ws={class:"preview"},fs={class:"column"},ys={class:"preview"},ks={class:"preview"},bs={class:"preview"},xs={class:"preview"},Ms={class:"column"},Ss={class:"preview"},zs={class:"preview"},Cs={class:"preview"},Ls={class:"preview"},js={id:"teachers collapsed"},Ts={id:"reviews"},qs={id:"buy"},$s={key:0,class:"space-xs"},Hs={key:1},Ws="Фантастические сайты на Джаваскрипте",Bs=`Фантасти­Ñ‡ÐµÑÐºÐ¸Ðµ сайты
29на&nbsp;Джава&shy;скрипте`,Is="Делаем сайт круче с помощью кода",Rs={__name:"web",setup(Es){const x=a(!1),Z=()=>{x.value=!0,ym(94252873,"reachGoal","show_intuition_promo")};we(),re({title:Ws,description:Is,ogImage:{src:"/images/og/web_og.jpg",width:1200,height:728}});const H=a(null),W=a(null),B=a(30),ee=a(null),I=a(null),R=a(!1),M=a(0),S=a(null),se=a([{left:15,top:20,width:7},{left:10,top:80,width:7},{left:90,top:3,width:7},{left:70,top:75,width:17},{left:37,top:40,width:10},{left:30,top:5,width:20},{left:5,top:15,width:30},{left:35,top:70,width:27},{left:42,top:10,width:50}]),E=a(null),Y=a(null),A=a(null),G=a(null),z=a(null),b=a(null),J=a(null),X=a(null),P=a(null),F=a(null),V=a(null),N=a(null),C=a(null),L=a(null),y=a(null),U=a(null);function D(){const n=Y.value.getBoundingClientRect(),s={clientX:H.value??n.x+n.width*(6/7),clientY:W.value??window.innerHeight/2};j(s);const l=(window.scrollY+window.innerHeight-G.value.offsetTop)/window.innerHeight;z.value.classList.toggle("active",l>.1),z.value.classList.toggle("end",l>.4),b.value.classList.toggle("active",l>.4),b.value.classList.toggle("phase-1",l>.6),b.value.classList.toggle("phase-2",l>.8);const t=J.value;for(const r in t)r%2&&t[r].classList.toggle("rotated",l>.95);const c=X.value.getBoundingClientRect(),d=c.y+c.height/2-window.innerHeight/2,h=P.value;for(const r of h){const w=(r.offsetWidth+100)*d/900;r.style.transform=`translateY(${w}%)`}{const r=F.value.getBoundingClientRect(),w=(window.innerHeight-r.y-100)/window.innerHeight;let i=Math.floor(w*B.value);i=Math.max(i,0),i=Math.min(i,B.value-1),le(i)}{const r=L.value.getBoundingClientRect(),w=r.top<window.innerHeight&&r.top+r.height>0;R.value=w}}function j(n){const s=n.clientX,l=n.clientY;H.value=s,W.value=l;for(const t of A.value){const c=t.getBoundingClientRect(),m=c.left+c.width/2,d=c.top+c.height/2,h=Math.atan2(l-d,s-m)+Math.PI/2,r=t.querySelector(".dot");r.style.transform=`rotate(${h}rad)`}}function te(n){let s="";const l=[15,13,7,3];let t=-3;for(let c=0;c<n;c+=1){t>l.at(-1)&&(t=2,l.pop()),t+=3.5;let m="";for(let d=0;d<t;d+=1)c===0?m+="🌟":(d===0||d===t-1)&&Math.random()>.3?m+="❄️":Math.random()>.95?m+="🪩":d+1<t/2?m+="/":d>t/2?m+="\\":m+="|";s+=`${m}
30`}return s}function ne(){const n=Array(y.value.length).fill(0);function s(l){const t=n[l];y.value[l].innerText=t,y.value[l].style.background=`rgba(150, 150, 150, ${t/30})`}for(const l in y.value){const t=y.value[l];t.addEventListener("mouseenter",()=>{n[l]+=1,s(l)}),t.addEventListener("mousedown",()=>{n[l]=Math.max(1,n[l]*2),s(l)})}T(()=>{const l=U.value.getBoundingClientRect();if(l.bottom<0||l.top>window.innerHeight)return;const t=Math.floor(Math.random()*n.length);n[t]+=1,s(t)},500)}function le(n){N.value.style.marginLeft=`-${n*100}%`,V.value.style.transform=`translate(${n*.1}em, 0) rotate(${n*1-30}deg)`}function ie(n){const s=C.value.getBoundingClientRect(),l=n.clientX-s.left,t=n.clientY-s.top;Q(l/s.width,t/s.height)}function Q(n,s){const d=n*700+200,h=s*30+70;C.value.style.fontVariationSettings=`"wght" ${d}, "wdth" ${h}`}function K(){S.value=T(()=>{M.value+=.05,Q(Math.sin(M.value)/2+.5,Math.cos(M.value)/2+.5)},50)}function oe(){clearInterval(S.value)}function ae(){I.value=T(()=>{if(!R.value)return;const n=document.createElement("div");n.classList.add("snow"),n.style.fontSize=`${Math.random()*1+.5}em`,n.style.top=`calc(${Math.random()*100}% - 2em)`,n.style.left=`${Math.random()*100}%`,Math.random()>.7&&(n.innerText="?",n.style.background="none"),L.value.append(n),setTimeout(()=>{n.style.transform="translateY(2em)",n.style.opacity="0"},50),setTimeout(()=>n.remove(),5e3)},100)}return fe(()=>{ae(),K(),ne();const n=te(20);E.value.innerText=n,window.addEventListener("scroll",D),window.addEventListener("mousemove",j);const s=document.createElement("script");s.src="https://player.vimeo.com/api/player.js",document.head.appendChild(s)}),ye(()=>{window.removeEventListener("scroll",D),window.removeEventListener("mousemove",j),clearInterval(ee.value),clearInterval(I.value),

30clearInterval(S.value)}),(n,s)=>{const l=pe,t=ve,c=me,m=ce,d=de,h=ge,r=_e,w=ue;return p(),u("div",Te,[o(l,{contact:"adam_arutyunov"}),e("section",qe,[o(m,{suptitle:"Курс",name:Bs,"action-label":"Купить доступ","custom-info":["12 занятий"]},{default:q(()=>[s[3]||(s[3]=e("img",{class:"background",src:ke},null,-1)),e("div",$e,[s[1]||(s[1]=e("div",{class:"item eye"},[e("img",{src:be})],-1)),s[2]||(s[2]=e("div",{class:"item circle"},null,-1)),e("div",He,[o(t,{src:"/images/web/frames/film-18.png"})]),o(c,null,{default:q(()=>[e("div",We,[(p(),u(g,null,_(10,i=>e("div",{key:i,class:"cell rhombus",style:$({width:Math.random()*10+5+"%",top:Math.random()*100+"%",left:Math.random()*100+"%"})},null,4)),64)),(p(),u(g,null,_(10,i=>e("span",{key:`q-${i}`,class:"cell",style:$({top:Math.random()*100+"%",left:Math.random()*100+"%",fontSize:Math.random()*.5+1+"em"})},"?",4)),64))])]),_:1})])]),_:1,__:[3]})]),s[33]||(s[33]=e("section",{id:"description",class:"collapsed"},[e("div",{class:"text center"},[e("p",null," Есть сайты, про которые думаешь — «ничего себе, как они вообще такое сделали»? Такие сайты попадают на Эвввордс и выигрывают международные премии: ")]),e("div",null,[e("div",{id:"examples",class:"grid two nopad

30ding"},[e("div",{class:"grid-item"},[e("video",{class:"lazy rounded",src:xe,muted:"",autoplay:"",loop:"",playsinline:""}),e("div",{class:"caption"},[e("a",{href:"https://superpower.com"},"superpower.com")])]),e("div",{class:"grid-item"},[e("video",{class:"lazy rounded",src:Me,muted:"",autoplay:"",loop:"",playsinline:""}),e("div",{class:"caption"},[e("a",{href:"https://keikku.health/"},"keikku.health")])]),e("div",{class:"grid-item"},[e("video",{class:"lazy rounded",src:Se,muted:"",autoplay:"",loop:"",playsinline:""}),e("div",{class:"caption"},[e("a",{href:"https://mirkoromanelli.com/"},"mirkoromanelli.com")])]),e("div",{class:"grid-item"},[e("video",{class:"lazy rounded",src:ze,muted:"",autoplay:"",loop:"",playsinline:""}),e("div",{class:"caption"},[e("a",{href:"https://fontsinmovies.com"},"fontsinmovies.com")])])])]),e("div",{class:"text center"},[e("p",null,[v(" У этих сайтов много общего — они хорошо задизайнены и свёрстаны, в них используются красивые шрифты, соблюдаются принципы композиции и теории цвета. Но главное — они "),e("i",null,"динамичные и интерактивные"),v(", с ними можно взаимодействовать. Эти сайты похожи на фильм, а не на газету, — элементы на них двигаются и изменяются при движении мыши, при прокрутке или просто с течением времени. ")]),e("p",null," Такие сайты слишком сложно устроены, чтобы их можно было собрать в Тильде или Редимаге. Их даже не нарисуешь в Фигме — она нужна для проектирования отдельных статичных кадров, а не полноценного кино. "),e("em",null,"Такие сайты пишут на Джаваскрипте."),e("p",null," Их разрабатывают не так, как обычные сайты. Их невозможно сначала запечатать в макет, а потом отдать программистам на реализацию — нужно учесть слишком много деталей и нюансов взаимодействия. Такие сайты делают те, кто умеет и дизайнить эффекты, и сразу же их кодить — такие специалисты редкие, поэтому им достаются самые классные и прибыльные проекты. "),e("p",null," На курсе мы рассказываем основы программирования на Джаваскрипте и учим кодить самые простые и распространённые эффекты в вебе. Ещё мы показываем, что начать программировать несложно, и что разработка даёт веселье и фан. ")]),e("div",{class:"sspace"})],-1)),e("section",Be,[s[19]||(s[19]=e("div",{class:"text center"},[e("h1",null,"Содержание")],-1)),e("div",Ie,[e("div",Re,[e("div",{id:"tree",ref_key:"tree",ref:E,class:"sketch"},null,512),s[4]||(s[4]=e("div",{class:"description"},[e("h3",null," 1—3. "),e("p",null,[e("b",{class:"accent"},"Основы JavaScript")]),e("ul",null,[e("li",null,"Отладка и консоль. Типы данных и арифметические операции. Переменные."),e("li",null,"Ветвления и логические операции. Циклы. Делаем ёлочку."),e("li",null,"Массивы. Функции, параметры и аргументы.")]),e("div",{class:"caption"}," Ёлочка генерируется каждый раз при перезагрузке страницы ;-) ")],-1))]),e("div",Ee,[e("div",{id:"rectangles",ref_key:"rectanglesWrapper",ref:U,class:"sketch"},[(p(),u(g,null,_(30,i=>e("div",{key:i,ref_for:!0,ref_key:"rectangles",ref:y,class:"rectangle"}," 0 ")),64))],512),s[5]||(s[5]=e("div",{class:"description"},[e("h3",null," 4. "),e("p",null,[e("b",{class:"accent"},"Основы программирования сайта")]),e("ul",null,[e("li",null,"Управляем содержимым страницы из кода."),e("li",null,"Динамически задаём классы и стили."),e("li",null,"Обрабатываем действия пользователя.")])],-1))]),e("div",Ye,[e("div",{id:"eyes",ref_key:"eyesWrapper",ref:Y,class:"sketch"},[(p(),u(g,null,_(49,i=>e("div",{key:i,ref_for:!0,ref_key:"eyes",ref:A,class:"eye"},s[6]||(s[6]=[e("img",{src:Ce},null,-1),e("div",{class:"dot"},null,-1)]))),64))],512),s[7]||(s[7]=e("div",{class:"description"},[e("h3",null," 5. "),e("p",null,[e("b",{class:"accent"},"Отслеживание мыши")]),e("ul",null,[e("li",null,"Обрабатываем движение мыши или тачпада и отслеживаем позицию курсора."),e("li",null,"Пишем скрипт для следования объектов за мышью."),e("li",null,"Генерируем новые объекты за курсором."),e("li",null,"Эффект «просвечивания» при наведении мышки.")])],-1))]),e("div",Ae,[e("div",{id:"awake",ref_key:"awake",ref:G,class:"sketch"},[e("div",{ref_key:"awakeCentral",ref:z,class:"rect central"},null,512),e("div",{ref_key:"awakeGrid",ref:b,class:"awake-grid"},[(p(),u(g,null,_(9,i=>e("div",{key:i,ref_for:!0,ref_key:"awakeRect",ref:J,class:"rect"})),64))],512)],512),s[8]||(s[8]=e("div",{class:"description"},[e("h3",null," 6. "),e("p",null,[e("b",{class:"accent"},"Отслеживание скролла: часть 1")]),e("ul",null,[e("li",null,"Учимся отслеживать скролл и определять положение страницы."),e("li",null,"Прогресс-бар прочитывания сайта."),e("li",null,"Эффект «пробуждения»: меняем классы и стили при появлении элемента в зоне видимости.")])],-1))]),e("div",Ge,[e("div",{id:"parallax",ref_key:"parallax",ref:X,class:"sketch"},[(p(!0),u(g,null,_(k(se),i=>(p(),u("div",{key:i.left+"-"+i.top,ref_for:!0,ref_key:"circles",ref:P,class:"circle",style:$({left:`${i.left}%`,top:`${i.top}%`,width:`${i.width}%`})},null,4))),128))],512),s[9]||(s[9]=e("div",{class:"description"},[e("h3",null," 7. "),e("p",null,[e("b",{class:"accent"},"Отслеживание скролла: часть 2")]),e("ul",null,[e("li",null,"Определяем фазу проскролливания и создаём многоступеньчатую анимацию."),e("li",null,"Учимся делать плавные непрерывные анимации по скроллу."),e("li",null,"Эффект параллакса: добавляем на сайт иллюзию объёмности.")])],-1))]),e("div",Je,[e("div",Xe,[e("div",{id:"slider-wrapper",ref_key:"sliderWrapper",ref:F},[e("div",{id:"slider-container",ref_key:"sliderContainer",ref:V},[e("div",{ref_key:"slider",ref:N,class:"slider"},[(p(),u(g,null,_(30,i=>e("img",{key:i,loading:"lazy",src:`/images/web/frames/film-${i.toString().padStart(2,"0")}.png`},null,8,Pe)),64))],512)],512)],512)]),s[10]||(s[10]=e("div",{class:"description"},[e("h3",null," 8. "),e("p",null,[e("b",{class:"accent"},"Стоп-моушен")]),e("ul",null,[e("li",null,"Покадровая анимация из видео при скролле сайта."),e("li",null,"Покадровая анимация из набора картинок."),e("li",null,"Привязываем ход анимации к движению мыши, скроллу или ко времени.")]),e("div",{class:"caption"},[v(" Кассета взята из проекта «"),e("a",{href:"https://intuition.news/ru/park/truezerno"},"Настоящее зерно"),v("» ")])],-1))]),e("div",Fe,[e("div",{id:"text",ref_key:"text",ref:C,class:"sketch",onMousemove:s[0]||(s[0]=i=>ie(i)),onMouseleave:K,onMouseenter:oe},[e("div",Ve,[(p(),u(g,null,_(10,i=>e("span",{key:i,class:O({odd:i%2}),innerHTML:Array(100).fill("Сетка").join(" · ")},null,10,Ne)),64))])],544),s[11]||(s[11]=e("div",{class:"description"},[e("h3",null," 9. "),e("p",null,[e("b",{class:"accent"},"Типографика")]),e("ul",null,[e("li",null,"Управляем параметрами текста из кода. Меняем кегль и вариативные настройки."),e("li",null,"Пишем инструмент для предпросмотра вариативных шрифтов и их настройки с помощью ползунков."),e("li",null,"Создаём паттерн из текста.")])],-1))]),e("div",Ue,[e("div",{id:"snow",ref_key:"snow",ref:L,class:"sketch"},null,512),s[12]||(s[12]=e("div",{class:"description"},[e("h3",null," 10. "),e("p",null,[e("b",{class:"accent"},"Инфраструктура")]),e("ul",null,[e("li",null,"Учимся вставлять свой код в Тильду и Редимаг."),e("li",null," Основы Git. Как удобнее работать над проектом самому и в команде и иметь полный контроль над его версиями. ")])],-1))]),e("div",De,[e

30("div",Qe,[o(t,{class:"background",src:"/images/web/timeline.png"})]),s[13]||(s[13]=e("div",{class:"description"},[e("h3",null," 11. "),e("p",null,[e("b",{class:"accent"},"Датавиз-практика")]),e("ul",null,[e("li",null,"Делаем интерактивный таймлайн, который автоматически строится из данных с помощью JS."),e("li",null,"Отвечаем на вопросы.")])],-1))]),e("div",Ke,[e("div",Oe,[o(t,{class:"background",src:"/images/web/menu.png"})]),s[14]||(s[14]=e("div",{class:"description"},[e("h3",null," 12. "),e("p",null,[e("b",{class:"accent"},"Веб-практика")]),e("ul",null,[e("li",null,"Делаем навигационное меню для сайта, которое автоматически строится из заголовков."),e("li",null,"Отвечаем на вопросы."),e("li",null,"Рассказываем, чему учиться дальше.")])],-1))])]),s[20]||(s[20]=e("div",{class:"text center"},[e("p",null," Мы учим фундаментально и последовательно, поэтому после прохождения курса появится понимание, как сделать не только примеры выше, а в принципе всё, что пришло в голову. "),e("div",{class:"space-s"}),e("h4",null,"А ещё"),e("p",null,"Иметь базовые навыки кодинга полезно, даже если не собираешься программировать:"),e("ul",null,[e("li",null," Начинаешь понимать, как примерно устроено внутри всё, чем пользуешься каждый день: сайты, веб-приложения и информационные системы. "),e("li",null," Это помогает делать макеты, к которым у команды разработки нет вопросов. Начинаешь разговаривать с программистами на одном языке и понимать, что пишется за полчаса, а что за месяц. Это особенно ценно для продуктовых дизайнеров — опыт программирования помогает верстать более логически корректные и целостные макеты. "),e("li",null," Это хорошая инвестиция в будущее. Зная основы Джаваскрипта, будет значительно легче выучить любой другой язык программирования. А ещё будет легче переквалифицироваться во фронтендера — курс станет хорошей базой для любого фреймворка. "),e("li",null,"Это весело и иногда похоже на магию.")])],-1)),s[21]||(s[21]=e("div",{class:"space-xs"},null,-1)),e("div",Ze,[e("div",es,[s[15]||(s[15]=e("h2",null,"Подготовка",-1)),s[16]||(s[16]=e("div",{class:"space-s"},null,-1)),s[17]||(s[17]=e("span",null,[e("p",null," Чтобы на курсе всё было понятно, нужно знать основы HTML и CSS. "),e("p",null," Не требуется быть профессиональным верстальщиком, но нужно примерно представлять, какие бывают элементы, как они работают и как их стилизовать. Более сложные штуки мы объясняем дополнительно. "),e("p",null,[v(" Чтобы подготовиться, можно пройти курс «"),e("a",{href:"https://intuition.team/ru/how-to-design-with-code"},"Зачем и как дизайнить кодом"),v("» от Интуиции — мы даём на него промокод на скидку в 2000 ₽. ")])],-1)),s[18]||(s[18]=e("div",{class:"space-s"},null,-1)),e("div",ss,[e("div",{class:O(["button",{disabled:k(x)}]),onClick:Z},[k(x)?(p(),u("span",ns,"сетка")):(p(),u("span",ts,"Показать промокод"))],2)])])])]),e("section",ls,[s[22]||(s[22]=e("div",{class:"space-xs"},null,-1)),s[23]||(s[23]=e("div",{class:"text center"},[e("h1",null,"FAQ")],-1)),o(d,{questions:k(Le)},null,8,["questions"]),s[24]||(s[24]=e("div",{class:"space-xs"},null,-1))]),s[34]||(s[34]=e("section",{id:"format"},[e("div",{class:"text center"},[e("h1",null,"Формат"),e("div",{class:"space-xs"}),e("p",null," Курс предзаписан — он состоит из двенадцати видеолекций по полтора часа и представлен в виде в виде двенадцати телеграм-каналов. В каждом из каналов лежит запись занятия, домашнее задание, дополнительные материалы, приёмы, тесты и опросы. "),v(" Доступ к каналам остаётся навсегда. ")])],-1)),e("section",is,[e("div",os,[e("div",as,[e("div",rs,[o(t,{loading:"lazy",src:"/images/web/telegram/2.jpg"})]),e("div",cs,[o(t,{loading:"lazy",src:"/images/web/telegram/19.jpg"})]),e("div",ds,[o(t,{loading:"lazy",src:"/images/web/telegram/21.jpg"})]),e("div",us,[o(t,{loading:"lazy",src:"/images/web/telegram/13.jpg"})]),e("div",ps,[o(t,{loading:"lazy",src:"/images/web/telegram/10.jpg"})])]),e("div",ms,[e("div",vs,[o(t,{loading:"lazy",src:"/images/web/telegram/22.jpg"})]),e("div",gs,[o(t,{loading:"lazy",src:"/images/web/telegram/3.jpg"})]),e("div",_s,[o(t,{loading:"lazy",src:"/images/web/telegram/9.jpg"})]),e("div",hs,[o(t,{loading:"lazy",src:"/images/web/telegram/18.jpg"})]),e("div",ws,[o(t,{loading:"lazy",src:"/images/web/telegram/16.jpg"})])]),e("div",fs,[e("div",ys,[o(t,{loading:"lazy",src:"/images/web/telegram/15.jpg"})]),e("div",ks,[o(t,{loading:"lazy",src:"/images/web/telegram/4.jpg"})]),e("div",bs,[o(t,{loading:"lazy",src:"/images/web/telegram/14.jpg"})]),e("div",xs,[o(t,{loading:"lazy",src:"/images/web/telegram/6.jpg"})])]),e("div",Ms,[e("div",Ss,[o(t,{loading:"lazy",src:"/images/web/telegram/17.jpg"})]),e("div",zs,[o(t,{loading:"lazy",src:"/images/web/telegram/20.jpg"})]),e("div",Cs,[o(t,{loading:"lazy",src:"/images/web/telegram/8.jpg"})]),e("div",Ls,[o(t,{loading:"lazy",src:"/images/web/telegram/7.jpg"})])])])]),e("section",js,[s[25]||(s[25]=e("div",{class:"text center"},[e("p",null," Ещё участникам выдаётся доступ в закрытый чат учащихся и выпускников курса. В нём можно спросить совета, поделиться прогрессом, скинуть классный референс, да и вообще можно всё. ")],-1)),s[26]||(s[26]=e("div",{class:"text center"},[e("h1",null,"Преподаватели"),e("div",{class:"space-xs"})],-1)),o(h,{order:1}),s[27]||(s[27]=e("div",{class:"text center"},[e("p",null," На курсе Адам рассказывает материал, ведёт теорию и практику, а Иван помогает, задаёт вопросы и разбавляет занятия своим бархатным басом. "),e("p",null,"Выглядит это примерно так:")],-1)),s[28]||(s[28]=e("div",{class:"grid"},[e("div",{style:{padding:"62.5% 0 0 0",position:"relative"}}

30,[e("iframe",{src:"https://player.vimeo.com/video/1042130811?badge=0&autopause=0&player_id=0&app_id=58479&quality=720p",frameborder:"0",allow:"autoplay; fullscreen; picture-in-picture; clipboard-write",style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"},title:"Тизер курса по веб-разработке"})])],-1))]),e("section",Ts,[s[29]||(s[29]=e("div",{class:"text center"},[e("h1",null,"Отзывы")],-1)),o(r,{reviews:k(je)},null,8,["reviews"])]),e("section",qs,[s[32]||(s[32]=e("div",null,null,-1)),o(w,{"product-slug":"web","analytics-goal":"Buy_web","delivery-text":"После оплаты появится ссылка в Телеграм с доступом к курсу."},{summary:q(({product:i})=>[s[31]||(s[31]=e("h2",null,"Купить курс «Фантастические сайты на Джаваскрипте»",-1)),i.salesActive?(p(),u("div",$s)):(p(),u("span",Hs,s[30]||(s[30]=[v("Набор закрыт. Подпишитесь на наш "),e("a",{href:"https://t.me/setka_design"},"телеграм-канал",-1),v(", чтобы не пропустить начало следующего набора.")])))]),_:1})])])}}},Vs=he(Rs,[["__scopeId","data-v-03c1fab7"]]);export{Vs as default};