Frontend разработчик: уебсайтове на HTML/CSS/JavaScript - курс 18 000 rub. от Coddy School of Programming for Children, обучение 3 модула (месеци)
разни / / December 03, 2023
Възраст: 11-14 години
Ниво: за начинаещи.
Продължителност: от 3 модула (месеца), от 24 часа*.
Формат: индивидуални и групови уроци, офлайн и онлайн (в реално време).
Брой деца: от 1 до 8.
Цена:
от 750 rub./час в онлайн група,
от 850 rub./час в офлайн група,
от 1050 rub./час индивидуално онлайн,
от 1980 rub./час индивидуално офлайн.
В съвременния свят всяка сериозна компания се стреми да придобие собствен уебсайт, тъй като той е вид „визитна картичка“ в интернет, без която правенето на бизнес вече изглежда остаряло, несериозно и безнадежден.
През последните години професията на уебмастъра се изкачи до челните места в класацията на най-атрактивните и търсени професии в IT сферата. В тази връзка в момента има все повече желаещи да преминат обучение за създаване на уеб сайтове с надраскайте и овладейте тази престижна специалност, за да имате стабилен и приличен печалби. Нашата школа по програмиране CODDY предлага да не отлагате и да запишете детето си в курса „Frontend Developer: Уебсайтове на HTML/CSS/JavaScript” още сега! Целта на този курс е да научи децата как да създават модерни уебсайтове и да ги въведе в основите на професията разработчик на интерфейси.
Какво е уебмастъринг и как да станете уебмастър?
Уебмастърингът е набор от дейности за разработване, създаване, оптимизиране и популяризиране на уебсайтове. Всичко, което по един или друг начин е свързано с изработката и поддръжката на сайтове. Това е цяла наука, която изисква определени умения и знания в много области, като уеб програмиране, дизайн, копирайтинг, SEO и други.
В съвременния интернет всеки може да направи свой собствен уебсайт. Но като правило качеството на уеб проектите оставя много да се желае. За да бъде конкурентен уебсайт, трябва да подходите към въпроса компетентно и да включите професионалисти в работата. Използвайки език за програмиране, програмистът създава уеб страници и ги комбинира в един обект, след което ги оформя за коректно показване в браузърите. Особено внимание трябва да се обърне на интерфейса на бъдещия сайт, гарантиращ неговата коректна работа и сигурност. И така, професионален уеб администратор прави всичко по-горе сам! Това е програмист, уеб дизайнер, дизайнер на оформление, администратор и модератор, а понякога и SEO копирайтър в едно цяло.
Какви знания и технологии трябва да владеете, за да станете уеб администратор?
Преди да станете уеб администратор, трябва да се запознаете и проучите много технологии, програми и системи. Ето основните стъпки, които ще положат основата на вашата бъдеща професия:
1. Изучаване на HTML – език за маркиране на хипертекст.
След като започнете да изучавате HTML, ще разберете структурата на уеб документ и ще научите как да създавате прости уебсайтове.
2. Изучаване на CSS – език на стила на показване на уеб страница. Благодарение на въвеждането на CSS стилове в документа, сайтът придобива собствен вкус и уникален външен вид. Можете да зададете цвят, размер, фон и много други на уеб страницата.
3. Въведение в CMS – система за управление на съдържанието или „двигател” на сайта.
4. Овладяване на Adobe Photoshop – графичен редактор с невероятен брой възможности. Много специалисти го използват, за да рисуват дизайни и да създават свои собствени оригинални и висококачествени оформления.
5. Базово познаване на езиците за програмиране. По-голямата част от уебсайтовете използват PHP и JavaScript. Скоростта на сайта, неговата сигурност, възможна мащабируемост и поддръжка от разработчици на трети страни зависят от качеството на написаните скриптове. С други думи, трябва да можете да пишете качествен код.
6. Работа с бази данни.
И най-важното е, че уеб администраторът трябва да създава оригинални сайтове. С появата на готови решения за всички популярни CMS, уебсайт с оригинален, нешаблонен дизайн е по-търсен от всякога. Професионалният уеб администратор може не само да работи с набор от готови програми, но и да напише тези готови програми. За да достигнете това ниво, ще трябва да работите усилено. И нашият курс „Frontend Developer: Уебсайтове на HTML/CSS/JavaScript“ ще помогне на вашето дете да направи първите уверени стъпки в тази трудна задача. Под ръководството на опитни преподаватели, той ще се научи да създава информативни уебсайтове с оригинален графичен дизайн.
По време на учебния процес ще се изучават следните теми:
1. Основи на Hypertext Markup Language (HTML) и Cascading Style Sheets (CSS)
2. оформление на съвременни уеб сайтове
3. задълбочено проучване на характеристиките на стила на уеб страницата
4. основи на работа с Adobe Photoshop и работа с оформления на уебсайтове
В началния етап ще се запознаем с основите на професията на разработчик на уеб интерфейс и ще изучим правилата изграждане на структурата и логиката на уебсайтове, придобиване на практически умения по програмиране уеб интерфейси. Всеки ученик ще научи основите на писане на HTML и CSS код.
След като завърши тази тема, вашето дете ще създаде свой собствен модерен уебсайт.
Вторият модул включва задълбочено изучаване на инструментите за програмиране на уеб интерфейс. В този модул ще продължим нашето въведение в HTML и CSS. Студентите ще се запознаят на практика с алгоритъма и структурата на създаване на съвременни уеб сайтове, самостоятелно ще създадат интерактивна галерия от изображения и ще публикуват своя проект в Интернет.
По време на третия модул ще продължим запознаването си с професията на уеб разработчика, ще придобием практически умения за работа с Adobe Photoshop и ще изучим съвременни инструменти за уеб дизайн. На етапа на създаване на дизайн на уебсайт студентът ще придобие основни умения за работа в графичен редактор. Ще анализираме различни варианти за дизайн на уебсайт, ще обсъдим предимствата и недостатъците на всеки и ще разберем как дизайнът може да бъде подобрен.
В края на курса моите студенти и аз ще създадем уебсайт с помощта на готово оформление на дизайна, използвайки най-новите инструменти за уеб програмиране и ще публикуваме резултата от нашата работа в Интернет.
11
курсовеПреподавател по курса:
„Minecraft: Въведение в изкуствения интелект“, „Unity 3D“, „Разработчик на Frontend: HTML/CSS/JavaScript уебсайтове“, „Рисуване в аниме стил“, „Програмиране за най-малките“, „Програмиране в Minecraft“, „Дизайн мислене“, „Ботове в Python“, „Графичен дизайн на Photoshop“, "Видеоблог"
образование:
Многобройни курсове за подобряване на IT уменията в международни компании (Chatbot Hackathons, Прототипиране в областта на изкуствения интелект, IT архитектура и др.). Университет Хайлброн, Хайлброн, Германия (магистър по бизнес администрация). Беларуски държавен икономически университет, Минск, Беларус (магистър по бизнес администрация).
Опит:
Занимава се с клиентско консултиране на правни системи, системи за одиторски решения и автоматизация на процеси, работи в иновативната сфера на ИТ и стартира в Германия в международна компания.
интереси:
Лично развитие, страст към споделяне на знания, работещ в мрежа, отварящ света, дизайнер на живота, спортен активист.
„Днес целият свят е взаимосвързан: хора, държави, икономики, технологии и т.н. Програмирането е ключова компетентност на бъдещето. Помага ви да разберете по-добре света на бъдещето, активно да го оформяте и да бъдете новаторски член на едно вълнуващо общество без граници. Способността за кодиране отваря безкрайни врати към бъдещето за нашите деца в този свят и ги прави посланици на новите технологии.“
9
курсовеПреподавател по курса:
„Minecraft: Въведение в изкуствения интелект“, „Unity 3D“, „Разработчик на Frontend: HTML/CSS/JavaScript уебсайтове“, „Рисуване в аниме стил“, „Програмиране за най-малките“, „Програмиране в Minecraft“, „Дизайн мислене“, „Ботове в Python“, „Графичен дизайн на Photoshop“, "Видео блогове"
образование:
Многобройни курсове за подобряване на ИТ уменията в международни компании (SAP, автоматизация на процеси, електронна търговия). FOM University of Stuttgart, Щутгарт, Германия (магистър по бизнес администрация) Държавен технически университет в Караганда, Караганда, Казахстан.
Опит:
Основател на успешен онлайн магазин за електротехника в Германия, занимаващ се с консултации на клиенти в в областта на автоматизацията на процесите на продажби, работи в областта на ИТ продажбите в Германия в международния компании.
интереси:
Пътуване, риболов, спорт, шах.
И. Гьоте е казал: „Можеш да научиш само това, което обичаш“
1-ви модул
Първият ден
Основи на оформлението на уеб страницата
- Структура на HTML документ
- Първа уеб страница, използваща HTML език за маркиране
- Представяме ви редактора на Sublime Text 3
Резултат от урока: създаде първата уеб страница, научи основните начини за маркиране на текст с помощта на тагове.
Практическа задача: създайте уеб страница с помощта на Html език за маркиране.
Втори ден
Div елемент и атрибути на таг
- Работа с уеб инспектора
- Създаване на многостраничен уеб сайт
- Изучаване на нови елементи и атрибути на тагове
Резултат от урока: научих как да добавям връзки и снимки към сайта, добавихме атрибути към таговете
Практическа задача: създайте своя първи многостраничен уебсайт.
Ден трети
Каскадни стилови таблици
- Въведение в каскадните стилови таблици
- Оформяне на HTML елементи
- Използване на селектори
- Инсталиране и работа с плъгина Emmet и добавяне на Lorem текст
Резултат от урока: научих как да променям цвета на фона и цвета на текста на HTML елементи, да използвам два типа селектори, да създавам Lorem текст с помощта на приставката Emmet
Практическа задача: промяна на външния вид на страницата с помощта на CSS свойства.
Ден четвърти
Създаване на уебсайт на Jaguar
- Създаване на многостраничен сайт Jaguar
- Създаване на файлова структура на проекта
- Работа с подложки и подложки на елементи
Резултат от урока: научиха се да работят с външен CSS файл, запознаха се с външните и вътрешните подложки на елементи.
Практическа задача: създайте многостраничен уебсайт на Jaguar.
2-ри модул
Първият ден
Модел на кутия в CSS
- Модел на кутия в CSS
- Създаване на блокове с необичайна форма
- Работа със свойството box-sizing за промяна на начина на изчисляване на ширината и височината на даден елемент
Резултат от урока: научихте как да създавате блокове с необичайни форми, да използвате свойството box-sizing със стойността border-box, за да изчислите правилно ширината на елемент и да зададете размерите на елементите в различни мерни единици
Практическа задача: създавайте карти с текст, като използвате различни стойности на свойство за размер на кутия.
Втори ден
Разширено манипулиране на текст в CSS
- Различни видове шрифтове
- Избор на шрифтове за уебсайтове
- Създаване на нови стилове, които ви позволяват да персонализирате показването на текст на напреднало ниво
Резултат от урока: създаде страница, използваща различни типове шрифтове, подобри външния вид и четливостта на текста, използвайки предадените свойства.
Практическа задача: създайте страница с основни типове шрифтове.
Ден трети
Позициониране на елементи в CSS
- Работа със свойството float
- Видове позициониране на елементи на страницата
- позиция собственост
Резултат от урока: научихте да работите със свойствата float и position, създавате обвиване на текст около изображения
Практическа задача: създайте уеб страница и поставете елементи върху нея, като използвате свойствата float и position
Ден четвърти
Създаване на блог страница
- Създаване на блог страница
- Свойства за позициониране на елемент за поставяне на менюта и публикации на страницата
- Семантични етикети
Резултат от урока: се научи да работи със семантични тагове, използвайки свойства за позициониране, постави основните компоненти на блога на страницата
Практическа задача: създайте блог страница с помощта на семантични тагове
3-ти модул
Първият ден
Псевдокласове и работа с изображения в CSS
- Използване на фонови изображения на уеб страница
- Псевдокласовете се движат, активни и посетени
- Промяна на стила на един елемент при активиране на псевдо-клас на друг елемент
- Създаване на фонови модели
Резултат от урока: научиха как да работят с фонови изображения, проучиха свойства за работа с изображения
Практическа задача: добавете външни промени към елементи, когато задържите курсора на мишката върху тях.
Втори ден
FlexBox в CSS
- Работа с CSS Flexible Box Layout
- Свойства за подравняване на елементи във Flex контейнер
- Образователна игра Flex-frog
Резултат от урока: научиха се да работят с технологията Flex за създаване на гъвкави оформления, завършиха играта flex-frog за консолидиране на покрития материал
Практическа задача: завършете играта flex-frog, за да консолидирате покрития материал
Ден трети
Изработка на сайт на магазин за маратонки. Част 1
- Създаване на структура на сайта с модели
- Свързване към сайт за шрифтове
- Свойства на хедъра на сайта и неговите дъщерни елементи
- Функции за създаване на градиентен фон на страница
Резултат от урока: създаде структура на сайта с модели, свърза шрифта със сайта.
Практическа задача: изберете и изтеглете снимки с модели, добавете сянка към заглавката на сайта
Ден четвърти
Изработка на сайт на магазин за маратонки. Част 2
- Завършване на работата по обекта
- Създаване на блок с карти
- Промяна на поведението на елементите при задържане на курсора на мишката над тях
- FlexBox технология за позициониране на карти
Резултат от урока: създадоха уебсайт с модели карти
Практическа задача: добавете галерия с помощта на технологията FlexBo
4-ти модул
Първият ден
Оформление на мрежата в CSS
- Въведение в Grid системата
- Създаване на страница с помощта на мрежа
- Свойства за разширена работа с Grid клетки
Резултат от урока: изучавах двуизмерната система за оформление (CSS Grid Layout), научих как да позиционирам Grid клетки на страницата.
Практическа задача: завършете играта с градинска мрежа, за да консолидирате покрития материал.
Втори ден
Псевдоелементи след и преди
- Псевдоелементи преди и след
- Комбиниране на картина с текст вътре
- Елементи с псевдоелементи от първа буква и първи ред
Резултат от урока: научихте се да работите с псевдо-елементи преди, след, първа буква и първи ред, комбинирате псевдо-елементи с различни свойства, за да създавате красиви блокове
Практическа задача: създайте елемент, като използвате псевдоелементите after и befor.
Ден трети
Анимации и трансформации в CSS
- CSS трансформации
- Прилагане на трансформации към HTML елементи
- Създаване на анимирани блокове в CSS
- Прилагане на функции за синхронизация към ключови кадри
Резултат от урока: научих как да работим с трансформации в CSS, да създаваме безкрайни анимации в CSS.
Практическа задача: създайте бутон, добавете трансформации към него при задържане.
Ден четвърти
Практикувайте създаването на анимации в CSS
- Приложение на анимацията и трансформацията в практиката
- Създаване на анимирана орбитална система от планети в нашата слънчева система
Резултат от урока: създаде страница, демонстрираща движението на планетите в Слънчевата система и анимиран фон.
Практическа задача: създайте анимирана орбитална система от планети в нашата слънчева система.
5-ти модул
Първият ден
Създаване на онлайн магазин
- Какво е онлайн магазин?
- Създаване на структура на проекта
- Настройка на проекта
Резултат от урока: започна създаването на онлайн магазин.
Практическа задача: изберете икони, които да се използват на сайта.
Втори ден
Създаване на хедър на онлайн магазин
- Променливи в CSS и как да ги използвате
- Свързване на шрифтове към външен лист със стилове чрез функцията url
- Хедър на онлайн магазин, неговият стил
- Добавяне на допълнителна функционалност на менюто с помощта на езика за програмиране JavaScript
Резултат от урока: конфигурира глобални променливи в проекта, създаде многофункционална заглавка с меню, свърза Javascript файл, за да добави допълнителна функционалност на менюто.
Практическа задача: добавете промяна на фона на заглавката на сайта при превъртане на страницата
Ден трети
Създаване на първия екран с основния продукт
- HTML структура на презентационния блок
- Мрежова система за правилно изобразяване на елементите
- Стойности на CSS свойства с помощта на променливи
- Стайлинг елементи
Резултат от урока: създаде презентационната част на онлайн магазина
Практическа задача: създаване на презентационна част на онлайн магазин
Ден четвърти
Създаване на блок с популярни продукти
- HTML маркиране за блок с продукти
- Стил за продуктови карти
- Решетка решетка за позициониране на карти
- Стилизация на блок с историята на фирмата
Резултат от урока: създаде блок с популярни продукти и история на компанията
Практическа задача: добавете външни и вътрешни подложки към елементи в блока с историята на компанията
6-ти модул
Първият ден
Създаване на слайдер с клиентски отзиви.
- Блок за преглед
- Начини за създаване на превъртащи се контейнери в CSS
- scroll-behavior и scroll-snap-type свойства
- Точки за закрепване на плъзгача
Резултат от урока: създаде плъзгач с клиентски отзиви, използвайки HTML и CSS.
Практическа задача: добавете опорни точки към основните раздели на сайта и създайте автоматично превъртане към тези блокове, когато щракнете върху бутона.
Втори ден
Работа с форми и видео съдържание.
- HTML5 тагове за вмъкване на видео съдържание в уебсайт
- Оформяне на раздел с видеоклип на цял екран
- Таг на полето за въвеждане -, и неговите атрибути
- Таг за създаване на формуляри в Html
- Оформяне на елемент за въвеждане на текст
Резултат от урока: създаде раздел с видео и блок с форма за обратна връзка
Практическа задача: създайте формуляр за обратна връзка, стилизирайте елементите
Ден трети
Създаване на отделна страница с галерия
- Персонализирана решетка за страница на галерия
- Добавяне на блокове с изображения към мрежата
- Псевдоелементи и различни анимации на блокове с изображения
- CSS филтри за подобряване на визуалния дизайн на галерията
Резултат от урока: създаде отделна страница със фотогалерия
Практическа задача: използване на различни видове позициониране за създаване на полупрозрачен необичаен фон.
Ден четвърти
Адаптиране на съдържание за всички видове устройства.
- Начини за адаптиране на съдържание за мобилни устройства
- Медийни заявки за прилагане на различни свойства към един и същ елемент на устройства с различна ширина
- CSS правила за три типа устройства
Резултат от урока: Адаптирахме сайта за таблети и телефони.
Практическа задача: използвайки медийни заявки, променете стойностите на свойствата на HTML елементите, за да адаптирате съдържанието към всички видове устройства
7-ми модул
Първият ден
Въведение в рамката Tailwind SS.
- Какво представляват рамките и как те ускоряват процеса на разработване на проекта?
- Инсталиране на Tailwind CSS framework и добавки
- Концепции на CSS рамката на Tailwind
- Работа с типография и цветове в Tailwind CSS
Резултат от урока: създаде първата уеб страница, използвайки CSS рамката на Tailwind.
Практическа задача: създайте блок с текст, елементи на стил, като използвате класове за попътен вятър.
Втори ден
Класове по попътен вятър за създаване на адаптивен уебсайт
- Работа с класове Tailwind за създаване на адаптивен уебсайт
- Класове за добавяне на ефекти при задържане и фокусиране
- Класове за добавяне на сенки към елементи
- Класове за работа с размери на елементи
- Класове за работа с външни и вътрешни подложки на елементи
Резултат от урока: Създадохме адаптивна страница за всички видове устройства.
Практическа задача: създаване на бутони, добавяне на ефекти при щракване върху тях с помощта на класове Tailwind
Ден трети
Гъвкаво оформление на задния вятър.
- Работа с Tailwind Flex Layout
- Класове за подравняване на дъщерни елементи във Flex контейнер
- Създаване на карта с цена на продукт
- Създаване на индикатори за напредък
- Работа с псевдо елементи в Tailwind CSS
Резултат от урока: създаде Flex контейнер с продуктови карти
Практическа задача: създаване на карта с описание на продукта.
Ден четвърти
Мрежова система в Tailwind CSS.
- Свойства за обхват на редове и стълбове
- Свойства за автоматично запълване на празно пространство в мрежа с елементи
- Страница на екипа на проекта
Резултат от урока: създаде адаптивна страница на екипа на проекта, използвайки системата Tailwind Grid.
Практическа задача: добавете ефекти към елементите на мрежата, когато задържите курсора на мишката върху тях
8-ми модул
Първият ден
Настройка на проекта
- Настройване на проекта за сайт на приложение „Управление“.
- Създаване на адаптивна заглавка на уебсайт
- Създаване на меню за хамбургер с помощта на JavaScript
- Създаване на презентационен раздел с продукт
Резултат от урока: създаде първия екран на уебсайта на приложението „Управление“.
Практическа задача: добавете фоново изображение към първия екран.
Втори ден
Създаване на раздел с описание на приложението
- Секция с описание на приложението и неговите предимства
- Адаптирайте създадения блок за всички видове устройства
- Секция с работа на приложението
- Приложете филтри Tailwind към изображение
Резултат от урока: създаде два раздела на сайта „Управление“
Практическа задача: създайте допълнителен раздел с историята на създаването на приложението
Ден трети
Създаване на раздел за екипа на проекта
- Раздел за отбора
- Плъзгач с помощта на Tailwind CSS и Javascript
- Карти на служителите
Резултат от урока: създаде раздел за екипа на проекта
Практическа задача: създайте раздел с CTA бутон
Ден четвърти
Създаване на раздел с цени
- Създайте раздел с цени
- Създайте адаптивен долен колонтитул на уебсайта
- Завършете проекта
Резултат от урока: приключи работата по проекта, създаде уебсайта на приложението „Управление“.
Практическа задача: финализирайте проекта, пуснете сайта в интернет
9-ти модул
Първият ден
Започнете да работите по свой собствен проект.
- Изберете тема на проекта
- Започнете да разработвате собствен уебсайт
Резултат от урока: избрана е тема и работата по проекта е започнала
Практическа задача: Работа по проект
Втори ден
Продължава работата по проекта
- Продължете работата по проекта
- Коригирайте грешки в проекта
Резултат от урока: създаване на уеб страници
Практическа задача: Работа по проект
Ден трети
Изготвяне на презентация на проекта.
- Опишете вашия проект
- Създайте шаблон за презентация, за да защитите проекта си
- Завършете проекта
- Поставете сайта в интернет
Резултат от урока: подготви презентация и репетира речта.
Практическа задача: подгответе презентация на проекта, поставете уебсайта в интернет.
Ден четвърти
Защита на проекта.
- Финализирайте представянето на проекта
- Защитете проекта си пред публика
Резултат от урока: Завършихме работата по курсовия проект и го представихме на родителите.
Практическа задача: финализиране на проекта, подготовка и провеждане на презентация.