Прилагодлив дизајн: проекти
За да ги усовршите техниките во веб развојот или во било која друга област, најдобриот пристап е преку учество во практични активности. Тоа овозможува не само да се научат концептите, туку и веднаш да се применат. Овој курс е составен од два проекти интересни проекти со чија помош ќе ви бидат прикажанани најдобрите практики за фронт-енд развој во прилагодлив дизајн.
Проект 1. Прилагодлив дизајн на веб сајт
Откријте како да употребите прилагодлив веб дизајн за да го направите сајтот почитлив и поефикасен на секаков уред. Во овој курс ќе работиме со техники на комбинирање HTML и CSS во веб распоред, кој може да се прилагодува на различни големини на екран и ориентации. Во курсот ќе работиме на еден веб сајт од почеток до крај, од прилагодување на HTML страницата и елементите содржатели, па до нанесување стил на поставените елементи за мали, средни и големи екрани. Патем, ќе ви покажеме како да го смените местото на лентата за навигација, со цел истата да има подобар приказ на мобилни уреди, како да креирате анимирани транзиции, и како да претворите неподредени листи во интерактивни менија со поддршка на настани на допир. Ќе научите и како да употребувате CSS псеудо-елементи, и да прилагодувате распореди за печатење, за да заштедите на мастило и хартија.
Проект 2: Креирајте прилагодлива HTML е-пошта
Дизајнирањето на HTML е-пошти е предизвик, особено ако ги земете во предвид ограничените можности на десктоп и веб читачите за е-пошта, во комбинација со малите екрани на мобилните уреди. Внесете прилагодливи HTML е-пошти. Дозволете ни да ви покажеме како да дизајнирате елегантна е-порака, која ќе се прилагодува на различни големини на екран, и визуелно точно ќе се обработува во повеќе од 30 клиенти за пошта, како Gmail, Yahoo, AOL, и повеќе верзии на Outlook, како и на Android, iOS, и Windows телефоните. Научете како да додадете опции од типот на графики во позадина, заоблени агли, и сенки, кои нема да ја прекинуваат е-пораката кога нема да може да се прикажат. Потоа креирајте копчиња за повик на акција, додадете анимации и нанесете стил со CSS. Дополнително, разгледајте ги алатките и услугите кои ќе ви помогнат да ги тестирате вашите кампањи. Почнете сега, и дознајте што може да направите со HTML е-поштата.
Кому му е наменет овој курс?
Овој курс им е наменет на:
- лица кои сакаат да станат веб дизајнери и веб девелопери
- дизајнери кои сакаат да ги прошират својот сет вештини
- студенти
Предзнаења
За следење на овој курс потребно е поседување знаења содржани во курсевите:
- HTML: основи
- CSS: основи
- JavaScript: основи
- Основи на прилагодлив дизајн
- Применет прилагодлив дизајн
Практичен дел
Во рамки на практичниот дел од курсот, студентот ќе добие задачи кои ќе треба да ги изработи и достави до својот ментор.
Сертификат
По успешното завршување на курсот, учесникот добива сертификат за успешно завршен курс. Под успешно завршување се подразбира навремено доставување на најмалку 80% од предвидените задачи.
Формат на курсот
Курсот се изведува на далечина, со користење на методологијата менторирано учење на далечина.
Вклучено во цената
- 30 дена пристап до материјалите за учење
- 4 x 15 мин. менторски сесии (1-на-1, online)
- сертификат за успешно завршен курс
Сподели
Биди другар, сподели со пријателите
- 15 Sections
- 81 Lessons
- 10
- ПРОЕКТ 1: ПРИЛАГОДЛИВ ДИЗАЈН НА ВЕБ САЈТ1
- 1. Подготвување HTML содржина и структура9
- 2.1Поставување на проектот
- 2.2Стратегија за нашиот распоред
- 2.3Креирање главни HTML елементи содржатели
- 2.4Додавање содржина во заглавје
- 2.5Додавање содржина во главна секција
- 2.6Додавање содржина во секција за атмосфера
- 2.7Додавање содржина во секција Како да
- 2.8Додавање навигација
- 2.9Додавање содржина во подножје
- 2. Креирање стил и распоред со CSS13
- 3.1Импортирање Google фонт
- 3.2Дефинирање основни стилови за текст
- 3.3Додавање стил на елементи за заглавје и страница
- 3.4Додавање стил на елементите на лого и херој-елемент
- 3.5Креирање стил на копчиња
- 3.6Прилагодување редица со три колони
- 3.7Додавање графики во главната секција
- 3.8Креирање елементи со ефект float употребувајќи псеудо-класи
- 3.9Додавање стил на секција за атмосфера
- 3.10Додавање стил на aside елементите од секцијата Како да
- 3.11Додавање стил на елементот за блок цитат во секцијата Како да
- 3.12Додавање содржина со псеудо елементи
- 3.13Додавање стил на подножјето
- 3. Креирање систем за мени со CSS5
- 4. Прилагодувања на распоредот за големи и средни екрани3
- 5. Прилагодувања за мали екрани6
- 6. Прилагодувања за најмали екрани3
- 7. Прилагодување на распоредот и содржината за печатење10
- 8.1Стратегија за печатење
- 8.2Поврзување на CSS датотека за печатење
- 8.3Прилагодување на основните стилови
- 8.4Прилагодување на заглавјето
- 8.5Прикажување URL адреси при печатење
- 8.6Главна секција
- 8.7Секција за атмосфера
- 8.8Менување на тагот за слика со CSS
- 8.9Додавање стил во подножјето
- 8.10Прилагодување на преминување на следна страница со CSS
- ПРОЕКТ 2: ПРИЛАГОДЛИВА HTML Е-ПОШТА1
- 1. Креирање графики2
- 2. Креирање HTML е-пошта7
- 11.1Креирање основна структура на распоред
- 11.2Додавање стил на редица од табела за лого
- 11.3Додавање стил на редица од табела за наслов
- 11.4Додавање стил на редица од табела за банер и содржина
- 11.5Додавање стил на редица од табела за промоции
- 11.6Додавање стил на редица од табела за облачиња
- 11.7Додавање стил на редица од табела за подножјето
- 3. Креирање копчиња со HTML и CSS2
- 4. Додавање CSS на е-поштата6
- 5. Напредни работи6
- 6. Валидизација и тестирање7
Денис Арслановски, front-end веб девелопер. Експерт за HTML, CSS, jQuery и прилагодлив (responsive) дизајн. Изработува веб страници за клиенти претежно за европскиот и австралискиот пазар.

Courses you might be interested in
- 46 Lessons
- 22 Lessons
- 27 Lessons

Повеќегодишна информатичка образовна програма во која децата преку проекти постепено развиваат широки и функционални дигитални компетенции.
© 2026 Еверест — Детска ИТ Академија / Марјановик Едукација