Prometheus

Що таке веб розробка, Front-end і back-end

1. Що таке веб розробка?

2. Front-end і back-end - в чому різниця?

3. Статичні та динамічні веб-сайти

Історія розвитку, поточна ситуація

1. Історія розвитку

2. Поточна ситуація

3. Процес веб розробки

4. Обов'язки та завдання Front-end розробника

Для закріплення знань дайте відповіть на ці запитання, після чого пройдіть тест.

• • 1. В чому різниця між front-end i back-end?

    2. Яка різниця між статичними і динамічними веб сторінками?

    3. Яке явище називають «браузерними війнами»?

    4. Назвіть основні стадії процесу веб розробки.

Тест

Як працюють Інтернет та веб браузери

1. Що таке WWW?

2. Браузери, в чому між ними різниця?

3. Як влаштований браузер?

4. Що відбувається, коли користувач вводить адресу в адресний рядок?

Для закріплення знань дайте відповіть на ці запитання, після чого пройдіть тест.

• • 1. В чому різниця між Всесвітньою Павутиною та Інтернетом?

    2. Назвіть основні веб браузери.

    3. Назвіть найпопулярніші мобільні браузери.

    4. Яку структуру має браузер?

    5. Постарайтесь відтворити процес завантаження веб-сторінки.

Тест

Середовища розробки

1. Загальний огляд редакторів та для чого вони потрібні

2. Online редактори

3. Offline редактори

4. HTML/CSS валідатори

Підготовка середовища розробки

1. Скачайте та встановіть один із варіантів smart середовищ розробки, рекомендуємо Sublime.

2. Налаштуйте середовище під Ваші потреби.

HTML

1. Загальний огляд HTML

2. Кістяк HTML документа

3. Базові теги

4. Блочні та лінійні елементи

5. Семантика. Елементи HTML5

6. Форматування тексту

7. Демо

Практичні завдання

Тест

Додаткові матеріали та ресурси

Online редактори коду:

• • JSFiddle: http://jsfiddle.net/

  • LiveWeave: http://liveweave.com/

  • CodePen.io: http://codepen.io

  • JsDo.it: http://jsdo.it/

  • Cloud9: https://c9.io/

Offline редактори коду

• • Notepad++: https://notepad-plus-plus.org/download/v6.8.3.html

  • Sublime: http://www.sublimetext.com/

  • Sublime Keyboard Shortcuts: http://benmccormick.org/content/images/2014/Jun/Sublime_cheat_sheet.png

  • Brackets: http://brackets.io/

  • Atom: https://atom.io/

IDE (Integrated Development Environment):

• • WebStorm: https://www.jetbrains.com/webstorm/

  • VisualStudio: https://www.visualstudio.com/

MDN(HTML): https://developer.mozilla.org/ru/docs/Web/Guide/HTML

MDN(CSS): https://developer.mozilla.org/ru/docs/Web/CSS

CSS Tricks: https://css-tricks.com/

Шпаргалка зі списком всіх CSS стилів: http://media.mediatemple.netdna-cdn.com/

Learn Layout(en): http://learnlayout.com/

Frontender: http://frontender.info/

CSS

1. Для чого потрібнен CSS

2. Синтаксис

3. Варіанти підключення CSS

4. Порядок застосування стилів

5. Селектори, важливість селекторів

6. Групування селекторів

7. Короткий запис

8. Відносні величини в CSS

1. Box model

2. Наслідування

3. Позиціонування

4. Правильний порядок присвоєння стилів