Креирање веб сајта Фронт-енд развој - бесплатан курс Дечје онлајн школе програмирања Хелло Ворлд, обука 44 сата, Датум: 03.12.2023.

Како функционише Интернет

Хајде да разговарамо о основним концептима Интернета и његовој архитектури. Хајде да сазнамо шта је домен, хостинг, клијент-сервер архитектура. Хајде да поставимо радно окружење и разговарамо о три стуба фронт-енд развоја - ХТМЛ, ЦСС и ЈаваСцрипт.

ХТМЛ

Структура ХТМЛ документа

Хајде да направимо прве ХТМЛ странице и погледамо примере једноставних и сложених веб страница. Хајде да схватимо који блокови треба да буду на нашој страници. Учинимо да се наше странице повезују једна са другом, сазнамо по чему се текст разликује од хипертекста и шта су ознаке и атрибути.

Рад са текстом

Хајде да научимо како правилно радити са текстом у ХТМЛ-у: разбити га на пасусе, означити наслове и поднаслове. Хајде да научимо како да направимо нумерисане и означене листе и цитирамо класике.

Везе и слике

Хајде да се детаљније упознамо са везама, а такође научимо како да убаците слике и користите их као везе.

Распоред табеле

Хајде да направимо нашу прву табелу и сазнамо од којих ознака се састоји. Хајде да научимо како да спојимо ћелије, променимо број редова и колона, поравнамо текст и још много тога. Такође ћемо научити основне савете од дизајнера како да ваш сто учините лепим.

Увод у форме

Хајде да направимо наш први образац, научимо како да радимо са пољима за унос, падајућим листама, пољима за потврду и, наравно, дугмадима. Хајде да проучимо друге елементе форме који ће нам бити корисни у будућности.

ЦСС

Увод у ЦСС

Да се ​​подсетимо шта је ЦСС и како га користити. Хајде да научимо како да користимо ЦСС када радите са ХТМЛ страницама. Хајде да проучимо синтаксу ЦСС-а и шта су селектори, наслеђивање и са којим приоритетом се наши стилови примењују на ХТМЛ документ.

Селектори

Хајде да детаљније проучимо селекторе. Хајде да научимо како да приступимо једном или више елемената, која је разлика између класе и псеудо-класе и елемента од псеудо-елемента. Хајде да погледамо ЦСС смернице и сазнамо шта људи воле да питају о ЦСС-у на интервјуима.

Наслеђивање, каскадно и приоритетно

Сазнајемо да каскадери и каскадери нису из исте области. Хајде да разумемо принципе по којима се ЦСС стилови примењују на ХТМЛ елементе.

Декорација текста

Вратимо се одакле смо кренули – на текст. Хајде да научимо како да наш текст учинимо лепим и лаким за коришћење користећи ЦСС својства: подебљаност, курзив, величину, боју, позадину и друге.

Блок модел документа

Хајде да научимо див и спан ознаке, као и како да поставимо величине елемената, паддинг и границе. Хајде да разумемо како се формира блок модел документа и које могућности имамо за позиционирање елемената.

ЈаваСцрипт

Представљамо ЈаваСцрипт

Хајде да се упознамо са трећим стубом Фронт-енд развоја - ЈаваСцрипт-ом. Хајде да сазнамо шта су варијабле, типови података и зашто су потребне. И наравно да ћемо написати наш први програм.

Услови

Сетимо се логике, логичких операција и њихових комбинација. Нека снага и контрола буду са нама.

Циклуси

Хајде да научимо како да радимо много док пишемо мали код. Дозволите нам да разумемо да је циклус унутар циклуса једноставан, али морате бити опрезни.

Низови

Постоје ледене масе, шуме, а постоје и низови у програмирању. У овој лекцији ћемо проучити шта им је заједничко и по чему се разликују. Савет – петље из претходне лекције ће нам много помоћи.

Функције

Ако су променљиве и прави назив за њих АБЦ програмирања, онда је могућност рада са функцијама и одабира одговарајућих имена за њих већ рецепт. Научићемо како да разбијемо програм на логичке блокове и зашто је то важно у овој лекцији.

Објекти

Упознаћемо се са појмом објеката, метода и почети да се упознајемо са принципима ООП-а.

Увод у ДОМ

ЈаваСцрипт би био бескористан ако не би могао да ступи у интеракцију са ХТМЛ документом. Научићемо шта је ДОМ (Доцумент Објецт Модел), али што је још важније, научићемо како да радимо са ХТМЛ-ом и ЦСС-ом преко ЈаваСцрипт-а.

Управљање догађајима

Сада ћемо то подићи на следећи ниво и научити како да реагујемо и комуницирамо са корисником користећи ЈаваСцрипт. Такође ћемо сазнати зашто ЈаваСцрипт догађаји могу да бубре и тону.

ХТМЛ5 и ЦСС3

ХТМЛ5: шта је ново и зашто?

Хајде да сазнамо које су промене настале у ХТМЛ5 и зашто. Хајде да проучимо нове елементе и анализирамо случајеве њихове исправне употребе.

Позиционирање елемената и мреже

Хајде да погледамо нове начине структурирања страница и позиционирања елемената на њима.

ХТМЛ5 форме

Хајде да истражимо мрачну страну моћи и вежбамо са новим облицима у ХТМЛ5, као и променама старих. Хајде да радимо са новим типовима поља за унос датума, боја, бројева и како да подстакнемо корисника да себи мало олакша живот.

Аудио и видео

У овом туторијалу ви сте и ДЈ и уредник. Нећемо имати времена да направимо сопствени Иоутубе током ове лекције, али ћемо се веома потрудити да направимо прототип са основном функционалношћу.

Рад са текстом у ЦСС3

Хајде да сазнамо које могућности постоје и препоруке за форматирање текста у најновијој верзији стандарда.

Ефекти транзиције и трансформације у ЦСС3

Хајде да научимо како да креирамо анимацију и разне ефекте користећи ЦСС3. Хајде да се упознамо са замкама приликом стварања таквих ефеката.

Адаптиве лаиоут

Хајде да сазнамо зашто је потребно прилагодити распоред, а када је то непотребно и може нанети штету. Хајде да погледамо основну синтаксу и, наравно, вежбамо адаптивни распоред.

Флекбок & ЦСС Грид

Сазнаћемо о савременим приступима распореду блокова, као ио томе које потешкоће постоје у њиховом коришћењу.

ЦСС претпроцесори: ЛЕСС и САСС

Желите да користите променљиве у ЦСС-у? Лако! Сазнајте које занимљиве ствари можете да урадите користећи ЦСС претпроцесоре.

ЈаваСцрипт на новом нивоу

ЕС-2015+

Шта је савремени ЈаваСцрипт, "стриктни режим" и како са свиме живети.

ООП у ЈаваСцрипт-у

Хајде да проучимо како су класе структуриране у модерном ЈаваСцрипт-у и зашто се користе ако се све може урадити помоћу функција. Како функционише наслеђивање и који други начини за креирање класа постоје у ЈС-у.

Функције у детаљима

Хајде да сазнамо шта су декларација функције и израз функције, научимо како да позовемо функцију без имена. Хајде да погледамо фразу „контекстно везивање“.

АЈАКС и ЈСОН

Хајде да се подигнемо на нови ниво као програмери, научимо како да правимо ХТТП захтеве и научимо како сервер и клијент могу да комуницирају једни са другима и да се не свађају.

Регуларни изрази

„Ако имате проблем и намеравате да га решите регуларним изразима, онда већ имате два проблема.“ Хајде да научимо како да избегнемо пуцање у ногу користећи регуларне изразе.

Градитељи, покретачи задатака и управљање зависностима

Бовер, нпм, гулп, Грунт, вебпацк и цо. У овоме нема ништа компликовано, али морате то схватити.

Тестирање у ЈаваСцрипт-у

Где је код, увек има грешака. Научићете како да смањите њихов број и које праксе и алати ће нам помоћи у томе.

Алгоритми

Научићемо како да напишемо код тако да касније процесор и претраживач не доживе страшне болове при покретању вашег програма.

РеацтЈС

Увод у РеацтЈС

Хајде да се упознамо са РеацтЈС-ом, научимо како да напишемо једноставне компоненте и упоредимо га са другим популарним оквирима. Хајде да се упознамо са концептом виртуелног ДОМ-а.

Архитектура и конфигурација Реацт апликација

Хајде да сазнамо које акције треба да извршимо да не само да пишемо у Реацт-у, већ и да то урадимо што ефикасније и погодније.

Креирање прве апликације у РеацтЈС-у

Погледајмо ближе ЈСКС, РеацтЦомпонент, РеацтДОМ.рендер, функцију Рендер. Конфигуришемо и покрећемо прву апликацију, успостављамо односе између компоненти и процесних догађаја.

Рутирање и РеацтЈС

Шта је рутирање; Хајде да се упознамо са РеацтРоутер-ом и његовом функционалношћу; Организујемо рутирање у нашој апликацији.