Курс HTML и CSS - верстка сайтов для чайников

Начальный путь обучения будущих веб-мастеров должен начинаться с курса по изучению HTML и CSS, ведь это и есть ядро интернет сайта. Для открытия самой простой странички не нужен будет ни дизайн, ни сервер, ни язык программирования, достаточно создать грамотную HTML-разметку текста и написать сам текст. Всё остальное служит для улучшения эффективности сайта, то есть чтобы сайт нравился людям, то необходимо нарисовать красивый дизайн; чтобы сайт был многофункциональным и динамичным - необходимо установить сервер и написать на языке программирования PHP код; чтобы сайт начали находить в поисковиках Google, Yandex и т.д. - необходимо грамотно и структурировано составить текст. Поэтому мы начинаем изучать создание сайтов с верстки сайтов, а именно написанию HTML-разметки.

Данный курс рассчитан как обязательный для всех. Уроки подойдут абсолютно всем, так как сложность будет расти по мере изучения основы html, а решать будем типовые задачи верстальщика на html примерах, и если до этого момента вы были чайником, то по окончанию курса вы без труда сможете ответить на вопрос "как сделать сайт html". Так же в этом курсе мы поверхностно изучим Photoshop - программа для работы с изображениями, это будет минимальный пакет джентльмена, необходимый для любого верстальщика. На последнем уроке мы сверстаем готовый HTML шаблон (готовый макет/дизайн сайта), а последним домашнем заданием будет самостоятельно выбрать из доступных шаблонов и сверстать полностью с нуля до конечного продукта!

Что такое HTML программирование? Создание сайтов в интернете начинается с дизайна. Дизайнер создаёт дизайн, который необходимо перевести в программный код: навигация, ссылки и кнопочки должны нажиматься, картинки должны быть независимыми с возможностью сохранять на компьютере, текст удобный и грамотно оформленный, его обязательно захотят выделить и сохранить для себя. Всем этим и занимается верстальщик, а именно пишет HTML разметку кода и CSS стили.

Курс HTML и CSS: ДЛЯ ЧАЙНИКОВ

Описание курса

Дата выпуска
11.11.2017

Продолжительность
20 часов

Уровень
Начинающий

Уроков
108

Домашних заданий
5

Начинаем изучать HTML, теги, атрибуты тегов и их свойства

Изучаем теги. Теги имеют атрибуты (правила), у атрибутов есть свойства.

Увеличиваем базу тегов, аттрибутов тегов, свойств тегов

Ещё больше тегов, Ещё больше Аттрибутов и их свойств

Детали верстки

Завершаем понимание верстки

Начинаем изучать CSS

Подключение CSS, Классы и имена, Идентификатор тегов, Изучаем много стилей

Табличная верстка

Table и всё о нём

Блочная верстка

Div и всё о нём

Начинаем изучать Photoshop, нарезаем шаблон

Стандартные инструменты, Нарезка картинок

Продолжаем изучать Photoshop, работаем с подготовленными шаблонами

Слои, Прозрачный фон, Закруглённые углы

Начинаем изучать PHP

Как устроен сервер, Переменные, Математические действия, Вывод переменных, Операторы и управляющие конструкции

Практикуемся с версткой

Практика верстки, Работаем с тенями, include - соединяем участки кода

Массивы и Циклы

Массивы, Циклы: while, do-while, for, foreach

Домен и хостинг

Хостинг, Домен, DNS, Сайт hostinger.ru, FTP-клиент Far, FTP-клиент FileZilla, Настройки сервера: phpinfo()

Пользовательские функции

Методы передачи данных GET и POST, работа с формами

Создать форму, Передача данных GET, Передача данных POST, Перехват переданных данных, Работа с данными, Отличиня GET и POST

Улучшаем качество кода, include+GET, Суперглобальные массивы

Ошибки домашек, Создаем навигацию include + GET, Изучаем область видимости переменных, Константы, $_REQUEST, $_SERVER, $GLOBALS, Самостоятельно изучаем пакет функций

Фильтрация данных, $_COOKIE, $_SESSION

Фильтрация данных, Безопасность при include, filter_var для адресов и email, int, float - для чисел, in_array для определённых множественных вариантов, $_COOKIE: Чтение, создание, редактирование и удаление, $_SESSION: Чтение, создание, редактирование и удаление

Ядро, структура сайта, MVC

Архитектура сайта, Ядро, Структура сайта, MVC, Шаблоны

База Данных MySQL. Основы

Как всё устроено, Создание БД, Создание пользователя, localhost, Создание таблиц, Частичная настройка и оптимизация таблиц

Запросы select, insert, update, delete

Разбираем структуру PMA, Создаем, редактируем и удаляем таблицы, Изучаем 4 главных команды: INSERT, UPDATE, DELETE, SELECT

Форма и работа PHP с MySQL

mysqli функции, Создаем формы на HTML, Обработка форм, Добавление данных в MySQL

Выборка из БД и вывод на экран

PHP + MySQLi + SELECT

Редактирование и удаление данных. 1 Модуль CMS

PHP + MySQLi + UPDATE + DELETE, Изучаем создание полноценного модуля в админке по добавлению, редактированию и удалению информации на сайте

Собственные функции, функция-оболочка, рекурсия

mysqli оболочка, Пишем свои функции, Рекурсионный вызов функций, array_map

Классы, autoload, и класс отправки писем

Классы, autoload, отправка писем, mail

Регистрация + Авторизация, установка прав доступа

Регистрация, Hash, авторизация, подтверждение по email, права доступа

Работа над ядром: ЧПУ и оптимизация

ЧПУ, Mode Rewrite, Абсолютные и относительные ссылки, Динамические meta-данные, CSS, JS, ob_start обфусикация

Создание админки, CMS

Создаем админку, CMS, Внешние и внутренние админки

Регулярные выражения

Регулярные выражения, Регулярки

Углубляемся в MySQL

Типы данных, Движки таблиц, Индексы

Загрузка файлов

Работа над статикой и ядром

Статичные страницы, Пару слов о Котерове, Анализ phpinfo, Работаем над движком

mysql связи один ко многим и многие ко многим

Создаём класс для работы с MySQL, Связь один ко многим, Связь многие ко многим

Находим аналогию между js и php

php и js почти не имеют отличий

ДОМ дерево, объекты и события

DOM структура HTML, Изучаем события в примерах

script в отдельном файле, консоль, setInterval и setTimeout

Отдельные файлы js, Кеш файлов, console, setInterval, setTimeout

Объекты наше всё. Аналогия ассоциативных массивов на PHP

Изучаем объекты и их синтаксис

Изучаем ajax и jQuery

Эффективность и необходимость jQuery, Простые AJAX запросы и ответы

Углубляемся в ajax и jQuery, JSON для массивов

JSON как передача массивов, Селекторы на jQuery, Готовимся к настоящему программированию сайтов

Окончание курса

Ajax и MVC, Болтаем о будущем

Начинаем знакомство с HTML5

Презентация нового курса, История развития интернета и html, Формируем структуру HTML

Установка и настройка работы с PHPStorm IDE и Open Server. GitHub, bower, FTP

Установка и настройка PHPStorm и Open Server, Устанавливаем плагины nodejs и ignore, Учимся работать с composer, bower, ftp и GitHub из IDE

CSS 3 тень, градиент, рамка и анимация

Особенности CSS3, тень, градиент, рамка, анимация

Less - предпроцессор CSS. Переменные, примеси, функции и вложенности. Работа в PHPStorm

Less - предпроцессор CSS, Переменные, Примеси, Функции, Условные операторы, Вложенности

Адаптивная вёрстка - примеры и теория

Теория адаптивной верстки, Фиксированный-резиновый-адаптивный макет, Мобильная версия против адаптивной

Адаптивная вёрстка - практика в примерах фотогалереи, колонки, меню

Адаптивная вёрстка, Адаптивная галерея, Адаптивные колонки, Адаптивное меню

HTML SEO теория поисковой оптимизации

Специализация сайта, Подборка ключевых слов, yandex wordstat, высокочастотные среднечастотные и низкочастотные запросы

HTML СЕО оптимизация на практике. Составление ключевых слов, выбор домена и работа с тегами

SEO оптимизация на практике, Составление ключевых слов, Подбор домена для сайта, Выделение ключевых слов через теги

Факторы ранжирования сайтов в google и yandex

Факторы домена, Факторы внутренней оптимизации сайта, Факторы качества ссылок, Факторы удобства пользователя, Социальные сети

Семантическая вёрстка

Семантическая вёрстка, body vs article vs section, main, header и nav, footer address и time

Адаптивная вёрстка HTML писем

Верстка HTML писем, Адаптивная верстка писем, Ограничения в верстке, Содержание писем

Подключение нестандартных Шрифтов в HTML на сайте

Подключение собственных Шрифтов в HTML, Знакомство с Google Fonts, Знакомство с Fontsquirrel, Советы

Bootstrap: framework и library. Компоненты и LESS

Bootstrap framework, Bootstrap library, Bootstrap компоненты, Bootstrap и LESS

Селекторы в HTML 5 и СSS 3

Flowplayer - видеоплеер, fancybox - фотогалерея, flash player, карты google и yandex

Flowplayer-проигрывание видео, Fancybox-фотогалерея, Flash player, Карты google и yandex

Микроразметка, словари, микроданные, микроформат и RDFa

Микроразметка и словари, Синтаксис микроразметки, Словари для микроразметок, Практика применения микроразметок

Загружаем сайт в интернет

Выбор домена и хостинга, Проверяем на ошибки html и css, Настраиваем работу сервера, Анализируем сайт в панели разработчика

Регистрируем сайт в Google и Yandex

Регистрируем сайт в Google webmaster и Yandex webmaster, Создаём robots.txt и sitemap.xml, Создаем структуру сайта и перелинковку, Компрессор css (.min.css) и js (.min.js) файлов

Литература для повышения квалификации по теме HTML5 и CSS3

Список литературы, статей и полезных ссылок

Настройка сервера - как выбрать сервер

Выбираем хостинг, Виртуальные хостинги, VPS и VDS, Dedicated Servers - выделенные сервера

Настройка сервера VPS и VDS: apache, php7, mysql, phpmyadmin

Устанавливаем веб-сервер Apache, Устанавливаем PHP 7 и MySQL, Устанавливаем PhpMyAdmin вручную

Настройка сервера: права доступа

Группы и пользователи, Права на файлы и папки, Настраиваем права сайта

Настройка сервера: ubuntu права и настройка почты

Установка и настройка postfix и dovecot, Устанавливаем squirrelmail

PHPStorm IDE и Open Server. GitHub, bower, FTP - Установка и настройка

Установка и настройка PHPStorm и Open Server, Устанавливаем плагины nodejs и ignore, Учимся работать с composer, bower, ftp и GitHub

Docker или Vagrant в PHPStorm

Установка Docker, Установка Vagrant, Настройка PHPStorm

School-PHP FrameWork

Что нового в FrameWork, Разбор структуры движка, Создание модулей и страниц, работа Sitemap

MySQL: Изучаем особые фишки работы с SELECT, INSERT, UPDATE, DELETE

SELECT с DISTINCT, HAVING, GROUP BY WITH ROLLUP, Множественный INSERT, INSERT ON DUPLICATE KEY UPDATE, DELETE с LIMIT

MySQL: Запросы к нескольким таблицам: подзапросы (subQuery), JOIN, LEFT JOIN, RIGHT JOIN

Запросы к нескольким связующим таблицами через JOIN (INNER JOIN) + LEFT JOIN + RIGHT JOIN, SubQuery и UNION

MySQL: Foreign keys (внешние ключи): CASCADE, SET NULL, RESTRICT, NO ACTON

Целостность данных, Foreign Keys (внешние ключи), CASCADE, SET NULL, RESTRICT (NO ACTION), OPTYMAZE, ANALYZE, REPAIR table

MySQL: Транзакции и полнотекстовые индексы

Транзакции, Уровни изоляции транзакций, Полнотекстовый индекс (поиск слов)

MySQL: Процедуры и функции

Переменные в MySQL, Процедуры (Procedure), Функции (Functions), IF-ELSE, WHILE, CURSOR

MySQL: События, Триггеры, Партиции и Репликации в MySQL

События EVENT, Триггеры TRIGGER, Введение в Партиции и Репликации, Журналирование медленных запросов

phpDocumentor и curl

phpDocumentor как документация к нашему коду, curl запросы методом POST с сервера к серверу в обход клиента

API и RESTful API

API и RESTful API, Создание API на нашем сервере, Как работать с авторизацией в социальных сетях

Платежные системы: ЯД, WebMoney, Robocassa и другие

Необходимые документы для работы с платежными системами, Подводные камни, с которыми лично столкнулся в ходе практики

Кэширование данных, Memcache, OPcache

Кэширование данных в файлах, MySQL, памяти, Memcache - интерфейс для кэша в памяти для PHP, OPcache - кэширования байт кода

ООП 1 Введение: Классы, методы, свойства

Синтаксис, Представление кода в виде взаимодействия объектов между собой, Область видимости private и public, Примеры на Uploader

ООП 2: Магические методы и try-catch-finally конструкция

Магические методы __construct и __destruct, __toString, __set и __get, методы set и get как заменители магических методов, try-catch-finally

ООП 3: Наследование и PHPMailer

Наследование в ООП, __construct и методов родителя, Изучаем PHPMailer, Пишем MailProxy, который наследует и дорабатывает PHPMailer

ООП 4: Interface (Интерфейс) и Abstract (Абстрактный класс)

Interface (Интерфейсы), Abstract Class (Абстрактные классы), Создание класса для работы с кэшем с использованием ООП

ООП 5: Namespace (Пространство имён)

Пространство имён в файловой системе и в PHP, Область видимости классов внутри другого namespace, use и alias для namespace

ООП 6: TRAIT (Трейты), патерны программирования и шаблоны проектирования

TRAIT (Трейты), Патерны программирования, Шаблоны проектирования, Singleton

ООП 7: Strategy (Стратегия) и Factory (Фабрика) шаблоны проектирования

Strategy (Стратегия, шаблон проектирования), Factory (Фабрика, шаблон проектирования)

ООП 8: Реестр (Registry), ActiveRecord, Data Mapper

Реестр (Registry), ActiveRecord, Data Mapper

ООП 9: SOLID

Single responsibility - Принцип единственной ответственности, Open/closed principle - Принцип открытости/закрытости, Liskov substitution principle - Принцип подстановки Барбары Лисков, Interface segregation principle - Принцип разделения интерфейса, Dependency inversion principle - Принцип инверсии зависимостей