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

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

  • Советы и По
  • Основы вёрстки
  • Теория
  • Html
  • Css
  • Задание
  • Front-end
  • Файловые шаблоны и некоторые стандарты
  • Git
  • CSS-препроцессоры
  • Bootstrap
  • Структура
  • Сетки
  • Стили
  • JavaScript
  • Теория
  • Jquery
  • VueJs
  • Задание
  • Back-end
  • Теория php
  • Работа с функциями/массивами/файлами
  • Работа с бд
  • Теория python
  • Задание по php
  • Задание по python
  • Куда двигаться дальше?
  • Laravel 5
  • WordPress
  • Prestashop
  • Битрикс
  • NodeJs
  • Npm
  • 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/

Front-end

Поздравляю вас с успешным прохождением 1 раздела этого курса! Впереди ещё много интересного.

Файловые шаблоны и некоторые стандарты

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

Для это:

  • Использование стандартных файловых шаблонов (см. start_templ)
  • Стараться использовать понятные и поддерживаемые название для классов
  • Использование комментариев

Стартовые шаблоны для адаптивной верстки сайтов Чистые, готовые к бою HTML5 шаблоны (CSS и SASS), предназначенные для ускорения разработки современных адаптивных сайтов. Шаблоны содержат наиболее используемые и актуальные компоненты.

Что вошло в сборку:

  • Стартовая структура файлов, принятая большинством Front-End разработчиков.
  • index.html - индексный HTML файл, с первоначальной валидной разметкой;
  • Прелоадер для страниц
  • Стартовые CSS (SASS) файлы:
  • fonts.css (sass) - файл для подключения шрифтов с примером;
  • main.css (sass) - основные пользовательские стили;
  • media.css - файл медиа запросов для адаптивной верстки с первоначальной Desktop First и Mobile First структурой;
  • Подключенная и готовая к использованию библиотека миксинов Bourbon 
  • /fonts - Шрифт Roboto (eot, woff, ttf);
  • img/favicon - подключенные в index.html Apple-совместимые по размеру фавиконки (для примера).
  • mail.php - PHP скрипт для отправки заявок с сайта с примерной структурой;
  • js/common.js - пользовательский файл скриптов, включающий:
  • Структуру для настройки Google Analytics и Yandex.Metrika целей;
  • Фоллбек для SVG изображений, подключаемых тегом img;
  • Начальный скрипт для AJAX отправки форм с сайта;
  • Плавный скролл страниц в браузере Chrome (/plugins-scroll);
  • Отключение Drag изображений на страницах.
  • Включены следующие базовые jQuery плагины (/libs):
  • Animate.css / animate-css.js / Waypoints - плагины для простого добавления анимации на страницы при скролле;
  • Bootstrap - Полная и облегченная (bootstrap-grid.min.css) версия Bootstrap. В index.html подключена облегченная - только сетка, без JS и компонентов.
  • html5shiv - HTML5 в IE;
  • jQuery первой ветки;
  • modernizr;
  • Respond.js

GIT – система контроля версий

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

CSS-препроцессоры

Статья взята: https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/chapter_1/css-reprocessors.html

Определение

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

  • Читабельность для человека
  • Структурированность и логичность
  • Производительность

Синтаксический сахар

Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар». Синтаксический сахар (от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.

Какие бывают CSS-препроцессоры?

  • Less
  • Sass (SCSS)
  • Stylus И несколько незначительных для нас игроков:
  • Closure Stylesheets
  • CSS Crush Какой смысл использования препроцессоров? Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности. CSS — это сложно Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным. Структура и логичность кода Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:
  • Родительский селектор
    • Вложенный селектор
    • Вложенный селектор
      • Вложенный селектор
    • Вложенный селектор

Примеси

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

Модульность

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

Разновидности препроцессоров

-	Less
-	Sass (SCSS)
-	Stylus ### Less Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов. Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

  • SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

Stylus

Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript.

В своих проектах я использую SASS ©anko

CSS @media

Прочитай про media правила css тут: https://www.w3schools.com/CSSref/css3_pr_mediaquery.asp

Bootstrap

Ссылки для изучения и получения информации:

http://bootstrap-4.ru/docs/4.0/getting-started/introduction/
http://mybootstrap.ru/get-started/
https://itchief.ru/lessons/bootstrap-3/108-bootstrap-3-main-elements-for-meshing

Что нужно знать:

  • Сетка
  • Стили
  • Js возможности bootstrap

Bootstrap – это отличный фреймворк, для создания быстродействующих адаптивных сайтов. Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков Далее ты можешь найти шаблоны разбивки страницы на bootstrap блоки.

В бустрап входит не только сетка, но и стили, подробнее: http://mybootstrap.ru/base-css/ А также предлагаю тебе ознакомиться с js библиотекой: https://getbootstrap.com/docs/3.3/javascript/

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

Перенести свой проект с 1 раздела на bootstrap сетку

Что нужно знать:

  • Для чего JavaScript
  • Создание/удалние блоков html
  • Изменение css свойств блока
  • AJAX
  • Что такое:
  • Слайдер
  • Попап
  • Аккордеон
  • Слайд меню
  • Табы

Обязательно прочесть полностью статью: https://learn.javascript.ru/intro

Ссылки на информацию:

https://learn.javascript.ru/ 
https://html5book.ru/javascript-jquery/ https://jquery.com/ 
https://jqbook.net.ru/jquery
https://ru.vuejs.org/v2/guide/index.html

Что такое JavaScript?

JavaScript изначально создавался для того, чтобы сделать web-странички «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка – тут же выполняются.

Что умеет JavaScript?

  • Создавать новые HTML-теги, удалять существующие, менять стили элементов, прятать, показывать элементы и т.п.
  • Реагировать на действия посетителя, обрабатывать клики мыши, перемещения курсора, нажатия на клавиатуру и т.п.
  • Посылать запросы на сервер и загружать данные без перезагрузки страницы (эта технология называется “AJAX”).
  • Получать и устанавливать cookie, запрашивать данные, выводить сообщения…
  • …и многое, многое другое!
  • jQuery

jQuery — javascript библиотека, использование которой делает разработку javascript кода намного быстрее, проще и приятнее. Потратив некоторое время на попытки привнести динамическую функциональность на страницы вашего сайта, вы обнаружите, что постоянно следуете одному и тому же шаблону: сначала находите один или несколько элементов страницы, а затем выполняете над ними некоторые действия, такие как скрытие, изменение размеров, положения, прозрачности и.т.д. Используя обычный javascript для решения каждой из этих задач потребуется десятки строк программного кода (и много головной боли по поводу его правильной работы в разных браузерах). Автор jQuery разработал свою библиотеку таким образом, что наиболее общие задачи становятся тривиальными. Например, вот так, с помощью функции $() из библиотеки, можно находить элементы на странице по различным параметрам:

$("div") вернет все div-элементы на странице.

$(".someBlock") вернет все элементы с классом someBlock.

$("#content") вернет элемент с идентификатором content.

$("#content2 div.someBlock") вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2.

$("div:odd") вернет div-элементы, находящиеся на странице под нечетными номерами.

$("[value = 5]") вернет все элементы с атрибутом value, равным 5.

И это только малая часть всех возможностей для поиска элементов (полный список правил смотри в разделе селекторы). После выбора элементов, можно сразу же приступить к манипуляциями над ними, jQuery предоставляет для этого широкий ассортимент методов (см разделы манипуляции и эффекты). Приведем несколько наиболее востребованных: $("#bigIt").css("height") возвратит значение высоты у элемента с идентификатором bigIt.

$("div").css("width", "20px") установит новое значение ширины всем div-элемента на странице.

$("#bigIt").attr("class") возвратит значение класса элемента с id = bigIt.

$("#bigIt").attr("class", "box") установит новое значение атрибута class у элемента с id = bigIt.

$("#bigIt").html(<p>Новье!</p>) изменит все html-содержимое элемента с id = bigIt, на заданное в методе html.

$("#bigIt").text() возвратит текст, находящийся внутри элемента с id = bigIt.

$(".someBox").empty() очистить от содержимого элементы с классом someBox.

Таким образом, всего одной строкой кода, мы можем узнать или изменить css-значения, атрибуты, html и текстовое содержимое любых элементов на странице. Наличие только этих возможностей уже сделало бы jQuery незаменимой вещью. Однако эта библиотека позволяет делать гораздо больше, гораздо.

Функция $()

Функция с лаконичным именем $() является, пожалуй самой главной во всей библиотеке. С ее помощью можно находить элементы на странице (в чем вы уже убедились), добавлять “на лету” новый html: // создадим div-элемент и добавим его в конец элемента с идентификатором content

$("<div><p>Ба-бах!</p></div>").appendTo("#content");

Кроме этого, $() позволяет привязать всю функциональность jQuery к уже существующим объектам DOM-элементов: // найдем элемент с идентификатором some_id, средствами обычного javascript

var el = document.getElementById("some_id");   // установим у этого элемента новое значение css-свойства margin

$(el).css("margin", "5px");

Более подробно о функции можно посмотреть в специальной статье.

Начало работы скрипта

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

window.onload = function(){ // вызов нужных функций скрипта }

Однако onload происходит после того, как страница сформирована полностью, включая загрузку всех изображений, флеш-баннеров и видеороликов. В то время как структура дерева DOM (элементов страницы), с которой обычно и работает скрипт, оказывается готова гораздо раньше. В результате скрипт запускается значительно позднее чем мог бы. На этот случай в jQuery есть метод ready, вызов которого осуществляется в момент готовности дерева DOM:

$(document).ready( function(){ // вызов нужных функций скрипта });

Цепочки методов

Важной особенностью большинства методов jQuery, является возможность связывать их в цепочки. Методы, манипулирующие элементами документа, обычно возвращают эти объекты для дальнейшего использования, что позволяет писать примерно следующее:

$("#bigIt").empty().attr("class", "noContent"); // в результате, у элемента с идентификатором bigIt будет удалено все содержимое, // после чего ему будет установлен класс noContent. эти цепочки могут состоять из гораздо большего числа методов. Для удобочитаемости, цепочки часто пишут “в столбик”: $("div") // найдем все div-элементы .parent() // найдем их родительские элементы .css("heigth", "10px") // установим последним высоту в 10 пикселей .fadeTo(0, 0.5) // установим им (родителям div’ов) прозрачность в 50% .addClass("divOwner"); // добавим им же класс divOwner

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

Работа с набором элементов

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

$("div").parent() вернет родительские элементы всех div-ов.

$("div").children() вернет дочерние элементы всех div-ов.

$("#someId").next() вернет элемент, лежащий сразу после someId.

$("div").prev() вернет элементы, лежащие перед div’ами.

$("div").eq(i) вернет div-элемент, с индексом i в наборе.

$("div").get(i) вернет DOM-объект div’а, с индексом i.

$("div").get() вернет массив DOM-объеков всех div-ов.

$("div").size() вернет размер набора (количествово div-ов).

На самом деле, методов работающих с набором гораздо больше, их полный список можно найти в соответствующем разделе. Отметим различия методов get(i) и eq(i). Первый возвращает непосредственно DOM-объект элемента, идущего под номером i в наборе (кстати, нумерация начинается с 0). К такому элементу вы не сможете применить методы jQuery, зато сможете применить стандартные javascript методы. Метод eq(i) наоборот, возвращает i-й элемент в таком виде, что к нему можно применять методы jQuery. Вообще, для того, чтобы к элементам можно было применять методы библиотеки jQuery, они должны находиться в так называемом объекте jQuery, именно его возвращает функция $(). Рассмотрим отдельно метод .each(), предназначенный для поэлементной обработки набора. В качестве параметра, этот метод принимает пользовательскую функцию, которая будет автоматически вызвана, для каждого элемента набора:

var heights = []; // переменная, которая будет хранить высоты элементов   $("div").each(function(indx, element){ // indx - номер элемента в наборе, element - сам элемент heights.push($(element).height()); });   // в итоге, в переменную heights будут помещены значения высот всех div-элементов

Анимационные эффекты

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

.animate(properties, [duration], [easing], [callback])

properties — список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате {ключ:значение}, например:{opacity: 50, width: 100, height: 200}. duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением ‘fast’ или ‘slow’ (200 и 600 миллисекунд). easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: “linear” и “swing” (для равномерной анимации и анимации с ускорением). Другие варианты можно найти в плагинах. callback — функция, которая будет вызвана после завершения анимации. Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым:

$("#mydiv") .animate({height: "hide"}, 300) .text("Новый текст") .animate({height: "show"}, 300);

значения “hide”, “show” означают исчезновение и появление элемента, за счет параметра, к которому они применены. Существуют отдельные методы, позволяющие скрывать и показывать элементы, а так же, изменять их прозрачность. Все эти методы можно найти в разделе эффекты. Необходимо также заметить, что при одновременном вызове нескольких эффектов, применительно к одному элементу, их выполнение будет происходить не одновременно, а поочередно. Например при выполнении следующих команд:

$("#my-div").animate({height: "hide"}, 1000); $("#my-div").animate({height: "show"}, 1000);

элемент с идентификатором my-div, в начале будет плавно исчезать с экрана, а затем начнет плавно появляться вновь. Однако, анимации, заданные на разных элементах, будут выполняться одновременно:

$("#my-div-1").animate({height: "hide"}, 1000); $("#my-div-2").animate({height: "show"}, 1000);

VueJS

Vue.js представляет современный прогрессивный фреймворк, написанный на языке JavaScript и предназначенный для создания веб-приложений клиентского уровня. Основная сфера применения данного фреймворка - это создание и организация пользовательского интерфейса. Официальный сайт фреймворка - https://vuejs.org/, где можно найти непосредственно файлы фреймворка, а также сопроводительные материалы и документацию. Кроме того, сам проект доступен на github по адресу https://github.com/vuejs/vue. Vue.js имеет довольно небольшой размер - не более 20 кБ, и при этом обладает хорошей производительностью по сравнению с такими фреймворками как Angular или React. Поэтому неудивительно, что данный фреймворк в последнее время набирает обороты и становится все более популярным.

ВИДЕОУРОКИ ПО VueJS: https://www.youtube.com/playlist?list=PL5r0NkdgM0UOxb4Hl81FV5UIgexwTf8h7

Задание раздела:

  • Сверстать страницу по psd шаблону(шаблон см. приложение)
  • Добавь адаптивность
  • Добавить правила для мобильной версии
  • Добавить скрипты для: меню, кнопка «наверх», скролинг до секции(menu), если есть слайдеры и тд.

Критерии:

  • Одинаково хороший вид сайта на всех разрешениях экрана.
  • Показать умения использования BOOTSTRAP и JS