Совет: c чего начать изучение вёрстки

Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.

Аркадий, привет!

Базовые знания — это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.

С чего начать?

Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.

Для начала необходимо попробовать. Понравилось? Можно начинать учить.

Установи редактор кода, например, Atom. Попробуй:

Как только сталкиваешься с проблемой — ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru.

Параллельно с вёрсткой старайся читать книги. У ребят из A List Apart есть серия книг для дизайнеров. Они короткие, написаны простым языком. Тебе будут полезны:

Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.

Иногда встречаются весёлые сообщения:

Если в процессе вёрстки что-то пошло не так, то открывай инспектор и ищи ошибку. Чтобы узнать как с ним работать — посмотри эти видео:

Когда начнешь уверенно чувствовать себя в вёрстке — переходи к изучению JavaScript. Cначала разберись с возможностями языка, а потом уже переходи к изучению библиотек и фреймворков.

Изучение языка советую начать с книги Дэвида Флэнагана — «JavaScript. Подробное руководство». Книга большая, но не пугайся. Читать целиком необязательно.

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

Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:

Что дальше?

Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS, LESS или Stylus. Автоматизируй сборку стилей и их обработку через Gulp или PostCSS.

Прочитай книгу про системы контроля версий: Pro Git.

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

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

Если решил крепко связать свою жизнь с фронтендом — запишись на курсы в HTML Academy.

Σ

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

Краткий чеклист:

  1. Придумать проект для вёрстки
  2. Начать верстать
  3. В процессе вёрстки читать книги, статьи и смотреть видео уроки
  4. Повторять до уровня, который тебя начнет устраивать

°°°

Задать вопрос

Эффективное использование mixin в LESS

Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS.
В этой записи пойдет речь о Mixin. О том, что это такое, я уже писал в одной из предыдущих записей про LESS.

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

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

Градиент

Задаем линейный градиент для элемента:

.gradient(@from: #000, @to: #fff) {
  background-color: @from;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
  background-image: -webkit-linear-gradient(top, @from, @to);
  background-image:    -moz-linear-gradient(top, @from, @to);
  background-image:      -o-linear-gradient(top, @from, @to);
  background-image:         linear-gradient(to bottom, @from, @to);
}

/* Пример использования */

@color: #E0F8D8;
.element{
    /* Фон с градиентом цвета от #E0F8D8 и до #9BE882 */
   .gradient(@color, darken(@color,20%));
}

Box-shadow

Добавляем тень к элементу. Добавлять тень можно внешнюю и внутренюю. Если @insert задать значение true, то элементу
задается внутреняя тень.

/* Внутреняя тень */
.box-shadow(@insert, @x: 0, @y: 0, @blur: 10px, @color: #666) when (@insert = true) {
  -webkit-box-shadow: inset @x @y @blur @color;
          box-shadow: inset @x @y @blur @color;
}

/* Внешняя тень */
.box-shadow(@insert, @x: 0, @y: 0, @blur: 10px, @color: #666) when (@insert = false) {
  -webkit-box-shadow: @x @y @blur @color;
          box-shadow: @x @y @blur @color;
}

/* Упрощенный вариант использования внейшей тени */
.box-shadow(@x: 0, @y: 0, @blur: 10px, @color: #666){
  -webkit-box-shadow: @arguments;
          box-shadow: @arguments;
}

/* Пример использования */

/* Внутреняя тень */
.element{
    .box-shadow(false, 2px, 2px, 20px, #999);
}

/* Если не указать @insert, то сгенерируется внешняя тень */
.element{
  .box-shadow(1px, 2px, 20px, #000);
}

Text-shadow

Добавляем тень к тексту:

.text-shadow(@x: 1px, @y: 1px, @radius: 2px, @color: #000){
  -webkit-text-shadow: @arguments;
     -moz-text-shadow: @arguments;
          text-shadow: @arguments;
}

/* Пример использования */

.element{
    .text-shadow;
}

Border-radius

Задаем радиус скругления элемента:

.border-radius(@r: 3px) {
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
  border-radius: @r;
}
/* Пример использования */

.element{
    .border-radius(10px);
}

Column

@count — определяет количество колонок в многоколоночном тексте, а @gap — задаёт расстояние между колонками.

.column(@count: 3, @gap: 1em) {
  -webkit-column-count: @count; -webkit-column-gap: @gap;
     -moz-column-count: @count;    -moz-column-gap: @gap;
          column-count: @count;         column-gap: @gap;
}

/* Пример использования */

.element{
    /*
        Текст будет разбит на две колонки,
        отступ между ними будет составлять 1.8em
    */
    .column(2, 1.8em);
}

Transition

Устанавливаем эффект перехода между двумя состояниями элемента (например обычным состоянием и :hover):

.transition(@property: all, @duration: 0.3s, @function: linear) {
  -webkit-transition: @arguments;
     -moz-transition: @arguments;
       -o-transition: @arguments;
          transition: @arguments;
}

/* пример использования */

a {
  color: #008dd2;
  text-decoration: none;
  .transition(color, 0.2s, linear);
  &:hover {
    text-decoration: none;
    color: #1a171b;
  }
}

Transform

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

.transform(@value) {
  -webkit-transform: @value;
     -moz-transform: @value;
      -ms-transform: @value;
       -o-transform: @value;
          transform: @value;
}

/* Пример использования */

/* Увеличим элемент в два раза */
.element{
    .transform(scale(2,2));
}

/* Изменение элемента при наведении */
.element{
  /* Для плавности добавим .transition */
  .transition;
  &:hover{
    .transform(scale(2,2));
  }
}

/*
    Необходимо при наведении не только увеличить элемент,
    но и повернуть его на 10 градусов? Легко!
*/
.element{
  .transition;
  &:hover{
    .transform(rotate(10deg) scale(2,2));
    /* (!) Запятую между функциями ставить не нужно */
  }
}

Opacity

Задаем прозрачность элементу:

.opacity (@opacity: 0.5) {
  -webkit-opacity: @opacity;
     -moz-opacity: @opacity;
          opacity: @opacity;
}

/* Пример использования */

/* При наведении элемент становится прозрачным */
.element{
    .opacity(1);
    &:hover{
        .opacity(0.8)
    }
}

Box sizing

Свойство применяется для изменения алгоритма расчета ширины и высоты элемента.

.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	   -moz-box-sizing: @type;
	        box-sizing: @type;
}

/* Пример использования */
.element{
    .box-sizing;
}

Не обязательно использовать все миксины в одном проекте, достаточно добавить в LESS-файл только те, которые вам точно пригодятся.
Для удобства список всех миксинов вынес в mixin.less.

Приятой верстки!

Обновил: добавил миксины .opacity и box-sizing.