Курс по созданию сайтов с нуля

На первом занятии Вы узнаете:
- какие бывают сайты;
- все способы их разработки
- и, самое главное, из чего они строятся (увидите сайт изнутри).

Далее мы познакомимся и изучим все самые основные HTML теги, которые используются в верстке чаще всего (далее по ходу обучения, на других занятиях Вы узнаете обо всех HTML тегах).

Из данного урока Вы узнаете все виды тегов, какие они бывают и в чем их ключевое отличие.

Также мы расскажем Вам про атрибуты: какие они бывают и какова их цель.

Любая веб-страница имеет четкую иерархию и структуру.

Мы подробно разберем всю структуру HTML документа и теги, которые для этого необходимы.

Во второй половине занятия мы разберем все meta-теги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем

На данном занятии Вы узнаете:
- что такое CSS;
- для чего и как он используется;
- научимся подключать стили, различным способами.

Так как CSS свойств очень много, сначала мы выучим только самые основные, которые используются в верстке сайтов чаще всего. Остальные свойства Вы будете изучать постепенно на других занятиях.

При верстке сайта нам часто приходится работать с текстами, поэтому мы отобрали самые основные свойства CSS для работы с ними.

На 4 занятии Вы научитесь задавать различный дизайн тексту.

Практически на любом сайте приходится работать с фоновыми объектами и закрашивать различные блоки каким-либо цветом. Для этого используется свойство background.

Вы узнаете все возможности свойства background и научитесь делать градиент.

После того как Вы освоите основные теги и стили, мы перейдем к очень Важно теме "Модульная сетка".

Вы узнаете:
- зачем она нужна;
- в чем ее особенность;
- как правильно ее использовать.

Иногда на сайте необходимо создать таблицу с ячейками и колонками (как в Excel). Для этого случая в языках HTML и CSS есть целый ряд специальных тегов и свойств, которые дают широкие возможности для создания различных таблиц.

Вы изучите все HTML теги и CSS свойства для создания таблиц на сайте.

CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице.

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

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

Практически ни один сайт не обходится без каких-либо изображений. Поэтому при создании сайта Вам необходимо будет регулярно подбирать и редактировать для него картинки, иконки, иллюстрации и .т.д.

Мы подобрали очень большой список сервисов по подбору самых различных изображений, которые Вы будете использовать при создании сайтов совершенно бесплатно.

Часто после того, как Вы подобрали подходящее изображение, его необходимо отредактировать, подогнать по размеру, обрезать, вырезать задний фон и.т.д. Для этого отлично подойдет программа Photoshop. Мы покажем все основные инструменты для работы с картинками в Photoshop.

После данного занятия Вы:
- узнаете, виды форматов изображений;
- узнаете, какие форматы лучше всего подходят для сайта, а какие лучше не использовать;
- не будете задаваться вопросом, откуда взять изображения для сайта.
- освоите базовые навыки по работе с изображениями для сайта в программе Photoshop

Оптимизация изображений и ленивая загрузка - прямо влияют на производительность сайта, поэтому об этом должен знать каждый современный веб-разработчик.

С помощью определенный сервисов мы замерим производительность сайта и наглядно покажем, как изображения напрямую влияют на производительность. Далее оптимизируем изображения и произведем повторную проверку, чтобы наглядно увидеть разницу.

На занятии Вы:
- получите все необходимые сервисы для оптимизации изображений и научитесь ими пользоваться;
- с помощью Java Script научитесь устанавливать ленивую загрузку изображений для еще большей производительности.

Шрифты, как и изображения, играют очень важную роль при разработке сайтов. Практически для каждого современного сайта дизайнер подбирает уникальные шрифты, в зависимости от тематики сайта.

Мы подобрали очень большой список сервисов по подбору самых различных шрифтов, которые Вы будете использовать при создании сайтов совершенно бесплатно.

После данного занятия Вы:
- узнаете виды форматов шрифтов, формат, который используется в том или ином браузере;
- узнаете, какие шрифты лучше всего подходят для сайта, а какие лучше не использовать;
- не будете задаваться вопросом: откуда взять нужный шрифт для сайта?
- научитесь конвертировать шрифты и устанавливать их на сайт.

В языке CSS, как и во многих языках программирования, можно использовать переменные и функции.

После данного занятия Вы:
- научитесь создавать и использовать переменные;
- узнаете, в каких случаях лучше всего использовать переменные на практике;
- узнаете все основные функции CSS и научитесь их использовать.

Если Вам необходимо получить обратную связь от своих пользователей или заполнение какой-либо информации, то Вам необходима форма. К примеру: "оставить заявку", "купить", "заказать звонок", "написать письмо" и.т.д.

На данном уроке Вы:
- научитесь создавать формы любой сложности;
- узнаете все поля, которые можно использовать в форме (к примеру: поле для ввода текста, поле для ввода eMail, поле для ввода пароля, и т.д.);
- узнаете все необходимы атрибуты для настройки полей;

CSS Grid Layout — это самый мощный инструмент для создания разметки, который доступен в CSS на сегодняшний день. Это двумерная система, которая может содержать строки и столбцы (в отличии от модуля Flexbox, который, в целом, является одномерной системой). Предназначение Grid Layout — полностью изменить способ проектирования пользовательских интерфейсов, дизайн которых основан на сетке.

После данного занятия Вы:
- узнаете как работает Grid Layout;
- изучите все свойства и возможности Grid Layout;
- научитесь использовать Grid Layout на практике.

Фильтры в CSS необходимы для того, чтобы применять различные графические эффекты к элементу. Например: размытие, смещение цвета или возможность сделать изображение черно-белым (при этом оригинал изображения остается цветным, а на сайте отображается черно-белого цвета).

Фильтры которые Вы научитесь применять:
- размытие;
- яркость;
- контрастность;
- черно-белое изображение;
- негатив;
- смещение цвета;
- прозрачность;
- эффект, имитирующий старину и «ретро»;
- насыщенность цветов;
- размытие фона.

В первой половине занятия мы разберем свойство Transform, которое позволяет трансформировать объекты на сайте.

Вы научитесь:
- перемещать объекты в пространстве;
- масштабировать объекты;
- поворачивать объект в двухмерном и трёхмерном пространстве;
- осуществлять деформацию объекта;
- задавать перспективу;

Во второй половине занятия, на практике мы разберем все возможности CSS-свойства Transition, которое позволяет осуществлять плавные переходы.

На этом занятии Вы научитесь создавать различные анимации на сайте, тем самым делая его живым и более эффектным.

Вы научитесь реализовывать кросс-браузерные анимации на сайте.

Наверняка Вы встречали сайты, где элементы появляются в тот момент, когда Вы докручиваете до них. Именно этому Вы научитесь на данном уроке.

На данном занятии Вы узнаете:
- что такое псевдоклассы;
- что такое псевдоселекторы;
- как использовать селекторы атрибутов.

На сегодняшний день практически половина пользователей просматривают сайты с мобильных устройств. В связи с этим любой современный сайт должен быть адаптирован под мобильные устройства и планшеты.

На этом занятии Вы узнаете все об адаптивной верстке и научитесь оптимизировать сайты под любые устройства.

На данном занятии Вы научитесь разрабатывать различные слайдеры любой сложности

На курсе мы учим не просто создавать сайты, а создавать качественные и производительные сайты с быстрой скоростью загрузки, оптимизированные под поисковые системы и идеальной валидацией кода.

Чтобы этого достичь, мы используем целый ряд сервисов, которые позволяют определить производительность сайта и указывают на места, которые эту производительность снижают.

На данном уроке Вы не только узнаете все самые лучшие сервисы для проверки сайтов,
но и научитесь работать с ними и следовать тем рекомендациям, которые они предоставляют для улучшения производительности.

По окончании второго модуля (изучения HTML и CSS) Вы уже разработаете 3 сайта. На этом этапе для того, чтобы отредактировать контент на сайте (к примеру, изменить заголовок) Вам необходимо зайти в код и непосредственно в коде изменить текст заголовка.

Чтобы упростить задачу и не открывать постоянно код сайта, необходимо подключить систему управления, которая позволит изменить контент, не прибегая к коду.

На уроке мы расскажем и установим целых 2 системы управления сайтом, которые Вы сможете в дальнейшем использовать для своих проектов.

Так как PHP является серверным языком программирования, для работы с ним нам понадобится сервер, который будет интерпретировать наш код, иначе он просто не будет работать.

На данном занятии мы установим и настроим локальный сервер, который включает в себя:
- веб-сервер Apache
- интерпретатор PHP с поддержкой базы данных MySQL
-панель phpMyAdmin;
- эмулятор sendmail.

Все вышеупомянутые пункты мы подробно разберем на занятии.

Во второй половине занятия Вы напишете первые строки кода и запустите свою первую программу.

Переменные играют очень большую и важную роль в языке программирования PHP. Поэтому мы уделим данной теме отдельное занятие.

На занятии Вы узнаете:
- как создавать переменные и какую роль они играют в программировании;
- как создавать константы и чем они отличаются от переменных;
- все типы данных, которые существуют в языке PHP;
- основные функции для работы с переменными и типами данных.

На данном занятии Вы освоите все математические операторы для проведения различных расчетов и операторы сравнения.

На данном занятии Вы узнаете;
- как работает условный оператор ветвления (if);
- как работает тернарный оператор;
- когда и как использовать switch…case;
- все виды записи кода PHP в HTML.

Массивы (arrays) - это упорядоченные наборы данных, представляющие собой список однотипных элементов.

Существует два типа массивов, различающиеся по способу идентификации элементов.

В массивах первого типа элемент определяется индексом в последовательности. Такие массивы называются простыми массивами.

Массивы второго типа имеют ассоциативную природу, и для обращения к элементам используются ключи, логически связанные со значениями. Такие массивы называют ассоциативными массивами.

Важной особенностью PHP является то, что PHP, в отличие от других языков, позволяет создавать массивы любой сложности непосредственно в теле программы (скрипта).

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

На данном занятии Вы узнаете:
- для чего необходимы массивы $_GET и $_POST
- как получать данные с помощью массивов $_GET и $_POST;
- чем отличается $_GET от $_POST;

Функция — очень мощный инструмент повторного использования кода. Создав свою функцию и записав туда необходимый код, вы сможете вызывать и использовать его столько раз, сколько необходимо. В противном случае пришлось бы копировать и вставлять фрагмент кода каждый раз, когда он понадобится.

Разделяют два типа функций — встроенные и пользовательские.

Встроенные функции — это функции, которые за нас уже написали создатели языка программирования, и мы можем просто брать их и использовать. В PHP существуют тысячи готовых функций на все случаи жизни!

Пользовательские функции программист создает самостоятельно. Эти функции, как правило, используются только внутри одного проекта или, даже, сценария.

В данном уроке рассматривается область видимости переменных PHP. Объясняется различие локальной и глобальной области видимости, показывается. как получить доступ к глобальным переменным внутри функции, как работать с суперглобальными и создавать статические переменные.

Когда приступаешь к изучению PHP и начинаешь работать с функциями и объектами, область видимости переменных вызывает некоторое смущение. К счастью правила PHP в этом отношении очень просты для понимания (в сравнении с другими языками программирования)

Цикл — это конструкция языка, которая позволяет выполнить блок кода больше одного раза.

На занятии мы подробно разберем три цыкла:
- цикл с предусловием (while);
- цикл с постусловием (do-while);
- цикл со счетчиком (for);

Сессии являются простым способом хранения информации для отдельных пользователей с уникальным идентификатором сессии. Это может использоваться для сохранения состояния между запросами страниц. Идентификаторы сессий обычно отправляются браузеру через сессионный cookie и используются для получения имеющихся данных сессии. Отсутствие идентификатора сессии или сессионного cookie сообщает PHP о том, что необходимо создать новую сессию и сгенерировать новый идентификатор сессии.

Чтобы сделать программный код более удобочитаемым, Вы можете, к примеру, поместить определения функций и/или классов в отдельный файл. Возможность подключения файлов в PHP обеспечивают четыре языковые инструкции:

include
require
include_once
require_once

Во второй половине занятия мы рассмотрим суперглобальный массив $_SERVER, в который PHP-интерпретатор помещает переменные, полученные от сервера

Перед началом работы мы вместе с Вами установим Вордпресс на локальный сервер и дадим Вам подробный чек-лист по установке.

Во второй половине занятия Вы познакомитесь с административной панелью Вордпресс.

Данный урок будет посвящен «Темам».

На данном занятии Вы узнаете:
- как устанавливать тему;
- как загружать внешние темы;
- какие темы стоит выбирать, а какие нет;
- как осуществляется обновление системы и тем;
- для чего необходима дочерняя тема и как ее создавать;

На данном занятии Вы узнаете:

- что такое плагины и для чего они нужны;
- как устанавливать и активировать плагины;
- как загружать внешние плагины;
- как создать собственный плагин;
- как осуществляется обновление плагинов;
- для чего необходимы дочерние плагины и как их создавать;

Также Вы получите огромный список проверенных и необходимых плагинов.

На данном уроке Вы научитесь создавать уникальные шаблоны страниц и записей.

После того, как мы научимся создавать уникальные шаблоны страниц, мы подробно рассмотрим все встроеные функции для вывода контента (например: вывести изображение поста, заголовок страницы, краткое описание и т.д.

Как правило, стандартный контент страницы в Вордпресс состоит из:
- заголовка;
- изображения (миниатюра);
- описания;
- краткое описания.

Часто этого бывает не достаточно, и нам необходимы дополнительные поля (к примеру, мы хотим вывести галерею изображений, слайдер или цену и.т.д).

На данном уроке Вы научитесь создавать различные произвольные поля для вывода Вам того или иного контента.

Начинаем создавать наш первый сайт на WordPress. И логичнее всего начать с основных блоков: "header" и "footer", так как они не уникальные и на всех страницах отображаются одинаково.

Вы можете просмотреть макет сайта, который мы будем верстать на курсе

Просмотреть макет сайта

На данном занятии мы продолжаем верстать наш сайт, но уже создаем основной контент нашего сайта.

Вы можете просмотреть макет сайта, который мы будем верстать на курсе

Просмотреть макет сайта

В WopdPress два вида стандартных типов записей: страницы и посты. Иногда нам необходимы дополнительные типы записей (например: портфолио, отзывы, кейсы, какие-либо продукты и т.д.).

На данном уроке мы научимся создавать произвольные типы записей и таксономии (рубрики для произвольных типов записей).

На данном уроке мы изучим стандартные циклы WordPress для вывода страниц, постов и категорий в произвольном месте (например: на главной странице, на отдельной странице и т.д.).

На занятии мы подробно разберем и научимся работать с двумя очень полезными и популярными плагинами.

Первый, это Contact Form 7 - плагин, который позволяет создавать различные формы.

Второй, это Popup Maker - плагин, который позволяет создавать различные модальные (всплывающие) окна.

В WordPress всегда предусмотрены стандартные виджеты и меню, но иногда этого бывает не достаточно. Для этого мы научимся регистрировать произвольные и уникальные виджеты и меню.

После установки и активации плагина, мы расскажем Вам все его возможности, произведем первоначальные настройки и создадим свои первую категорию и товар.

Во второй половине занятия мы познакомимся с файловой структурой плагина (узнаем, какой файл отвечает за вывод категорий, товаров, корзины и т.д.).

И напоследок, перед началом создания интернет-магазина, мы создадим дочерний плагин.

Первым делом мы установим тему, которая разработанна под плагин Woocommerce, и сделаем дочернюю тему.

Далее, как и при создании Лендинга, мы начнем создавать интернет-магазин с блоков "header" и "footer".

Просмотреть макетинтернет-магазина

На данном занятии мы продолжаем верстать наш магазин, но уже создаем главную страницу.

Вы можете просмотреть макет интернет-магазина, который мы будем создавать на курсе

Просмотреть макетинтернет-магазина

Шорткоды - дословно «Короткий код». Это технология, которая позволяет настроить корреляцию длинной строчки кода с простой фразой в квадратных скобках, которую вы будете вставлять в код страницы сайта, и она будет выполнять абсолютно те же функции, что и длинная заранее подготовленная строчка.

У Woocommerce есть свой стандартный набор шорткодов, которые помогают быстро выводить ту или иную информацию на странице (например: вывести популярные товары на главной странице).

Помимо вывода товаров и категорий с помощью шорткодов, мы можем вывести определенные (или все) товары, категории с помощью стандартных циклов, которые мы подробно разберем на данном занятии

Практически у каждого интернет-магазина в каталоге присутствует фильтр для быстрого поиска нужного товара.

На данном занятии мы научимся создавать фильтры товаров и выводить его на сайте

Продолжаем создавать наш интернет-магазин.

На данном занятии мы полностью переделаем под свой дизайн страницу каталога и страницу категории товаров

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

За весь опыт работы мы наработали ряд очень полезных плагинов для более удобной работы и создания более функциональных интернет-магазинов.

На данном занятии, Вы познакомитесь с самыми популярными и необходимыми плагинами для Woocommerce и научитесь с ними работать.

Очень многие магазины осуществляют платную доставку и предоставляют онлайн оплату на сайте.

На этом уроке мы научимся производить все необходимые и тонкие настройки платной и бесплатной доставки. Научимся подключать и настраивать систему оплаты

После того, как мы сверстаем под свой дизайн главную страницу, страницу каталога, категории и товара, нам останется переделать и настроить под себя страницы корзины, оформление заказа и страницы "спасибо".

Мы определим, какие файлы отвечают за вывод той или иной страницы, и научимся их редактировать.

В заключении мы разберем стандартный функционал личного кабинета Woocommerce и файлы, которые отвечают за вывод той или иной информации в личном кабинете.