CSS-live.ru

Путь верстальщика. Год 2017.

Интро

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

Первое. Эта статья написана как попытка обновить или дополнить статью Максима Усачёва, написанную в 2012 году. Время течёт, времена меняются, поэтому хотелось бы добавить некоторые рассуждения.

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

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

Третье. В 2017 году сложно представить себе верстальщика, который умеет только верстать страницы, используя HTML, CSS и ничего больше. Индустрия и тенденции заставляют верстальщиков изучать JavaScript, что приводит к логическому развитию верстальщика во фронтенд-разработчика. Это логичный и нормальный путь. В 2017 году сложно представить себе верстальщика, который не умеет использовать JavaScript, и фронтенд-разработчика, который не умеет верстать. Любое из этих проявлений — отклонение от нормы. Учитывая это, правильнее было назвать эту статью «путь фронтенд-разработчика», но чтобы никого не пугать, и по причине того, что вёрстка — первая ступень развития фронтенд-разработчика, оставим название статьи таким, какое есть.

Четвёртое. Я буду часто ссылаться на свой опыт, прошу простить.

Начало

Любое действие начинается с принятия решения. В нашем случае это будет желание стать фронтенд-разработчиком или переквалифицироваться во фронтенд-разработчика из смежной профессии. Если вы приняли для себя такое решение — это означает четыре вещи:
  1. Вам сильно нравится эта сфера и сильно хочется развиваться по причине того, что вы чувствуете к этому интерес, а не возможность заработать. Если вам рассказали, что веб-разработка прибыльная сфера и вы ринулись сюда, чтобы зарабатывать деньги без любви к этому делу, то, скорее всего, ничего не получится.
  2. Вы готовы развиваться каждый день. От начала изучения языка и всю последующую профессиональную деятельность. Каждый день, приходя на работу, неважно сколько лет опыта за плечами, вы готовы саморазвиваться и узнавать новое. Веб не стоит на месте. Постоянно появляются новые технологии, которые сменяют устаревшие методы разработки, и вы просто будете вынуждены изучать новое. Если это не входит в планы, то в какой-то момент времени сфера сама выкинет вас по причине несоответствия стандартам.
  3. Вы осведомлены о том, что фронтенд-разработка начиная с самых основ вёрстки — это сложно. Существует огромное количество нюансов, только одной разметки страницы, на полное изучение и понимание которых может потребоваться много времени. Если вам рассказали, что это просто и за месяц вы станете отличным разработчиком, то это неправда. Я изучаю вёрстку уже больше семи лет и понимаю, что этот процесс не закончится никогда.
  4. Любой человек станет нормальным фронтенд-разработчиком при необходимой доле желания и усилий. Однако стать по-настоящему хорошими или крутым разработчиками доводится далеко не каждому. Эта сфера подразумевает наличие бэкграунда разработки, который может не пригодиться для знаний вёрстки, но пригодится для изучения JavaScript. Веб не закрывает двери ни для кого и даёт шанс научиться каждому. Но это шанс, а не гарантия.

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

Первые шаги

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

В 2017 году ситуация на рынке другая.

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

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

Книги? Некоторые книги представляют собой произведение искусства, которое хочется купить и поставить на полку просто для коллекции. Необходимость открывать книги в повседневной работе, чтобы найти там что-то, оказавшееся непонятным, практически исчезла. Достаточно вбить запрос в Google и получить ответ на вопрос из разных источников. Проблема книг в том, что они не несут ничего нового и повторяют тот контент, который можно найти в интернете. И это если говорить про оригинальные книги, написанные на английском языке. К моменту перевода и публикации на русском языке книги теряют актуальность. Не можете учиться без книги? Лучше купите в электронном виде, спасите дерево. Реальной же необходимости покупать книгу, в большинстве случаев, нет.

Самым интересным трендом современного обучения является то, что обучение веб-разработке уходит собственно в веб. 

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

Другое дела, что офлайн-курсов в принципе не так много, а те из них, что дают современный и хороший материал можно пересчитать по пальцам. Если вы считаете что онлайн-формат не для вас, то на вашем месте я бы попробовал в Москве Moscow Coding School, а в Санкт-Петербурге Epic Skills. Других хороших курсов и курсов в других городах, просто не знаю. Никто не рассказывал. Если знаете хорошие курсы в вашем городе, напишите об этом в комментариях.

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

При выборе онлайн-курсов стоит ориентироваться на компании. Хотя бы потому что компания не пропадёт с деньгами (надеюсь). Среди компаний тоже большой выбор, но я бы остановился на одном. HTML Academy. И это не потому, что был непосредственно связан с этим проектом и знаю как всё устроено. Это не единственный проект в котором я принимал участие. Просто на мой взгляд — это проект, у которого выстроена хорошая система обучения, связывающая качественную подачу материала, большое количество интерактивных туториалов, интерактивные курсы (которые доступны бесплатно) и работу с наставником. Интерактивные курсы HTML Academy советую пройти всем, кто начинает, независимо от того, где собираются проходить обучение. И да, HTML Academy это не единственные онлайн-курсы, и это не значит, что нет других курсов. Просто в качестве этого продукта я не сомневаюсь.

Среди онлайн-курсов, я бы ещё отметил курсы Hexlet, но они не дают курсы по вёрстке, а сразу по JavaScript. Так что к ним стоит вернуться чуть позже.

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

Отчаяние

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

Я советую в этот момент сделать передышку на два—три дня и ничего не делать, связанного с обучением. Конечно, если вы уже работаете и это момент застал на работе, то не стоит делать перерыв иначе вы рискуете быть уволенным.

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

Ложная эйфория

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

Проблема в том, что фундамент, который построен на предыдущем шаге, пока ещё недостаточно крепкий, чтобы начинать работать или строить на нём что-то ещё. Самый явный пример, который я встречал у себя в практике, это когда человек записывается на базовый интенсив, после которого с перерывом в одну неделю приходит на продвинутый. Там уже появляется БЭМ, компонентный подход, препроцессоры и так далее, а студент ещё плавает в разметке и сетке. Получается что человек много чего услышал, но мало чего усвоил.

Практика

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

Повышение квалификации

И вот после того, как специалист закрепляет навыки, можно переходить к изучению того, что необходимо современному верстальщику. Изучить адаптивную вёрстку, разобраться с компонентным подходом и вёрсткой по методологиям, адаптивной графикой, ретинизацией, векторной графикой, анимациями. Узнать современные спецификации CSS, такие как Custom Properties, Grid Layout, Box Alignment.

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

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

Помимо этого, есть продвинутые курсы, которые проставляет та же HTML Academy. Офлайн-курсов я, к сожалению, найти не смог. Хотя ребята из Epic Skills рассказали, что планируют перезапуск такого курса зимой. 

Что дальше?

А дальше, ребята, JavaScript. После предыдущего этапа получается хороший верстальщик, который готов создавать конкуренцию. Но мы пока не говорили о клиентской разработке.

И тут надо понимать что мы говорим о том, что фронтенд-разработчик должен знать JavaScript. Причём речь идёт не о библиотеках и фреймворках, а о базовых принципах языка. Как изучать? Это уже программирование, а значит требуется бэкграунд. Если его нет, надо подготовить.

Если говорить об обучении, то считаю что лучше http://learn.javascript.ru/, наверное, ничего нет. Огромный учебник, пошаговый, структурированный, с заданиями, с ответами. Попробуйте пройти этот учебник. Решить все задачи. Для получения базы этого достаточно. Одновременно советую обращаться к MDN как к дополнительному справочнику.

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

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

Читайте зарубежные источники. Читайте статьи на CSS-Tricks, Codrops. Подписывайтесь на наши популярные источники информации, например, Веб-стандарты, For Web. Читайте в них о новых технологиях, выбирайте интересные источники и подписывайтесь на них отдельно, слушайте подкасты. Будьте в теме и в тренде современных технологий.

Посещайте тематические митапы и конференции. Не бойтесь платить за конференции, потому что вы получаете гораздо больше чем просто потраченное время. Конференции — это материал, общение, участие в сообществе. Считаете что уже достаточно сильно прокачались, чтобы о чём-то рассказать? Начинайте выступать. Развитие не должно останавливаться никогда. Если вы выбрали этот путь, уже не уйти от постоянного развития, если хотите стать профессионалом своего дела.

И помните, что всё описанное выше — это не результат двух–трёх месяцев работы. Чтобы дойти до верха необходимо не один и не два года. Но если вы будете делать всё правильно, самообразовываться, не отчаиваться и отдаваться этой профессии, то в конечном счёте будете вознаграждены.

P.S.

Отдельное спасибо Илье Стрельцыну и Максиму Усачёву за вычитку. Моей Насте спасибо за вдохновение.

P.S. Это тоже может быть интересно:

53 комментария

    1. возможно, но по ссылке серия видеоуроков. На самом ресурсе информация не структурирована, то есть чтобы уложить её по порядку необходимо потратить время. На learn же всё готово, разложено по полочкам и с закрепляющим материалом. Хотя, возможно, я не до конца знаю всё о Lynda.

  1. А как 2 пункт ( постоянное развитие ) коррелируется c не все люди способны обучаться в онлайн-режиме.
    То есть для получения какой то новой фундаментальной базы такой индивид будет каждый раз уходить на курсы.
    Нет я конечно понимаю что есть такой тип людей, которых надо «за ручку» вести НО и совершенно точно нечего делать в нашей профессии … Если человек не смог сам разобраться в азах, то грамотным специалистом ему не быть НИкогда… Ну вот такое мнение у меня, возможно ошибочное …

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

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

      Я не согласен с тем, что

      Если человек не смог сам разобраться в азах

      Есть люди которых надо и моно раскрыть как специалистов. И они не раскрылись бы как специалисты, если бы им не помогли освоить базу. Дальше да, он должен уже уметь или учиться собирать информацию сам.

      1. Ох, мне ни какие курсы не помогут, пока сама не попробую, не потыкаю. Есть проблема — буду искать её решение. Не могу себя заставить даже читать то, что в скором времени мне не понадобиться. А http://learn.javascript.ru/ бесспорно лучший.

    2. Если человек не смог сам разобраться в азах, то грамотным специалистом ему не быть НИкогда…
      Может в таком случае упразднить образовательные учреждения?

      1. Может в таком случае упразднить образовательные учреждения?
        Смысл ВУЗов не в том чтобы дать вам основы каких то фундаментальных знаний,а в том чтобы
        научить находить, систематизировать и усваивать эти знания самостоятельно! К слову, получение диплома, как и его отсутствие вовсе не гарантирует того что вы этот скил в себе разовьёте.
        Так что ответ да, вполне можно упразднить.

        1. Для любого более-менее серьёзного занятия фундаментальные знания ой как нужны. И освоить с бухты-барахты на «необходимой» глубине ой как не просто. И, главное, когда этот фундамент есть, у Вас есть представление «сколько Вы не знаете» и это здорово помогает чувствовать направление приложения усилий. ИМХО.

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

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

        Хотя бы потому что компания не пропадёт с деньгами (надеюсь).
        С запятыми разберитесь.

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

        Справочники, туториал, порталы, YouTube-каналы.

        С единственным/множественным числом определитесь.

        Другое дела,

        это не единственные онлайн-курсы, и это не назначит, что нет других

        курсов от отдельных специалистов

        Правильнее «курсов отдельных специалистов»

        предоставляют информацию в структурированного виде.

        потеря их структуризации

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

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

          1. очевидно, вы вообще не относитесь к миру разработки, иначе бы понимали ценность таких «мелочей», как запятые, точки с запятыми, табы и т.д.

            1. «2 человека вычитывали перед публикацией и столько ошибок, жесть.»

              Хе-хе. Про запятые говорит, а сам их не ставит. Смешно видеть таких умников.

        1. Спасибо автору за статью. Внесу свои 5 копеек в корректировку опечаток:

          …продвинутые курсы, которые проставляет предоставляет та же HTML…

  3. Отличная статья!

    Я бы добавил что выбор источника очень важен, плохой источник может не только пользы не принести, но и сделать наоборот. Сам через это прошел. Минус 2-3 года, т.к выбрал другую ветку, а уже потом пошел в веб. Правда в то время полезную информацию было тяжелей найти. Возможно если бы это произошло сейчас, то было бы по-другому. Источников стало больше, сомнительные правда также добавились, но сейчас их проще отличить друг от друга.
    А вот книги по HTML/CSS действительно зло. Англоязычные — 2-3 года отставания, переводные — лет 5, а самописные — это «как правильно использовать теги font и center».

    MDN — еще отличный актуальный справочник по CSS/HTML.

    1. Не дочитал до конца перед тем как начать писать.

      Еще такая мысль возникла
      Курсы действительно оптимальный вариант. Но чтобы пойти на курс (пусть и онлайн), нужно понять что это тебе интересно. Но чтобы понять что это интересно, нужно пойти на курс, который снаружи черный ящик с абстрактным описанием того что внутри.

      Получается нужно изначально наткнуться на «начинку» (хорошую статью, например) и дальше принять решение, или если не повезло — пройти мимо.

      1. Вот тут я согласна. Тем более многие курсы часто предлагают пробные занятия бесплатные или презентации курсов, где можно прийти и узнать о самой специальности подробнее, нужно ли это тебе, нравится или нет. Я так же и попала в IT Avenue. У них была целая неделя презентаций перед стартом курсов, я, если честно, была на всех 6? Ну а что, бесплатно же, никакая инфа лишней не будет. А тем более если ты хочешь в сферу айти, то нужно хоть немного ориентироваться. В итоге мне ближе всего оказался курс веб-дизайна, на который я потом ходила.

    2. Англоязычные — 2-3 года отставания, переводные — лет 5

      Конкретный пример: флексбокс получил статус CR в 2016 году пруф
      В том же году вышла Новая большая книга CSS на русском с подробным описанием флексбокс.

      О каких 2-5 годах речь? Вы когда последний раз смотрели какую нибудь книгу? А в книге Бена Фрейна вообще куча таких вещей, которые на данный момент имеют слабую поддержку (директива @supports) или вообще даже не поддерживаются (:has).

      1. Я не помню, чтобы писал про такие разрывы. Даже в большой книге CSS нет ничего такого чего не найти в интернете.
        Зачем покупать книгу по Flex Box, если есть https://css-tricks.com/snippets/css/a-guide-to-flexbox/ полный гайд по ним, который даёт всё необходимое.

        Кстати у supports почти полная поддержка – 92 процента (http://caniuse.com/#feat=css-featurequeries), а псевдоселектор :has вроде исключили из спецификации псевдоселекторов 4 уровня. И по всему этому можно найти материал в интернете. Не хуже.

        1. Я отвечал на конкретный комментарий, а не на пост в целом.
          Зачем покупать книгу по Flex Box
          Затем, что она не только о флексбокс.
          Зачем покупать книгу по Flex Box
          Расскажите это пользователям IE
          :has вроде исключили из спецификации
          У :has статус CR (последнее обновление 17 августа 2017). Вот если бы читали книги, были бы в курсе.
          Хотя зачем читать. Можно написать не совсем компетентную статью и в комментах все расскажут.

          1. Там, где дубль о флексбокс, речь идет о саппортс. В ИЕ вообще не поддерживается.

          2. Почему же вы не пишете статьи, если вы такой компетентный? И да очень удобно переходить на личность, особенно если не знаешь человека и о его компетентности.

            Я не читаю книги, я читаю исходники спецификаций. Я прочитываю каждую новую спецификацию в поиске нового. :has висит в статусе кандидата уже два года и его не торопятся реализовывать.

            Про пользователей IE вообще слушать не хочу. ИЕ11 официально поддерживается, но новых функций в него не добавляется, так что это фактически мёртвая ветка браузеров и не важно сидит ли на нём некоторое количество пользователей, которые привыкли сидеть на старье.

            @supports нет в IE? Я вас огорчу, его там уже никогда не появится. Поэтому вы либо тыкаете палкой в то, что уже умерло, или идёте в ногу со временем.

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

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

              Давайте разойдемся на «слава htmlакадемии». Только промокод свой еще добавьте в статью.

              1. Не вам судить о моем уровне как преподавателя и как специалиста. Но если это тешит ваше самолюбие, можете считать так как считаете. Я свой уровень и своё место знаю.

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

  4. меня почему-то смущает, что в курсах htmlacademy обучают верстке сеток с помощью float-ов… пара слов о флексбоксах (в интенсиве побольше наверное), а о гридах — не нашла нигде (даже в интенсиве).
    флоты — не вчерашний еще день? а гриды — не сегодняшний? зачем обучать вчерашним технологиям?…

    1. Если вы про интерактивные курсы, то подробнейший курс по флексам из двух частей появился у нас ещё в 2015 году, так что флексам мы обучаем давно. Флоаты ещё остались в начальной части курсов. Их постепенно будем убирать, но тут всё упирается в гигантскую трудоёмкость обновления интерактивных курсов. Курсы по гридам мы уже давно хотим сделать, но пока не можем исключительно из-за технических ограничений.

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

      Про актуальность гридов в продакшне я бы ещё поспорил. Но уже планируем вводить обзор гридов на продвинутом HTML постепенно.

      1. Да, присматриваюсь как раз к интенсивам.
        Хорошо, что на них не тратите время на флоаты, но и «флексы — основной инструмент для сеток» — смущает. То есть основной упор на технологию, которая завтра станет вчерашним днем. Жаль немного времени своего. Или думаете [неполноценные для построения сеток] флексы будут еще долго актуальны? (когда гриды уже есть:) )

        Это был «камушек» автору поста, который горячо рекомендует вас. Может я что-то не понимаю, но хотелось бы идти в ногу со временем, особенно, когда за это платишь)

        1. Камушек в автора поста особо не получится, по той причине, что будущее за раскладками на CSS Grid Layout. Но на Grid Layout будут строиться крупные сетки и раскладка страницы целиком. Всё остальное будет на флексах. Grid Layout это не панацея. Они прекрасны, но они закрывают свою нишу. Нет смысла пихать их в каждую сетку, в том числе в мелкую. Будущее как раз связкой CSS Grid Layout + Flexbox + Box Alignment 4 уровня. Это то, что мы будем использовать в будущем.

          И называть Flexbox – неполноценные для построения сеток – это как то слишком. Возможно вы чего-то действительно не понимаете.

          Плюс до того момента когда все соберутся с силами перейти на Grid Layout в продакшен ещё полно времени.

          1. я и имею в виду «раскладку страницы целиком». флексы для этого не подходят.

            1. Отлично подходят для раскладки страницы. По сути сейчас они используются для раскладки всей страницы. Grid просто позволяет делать это быстрее и удобнее. Но Flex при этом отлично решают данную задачу.

                1. а в чём проблема? То есть вы считаете, что float лучше подходит для раскладки страницы чем Flex? При том, что float изначально вообще придуман как инструмент для обтекания картинок, и то, что его используют для сеток это костыль, который придумали верстальщики.

                  1. если только флекс во флексе.
                    я считаю, что лучше грид.

                    флоаты -> флексы -> гриды, все стремительно меняется. суть в том, что рекомендованные вами курсы не учат «новым» технологиям. (и препроцессоры скоро отомрут, потому что css сам на месте не стоит)

                    1. Очень сложно общаться с вами, так как вы не понимаете процессов и тенденций, которые происходят. Гриды не пришли на замену флексам, а идут в симбиозе с ними. Плюс на данный момент Гриды активно не используются и удут использоваться через какое-то время.

                      Нет никакого смысла уделять огромное количество времени ан курсах под Гриды, если после курса студент не сможет их использовать. А вот флексы были актуальны уже давно, актуальны сейчас и будут актуальны ещё очень долго. Поэтому давать их сейчас необходимо. Чтобы после выхода студент мог работать в современном мире.

                      Препроцессоры тоже скоро отомрут, но этот процесс займёт больше времени чем полный приход Гридов. В реальном мире 90 процентов компаний используют препроцессоры и с ними знакомить необходимо.

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

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

                    2. Да, мне тоже css-переменные кажутся очень перспективными, хотя они почему-то появились как-то тихо…

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

        3. По поводу флексов и их устаревания.

          Думаю, в конечном счёте у всех типов боксов останется своя ниша.

          Блочные, строчные и блочно-строчные останутся на уровне оформления крупных массивов текстов. Так как без схлопывания маргинов там никуда. Блочно-строчные, кстати, вполне могли бы быть убиты флексами. Но есть одно но: флекс всегда требует обёртку. А блочно-строчный элемент где-то в тексте удобнее без обёртки.

          Флексы останутся на уровне микросеток (карточные раскладки, менюшки, в которых пункты рядом или разрываются по разным сторонам и так далее). И, думаю, на уровне простых сеток флексы тоже останутся. Тут всё от предпочтений верстальщика зависит.

          Ну а гриды для сложных сеток, в частности, и для сеток вообще будут. Через пару лет туда доползём.

          1. Александр:

            Но есть одно но: флекс всегда требует обёртку. А блочно-строчный элемент где-то в тексте удобнее без обёртки.

            А что скажете насчёт display: inline-flex?

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

              В этом случае inline-flex, как и обычный flex, будет требовать два элемента. Сам инлайн-флекс-контейнер и внутри него флекс-элемент, который мы будем стилизовать как кнопку. Ну это если я не ошибаюсь. Как вариант, можно на сам инлайн-флекс-контейнер навешивать стили и сразу же из него делать кнопку. Но пока это слишком странно и непривычно звучит =)

    2. Лично мне кажется, что флоаты всё-таки нужно знать, хотя бы для общего развития. Не такая сложная технология, но в некоторых случаях, она может оказаться наиболее удобной.
      А вообще, лично мне, базовым представляется всеразличные контексты форматирования. То есть, если понять, как и что отрисовывается, то преспокойно можно от флоатов дойти гридов, изучив попутно флексбокс и прочее.

        1. Так я и говорю — как дополнение, которое, в некоторых ситуациях, неожиданно, может оказаться наиболее удобным.

  5. Всем привет, возможно кто-то знает хорошие офлайн-курсы по фронт-энд разработке в Киеве, поделитесь, спасибо:)

  6. Я, конечно, извиняюсь, и ничего не имею против хороших курсов, если они, действительно такие (ну а почему нет?), но всё-таки, чем плох, для новичков старый-добрый всем-известный сайт Влада Мержевича? я про хтмльбук.ру, там есть три онлайн-книжки, по хтмль, css и собственно, вёрстке, а также достаточно заданий для самостоятельной работы. ну и его новый сайт, вебреф туда же, особенно мне нравится «HTML5 и CSS3 на примерах», позволяет как бы увидеть, как оно вообще бывает, что очень важно, поскольку вырабатываются какие-то внутренние критерии, позволяющие значительно более полноценно воспринимать и более сложную информацию, например, просматривать теже спецификации и не теряться сразу, а как раз прикидывать, как оно может быть в той или иной ситуации, и уверенно ориентироваться «в какую сторону смотреть», чтоб убедиться в своём предположении и, по необходимости, его скорректировать (или задать более-менее внятный вопрос на форуме).
    Для флексбоксов есть статья и лягушатник, при понимании основ, воспринимается, как по-маслу.

  7. Отличная статья, все честно и по существу разложили.

    Я сам когда начинал разбираться с версткой на многие грабли наступил. Сейчас уже таких траблов нету.

    Курсы нужны однозначно или если совсем туго с $ то можно попробовать по видео урокам и бесплатным вебинарам посмотреть. Если что могу помочь с материалами, обращайтесь с личку, скину парочку матераилов, а для тех кто уже начал практиковать еще и работу ;)  — https://pchel.net/u/artteh/

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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