Go to Top

Курс по Web-Design

Package

Web-Design с HTML, CSS, JavaScript

Цел на курса:

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

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

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

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

Лектор на курса: 

Ива Попова

Магистър-инженер по Компютърни системи и технологии, ТУ-София.

Повече от 7 години опит като професионален Уеб програмист в утвърдени IT компании, някои от които са Store.bgComptelInternet Securities и Datamax. Има опит като старши Уеб разработчик и ръководител на софтуерен екип.

През последните 2 години работи като консултант и програмист на свободна практика в сферата на Семантичния Уеб, което и позволя всеобхватно да прилага, използва и обогатява уменията си в най-модерните аспекти на Уеб Технологиите.

Преподавателската дейност на Ива започва през 2004г., когато започва и обучението си като докторант по “Системи с Изкуствен Интелект” (профил: Семантични търсещи системи) към ТУ-София. Повече от 7 години води дисциплините “Програмиране в Интернет”“Програмни езици”“Изкуствен интелект и експертни системи” като асистент към ТУ-София и други висши учебни заведения.

Обича да споделя и обогатява знанията си не само с колеги-програмисти, но и с хора неизкушени доскоро в тази област. Твърдо вярва, че програмирането, в частност – Уеб Технологиите, са за всеки и трябва да бъдат разбираеми за всеки.

Какво е необходимо за участие в курса:

Необходимо е курсистите желаещи да вземат участие в курса да се запишат, като направят това на място в административния офис на компютърно образователния център „Progress”(пл. Славейков №11. ет.4 )  или по банков път.

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

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

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

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

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

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

Хостинг план:

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

Продължителност на курса:

Курса е с продължителност от 3 месеца ( 110 учебни часа).

Цена на курс по „Web-Design с HTML, CSS , JavaScript“.

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

Учебна програма:

1. Въведение

Представяне на курса и съпътстващите онлайн ресурси.

Да подредим бъркотията от понятия: WebDesign, Front-end или client-side разработка? Back-end или server-side приложения? Full-stack developer?

HTML, CSS, JavaScript – какво можем да правим с тях? Live demo.

За какво и как ще използваме codepen.io?

2. Настройка на средата. Работа с текстов редактор ( Sublime Text 3)

Sublime Text, Atom, Visual Studio Code, Brackets – модерните инструменти за създаване на код.

Защо да изберем Sublime Text?

Инсталиране

Настройки

The Command Palette

Инсталиране на Package Control и допълнителни пакети

3.Клиент-Сървър комуникация. Основи на HTTP. Работа с Уеб хостинг.

Как работи Интернет? Клиент-Сървър комуникация. Основни понятия в HTTP (request/response messages, query methods).

Какво е domain, hosting, IP адрес, DNS?

Как да работим с нашия Уеб хостинг: запознаване с контролния панел (CPanel) и реален пример за настройка на акаунт в SuperHosting.bg. Промяна на DNS записи.

Как да „качим“ сайта си на Уеб сърър – реален пример с акаунт на SuperHosting.bg. Настройка на FTP клиент. А защо не и чрез стандартния файлов браузър на Windows?

4.Въведение в WWW

Преглед на развитието на WWW и технологиите зад нея.

Уеб ресурси, URL/URI

Структура на един Уеб сайт.

5.Основи на HTML

Структура на една Уеб страница.

Какво е HTML и HTML5?

Синтаксисът е в основата на всичко.

Doctype, head и body секции.

Елементи в head секцията. Мета информация за документа.

Коментарите, макар и безгласни, могат да бъдат важни.

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

Работа с параграфи и заглавия.

Елементи: b, strong, i, em, mark, small, del, ins, sub, sup, code, pre, kbd.

Създаване на Уеб документ с разнообразно текстово съдържание.

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

Вмъкване на изображения, разположени върху локален сървър или WWW.

Създаване на хипервръзки (линкове) към WWW ресурси или ресурси, разположени на сървъра.

Създаване на връзка към секция (bookmark) в текущия документ.

8.Списъци в HTML

Създаване на подредени списъци.

Създаване на неподредени списъци.

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

9.Таблици в HTML

Кога и за какво да използваме таблици?

Как да създадем таблица в HTML.

Сливане на клетки (cell span) по редове и колони.

Някои забележки относно оформлението на таблиците и HTML5.

10.HTML5 форми

Елементи за въвеждане на информация от потребителя.

Нови възможности в HTML5 за въвеждане и валидиране на email, дата, телефон и пр.

HTML5 ColorPicker (без JavaScript).

HTML5 files upload.

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

Какво е CSS и как допълва HTML.

Inline, internal или external CSS?

Структура на CSS правилата.

Наследяване на CSS правила. Какво е „каскадното“ в CSS ?

12.Селектори в CSS3 – Част1

Селектори за елементи.

Селектори за class и id.

Селектори за атрибути.

CSS комбинатори.

Стилизиране на елементите в страницата чрез CSS32

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

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

HTML елементът разгледан като кутийка.

Основни CSS свойства за оразмеряване на „кутийките“.

Блокови и поредови елементи.

Replaced elements? ,

Групиране на елементи в блок с елемента div.

Групиране на елементи в ред с елемента span.

Мерни единици в CSS34

Абсолютни и релативни мерни единици.

Стойности за цветове.

Color Pallets – или как да генерираме и подбираме подходящите цветове за нашият сайт.

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

Накратко за Visual Formatting Model.

Свойството display и новите модели в CSS3.

Позициониране на елементите – свойства position и float.

Пренареждане на елементите чрез свойството z-index.

Селектори в CSS3 – Част 2.

Селектори за псевдо-класове.

Селектори за псевдо-елементи.

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

12.Iframes

Как да „вградим“ съдържание от други страници в нашия документ?

По-голям контрол и безопасност на съдържанието чрез атрибута sandbox.

Вмъкване на карта в страницата (GoogleMaps и bgmaps).

Вмъкване на Пен от codepen.io.

13.CSS3 – text/box shadows. Gradient backgrounds.

Специални ефекти с text-shadow.

Специални ефекти с box-shadow.

CSS3 gradient backgrounds.

Да направим от текста лого, единствено със CSS3.

14.CSS3 transition/animation ефекти

Как работят transitions/animations?

Какво е общото и различното между CSS3 transitions и animations

CSS3 свойството transition

Раздвижване на елементите със CSS3 transition и animation ефекти.

One-page scroll effect with transition and :target pseudo-class.

15.Въведение в JavaScript

Защо се създава?

Какво е JavaScript? А EcmaScript?

Защо не бива да бъркаме JavaScript с Java.

Какво можем да правим с JavaScript?

Как и кога браузърът изпълнява JavaScript.

Къде и как да включим нашия скрипт?

16.JavaScript – основни синтактични елементи.

Структура на програмата.

Променливи (Variables)

Прости типове данни (Primitive types)

Коментари и добри практики за тяхното използване.

Оператори.

Условни изрази.

Цикли.

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

Дефиниране на масив.

Достъп до елементите,

Масива като обект,

Основни операции с едномерни и двумерни масиви.

18.Javascript: функции.

Създаване на семпъл калкулатор.

Игра: Морски шах.

19.JavaScript – обекти.

Обекти.

20.Как да променяме и създаваме HTML елементи чрез JavaScript

Накратко за DOM.

Достъпване на HTML елементите чрез JavaScript и DOM.

Промяна на съдържанието на елементите.

Създаване и изтриване на HTML елементи.

Игра: познай числото!

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

HTML DOM Style Object.

22.JavaScript и HTML DOM Events

За какво и как се използват event handlers.

Mouse events.

Keyboard Events

Frame/Object Events

Form Events

Drag Events

Игра: избягай от чудовището!

23.Обработка на дати и време. Tаймери в JavaScript

Синхронен и асинхронен JavaScript – кратко въведение.

Работа с таймери.

Обекта Date и неговите методи и свойства.

Игра: преди колко дни съм роден?

24.Създаване на цялостен front-end на Уеб сайт (върху собствен проект или електронен магазин)

Планиране на съдържанието и таргет групата.

Файлова структура и конвенции за имената

Изготвяне на Layout за страниците.

Оформление на менютата с CSS3.

Естетична галерия за продуктите чрез HTML5/CSS3/JavaScript

Изготвяне на форми за регистрация и потребителски профил.

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

Повече за добрите SEO практики

Responsive Web design.

Няколко думи за User Experience Design (UX design).

Бумът на node.js и други .js frameworks.

Курсов проект:

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

Бонуси:

15% отстъпка при записване на Web-Design Advanced.

10% отстъпка при записване на друг курс.

Вижте график на стартиращи групи по „Web-Design с HTML, CSS, JavaScript“ – тук.

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