Курс по Front-end development

Цел на курса по Front-end development:

Запознаване на групата с изключително популярните и може би най-използваните днес, езици за създаване на уеб страници и приложения. Придобиване на една солидна професионална база от познания и умения  за изграждане и поддръжка на динамични уеб страници. Създаване на условия за по-добра реализация  в IT сектора, чрез по-лесно стартиране на професионално развитие, като Front-End Developer.

В края на обучението си курсистите, ще могат да създават динамични и лесно използваеми уеб страници с добро графично оформление. Техните страници, ще бъдат правилно структурирани за по-лесна оптимизация от търсачките.

За кого е предназначен курсът:

Курсът е подходящ, за абсолютно начинаещи, също така и за тези, които имат известни познания и желаят да ги доразвият на професионално ниво.

Мащаб на групата:

Обучението се провежда в малка ( бутикова ) група, ограничена до 8-м участника, с цел много повече индивидуално внимание на лектора към курсистите по време на практическите упражнения.

Запис на занятията:

Всички онлайн занятия се записват, след което се изпращат до курсистите. Така всеки, който е изпуснал дадена лекция, ще може да навакса гледайки записа.

Издаване на Сертификат:

В края на обучението се държи тест или се предава практически проект, според преценка на преподавателя. Всеки курсист, който успешно се справи с поставената финална задача, може да заяви на office@progressbg.net, да му бъде издаден Сертификат. Таксата за издаване е 30 лева.

Учебна програма на курса по “Front-end development”:

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

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

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

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

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

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

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

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

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

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

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

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

13.Селектори в CSS3 – Част1
1. Селектори за елементи.
2. Селектори за class и id.
3. Селектори за атрибути.
4. CSS комбинатори.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

*По време на обучението, курсистите ще имат възможността да разработят самостоятелно цялостния front-end на уеб сайт (по зададена или избрана от тях тематика) като курсов проект. Акцентът отново ще бъде поставен върху качествения код, съобразен с актуалните стандарти, съвместимостта (cross browser compatibility) и добрите SEO практики.

График на курса по Front-end development с HTML,CSS,JavaScript,UI/UX

Следващите начални дати са:

14-октомври 2023г. (съботно-неделна форма на обучение от 10:30 до 13:30 часа, което са 4 учебни часа с включени 20 минути почивка). Занятията ще се провеждат всяка събота и неделя. Край на курса: 13-ти януари 2024г.

16-ти октомври 2023г. (вечерна  форма на обучение от 19:00 до 22:00 часа, което са 4 учебни часа с 20 минути почивка). Часовете ще се провеждат всеки понеделник и сряда. Край на курса: 10-ти януари 2024г.

Обучението се провежда в група до 8-м курсисти, като всеки от тях може да избира между:

• присъствена форма –  на място в учебна зала на пл. Славейков.
• или да се включи онлайн от вкъщи през нашия Zoom business account.

Цена на курса по Front-end development:

Цена: 790 лв.

Има възможност за разсрочено заплащане на курса на две вноски. Първата вноска от 400 лева се внася при записването, а втората от 390 лева  в началото на втория месец от обучението.

Продължаване на обучението:

Завършилите курсисти от това ниво за начинаещи ползват 15% отстъпка при записване на надграждащия курс по Front-end development – Advanced.

Възможност за стартиране на работа:

Компютърно образователен център “Progress” има партньорски отношения с компании от IT сектора ( част от тях може да разгледате – тук ). Курсистите, които са показали отлични резултати по време на съответния курс, ще бъдат препоръчвани, като кандидати за работа на тези компании.

Видео представяне на курса по “Front-end development”

Реализиран курист (интервю)

Запиши се сега!

Допълнителни условия:

• Записването се извършва единствено по банков път, моля погледнете номера на банковата сметка по-долу.

Номер на банкова сметка:
IBAN:BG49CECB979010E2257300
BIC:CECBBGSF
Получател: Прогрес 2013 ЕООД
Основание за плащане: наименованието на записания курс и началната дата на обучението
(например – Курс по Java от 15.10.22г. )

Изпратете ни платежното нареждане ( снимано/сканирано ) на email: office@progressbg.net или на Viber. След това ще получите допълнителна информация от екипа.

Преподаватели

Ива Емилова Попова

Компютърните технологии и софтуерното инженерство съпътстват целия живот на Ива Попова. Сблъсква се с тях още в началото на 90-те години, когато завършва средното си образование в единствената за България тогава специализирана професионална гимназия в областта на Компютърните Системи ‐ УКТЦ в гр. Правец. След това продължава в ТУ‐София като магистър‐инженер по Компютърни Системи и Технологии.
През последната година от магистратурата й, в далечната 2002ра година, се поражда интереса й към областта на Изкуствения Интелект и продължава с 4 годишно обучение като докторант по Системи с Изкуствен Интелект, имайки възможността да работи с един от пионерите на ИИ в България ‐ проф. Людмил Даковски. Фокусът на дисертацията й е върху приложението на Машинно обучение и Обработка на Естествен Език при персонализирани търсещи системи в Уеб
пространството.
Именно като докторант в ТУ‐София Ива започва, а след това и продължава, преподавателската си кариера като асистент по дисциплините “Изкуствен Интелект и Експертни Системи”, “Програмиране в Интернет”, “Програмни Езици”.
Интересът й към Уеб технологиите още през 2008-ма я отвежда като програмист в един от първите електронни магазини в България ‐ store.bg. Продължава професионалното си развитие в корпоративния свят, работи като софтуерен инженер и Уеб програмист в множество международни компании ‐ Comp‐tel, Internet Securities, Datamax, Experian. След няколко години като старши програмист и ръководител на софтуерен екип, Ива започва freelance практика, което й позволява всеобхватно да прилага и обогатява уменията си в най‐модерните аспекти на Уеб Технологиите и Изкуствения Интелект.
Въпреки че се радва на признанието от доволни клиенти, истинско удовлетворение в работата получава от споделянето на знания и опит. Твърдата й увереност, че Компютърните Технологии са за всеки и трябва да бъдат разбираеми за всеки я отвежда през 2016-та година в Компютърно образователен център “Прогрес”, където и до днес подготвя и провежда множество курсове по Front‐End Development, Python и Machine Learning.

Програмни езици: JavaScript, TypeScript, Python, Perl, PHP, C++

Бази Данни: MySQL, PostgreSQl, MongoDB, Neo4j Graph Database

Уеб Технологии: HTML5, CSS3, React, Angular, Node.js

Машинно обучение: pandas, scikit‐learn, NLTK, tensorflow, …

Изкуствен Интелект: Natural Language Processing, LLMs, Information Retrieval, Ontologies, Expert Systems,
Neural Networks.

Теодор Колев

Повече от 15 години опит в разработката на софтуерни решения с релационни бази данни. Като още през далечната 2002-ра година е бил част от разработката на клиент-сървър система с Visual Basic 6.0 и сървър за бази данни MySQL. В този период Тео е бил на различни позиции в частта с използването на бази данни от проектант до разработчик. Дори една година е бил само и единствено SQL разработчик под MS SQL Server и MySQL. През годините винаги в голяма част от проектите е присъствал сървър за релационни бази данни – MS SQL, MySQL, PostgreSQL и др. През последните 9 години основният фокус е в уеб решения с инструментите на PHP, MySQL, PostgreSQL. Консултира, проектира и разработва решения, както само за базата данни, така и като цялостна софтуерна архитектура.
Тео има и дългогодишен опит и интереси в областта на SEO и управлението на съдържание. Той притежава повече от 10 години опит като SEO експерт и копирайтър като автор на публикации в различни сфери и текстове със специфична насоченост.
Притежава опит и в работата с ГЕО бази данни, ГИС моделиране и работа с пространствена информация.
Също така, Тео дълги години се занимава и като експерт по стратегическо развитие и управление на интернет присъствие за различни организации.
С над 30 години преподавателски опит той винаги намира правилния подход и отношение към участниците в обучението, така че всеки курсист да се справи с учебния материал по най-добрия начин.

Уеб технологии: HTML5, CSS3, JavaScript (+jQuery)

Програмни езици: PHP, Ansi SQL, T-SQL, PL/SQL, JavaScript, R, Python, VBA, XSLT, XML

CMS: WordPress, OpenCart, Drupal, Joomla

Релационни бази данни: MySQL, PostgreSQL, Oracle, Firebird, SQL lite, MS SQL, MS Access

Софтуерни инструменти: GIMP, QGIS, Postman, Selenium

Диана Едрева

Над 8 години опит в областта на уеб разработването и поддръжката на уеб базирани приложения.
Понастоящем е platform engineer. Завършила с отличен профил „Компютърна Графика“ в Национална Професионална Гимназия по Полиграфия и Фотография. Магистър по дигитална криминалистика и киберсигурност.

Програмни езици: PHP, HTML, CSS, JavaScript
CMS: WordPress, Joomla, Prestashop, Magento 1.9, Magento 2.0
Компютърна графика: Adobe Photoshop, Adobe Illustrator, Muse, Flash Animation