Учебна програма: ( Покажи под-темите Скрий под-темите )

1. Въведение1

   1. Представяне на курса и съпътстващите онлайн ресурси.
   2. Да подредим бъркотията от понятия: WebDesigner vs. Front-end vs. Back-end vs. Full-stack developer? UI/UX?
   3. HTML, CSS, JavaScript - какво можем да правим с тях? Live demo.

2. Настройка на средата.3

   1. Структура на директориите.
   2. Инструменти за създаване на Уеб страници.
   3. Запознаване с VS Code.
   4. Платформи за споделяне на код. За какво и как ще използваме codepen.io?
   5. Качване на файлове в GitHub: HowTo

3. Основи на HTML2

   1. Структура на една Уеб страница.
   2. Какво е HTML и HTML5?
   3. Синтаксисът е в основата на всичко.
   4. Doctype, head и body секции.
   5. Елементи в head секцията. Мета информация за документа.
   6. Коментарите, макар и безгласни, могат да бъдат важни.

4. HTML елементи за структуриране на текст.2

   1. Работа с параграфи и заглавия.
   2. Елементи: b, strong, i, em, mark, small, del, ins, sub, sup, code, pre, kbd.
   3. Създаване на Уеб документ с разнообразно текстово съдържание.

5. Хипервръзки (линкове) и изображения.4

   1. Вмъкване на изображения, разположени върху локален сървър или WWW.
   2. Създаване на хипервръзки (линкове) към WWW ресурси или ресурси, разположени на сървъра.
   3. Създаване на връзка към секция (bookmark) в текущия документ.

6. Iframes2

   1. Как да "вградим" съдържание от други страници в нашия документ?
   2. По-голям контрол и безопасност на съдържанието чрез атрибута sandbox.
   3. Вмъкване на карта в страницата (GoogleMaps и bgmaps).
   4. Вмъкване на Пен от codepen.io

7. Списъци в HTML3

   1. Създаване на подредени списъци.
   2. Създаване на неподредени списъци.
   3. Създаване на вложени списъци? Лесно, ако следваме едно единствено правило.

8. Таблици в HTML1

   1. Кога и за какво да използваме таблици?
   2. Как да създадем таблица в HTML.
   3. Сливане на клетки (cell span) по редове и колони.
   4. Някои забележки относно оформлението на таблиците и HTML5.

9. Клиент-Сървър комуникация. Основи на HTTP. Защо WWW ≠ Internet?4

   1. Как работи Интернет? Клиент-Сървър комуникация. Основни понятия в HTTP (request/response messages, query methods).
   2. Какво е domain, hosting, IP адрес, DNS?
   3. Преглед на развитието на WWW и технологиите зад нея.

10. HTML5 форми4

    1. Елементи за въвеждане на информация от потребителя.
    2. Нови възможности в HTML5 за въвеждане и валидиране на email, дата, телефон и пр.
    3. HTML5 ColorPicker (без JavaScript).
    4. HTML5 files upload.

11. Въведение в CSS2

    1. Какво е CSS и как допълва HTML.
    2. Inline, internal или external CSS?
    3. Структура на CSS правилата.
    4. Наследяване на CSS правила. Какво е "каскадното" в CSS ?

12. Стилизиране на елементите в страницата чрез CSS34

    1. Запознаване с основните CSS свойства за оформление на текст, шрифт, цвят, фон и рамка.

13. Селектори в CSS3 - Част14

    1. Селектори за елементи.
    2. Селектори за class и id.
    3. Селектори за атрибути.
    4. CSS комбинатори.

14. Да влезем в кутията или the CSS box model.4

    1. HTML елементът разгледан като кутийка.
    2. Основни CSS свойства за оразмеряване на "кутийките".
    3. Блокови и поредови елементи.
    4. Replaced elements? <img>, <object>, <video>...
    5. Групиране на елементи в блок с елемента div.
    6. Групиране на елементи в ред с елемента span.

15. Стойности за цветове и мерни единици в CSS34

    1. Стойности за цветове (чрез име, RGB,HSL)
    2. Абсолютни и релативни мерни единици.

16. Да излезем от кутията или как браузърът подрежда HTML елементите.6

    1. Накратко за Visual Formatting Model.
    2. Свойството display и новите модели в CSS3.
    3. Позициониране на елементите - свойства position и float.
    4. Пренареждане на елементите чрез свойството z-index.

17. Селектори в CSS3 - Част22

    1. Селектори за псевдо-класове.
    2. Селектори за псевдо-елементи.
    3. Създаване на падащи менюта (вертикални и хоризонтални) от списък чрез CSS.

18. Въведение в JavaScript2

    1. Защо се създава?
    2. Какво е JavaScript? А EcmaScript?
    3. Защо не бива да бъркаме JavaScript с Java.
    4. Какво можем да правим с JavaScript?
    5. Как и кога браузърът изпълнява JavaScript.
    6. Къде и как да включим нашия скрипт?

19. JavaScript - основни синтактични елементи.7

    1. Структура на програмата.
    2. Променливи (Variables)
    3. Прости типове данни (Primitive types)
    4. Коментари и добри практики за тяхното използване.
    5. Оператори.
    6. Условни изрази.
    7. Цикли.

20. Javascript: масиви и операции с тях.2

    1. Дефиниране на масив.
    2. Достъп до елементите
    3. Масива като обект
    4. Основни операции с едномерни и двумерни масиви

21. JavaScript: функции.6

    1. Какво са функциите в JS? За какво се използват?
    2. Дефиниция на функция (function declaration vs function expression)
    3. Извикване на функция. Предаване на аргументи. Връщане на резултат
    4. Function Scope. Shadowing.
    5. Анонимни функции. IIFE.
    6. Hoisting.

22. JavaScript - обекти6

    1. Какво представлява обектът?
    2. Създаване на единичен обект чрез литерал.
    3. Достъп до свойствата на обект (dot и square brackets notation).
    4. Създаване на множество еднотипни обекти чрез Factory и Constructor функция

23. Стандартни вградени обекти в EcmaScript2

    1. Primitive object wrappers
    2. обекта Math
    3. обекта Date
    4. обекта Object
    5. Игра: преди колко дни съм роден?

24. HTML DOM, BOM - или как JavaScript взаимодейства с браузера.4

    1. Накратко за BOM и DOM.
    2. Достъпване на HTML елементите чрез JavaScript и DOM.
    3. Промяна на съдържанието на елементите.
    4. Създаване и изтриване на HTML елементи.
    5. Игра: познай числото!

25. JavaScript и HTML DOM Events4

    1. За какво и как се използват event handlers.
    2. Mouse events.
    3. Keyboard Events
    4. Frame/Object Events
    5. Form Events
    6. Drag Events

26. Как да променяме CSS свойствата на елементите чрез JavaScript1

    1. HTML DOM Style Object
    2. element.style property
    3. window.getComputedStyle()
    4. Промяна на стил чрез задаване на предефиниран клас

27. Tаймери в JavaScript 1

    1. Синхронен и асинхронен JavaScript - кратко въведение.
    2. setTimeout()
    3. setInterval()
    4. clearTimeout()
    5. често срещани проблеми и методи за тяхното решаване

28. Въведение в jQuery1

    1. DOM манипулации с jQuery
    2. Предимства и недостатъци на jQuery. Кога да го използваме.

29. Основи на TypeScript2

    1. Какво е TypeScript и защо да го използваме?
    2. Инсталиране и базови настройки. Компилиране на TypeScript до JavaScript.
    3. Интегриране на TypeScript в VSCode.
    4. Основни типове в TypeScript

30. Въведение в Bootsrap (optional topic)0

31. Запознаване с PixiJS (optional topic)0

    1. Какво е PixiJS и кога да го използваме?
    2. Създаване на Pixi Application и Stage обект
    3. Рисуване на основни форми.
    4. Анимация с pixijs - демо.

32. Класически компоненти при създаване на Уеб Страница/примери от реални проекти2

    1. Layout на страницата. Подравняване на компонентите.
    2. Менюта и навигация:
       1. Smooth Scrolling (със или без анимация)
       2. Change Header opacity on scroll
    3. Галерия със снимки и слайд ефекти:
       1. Image Overlay Effects
       2. Slider With Interval And Clearing
    4. Simple Accordion effect with Pure JS and CSS animation

33. Вместо заключение0

    1. Responsive Web design.
    2. Тенденции в развитието на Front-End технологиите. Как да продължим към advanced ниво.

34. Appendix0