Контакты

Хорошие уроки верстки. Адаптивная верстка: уроки или сразу в бой? Устанавливаем базовое форматирование

  • 02.03.2024

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

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

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

Существует два типа верстки: блочная и табличная. На заре времен верстка строилась в виде таблиц. Сперва создавалась всего одна, большая.

В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

Внизу размещается футер. Его используют и сейчас. Сюда, как правило, вставляют небольшие ссылочки на контакты, вакансии, информацию «О нас». Могут прилепить даты существования ресурса или просто магическое слово «copyright», которым разработчики надеются указать или защитить свое авторское право. Пользы от него как от подковы, висящей над дверью, может отпугнуть только вурдалаков, хотя они, как правило, в футер и не заглядывают.

Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

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

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

Пошаговая инструкция: как делаются сайты

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

Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».

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

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

Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

Я сделал этот вариант за минуту, он не правильный. Просто хотелось вам показать примерный результат. Вы можете скачать электронную версию моего psd-макета (скачать ) и попробовать сделать свою, правильную версию, посмотрите, какие картинки пригодятся для размещения и как вы их будете вырезать. Заодно попробуете поработать самостоятельно над шаблоном в photoshop.

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

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

Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

Работы над сайтом обычно не начинаются с создания файла style.css, но думаю что так вам будет интереснее. Это основной документ, в котором описывается как именно будет выглядеть ваш портал. Все просто. Даже английский учить не обязательно.

Background – это цвет фона.

Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.

Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать ).

Получится примерно такой вариант.

Поздравляю. Это ваша первая страница в интернете! Вы сделали ее, у вас получилось. Естественно, что вместо цвета можно вставить и картинку, которая была вырезана из фотошопа в документ images. Для этого нужно просто прописать путь. Как вы видите, ничего супер сложного тут нет.

И напоследок… качаем видео уроки

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

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

  • Html — уроки для начинающих .
  • Css — уроки для начинающих .
  • Бесплатный мини-курс по вёрстке сайта .

    • Желаю вам успехов в ваших начинаниях. Уверен, что совсем скоро вы начнете не только учиться, но и работать онлайн, а также реализовывать невероятные проекты!

    Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных материалов для совершенствования собственных навыков!

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

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

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

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

    Чем отличается адаптивная верстка от других подходов к верстке сайта?

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

    JavaScript. Быстрый старт

    Изучите основы JavaScript на практическом примере по созданию веб-приложения

    фиксированная верстка. Блоки не поменяют свою ширину даже при изменении размера окна браузера. При просмотре сайта на мониторе с низким расширением появится полоса прокрутки;

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

    С точки зрения SEO адаптивная верстка также имеет свои преимущества. Здесь соблюдается принцип «один сайт - один адрес», в отличие от варианта с созданием мобильной версии. В случае с мобильной версией приходится отдельно нарабатывать репутацию и посещаемость ресурса. Так как страницы мобильных версий часто «склеены» с основными сайтами, они не очень хорошо ранжируются поисковиками. Адаптивный дизайн и верстка позволят всю ссылочную массу сосредоточить на одном единственном ресурсе.

    Что нужно знать специалисту по адаптивной верстке.

    Чтобы научиться адаптивной верстке, следует иметь хороший уровень знания HTML, CSS и . Отвечая на вопрос, заложенный в теме статьи: теорию нужно совмещать с практикой уже с начала обучения. Идеальный вариант - это видео уроки по адаптивной верстке, делающие упор на практические занятия, сложность которых растет по мере изучения основ.

    К минимальному пакету джентльмена верстальщика также относится Adobe Photoshop и основы работы с изображениями. Если вы готовитесь верстать проекты не крупнее одностраничников, то можете использовать Adobe Muse и подобные ему инструменты.

    Базовые навыки верстки приобретаются достаточно быстро. Разобраться с HTML и CSS не займет много времени. Вначале могут быть сложности с осваиванием JavaScript, однако, они компенсируются наличием огромного количества плагинов и других готовых решений на все случаи жизни.

    Где находится грань между версткой, веб-дизайном и фронтендом?

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

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

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

    Фреймворки и препроцессоры: быть или не быть?

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

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

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

    Еще один совет: экономьте время на написание CSS с помощью препроцессора. И это очень важно, независимо, используете вы какой-нибудь фреймворк, или нет. Так как 60-70% верстки занимает написание CSS, этот этап логично автоматизировать. Я лично пользуюсь препроцессором Sass, однако, вы можете использовать любой другой, что вам подходит.

    Здравствуйте, меня зовут Александр Зеленин , и я веб-разработчик.
    Многократно я слышал мнение, что верстка - удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.


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


    [большая по клику]
    Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.


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

    Чего мы ожидаем?

    В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.
    Junior - знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.
    Middle - более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки. Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки. Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.
    Senior - может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
    Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.

    Junior

    HTML - знание основных тегов, аттрибутов. Понимание, как его писать в принципе.
    Типографика - умение отформатировать текст. Текст - основа практически любого проекта. Вставка неразрывных пробелов где надо, выделение жирным, курсивом, abbr и так далее. Можно использовать типограф или схожий сервис, но уметь понимать результат.
    Семантика - понимание, что для определённых задач есть определённые теги. Уметь выбрать нужный тег.
    Медиа - какие виды медиа можно встраивать в страницу.
    Iframe - встраивание сторонних виджетов (видео, аудио, карты и т.п.).
    Аудио, Видео - можно отложить изучение, т.к. частично решаются с помощью iframe. Понимать, какие форматы умеет воспроизводить браузер, как оформить плеер и так далее.
    Картинки - какие графические форматы и в каком виде воспринимает браузер. Плюсы и минусы использование тех или иных форматов.
    Растр - jpg, png, gif. Понимать различие форматов и уметь применять что и где надо.
    SVG - можно отложить изучение, т.к. применяется реже, чем хотелось бы. Понимать плюсы, минусы, ограничения и т.п.
    Шрифты - можно отложить изучение. На самом деле довольно сложная тема, и в общем случае я бы советовал начинающим использовать системные шрифты. Уметь подгрузить шрифты, оптимизировать отображение, минимизировать лаг отрисовки с кастомными шрифтами.
    Табличная вёрстка - опционально. Для желающих верстать качественные email-рассылки в будущем.
    CSS 1 - шрифты, цвета, выравнивание, размеры.
    CSS 2.1 - управление поведением блоков, позиционирование, полноценное оформление.
    Селекторы - простые селекторы на тег, класс, вложенный элемент. Простые псевдоселекторы типа:hover.
    Именование - как называть классы, чтобы не было мучительно больно.
    Блочная вёрстка - разбить картинку на осознанные блоки, воплотить блоки в HTML, оформить с CSS.
    Браузеры - можно отложить изучение. Какие браузеры существуют, в чём их различие.
    Инструменты разработчика - можно отложить изучение. Использовать инструменты браузеров, чтобы разбираться в проблемах отображения.
    Текстовые редакторы - какие текстовые редакторы для разработчиков есть и зачем. SublimeText и Notepad++ приведены для примера, как хорошо мне знакомые. Уметь настраивать в них базовые вещи, такие как отступы, перенос строки и так далее.
    Системы контроля версий - я лично считаю умение их использовать хотя бы индивидуально, лично для себя, очень важным. Понимать, для чего эти системы созданы и какие бывают.
    Git - понимать в общих чертах задачу и принципы самой популярной системы контроля версий.
    Github / bitbucket - уметь использовать одну из популярных площадок для git.
    Checkout / commit / push / pull - базовые операции для личного использования.
    Stash - для временного сохранения ненужных в данный момент данных.
    10 работ - сделать минимум 10 работ в различном дизайне. Можно тестовых, это не важно. Важно, чтобы полноценных в рамках текущих знаний.

    Middle

    CSS 3 - градации, тени, сглаживание, фильтры, трансформации.
    Продвинутые селекторы - элементы, следующие за опделённым (+), определённый по счёту (nth-child), shadow-dom, before/after и так далее.
    Анимации - опционально. transition и animation. Плавные переходы, анимации. Понимать ограничения и минусы.
    Сетки - зачем существуют, как выстраивать, какие есть готовые решения. Для примера можно посмотреть Flexbox grid или любой другой, который найдёте.
    Фреймворки (CSS) - зачем нужны, как применять. Желательно научиться хорошо использовать минимум один. Очень пригождается для прототипирования. Значительно повышает качество проекта при отсутствии бюджета на дизайн (не уникально, но юзабельно).
    CSS препроцессоры - можно отложить изучение. Оптимизация работы, более красивый и читабельный код. Переменные, миксины и т.п. Поработать с одним или несколькими популярными препроцессорами типа SASS, LESS, Stylus.
    Media queries - можно отложить изучение. Отображение нужных стилей в зависимости от условий (устройство, размер экрана, плотность пикселей, версия для печати и т.п.).
    Стиль кода - понять, для чего есть соглашения по стилям, изучить и начать применять любой (рекомендую от AirBNB).
    DRY / KISS / SOLID - можно отложить изучение. Понять важные принципы разработки, ощутимо упрощающие дальнейшее сопровождение проекта.
    OOCSS - опционально. Понять, что есть объектно-ориентированный css и для чего он. В том или ином виде используется во многих проектах (хоть и без понимания, что это он). В идеале, научиться проектировать. Может отлично зайти для крупных проектов.
    Документация - понять, что и как документировать. Документировать. Можно отложить, но в будущем обязательно изучить разметку markdown.
    Планирование - научиться оценивать сроки по картинке и определять последовательность работ.
    Декомпозиция - можно отложить изучение. Научиться разбивать задачу на подзадачи. Это сложнее, чем кажется:-)
    Постановка задач - можно отложить изучение. Научиться чётко описывать задачи текстом так, чтобы другие разработчики, в том числе с меньшей квалификацией, достаточно однозначно понимали, что необходимо сделать для их выполнения.
    Flexbox - понимание модели, умение применять полноценно.
    Вёрстка писем - опционально. В целом навык не лишний. Понимать особенности почтовых систем, сохранить хороший внешний вид и не упасть в спам (если это не спам).
    Полифилы - разобраться, как использовать самые актуальные возможности разработки, сохраняя обратную совместимость. Понять минусы и плюсы от такого подхода.
    Кроссплатформенная вёрстка - понимать, что нужно делать, чтобы проект хорошо выглядел не только под Windows, Linux и Mac, но и под SmartTV или PS.
    Кроссбраузерная вёрстка - понимать разницу рендера браузеров и заставлять их показывать одинаково. Сайт CanIUse очень помогает в этом.
    Мобильная вёрстка - можно отложить изучение. Понимать, какие ограничения несут в себе мобильные платформы. Использовать лимитированное пространство грамотно.
    Оптимизация - можно отложить изучение. Разобраться в «цене» тех или иных приёмов. Понять, из каких фаз состоит отображение сайта пользователю. - можно отложить изучение. Оптимизации, связанные с размером, кешем, сжатием, объединением ресурсов и т.п.
    Отрисовка - можно отложить изучение. Оптимизации, связанные со скоростью рендера после загрузки.
    SEO - можно отложить изучение. Хотя бы базовое понимание работы поисковых систем. Умение «помочь» поисковой системе разобраться, куда смотреть и что важно.
    Шаблонизаторы - разобраться, каким образом можно переиспользовать код, группировать элементы и компоновать страницы. Очень желательно изучить как серверный рендеринг, так и клиентский. Сюда же входят шаблоны на «чистом» языке (типа простых PHP вставок). Работа «до» (dataflow) шаблонизатора нас не интересует.
    PHP - можно отложить изучение. Разобраться в базовом синтаксисе и уметь внести мелкие правки, связанные с оформлением страницы.
    CMS - можно отложить изучение. Узнать, какие CMS существуют и для чего они были созданы. Научиться писать шаблоны хотя бы для одной (рекомендую Wordpress).
    Javascript - можно отложить изучение. Изучить базовый синтаксис, понять, как вешать простейшие обработчики и проводить простую работу с DOM.
    jQuery - можно отложить изучение. Научиться экономить кучу времени для решения довольно типовых задач с использованием плагинов для самой популярной js библиотеки (после vanilla.js, конечно).
    NodeJS - можно отложить изучение. Разобраться, как запустить простейший сервер, раздавать статику и рендерить на стороне сервера. Можно использовать Express или любой другой фреймворк.
    Сборка - опционально. Научиться собирать проект из кучи CSS / HTML файлов в то, что нужно. Рекомендую ознакомиться хотя бы с grunt и gulp, как представителями «разных» лагерей.
    IDE - опционально. Изучить, зачем нужны IDE и как их использовать. Перейти на использование какого-либо IDE для экономии времени. Важно: изучение IDE сравнимо с полноценным изучением языка программирования, и вкладывание большого количества времени в это может не оправдаться. Лично я пользуюсь текстовыми редакторами (и только для ооочень крупных проектов включаю IDE).
    Branching - научиться управлять ветками в git.
    Merge - научиться сливать ветки с разрешением конфликтов.
    Fetch / Rebase - разобраться, зачем они, когда их применять, и начать применять по необходимости.
    Графические редакторы - разобраться, какие бывают, для чего. Чем векторные отличаются от растровых. Важно понимать редактор хотя бы на уровне «чтения» макета от дизайнера. Выбрать правильный шрифт, размер, цвет и т.п. Чтобы не на глаз, а точно. Рекомендую поработать минимум с 1 растровым (Photoshop) и 1 векторным (Figma).
    50 работ - к концу этапа у вас порядка 50 различных работ, демонстрирующих навыки из изученных областей.

    Senior

    Хоть на схеме и кажется маленькой эта группа, но фактически она самая большая. Т.к. к этому моменту необходимо изучить всё то, что откладывалось.
    Адаптивная / Отзывчивая вёрстка - разобраться в высшей ступени и скомбинировать все полученные до этого знания. Проект должен выглядеть хорошо везде и на всём (в рамках разумного).
    Постепенная деградация / Прогрессивное улучшение - понять, что это и зачем. Использовать.
    Gitflow - уметь объяснить другим разработчикам, как создавать ветки, куда их вливать, как, уметь провести код ревью (вёрстки, само собой, не кода).
    БЭМ - опционально. Разобраться в методологии, позволяющей создавать безлимитно крупные проекты так, чтобы при минимальной синхронизации различные команды могли использовать блоки друг друга. Есть и другие методологии, дающие не худший результат. К этому моменту о них вы так или иначе будете знать и сможете, при желании, изучить.
    100 работ - иметь суммарно сотню работ, демонстрирующих различные полученные навыки. На самом деле, это всё условно. Можно иметь одну работу (состоящую из различных частей) в портфолио, которая уже покажет, что вам ничего не страшно.

    Заключение

    Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).
    Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).


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


    Также планирую создать полноценный бесплатный курс с подробным рассмотрением каждой из тем-прямоугольников со схемы. Буду рад предложением, отзывам, пожеланиям и так далее.
    Курс, вероятно, будет в формате видеоуроков с полным текстовым и графическим дублированием. Если дело пойдёт, приложу в будущем ссылки в комментарии. Добавить метки

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

    Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly . В Яндексе также работает алгоритм, который отдает предпочтение сайтам с мобильной/адаптивной версией для пользователей в мобильном поиске.

    Проверить отображение страницы на мобильных устройствах можно на сервисах и .

    Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам Что такое адаптивная вёрстка

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

    Основные приёмы создания адаптивного сайта приведены в статье . Для отзывчивого дизайна ширина основного контейнера сайта задаётся в % , при этом она может быть равна как 100% ширины окна браузера, так и меньше. Ширина столбцов сетки также задаётся в % . В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px .

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

    Вёрстка главной страницы

    Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .

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


    Рис. 2. Пример адаптивной верстки 1. Метатеги и раздел

    1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

    Адаптивная вёрстка сайта

    2. Шапка страницы

    В шапке страницы поместим следующие элементы-контейнеры:
    логотип

    Статьи по теме

    Последние статьи
    Популярные статьи
    Выбор редакции
    tat-aikido.ru