Създаване на сайт Front-end разработка - безплатен курс от Детска онлайн школа по програмиране Hello World, обучение 44 часа, Дата: 3 декември 2023 г.

Как работи интернет

Нека поговорим за основните концепции на Интернет и неговата архитектура. Нека да разберем какво е домейн, хостинг, клиент-сървър архитектура. Нека настроим работната среда и да поговорим за трите стълба на Front-end разработката – HTML, CSS и JavaScript.

HTML

Структура на HTML документ

Нека създадем първите HTML страници и да разгледаме примери за прости и сложни уеб страници. Нека да разберем какви блокове трябва да има на нашата страница. Нека направим така, че нашите страници да се свързват една с друга, да разберем как текстът се различава от хипертекста и какво представляват таговете и атрибутите.

Работа с текст

Нека се научим как да работим правилно с текст в HTML: разделете го на абзаци, посочете заглавия и подзаглавия. Нека се научим как да правим номерирани и обозначени списъци и да цитираме класиците.

Връзки и изображения

Нека се запознаем по-подробно с връзките и също така да научим как да вмъкваме снимки и да ги използваме като връзки.

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

Нека създадем нашата първа таблица и да разберем от какви тагове се състои. Нека научим как да обединяваме клетки, да променяме броя на редовете и колоните, да подравняваме текст и много повече. Ще научим и основни съвети от дизайнера как да направите масата си красива.

Въведение във формулярите

Нека създадем нашата първа форма, да се научим как да работим с полета за въвеждане, падащи списъци, квадратчета за отметка и, разбира се, бутони. Нека да проучим други елементи на формата, които ще ни бъдат полезни в бъдеще.

CSS

Въведение в CSS

Нека си припомним какво е CSS и как да го използваме. Нека научим как да използваме CSS, когато работим с HTML страници. Нека проучим синтаксиса на CSS и какво представляват селекторите, наследяването и с какъв приоритет нашите стилове се прилагат към HTML документ.

Селектори

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

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

Научаваме, че закърняването и каскадьорите не са от една и съща сфера. Нека разберем принципите, по които CSS стиловете се прилагат към HTML елементи.

Текстова декорация

Да се ​​върнем там, откъдето започнахме – към текста. Нека научим как да направим текста си красив и удобен за потребителя, като използваме свойствата на CSS: удебелен шрифт, курсив, размер, цвят, фон и други.

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

Нека научим етикетите div и span, както и как да задаваме размери на елементи, подложки и граници. Нека разберем как се формира блоковият модел на документ и какви възможности имаме за позициониране на елементи.

JavaScript

Представяне на JavaScript

Нека се запознаем с третия стълб на Front-end разработката – JavaScript. Нека да разберем какво представляват променливите, типовете данни и защо са необходими. И разбира се, ще напишем първата си програма.

Условия

Да си припомним логиката, логическите операции и техните комбинации. Нека силата и контролът бъдат с нас.

Цикли

Нека се научим как да правим много, докато пишем малко код. Нека разберем, че един цикъл в един цикъл е прост, но трябва да внимавате.

Масиви

Има ледени маси, гори и има масиви в програмирането. Ще научим какво е общото между тях и как се различават в този урок. Подсказка - циклите от предишния урок ще ни помогнат много.

Функции

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

Обекти

Ще се запознаем с концепцията за обекти, методи и ще започнем да се запознаваме с принципите на ООП.

Въведение в DOM

JavaScript би бил безполезен, ако не можеше да взаимодейства с HTML документ. Ще научим какво е DOM (Document Object Model), но по-важното е, че ще научим как да работим с HTML и CSS чрез JavaScript.

Обработка на събития

Сега ще го пренесем на следващото ниво и ще научим как да реагираме и взаимодействаме с потребителя с помощта на JavaScript. Също така ще научим защо JavaScript събитията могат да избухнат и да потънат.

HTML5 и CSS3

HTML5: какво е новото и защо?

Нека да разберем какви промени са настъпили в HTML5 и защо. Нека да проучим нови елементи и да анализираме случаите на тяхното правилно използване.

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

Нека разгледаме нови начини за структуриране на страници и позициониране на елементи върху тях.

HTML5 формуляри

Нека изследваме тъмната страна на силата и да практикуваме с нови форми в HTML5, както и с промени в стари. Нека работим с нови видове полета за въвеждане на дати, цветове, числа и как да подканим потребителя да улесни малко живота си.

Аудио и видео

В този урок вие сте диджей, както и редактор. Няма да имаме време да направим наш собствен Youtube по време на този урок, но ще се постараем много да създадем прототип с основна функционалност.

Работа с текст в CSS3

Нека разберем какви възможности има и препоръки за форматиране на текст в най-новата версия на стандарта.

Ефекти на преход и трансформация в CSS3

Нека научим как да създаваме анимация и различни ефекти с помощта на CSS3. Нека да се запознаем с клопките при създаването на такива ефекти.

Адаптивно оформление

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

Flexbox & CSS Grid

Ще научим за съвременните подходи за блоково оформление, както и какви трудности има при използването им.

CSS препроцесори: LESS и SASS

Искате ли да използвате променливи в CSS? Лесно! Разберете какви интересни неща можете да правите с CSS препроцесори.

JavaScript на ново ниво

ES-2015+

Какво е модерен JavaScript, "строг режим" и как да живеем с всичко това.

ООП в JavaScript

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

Функции в детайли

Нека да разберем какво е Декларация на функция и Израз на функция, да научим как да извикаме функция без име. Нека да разгледаме фразата „контекстно обвързване“.

AJAX и JSON

Нека се пренесем на ново ниво като разработчици, да научим как да правим HTTP заявки и как сървърът и клиентът могат да комуникират помежду си и да не се карат.

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

„Ако имате проблем и ще го разрешите с регулярни изрази, тогава вече имате два проблема.“ Нека научим как да избегнем прострелването си в крака с помощта на регулярни изрази.

Конструктори, изпълняващи задачи и управление на зависимости

Bower, npm, gulp, Grunt, webpack и др. В това няма нищо сложно, но ще трябва да го разберете.

Тестване в JavaScript

Където има код, винаги има грешки. Ще научите как да минимизираме броя им и какви практики и инструменти ще ни помогнат за това.

Алгоритми

Ще научим как да пишем код, така че по-късно процесорът и браузърът да не изпитват мъчителна болка при стартиране на вашата програма.

ReactJS

Въведение в ReactJS

Нека се запознаем с ReactJS, да се научим как да пишем прости компоненти и да го сравним с други популярни рамки. Нека се запознаем с концепцията за виртуален DOM.

Архитектура и конфигурация на React приложения

Нека разберем какви действия трябва да извършим, за да не само пишем в React, но и да го правим възможно най-ефективно и удобно.

Създаване на първото приложение в ReactJS

Нека разгледаме по-отблизо JSX, ReactComponent, ReactDOM.render, Render функция. Ние конфигурираме и стартираме първото приложение, установяваме връзки между компоненти и обработваме събития.

Маршрутизиране и ReactJS

Какво е маршрутизиране; Нека се запознаем с ReactRouter и неговата функционалност; Ние организираме маршрутизиране в нашето приложение.