Цел на курса по Front-end development:
Запознаване на групата с изключително популярните и може би най-използваните днес, езици за създаване на уеб страници и приложения. Придобиване на една солидна професионална база от познания и умения за изграждане и поддръжка на динамични уеб страници. Създаване на условия за по-добра реализация в IT сектора, чрез по-лесно стартиране на професионално развитие, като Front-End Developer.
В края на обучението си курсистите, ще могат да създават динамични и лесно използваеми уеб страници с добро графично оформление. Техните страници, ще бъдат правилно структурирани за по-лесна оптимизация от търсачките.
За кого е предназначен курсът:
Курсът е подходящ, за абсолютно начинаещи, също така и за тези, които имат известни познания и желаят да ги доразвият на професионално ниво.
Мащаб на групата:
Обучението се провежда в малка ( бутикова ) група, ограничена до 8-м участника, с цел много повече индивидуално внимание на лектора към курсистите по време на практическите упражнения.
Запис на занятията:
Всички онлайн занятия се записват, след което се изпращат до курсистите. Така всеки, който е изпуснал дадена лекция, ще може да навакса гледайки записа.
Кариерно консултиране ( безплатно ):
При желание ние ще ви помогнем да опознаете трудовия пазар (компаниите и профила на търсените от тях кадри, какви възможности предлагат за професионално развитие на своите служители, възнаграждения , работна атмосфера, технологии с които работят и още). Къде да търсите работа, как да различавате работодателите. Какви възможности има за работа на свободна практика избрания от вас профил.
Ще ви разкажем и посъветваме върху какво да наблягате по време на интервю за работа.
Услугата е напълно безплатна за всички завършили курсисти на центъра.
Възможност за започване на работа/стаж:
Компютърно образователен център Progress има партньорски взаимоотношения с утвърдени компании. Отличилите се курсисти по време на курса ще бъдат препоръчани и изпратени на интервю за работа. Повече за част от нашите партньори може да прочетете тук.
Издаване на Сертификат:
В края на обучението се държи тест или се предава практически проект, според преценка на преподавателя. Всеки курсист, който успешно се справи с поставената финална задача, може да заяви на office@progressbg.net, да му бъде издаден Сертификат. Таксата за издаване е 60 лева.
Учебна програма на курса по “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: HowTo3. Основи на 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.io7.Списъци в 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 Events27.Как да променяме 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. Основни типове в TypeScript31. Въведение в UX/UI дизайн
1. Какво е UX и UI дизайн? – дефиниции и разлики.
2. Ролята на UX/UI в разработката на уебсайтове.
3. Основни принципи на добрия дизайн:
4. Достъпност (Accessibility).
5. Ползваемост (Usability).
6. Консистентност (Consistency).
7. Дискусия: Примери за добър и лош UX/UI дизайн.32. Потребителско изживяване (UX)
1. Процес на UX дизайн:
2. Проучване и събиране на изисквания.
3. Създаване на потребителски персони.
4. Създаване на потребителски пътища (User Journeys).
5. Практическа задача:
6. Начертаване на схема на потребителски път (User Flow).33. Въведение в UI дизайн
1. Основи на визуалния дизайн:
2. Типография, цветове и контраст.
3. Бутони, икони и форми – добри практики.
4. Проектиране на Wireframe:
5. Ръчно рисуване на Wireframes за уеб страница или мобилно приложение.
6. Практическа задача:
7. Създаване на прост Wireframe за уеб страница (с ръка или инструмент като Figma).34. Практика и обобщение
1. Дизайн на прототип с безплатен инструмент (например Figma или Canva):
2. Запознаване с интерфейса на инструмента.
3. Добавяне на основни компоненти: бутони, текстови полета, изображения.
4. Финален проект:
5. Създаване на интерактивен прототип на уеб страница (начална страница или продуктова страница).
6. Обратна връзка и дискусия:
7. Разглеждане на проектите и даване на препоръки.35.Класически компоненти при създаване на Уеб Страница/примери от реални проекти
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 animation36. Вместо заключение
1. Responsive Web design .
2. Тенденции в развитието на Front-End технологиите. Как да продължим към advanced ниво.*По време на обучението, курсистите ще имат възможността да разработят самостоятелно цялостния front-end на уеб сайт (по зададена или избрана от тях тематика) като курсов проект. Акцентът отново ще бъде поставен върху качествения код, съобразен с актуалните стандарти, съвместимостта (cross browser compatibility) и добрите SEO практики.
График на курса по Front-end development с HTML,CSS,JavaScript,UI/UX
Продължителност на обучението – 80 учебни часа ( 2,5 месеца).Следващите начални дати са:
14-ти октомври 2025 г. (вечерна форма на обучение от 19:00 до 22:00 часа, което са 4 учебни часа с 20 минути почивка). Занятията ще се провеждат всеки вторник и четвъртък. Край на курса: 18-ти декември 2025г.
18-ти октомври 2025 г. (съботно неделна форма на обучение от 10:30 до 13:30 часа, което са 4 учебни часа с 20 минути почивка). Занятията ще се провеждат всяка събота и неделя. Край на курса: 21-ви декември 2025г.
Обучението се провежда в група до 8-м курсисти, като всеки от тях може да избира между:
- присъствена форма – на място в учебна зала на пл. Славейков.
- или да се включи онлайн от вкъщи през нашия Zoom business account.
Цена на курса по Front-end development:
Има възможност за разсрочено заплащане на курса на две вноски. Първата вноска от 500 лева се внася при записването, а втората от 290 лева в началото на втория месец от обучението.
Продължаване на обучението:
Завършилите курсисти от това ниво за начинаещи ползват 15% отстъпка при записване на надграждащия курс по Front-end development – Advanced.
Възможност за стартиране на работа:
Компютърно образователен център “Progress” има партньорски отношения с компании от IT сектора ( част от тях може да разгледате – тук ). Курсистите, които са показали отлични резултати по време на съответния курс, ще бъдат препоръчвани, като кандидати за работа на тези компании.
Видео представяне на курса по “Front-end development”
Реализиран курист (интервю)
Запиши се сега!
Преподаватели
Ива Емилова Попова
Компютърните технологии и софтуерното инженерство съпътстват целия живот на Ива Попова. Сблъсква се с тях още в началото на 90-те години, когато завършва средното си образование в единствената за България тогава специализирана професионална гимназия в областта на Компютърните Системи ‐ УКТЦ в гр. Правец. След това продължава в ТУ‐София като магистър‐инженер по Компютърни Системи и Технологии.
През последната година от магистратурата й, в далечната 2002ра година, се поражда интереса й към областта на Изкуствения Интелект и продължава с 4 годишно обучение като докторант по Системи с Изкуствен Интелект, имайки възможността да работи с един от пионерите на ИИ в България ‐ проф. Людмил Даковски. Фокусът на дисертацията й е върху приложението на Машинно обучение и Обработка на Естествен Език при персонализирани търсещи системи в Уеб
пространството.
Именно като докторант в ТУ‐София Ива започва, а след това и продължава, преподавателската си кариера като асистент по дисциплините “Изкуствен Интелект и Експертни Системи”, “Програмиране в Интернет”, “Програмни Езици”.
Интересът й към Уеб технологиите още през 2008-ма я отвежда като програмист в един от първите електронни магазини в България ‐ store.bg. Продължава професионалното си развитие в корпоративния свят, работи като софтуерен инженер и Уеб програмист в множество международни компании ‐ Comp‐tel, Internet Securities, Datamax, Experian. След няколко години като старши програмист и ръководител на софтуерен екип, Ива започва freelance практика, което й позволява всеобхватно да прилага и обогатява уменията си в най‐модерните аспекти на Уеб Технологиите и Изкуствения Интелект.
Въпреки че се радва на признанието от доволни клиенти, истинско удовлетворение в работата получава от споделянето на знания и опит. Твърдата й увереност, че Компютърните Технологии са за всеки и трябва да бъдат разбираеми за всеки я отвежда през 2016-та година в Компютърно образователен център Progress, където и до днес подготвя и провежда множество курсове по Front‐End Development, Python, JavaScript и 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.Диана Едрева
Над 8 години опит в областта на уеб разработването и поддръжката на уеб базирани приложения.
Понастоящем е platform engineer. Завършила с отличен профил „Компютърна Графика“ в Национална Професионална Гимназия по Полиграфия и Фотография. Магистър по дигитална криминалистика и киберсигурност.Програмни езици: PHP, HTML, CSS, JavaScript
CMS: WordPress, Joomla, Prestashop, Magento 1.9, Magento 2.0
Компютърна графика: Adobe Photoshop, Adobe Illustrator, Muse, Flash Animation
Много добър въвеждащ курс в уеб дизайнът. Темите са добре структурирани и преподавателката обяснява добре и разкрива доста полезни допълнителни неща. Курсът е идеален за получаване на основни практически знания в областта на уеб дизайнът.
Ива Попова е страхотен преподавател. Подхода и начина по който обяснява материала е повече от прекрасен, с много примери благодарение на които с лекота се усвояват всички предвидени в програмата теми. Ива беше основния “виновник” заради който след като изкарах курса по WEB-DESIGN в Компютърно образователен център Progress да запиша следващия, а именно : WEB DESIGN – ADVANCED. За много кратко време благодарение на голямата всеотдайност на Ива аз успях да науча много полезни неща.
Изключително полезен курс, особено за абсолютно начинаещи като мен, които нямат идея от къде да започнат. Напълно съм съгласна с мнението на Николай – Ива е страхотен, структуриран и методичен преподавател, който държи да разберем как нещата функционират, а не дава готови решения на казуси. Начина ѝ на преподаване и очевидната любов към сферата абсолютно ме запалиха и мотивираха да уча! Препоръчвам на всеки, който все още се колебае и лично аз със сигурност ще продължа с advanced курса. Успех!
Курсът за начинаещи в сферата на Web Design е добре структориран и успява последователно да изгради знания, дори и на хора като мен, които нямат никакви познати в сферата. Преподавателят ни Ива Попова е изчерпателна в обясненията си и се стараеше да ни подтиква към дискусия. Преподава се доста материал в курса и може би е леко интензивен, но доста полезен.
Освен вече изразените мнения, които напълно подкрепям, мога да кажа, че Ива Попова е изготвила чудесен, изчерпателен курс за въведение в уеб разработката. Със знанията, придобити от курса мога спокойно да приема, че вече имам основата, нужна ми за професионалната позиция front-end web development. Благодарение на Ива, която си личи, че обича работата си, съм мотивирана да продължа да уча и да се развивам в сферата. Направи ми впечатление, че Ива не просто преподава нужните теми и понятия, които са предмет на курса, но поставя темите в контекста на компютърната наука – често тя влиза в теоретична дълбочина за това как работят компютрите изобщо, във връзка с разглежданите теми, разбира се. Препоръчвам за всеки, който се нуждае от по-структуриран и цялостен курс!
Изключително съм благодарна на преподавателката Ива Попова за знанията, които придобих по време на курса “Frond end developer” всяка една тема беше много добре структурирана и обяснена по най достъпния начин за напълно начинаещ, като мен !
Радвам се че отново се доверих на Компютърно образователен център “Progress” за следващата ми стъпка от обучението, винаги разполагат с изключителни преподаватели.Наистина страхотен екип