Данный курс построен по методу: «вот что гуглить», т.е конкретных определений здесь нет, но есть материал, который нужно освоить и ссылки на ресурсы для изучения. После каждого задания обязательно выполнение практического задания. В зависимости от уровня знаний промежуточные задания можно пропускать.

Содержание курса:

  1. Советы и По
  2. Основы вёрстки a. Теория b. Html c. Css d. Задание
  3. Front-end a. Теория b. CSS-препроцессоры c. JavaScript d. VueJs e. Задание
  4. Back-end a. Теория php b. Работа с функциями/массивами/файлами c. Работа с бд d. Теория python e. Задание по php f. Задание по python
  5. Куда двигаться дальше? a. Laravel 5 b. WordPress c. Prestashop d. Битрикс e. NodeJs f. Npm g. Ruby on rails

Советы и По

Советы:

• Гугли • Гугли на английском • Делай заметки у себя в блокноте о новой информации • Не используй ctrl+c ctrl+v • Задавай вопросы

ПО: Удобный текстовый редактор: sublime, vscode, блокнот. Git – средство контроля версий https://bitbucket.org/ https://github.com/ Open server, Denver, lamp - серверы Koala – ruby компилятор sass препроцессора Inkscape – для векторной графики Для быстрого создания макетов: https://wireframe.cc/ Для вёрстки: https://studio.psdetch.com/ аналог https://avocode.com/ Фотошоп: https://yadi.sk/d/neezZt3o3G69Kn Компилятор online: https://codepen.io/

Основы вёрстки

Что искать:

  1. Структура HTML документа
    1. Тег
    2. Атрибут
    3. Структура
    4. Тег <!DOCTYPE>
    5. Тег <html>
    6. Тег <head>
    7. Тег <title>
    8. Тег <meta>
    9. Тег <style>
    10. Тег <link>
    11. Тег <script>
    12. Тег <base>
    13. Тег <body>
    14. Тег <!-- -->
  2. Форматирование текста
    1. Заголовки
    2. Разделение текста на абзацы и перенос строки
    3. Выделение текста курсивом
    4. Выделение текста полужирным шрифтом
    5. Выделение текста подчеркиванием
    6. Вывод текста моноширинным шрифтом
    7. Вывод текста в верхнем и нижнем индексах
    8. Тег и его параметры
    9. Тег
  3. Ссылки в html
    1. тег
    2. Абсолютные и относительные ссылки
    3. Ссылка к заданному месту текста (якорь)
  4. HTML-списки для структурирования информации
    1. Маркированный список
    2. Нумерованный список
    3. Список определений
    4. Вложенный список
    5. Многоуровневый нумерованный список
  5. Работа с изображениями
    1. Вставка изображения
    2. Выравнивание изображения
    3. Размер изображения
    4. Отделение изображения от текста
  6. Работа с таблицами
    1. Что такое таблица
    2. Создание таблицы
    3. Объединение ячеек таблицы

Где искать:

http://htmlbook.ru/ https://htmlacademy.ru/ https://html5book.ru https://www.w3schools.com/html

HTML Шаблон:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>

</body> </html>

Промежуточное задание:

Создать html страницу, на которой бы были бы: Header (шапка сайта), H1, 2xH2, 2xUl(списки), 3xP(абзаца), 2xA(ссылки), IMG и footer А также form с 3мя input типа текст, textarea и кнопкой.

Пример: http://motherfuckingwebsite.com/

CSS

<style> * { color: red; } </style> Ссылки:

https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics http://htmlbook.ru/samcss Создание сетки Сss: https://htmlacademy.ru/courses/41/run/7

Изучение основных стилей

  • Color/background
  • Margin
  • Padding
  • Display
  • Width
  • Height
  • Border
  • Position
  • Top/left/…
  • Float
  • Font-…
  • letter-spacing

Изучение «продвинутых» стилей

  • Cursor
  • vertical-align
  • text-align
  • opacity
  • overflow
  • box-shadow
  • list-style
  • z-index
  • min-/max-

Изучение анимации в css

  • @keyframes / from / to
  • Transition
  • Animation

Селекторы CSS

Статья: https://learn.javascript.ru/css-selectors

Важно знать:

  • :hover, :focus, :active
  • ::before, ::after

Промежуточное задание:

Оформить css стилями тот HTML шаблон, из прошлого задания. (на свой вкус) -css сетка -стили текста -стили кнопок -фон Пример: http://images.all-free-download.com/free-website-templates-preview/green_thumb_60/

Практическое задание раздела:

Сверстать макет страницы, с использованием знаний HTML и CSS. Макет сайта см. в приложении.

Рекомендации по выполнению задания:

  1. Открыть шаблон
  2. Визуально оценить работу (сколько блоков, какие секции, какие картинки)
  3. Сделать HTML каркас страницы
  4. Добавить изображения/иконки
  5. Добавить стили