Курс: HTML5 проекти

272

За да ги усовршите техниките во веб развојот или во било која друга област, најдобриот пристап е преку учество во практични активности. Тоа овозможува не само да се научат концептите, туку и веднаш да се применат.

Усовршете ги претходно стекнатите знаења од курсевите за HTML, CSS и JavaScript и станете фронт-енд развивач работејќи на практични проекти. Курсот е составен од 6 интересни проекти со чија помош ќе ви бидат прикажани најдобрите практики за фронт-енд развој.

Проект 1: Напредна To-Do листа

Во овој проект ќе ви покажеме како да креирате основна to-do листа со полиња кои може да се уредуваат, па така корисниците ќе може да внесуваат свои задачи и потоа, откако ќе ги завршат да ги бришат, и понапредна верзија со технологии како интрефејс со повлечи и спушти технологијата кој дозволува лесно и брзо сортирање. Проектот покрива веб бази со податоци, уредување на содржина во прелистувачот и CSS транзиции и трансформации.

Теми:

Правење на содржина која може да се уредува
Зачувување на уредувањата
Нагодување на основните датотеки за вашата апликација
Отстранување на ставки од листата
Овозможување на сортирање со повлечи и спушти технологија

Проект 2: Видео Bumper-и

Употребете ги HTML5, CSS3 и неодамнешните JavaScript API технологии за да обезбедите подобрени можности за брендирање на клиентите со сопствени видео исечоци. Во овој краток проект ќе ви покажеме како да додадете воведни и завршни видео парчиња со видео таг и JavaScript API. Ќе ви демонстрираме како може да ги додадете овие елементи динамички без дополнителни уредувања и ќе ви дадеме инструкции за решавање на проблемите во конечната верзија.

Проект 3: Интерактивни графикони

Зачинете ја презентацијата на податоци со интерактивни и визуелни графикони. Во овој проект ќе ви покажеме како да изградите интерактивни графикони со ленти кои динамички ќе се исцртуваат со HTML5 Canvas технологијата. Елементите на графиконот ќе им дозволат на посетителите да забележуваат различни сценарија со подоатоци преку повлекување на лентите. Ќе ви демонстрираме како да ги зачувувате податоците од ден во ден. Проектот е одличен вовед во HTML5 елементите за форми и технологиите канвас, повлечи и спушти и локално чување.

Теми:

Креирање на HTML
Иницијализирање на сцената
Додавање легенда и ознаки
Цртање на лентите во графиконот
Додавање сидра за интерактивност
Поврзување на повратните информации
Зачувување на напредокот на корисникот

Проект 4: Персонализирани реклами

Замислете да може да соберете основни информации за посетителите на вашиот веб сајт (како пол, возраст и локација) и според нив да ги менувате рекламите кои ќе се прикажуваат на страницата. Во овој проект од серијата за HTML5 ќе ви покажеме како да ги комбинирате напредните HTML5 елементи за форми за да ги соберете личните информации на вашите клиенти и да креирате подобро корисничко искуство. Ќе ви демонстрираме како да ја искористите технологијата за локално чување за да ги зачувате и обновите прилагодените параметри, и како да работите со канвас елемент за да креирате персонализирана реклама во од. HTML5 технологиите кои се употребени во овој проект вклучуваат HTML5 канвас и HTML5 classList таг кој ги менува класите на страницата без JavaScript.

Проект 5: Креирање анкети

Анкетите се одличен начин да добиете мислење од вашата публика, но често знаат да бидат досадни и да бараат многу време. Во овој проект ќе ви покажеме како да ги заинтригирате посетителите со уникатна 3D анкета која наликува на игра. Ќе ве водиме низ секој од чекорите во процесот, употребувајќи HTML5 елементи за форма и CSS транзиции. Ќе ви објасниме како да ги зачувате и прикажете резултатите од анкетата со технологијата за локално чување. HTML5 технологиите кои се вклучени во овој проект вклучуваат HTML5 елемнти за форма, HTML5 локално чување, CSS3 3D транзиции и напредна JavaScript API.

Теми:

Разгледување на HTML распоредот на страницата
Креирање на формата
Креирање на првите прашања
Поставување на CSS транзициите
Додавање навигација
Зачувување и прикажување на прашањата со технологијата за локално чување

Проект 6: Интегрирање Google Store Locator

Во овој концизен проект ќе ви демонстрираме како да ги искористите придобивките од Google Store Locator библиотеката. Ќе ви покажеме како да ја вклучите обемната апликација за лоцирање на продавници во вашите проекти, со пристап до правци на движење, сопствени маркери и опција за филтрирање по карактеристики. HTML5 технологиите кои се употребуваат во овој проект вклучуваат HTML5 геолокација и напредна JavaScript API.

Кому му е наменет овој курс?

Овој курс им е наменет на:

лица кои сакаат да станат веб дизајнери и веб девелопери
дизајнери кои сакаат да ги прошират својот сет вештини
студенти

Предзнаења

За следење на овој курс потребно е поседување знаења содржани во курсевите:

HTML: основи
CSS: основи
JavaScript: основи

Практичен дел

Во рамки на практичниот дел од курсот, студентот ќе добие задачи кои ќе треба да ги изработи и достави до својот ментор.

Сертификат

По успешното завршување на курсот, учесникот добива сертификат за успешно завршен курс. Под успешно завршување се подразбира навремено доставување на најмалку 80% од предвидените задачи.

Формат на курсот

Курсот се изведува на далечина, со користење на методологијата менторирано учење на далечина.

Цена

7.669 ден (пакет Премиум)

Вклучено во цената

30 дена пристап до материјалите за учење
4 x 15 мин. менторски сесии (1-на-1, online)
сертификат за успешно завршен курс

Ментори

Петар Трајковски, .NET програмер со 12 годишно искуство. Има работено на сајтови со милионска посетеност (PlayBoy, Dr.Oz) а предизвик му е оптимизација на .NET и SQL код. Бил предавач на Академијата на ИТ Александрија како инструктор за веб дизајн. Во моментот работи за клиенти од Америка и Канада на развој на апликации во област на Research Management.

Денис Арслановски, front-end веб девелопер. Експерт за HTML, CSS, jQuery и прилагодлив (responsive) дизајн. Изработува веб страници за клиенти претежно за европскиот и австралискиот пазар.