HTML5 проекти
За да ги усовршите техниките во веб развојот или во било која друга област, најдобриот пристап е преку учество во практични активности. Тоа овозможува не само да се научат концептите, туку и веднаш да се применат.
Усовршете ги претходно стекнатите знаења од курсевите за HTML, CSS и JavaScript и станете фронт-енд развивач работејќи на практични проекти. Курсот е составен од 6 интересни проекти со чија помош ќе ви бидат прикажани најдобрите практики за фронт-енд развој.
Проект 1: Напредна To-Do листа
Во овој проект ќе ви покажеме како да креирате основна to-do листа со полиња кои може да се уредуваат, па така корисниците ќе може да внесуваат свои задачи и потоа, откако ќе ги завршат да ги бришат, и понапредна верзија со технологии како интрефејс со повлечи и спушти технологијата кој дозволува лесно и брзо сортирање. Проектот покрива веб бази со податоци, уредување на содржина во прелистувачот и CSS транзиции и трансформации.
Проект 2: Видео Bumper-и
Употребете ги HTML5, CSS3 и неодамнешните JavaScript API технологии за да обезбедите подобрени можности за брендирање на клиентите со сопствени видео исечоци. Во овој краток проект ќе ви покажеме како да додадете воведни и завршни видео парчиња со видео таг и JavaScript API. Ќе ви демонстрираме како може да ги додадете овие елементи динамички без дополнителни уредувања и ќе ви дадеме инструкции за решавање на проблемите во конечната верзија.
Проект 3: Интерактивни графикони
Зачинете ја презентацијата на податоци со интерактивни и визуелни графикони. Во овој проект ќе ви покажеме како да изградите интерактивни графикони со ленти кои динамички ќе се исцртуваат со HTML5 Canvas технологијата. Елементите на графиконот ќе им дозволат на посетителите да забележуваат различни сценарија со подоатоци преку повлекување на лентите. Ќе ви демонстрираме како да ги зачувувате податоците од ден во ден. Проектот е одличен вовед во HTML5 елементите за форми и технологиите канвас, повлечи и спушти и локално чување.
Проект 4: Персонализирани реклами
Замислете да може да соберете основни информации за посетителите на вашиот веб сајт (како пол, возраст и локација) и според нив да ги менувате рекламите кои ќе се прикажуваат на страницата. Во овој проект од серијата за HTML5 ќе ви покажеме како да ги комбинирате напредните HTML5 елементи за форми за да ги соберете личните информации на вашите клиенти и да креирате подобро корисничко искуство. Ќе ви демонстрираме како да ја искористите технологијата за локално чување за да ги зачувате и обновите прилагодените параметри, и како да работите со канвас елемент за да креирате персонализирана реклама во од. HTML5 технологиите кои се употребени во овој проект вклучуваат HTML5 канвас и HTML5 classList таг кој ги менува класите на страницата без JavaScript.
Проект 5: Креирање анкети
Анкетите се одличен начин да добиете мислење од вашата публика, но често знаат да бидат досадни и да бараат многу време. Во овој проект ќе ви покажеме како да ги заинтригирате посетителите со уникатна 3D анкета која наликува на игра. Ќе ве водиме низ секој од чекорите во процесот, употребувајќи HTML5 елементи за форма и CSS транзиции. Ќе ви објасниме како да ги зачувате и прикажете резултатите од анкетата со технологијата за локално чување. HTML5 технологиите кои се вклучени во овој проект вклучуваат HTML5 елемнти за форма, HTML5 локално чување, CSS3 3D транзиции и напредна JavaScript API.
Проект 6: Интегрирање Google Store Locator
Во овој концизен проект ќе ви демонстрираме како да ги искористите придобивките од Google Store Locator библиотеката. Ќе ви покажеме како да ја вклучите обемната апликација за лоцирање на продавници во вашите проекти, со пристап до правци на движење, сопствени маркери и опција за филтрирање по карактеристики. HTML5 технологиите кои се употребуваат во овој проект вклучуваат HTML5 геолокација и напредна JavaScript API.
Кому му е наменет овој курс?
Овој курс им е наменет на:
- лица кои сакаат да станат веб дизајнери и веб девелопери
- дизајнери кои сакаат да ги прошират својот сет вештини
- студенти
Предзнаења
За следење на овој курс потребно е поседување знаења содржани во курсевите:
Практичен дел
Во рамки на практичниот дел од курсот, студентот ќе добие задачи кои ќе треба да ги изработи и достави до својот ментор.
Сертификат
По успешното завршување на курсот, учесникот добива сертификат за успешно завршен курс. Под успешно завршување се подразбира навремено доставување на најмалку 80% од предвидените задачи.
Формат на курсот
Курсот се изведува на далечина, со користење на методологијата менторирано учење на далечина.
Вклучено во цената
- 30 дена пристап до материјалите за учење
- 4 x 15 мин. менторски сесии (1-на-1, online)
- сертификат за успешно завршен курс
Сподели
Биди другар, сподели со пријателите
- 6 Sections
- 65 Lessons
- 10 Weeks
- 1. Напредна To-Do листа10
- 1.1Преглед на проектот
- 1.2Што ќе креираме?
- 1.3Избрани HTML5, CSS3, и JavaScript технологии
- 1.4Правење содржина која може да се уредува
- 1.5Зачувување уредувања
- 1.6Поставување HTML
- 1.7Додавање нови елементи кои може да се повлекуваат
- 1.8Работа со уредувања
- 1.9Отстранување ставки од листа
- 1.10Зачувување и обновување листа
- 2. Видео Bumper-и8
- 3. Интерактивни графикони13
- 3.1Преглед на проектот
- 3.2Што ќе креираме?
- 3.3Избрани HTML5, CSS3, и JavaScript технологии
- 3.4Креирање HTML датотека
- 3.5Иницијализирање сцена
- 3.6Вчитување слика за позадина
- 3.7Додавање област со легенда и ознаки
- 3.8Цртање ленти
- 3.9Креирање групи со ленти
- 3.10Додавање сидра за интерактивност
- 3.11Поврзување повратни информации
- 3.12Зачувување напредок на корисник
- 3.13Зачувување графикон
- 4. Персонализирани реклами10
- 4.1Преглед на проектот
- 4.2Што ќе креираме?
- 4.3Избрани HTML5, CSS3, и JavaScript технологии
- 4.4Поставување канвас
- 4.5Употребување CSS3 елементи за форма со тип range
- 4.6Градење транзиција на картичка која се превртува
- 4.7Зачувување со локално чување
- 4.8Вметнување HTML елемент за место за рекламата
- 4.9Употреба на JavaScript
- 4.10Динамичко цртање реклами со канвас
- 5. Креирање анкети14
- 5.1Преглед на проектот
- 5.2Што ќе креираме?
- 5.3Избрани HTML5, CSS3, и JavaScript технологии
- 5.4HTML распоред на страница
- 5.5Креирање форма
- 5.6Креирање прашања
- 5.7Вметнување лизгач
- 5.8Поставување CSS транзиции
- 5.9Градење коцка
- 5.10Завршување CSS
- 5.11Додавање навигација
- 5.12Зачувување со технологија за локално чување
- 5.13Враќање повеќе вредности за избор
- 5.14Прикажување резултати од анкетата со технологија за локално чување
- 6. Интегрирање Google локатор на продавници10
- 6.1Преглед на проектот
- 6.2Што ќе креираме?
- 6.3Избрани HTML5, CSS3, и JavaScript технологии
- 6.4Интегрирање Google Store locator библиотека
- 6.5Воспоставување датотеки со податоци со вредности одделени со запирка
- 6.6Работа со извор на податоци
- 6.7Прикажување локации во панелот за информации
- 6.8Интегрирање мапа и панел со CSS
- 6.9Филтрирање по карактеристики на продавница
- 6.10Прилагодување маркери
Денис Арслановски, front-end веб девелопер. Експерт за HTML, CSS, jQuery и прилагодлив (responsive) дизајн. Изработува веб страници за клиенти претежно за европскиот и австралискиот пазар.

Courses you might be interested in
- 43 Lessons
- 94 Lessons
- 111 Lessons
- 51 Lessons

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