Go to Top

Курс по Web-Design

HTML, CSS, JavaScript, UI / UX


  • Цел на курса по Web-Design:

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

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

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

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

    Ползване на личен или служебен лаптоп:

    Тези, които нямат възможност да ползват собствен лаптоп, трябва да заявят за това по e-mail или телефон, за да им бъде осигурен служебен лаптоп от центъра.

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

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

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

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

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

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

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

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

     

    Оставете ревю на курса

    avatar
  • Учебна програма на курса по „Web-Design“:

    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.CSS3 – text/box shadows. Gradient backgrounds.
    1. Специални ефекти с text-shadow.
    2. Специални ефекти с box-shadow.
    3. CSS3 gradient backgrounds.
    4. Да направим от текста лого, единствено със CSS3.

    20.CSS3 transition/animation ефекти
    1. Как работят transitions/animations?
    2. Какво е общото и различното между CSS3 transitions и animations
    3. CSS3 свойството transition
    4. Раздвижване на елементите със CSS3 transition и animation ефекти.
    5. One-page scroll effect with transition and :target pseudo-class.

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

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

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

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

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

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

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

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

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

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

    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.Запознаване с PixiJS (optional topic)
    1. What is pixi.js and when to use it?
    2. Creating the Pixi Application and stage object
    3. Drawing some basic shapes
    4. Animation effects with pixijs – demo

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

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

  • График на курса по Web-Design с HTML,CSS ,JavaScript,UI/UX

    Продължителност на обучението – 110 учебни часа ( 3,5 месеца).

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

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

    07-ми юни 2021г. ( вечерна форма на обучение от 19:00 до 22:00 часа, което са 4 учебни часа с включени 20 минути почивка). Занятията, ще се провеждат всеки понеделник и сряда. Край на курса: 08-ми септември 2021г. (При записване до 14-ти май ще използвате 10% отстъпка от цената!)

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

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

    Цена на курса по Web-Design:

    Цена: 690 лв.

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

    Бонус:

    10% отстъпка при записване на надграждащия курс –  Web-Design Advanced.

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

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

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

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

    Форма на обучение:

    Вариант на обучение:

    От къде научихте за нас:

    Записване на курс по Web Design (HTML, CSS, JavaScript):

    • Записването се извършва предварително на място в образователния център или по банков път. При заплащане по банков път, моля погледнете банковата сметка по-долу.
    • Тези, които нямат възможност да ползват собствен лаптоп, трябва да заявят за това по email или телефон, за да им бъде осигурен служебен лаптоп/настолен компютър от центъра.
    • Предоставят се учебни материали на всеки курсист повреме на обучението (безплатно).
    • В края на курса се държи тест, минаването на който е основание за издаване на Сертификат.
    • Бонус: При записване на следващ курс в образователен център „Progress” курсиста ползва 10% отстъпка.

    Записване по банков път:

    Номер на банкова сметка:
    IBAN:BG49CECB979010E2257300
    BIC:CECBBGSF
    Основание за плащане: компютърно обучение по „Web-Design“

    След, като извършите превода е нужно да ни уведомите на email:[email protected]

    Може да оставите данните на фирмата си в случай, че бихте искали да ви се издаде фактура. Моля, ако имате някакви въпроси, не се колебайте да се свържете с нас. За контакти, натиснете – тук.

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

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

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

    Магистър-инженер по Компютърни системи и технологии, ТУ-София. Повече от 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++

    Диана Едрева

    Диана Едрева

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

    Програмни езици: PHP7, HTML5, CSS3, JavaScript

    CMS: WordPress, Joomla, Prestashop, Magento 1.9, Magento 2.0

    Компютърна графика: Adobe Photoshop, Adobe Illustrator, Muse, Flash Animation

ЧАСТ ОТ НАШИТЕ ДОВОЛНИ КЛИЕНТИ

ВИЖ ПОВЕЧЕ