Workshop: превръщане на Figma дизайн в
интерактивен уеб сайт

В този интензивен workshop ще научиш как да превърнеш подаден във Figma UI дизайн в напълно функционален, адаптивен уеб сайт.

Разделен в две части – теоретична, в която ще научиш какво представляват HTML, CSS и JavaScript, и практическа, по време на която ще превърнем подаден Figma дизайн в напълно функционален и адаптивен уеб сайт.

ЗАПАЗИ СВОЕТО МЯСТО

02.06.2024г. | 10:30 часа

онлайн в Zoom

4 астрономически часа

Как ще протече този workshop?

Workshop-ът ще се проведе в рамките на 4 астрономически часа, разделени на две части – теоритична (1 час) и практическа (3 часа).

Теоретична част (1 час):

По време на теоретичната част ще разгледаме и обсъдим основните познания и езици, които един начинаещ Front-end разработчик трябва да притежава, за да стартира своята кариера, а именно:

Ще обсъдим и преминем през следните теми:

какво означава семантичен HTML
какво е accessibility или достъпност
какво представлява CSS
какво са LESS и SCSS
какво означава един уеб сайт да е responsive
какво означава един уеб сайт да е адаптивен
какво е JavaScript и за какво се използва в един уеб сайт
какво е Figma, за какво се използва и как да извличаме ресурси и информация за елементи от файл

Практическа част (3 часа):

По време на практическата част ще превърнем дизайн във Figma в адаптивен и интерактивен уеб сайт със страници, меню и различни състояния при различни резолюции и устройства.

Ще преминем през следните процеси:

инсталиране на редактор на код
създаване папка на проекта и нейното организиране
създаване на HTML markup за всички секции и елементи в уеб сайта
стилизиране на всички елементи
задаване на правила за различни резолюции (media queries)
създаване на хамбургер меню
създаване на слайдер
оптимизиране на изображения
тестване скорост на зареждане и достъпност

ЗАПАЗИ СВОЕТО МЯСТО

За кого е подходящ?

Front-end разработчици

Обучението е моделирано по начин, който да е подходящ за начинаещи front-end разработчици, които искат да „сглобят пъзела“ и да видят как се използват споменатите по-горе технологии в един реален проект.

Back-end разработчици

Back-end разработчиците също има какво да си вземат от това обучение, а именно – да видят процесите, които колегите им от front-end преминават, да се запознаят с основни парадигми на споменатите технологии, да разширят познанията и уменията си.

UX/UI дизайнери

Обучението е изключително полезно за UX/UI дизайнери, които искат да придобият ясна представа какво се случва с дизайна им, след като попадне в ръцете на front-end разработчика – как този дизайн се превежда в уеб и какви са процесите, през които се минава.

За мен

Петя Петкова – Full-stack Developer

За себе си ще ти кажа, че стартирах кариерата си през вече далечната 2013г. като Front-end разработчик. През годините освен, че развивах уменията си в тази насока, създадох блогът {dev} blondie;, преподавах в SoftAcademy, основах малко студио за бутикови уеб решения, и се присъединих към най-креативния уеб екип в България.

Множество награди стоят зад гърба ми, но това, което намирам за най-голямо удовлетворение е споделянето на знания и насочване на младши разработчици в кариерния им път.

Ето и малко статистически данни:

Full-stack Developer в eDesign Interactive – най-успешната българска уеб агенция
Преподавател в курс „Front-end уеб разработване“ в SoftAcademy
Лектор на WordCamp Europe 2023
Лектор на WordCamp Sofia 2023
Основател на Accelerate Design Studio

Често задавани въпроси

Къде и как ще се проведе обучението?

Обучението се провежда онлайн, в Zoom. Датата е 02.06.2024г., 10:30 часа. Продължителността на обучението е 4.5 астрономически часа (с включени 30мин. почивки). След потвърдено плащане ще получиш имейл с линк към Zoom стаята, както и допълнителна информация.