Курс по Front-end development

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

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

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

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

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

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

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

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

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

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

По време на курса се предвиждат няколко контролни теста. В края на обучението, се представя практически проект. Добрите резултати на курсистите са основание за получаване на Сертификат.

Хостинг план на стойност 141 лева ( безплатно ):

Безплатен хостинг за всеки един курсист за целите на курса, предоставен от нашите партньори от Суперхостинг, чрез план – “СуперПро” . Повече информация – тук.

Учебна програма на курса по “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.Работа с Уеб Хостинг
1. Регистрация на Уеб Хостинг към SuperHosting.bg
2. Как да работим с нашия Уеб хостинг – запознаване с контролния панел (CPanel)
3. Как да “качим” сайта си на Уеб сърър – Настройка на FTP клиент.
4. Реален пример с акаунт на SuperHosting.bg.

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

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

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

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

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

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

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

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

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

31.Класически компоненти при създаване на Уеб Страница/примери от реални проекти
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

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

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

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

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

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

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

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

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

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

Цена: 890 лв.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Магистър-инженер по Компютърни системи и технологии, ТУ-София. Повече от 7 години опит като професионален Уеб програмист в утвърдени IT компании, някои от които са Store.bg, Comptel, Internet Securities и Datamax. Има опит като старши Уеб разработчик и ръководител на софтуерен екип. През последните 2 години работи като консултант и програмист на свободна практика в сферата на Семантичния Уеб, което и позволя всеобхватно да прилага, използва и обогатява уменията си в най-модерните аспекти на Уеб Технологиите. Преподавателската дейност на Ива започва през 2004г., когато започва и обучението си като докторант по „Системи с Изкуствен Интелект“ (профил: Семантични търсещи системи) към ТУ-София. Повече от 7 години води дисциплините „Програмиране в Интернет“, „Програмни езици“, „Изкуствен интелект и експертни системи“ като асистент към ТУ-София и други висши учебни заведения. Обича да споделя и обогатява знанията си не само с колеги-програмисти, но и с хора неизкушени доскоро в тази област. Твърдо вярва, че програмирането, в частност – Уеб Технологиите, са за всеки и трябва да бъдат разбираеми за всеки.

Уеб Технологии: HTML5, CSS3, JavaScript (+jQuery, AngularJS, Bootsrtap, Node.js,…)

Бази Данни: MySQL, MongoDB, Berkeley DB

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

Диана Едрева

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

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