Css — Помогите новичку разобраться (вёрстка сайта)


Содержание

Как стать начинающим верстальщиком

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

Учим HTML/CSS

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

После прохождения уроков вы должны понимать:

  • что такое html-теги и как они работают
  • блочную модель(border, margin, padding)
  • как работает float, inline-block и flexbox
  • позиционирование(абсолютное, относительное, фиксированное, z-index)

Вы должны уметь:

  • вставить на страницу текст, картинки, ссылки, элементы форм
  • стилизовать элементы страницы(изменение размеров, цветов, теней и т.д)
  • создавать таблицы

Работаем с фотошопом

Дизайнер предоставляет верстальщику макет в формате psd(формат файлов Photoshop). Поэтому верстальщику необходимо уметь с ним работать. Все функции программы не нужны, главное уметь следующее:

  • работа со слоями(скрытие, отображение, просмотр эффектов)
  • замер размеров элементов
  • вырезание картинок(обычных и паттернов)
  • копирование текста из макета в html

Начальные инструменты

Для быстрого старта вам понадобится редактор и браузер. Вы можете выбрать любые, но я посоветую Sublime Text в качестве редактора и Chrome в качестве браузера. Из операционных систем сделайте выбор между Windows и Mac. Остальные системы будут тормозить ваше обучение.

Верстка первого сайта

На этом этапе скорее всего вы ощутите ступор. Вы вроде знаете html/css(на самом деле нет) и фотошоп. Но вы совершенно не понимаете как из макета сделать сайт. В данном случае вы можете пройти небольшой курс по верстке сайта, коих много на ютубе. На данном этапе вам нужно сверстать первый сайт. Не обращайте внимание на такие понятия как резина, адаптивность. И еще, не используйте css-фреймворки(bootstrap, foundation).

Понимание семантики, валидность

Итак, вы сверстали первый сайт, что дальше? Вам нужно понять как правильно расставлять теги в html-коде, а также научиться проводить валидацию. С валидацией все просто — машина анализирует код, говорит что не так, вы правите и понимаете. С семантикой посложнее, поскольку область довольно холиварная и во многих моментах разработчики не имеют единого мнения. Но все же общие стандарты есть. После того, как изучите — попробуйте сверстать новый макет семантично. Теперь на каждом этапе вам нужно получить обзор вашего кода от опытного специалиста/наставника.

Javascript и jQuery

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

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

Для ускорения и удобства написания стилей придумали препроцессоры. Наш выбор — Sass(.scss). Вам необходимо изучить препроцессор и сверстать с ним новый макет. Понять нужно:

  • переменные
  • разница между миксинами и тихими классами(placeholder)
  • как работает ‘&’
  • как разделить стили на несколько .scss файлов

На данном этапе scss в css компилируйте с помощью prepros

Также для ускорения верстки и поддержки верстальщики используют шаблонизаторы html. Наш выбор — pug. После изучения вы должны понимать:

  • как делать миксины
  • как работает extends
  • циклы и переменные
  • работа с массивами

Верстаете сайт с применением шаблонизатора.

Адаптивность

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

IDE PHPStorm

Чем раньше вы пересядете с редактора на PHPStorm — тем лучше. Эта IDE позволяет значительно ускорить разработку. Скачать бесплатную(early access) PHPStrom можно на официальном сайте, если не хотите платить — скачиваете её раз в месяц. В остальном бесплатная версия такая же, как и платная.

Любой разработчик должен уметь работать с системами контроля версий, и верстальщик — не исключение. Мы, как и большинство выбрали Git. Вы должны уметь следующее:

  • работать с интерфейсом github
  • уметь клонировать репозитории на компьютер
  • делать commit, push, merge
  • делать pull request

Практика

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

Верстка сайта — шпаргалка для начинающих

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

Процесс верстки — один из самых важных этапов создания интернет-ресурса, поскольку от работы верстальщика зависит:

  • Скорость загрузки веб-сайта;
  • Соответствие стандартам HTML;
  • Адекватность отображения в браузере;
  • Соответствие требованиям поисковых систем;
  • Адаптивность под различные экраны пользователя.

Что такое валидная верстка?

Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.

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

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

Базовые правила верстки сайта

Каковы основные правила качественной и грамотной верстки?

  1. Вёрстка обязательно должна быть кроссбраузерной для Firefox , Opera , Safari , Google Chrome и Internet Explorer , который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
  2. Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
  3. Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
  4. CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
  5. Логотип веб-сайта должен являться ссылкой на главную страницу;
  6. HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.
  7. Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно ( menu , footer , header и т.д.);
  8. В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
  9. Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
  10. Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
  11. HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
  12. Заголовки должны быть написаны исключительно с помощью специальных тегов h1 , h2 и т.д;
  13. Атрибуты всех тегов должны быть заключены в кавычки.

Основные подходы к верстке сайта

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

  • Фиксированная верстка . При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
  • Резиновая верстка . В зависимости от размера окна браузера, блоки изменят свою ширину;
  • Адаптивная верстка . Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
  • Отзывчивая верстка . Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
  • Версия сайта для мобильных устройств . Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Кроме подходов, существуют ещё и различные типы вёрстки.

Табличная верстка

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

Совсем недавно до появления блоков и слоёв это был самый популярный тип вёрстки, имеющий множество преимуществ:

  • Лёгкость в создании колонок, что положительно влияет на поведение при изменении размера окна браузера и позволяет создавать многоколоночные макеты сайта;
  • Склейка изображений. Зачастую рисунки делят на несколько отдельных фрагментов для уменьшения объёма файлов, создания эффекта анимации и т.д. Каждый рисунок помещается в отдельную ячейку таблицы, параметры которой задаются таким образом, чтобы стыков между ячейками видно не было;
  • Поскольку высоту и ширину таблицы можно задавать в процентах, табличная верстка широко применяется при создании резинового макета;
  • В отличие от некоторых CSS параметров, таблицы в разных браузерах отображаются практически идентично, что упрощает создание страниц;
  • Из-за одновременного выравнивания содержимого ячеек таблицы и по вертикали, и по горизонтали, возможности по размещению различных элементов дизайна относительно друг друга и на странице в целом расширяются.

Однако имеет место быть и небольшая ложка дёгтя:

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

Блочная верстка сайта

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

Блочная верстка сайта имеет следующие преимущества:

  • Блочная верстка образует гораздо меньший объём кода, в отличие от верстки таблицами, что не только увеличивает скорость загрузки страницы, но и уменьшает нагрузку на сервер;
  • Удобство изменения дизайна путём правки файла стилей;
  • Преимущества в сфере SEO. Вместо кода в первую очередь распознаётся контент и семантически правильно размечается.
  • Повышенная читабельность кода, что способствует соответствию стандартам валидности;
  • Задачи по нестандартному оформлению и расположению элементов веб-сайта могут быть с лёгкостью реализованы;
  • Возможность создать адаптивный дизайн, который будет корректно отображаться как на стационарных, так и на мобильных устройствах.

Несмотря на громадный ряд преимуществ, блочная CSS верстка имеет также и недостатки:

  • Повышенная сложность освоения . Табличную верстку освоить может и новичок, однако таблицы стилей предлагают настолько много различных возможностей, что понадобится немало времени для их изучения;
  • Кроссбраузерность . Решение данной проблемы требует больших усилий, чем в случае с табличной версткой.

Верстка слоями: преимущества, недостатки, сфера применения

Слои – это такие элементы HTML кода, которые внедряются в страницу сайта наложением друг на друга с пиксельной точностью. Изменение параметров слоёв происходят с помощью JavaScript и VBScript , что позволяет использовать различные эффекты.

Достоинствами вёрстки слоями являются:

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

К недостаткам вёрстки слоями можно отнести:

  • Необходимость наличия довольно глубоких познаний языков и технологий веб-программирования ( VBScript , CSS , JavaScript );
  • Отображение сайта в различных браузерах может также быть различным;
  • С технической точки зрения верстка слоями похожа на позиционирование, однако во избежание проблем с браузерами, тег следует заменять на

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

Страницы со слоями не имеют единого стандарта отображения браузерами, поэтому одна и та же страница в браузерах Opera и Google Chrome может выглядеть по-разному.

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

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

Тема: С чего начать верстку сайта с нуля?Пожалуйста, помогите новичку!

Опции темы
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

С чего начать верстку сайта с нуля?Пожалуйста, помогите новичку!

Совсем не давно, закончил изучение HTML & CSS. Конечно же я пока не могу сказать что освоил все хорошо, но основа есть. Да и многие говорят, что то, что нужно, освоится в ходе практики.

Но вот опять проблема, с которой думаю многие сталкивались. У меня есть знания HTML & CSS, но как с помощь них начать верстать хотя бы простенькие сайты с PSD макетов? К примеру, у меня есть простой PSD макет(приложу во вложение), но с чего начать его верстку,как? Помогите пожалуйста.

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

Последний раз редактировалось nad-sergo; 27.03.2012 в 12:40 .

макеты для того, чтобы видеть как и что нужно сверстать

определяетесь в каком редакторе верстать
берёте свои знания по HTML & CSS
смотрите на макет (если не умеете, то научитесь хоть «открывать фотошоп»)
начинаете верстать (всё что не знаете как, или не понимаете почему — сначала гуглите, это тоже не просто так все пишут/советуют)

несколько способов которые могут помочь/сам и когда начинал, и сейчас так делаю:
в случаях когда нужна точность верстки вплоть до 1px, заливайте background (блоков, столбцов, . ) разными цветами, потом делаете скрин, и в фотошопе увеличиваете и линейкой проверяете что, где и сколько (лучше сразу учиться верстать точно, а не винить дизайнеров из-за своей беспомощности)

Цукерберг рекомендует:  Automatic Figure Numbering with CSS Counters

если код большой и непонятно в чём ошибка, то лучше искать её вырезая и проверяя отдельные части кода копируя их в другой/чистый файл/страницу (например если много таблиц в таблицах, вырезать по таблице и проверять этот код отдельно, заливать background делать скрины, и смотреть на них в фотошопе) то есть поиск ошибки методом исключения

в большинстве случаев так и есть

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

Последний раз редактировалось Электроник; 26.03.2012 в 17:51 .

сначала создайте базовую структуру страницы, то есть ее макет. http://htmlbook.ru/layout . в архиве приложена уже какая-то верстка, я так понимаю она не ваша? кстати, насчет шрифтов. если в макете попадается нестандартный шрифт, не пугайтесь, чаще всего его подключить не займет и пяти минут (при условии что шрифт у вас уже имеется). вот хорошие сервисы для этого http://www.fontsquirrel.com/fontface/generator и http://fontface.codeandmore.com/

Adobe Photoshop — Как разрезать макет сайта
Вот полезная ссылочка для новичков. Сам по ней учусь. Там еще много интересных уроков

Спасибо, но фотошоп открывать я умею.

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

Спасибо большое, думаю они мне пригодятся.

Спасибо большое,что ответили. Думаю найдется там полезное и для меня.

как это делаю я. :)
0. Проверяем поступление предоплаты на счет. :) (опционально)
1. Открываю фотошоп, загружаю макет, в целом оцениваю сложность.
2. Иду на кухню, делаю чашку кофе, возвращаюсь.
3. Более тщательно изучаю макет. Мысленно разбиваю на логические блоки.
4. Блин, булочки забыл — на кухню, за булочками.
5. Ну вот, можно работать. Отключаем все слои, кроме фоновых.
6. Нарезаем фоновые картинки (общий фон для сайта), часто это однопиксельные градиенты, либо крупные, неоднородые изображения.
7. Включаем слои с изображением шапки. нарезаем. В голове при этом уже складывается приблизительная структура HTML
. Повторяем для остальных элементов.
8. Булочки кончились — опять к холодильнику. )
9. Берем заготовку с html страницей, наиболее подходящую под данный макет, открываем текстовый редактор на втором монике, чтобы было видно картинк и код одновременно.
10. описываем весь html (приблизительно, отдельные элементы потом допишем)
11. Запускаем программку или вручную переписываем все классы, присутствующие в html, в файл CSS /
12. по порядку описываем стили для классов.
13. на этом этапе страница уже практически готова, и правильно отображается в современных браузерах.
14. кофе кончился, идем на кухню за очередной порцией.
15. открываем страницу в FF и с помощью расширений pixelperfect и firebug подгоняем верстку, чтобы она максимально соответствовала макету.
16. остается только пофиксить баги в отсталых браузерах, если клиент не против — используем изящную деградацию. (квадратные углы вместо круглых, непрозрачность вместо полупрозрачности, png8 вместо png24 и прочее). Если против — пробуем убедить (правда делаем это перед началом работы). Не получается убедить — используем костыли.
17. ждем поступления денег на счет.

Блочная верстка сайта с нуля. Урок 1

Существует 2 вида верстки:

Табличная верстка

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

Блочная верстка

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

Итак, начнем. Для примера я взял простой прототип, макетом его нельзя назвать, нормальный макет рисуется в psd формате, а у нас он в jpg. Нам главное понять принцип как же верстать сайты с помощью блочной верстки. Чтобы работать с блочной версткой нужно знать не только html, но и css (каскадные таблицы стилей). В ходе цикла статей по верстке сайта, мы как раз с вами и изучим тот набор css стилей, который в дальнейшем вам всегда поможет верстать практически любые каркасы макетов/мокапов, ведь принцип один и тот же.

Итак, вот макет (кликабельно).

Мы видим у него 4 логические части:

  • Шапка сайта (далее будем называть header, хедер);
  • Левая колонка (далее будем называть left sidebar);
  • Правая колонка (далее будем называть content);
  • Подвал (далее будем называть footer, футер);

Итак, начнем конечно же с блока хедер. У нас мокап шириной 1000 пикселей (px).

Для начала скажу, что верстка делается с помощью html тегов. Например,

Блочная верстка сайта — html и css, и почему начинающим повезло больше, чем тем кто верстает уже давно

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

Сегодня поговорим про то, что такое 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. Они позволяют быстрее достигнуть хороших результатов. Кроме того, чтение требует значительно большей силы воли, нежели просмотр интересных видео.

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

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

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

CSS-верстка: советы для новичков для хорошо структурированного кода

Цель этой статьи — помочь начинающим верстальщикам не стать говнокодерами низкоквалифицированными специалистами. Конечно, она не претендует на звание полноценного пособия, но может пресечь некоторые распространенные ошибки. Если вы уже начали тесное знакомство с процессом создания сайтов, то вас наверняка совершенно не пугают такие понятия, как HTML, CSS и JavaScript. А значит, вам отлично понятны первые постулаты «правильного» кода:

  • Каскадные стили и скрипты для страницы необходимо писать в отдельных документах. Во-первых, это ускоряет загрузку страницы. Во-вторых, легче один раз исправить код в подключенном CSS-файле, чем вручную изменять все страницы.
  • HTML является средством для создания костяка страницы, а каскадные стили — для описания внешнего вида и всяческих «плюшек».
  • От слов «Internet Explorer» у вас начинается нервный тик, потому как вы уже представили, как ваш идеальный макет нужно оптимизировать под старые версии браузеров.

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

Пункт №0: Сброс стилей Как это ни странно, но я хочу начать с того, что должен уметь делать каждый верстальщик. Речь идет о сбросе стилей. У сброса есть свои противники, есть те, кто советует подключать обнуление стандартных значений стилей отдельным файлом, и те, кто за общий файл CSS. В любом случае, иметь понятие о такой возможности необходимо.

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

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

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

Пункт №1: Отмена ранее установленных стилей Хороший верстальщик не отменяет стили, если это не сброс стандартных стилей. Смысл каскадных стилей в том, чтобы новые стили наследовали предыдущие и дополняли их. Каскадные таблицы стилей по определению должны наследовать предыдущим определениям и дополнять их, а не отменять. Если же вам приходится делать отмену, то, видимо, вы поспешили с присвоением какого-то свойства. Конечно, не забываем о работе с готовым проектом, когда полностью реструктурировать код просто нерационально. Тогда, как говорится, «маємо, що маємо».

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

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

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

Пункт №2: Использование чересчур подробных селекторов Иногда можно наткнуться на такой код:

Необходимости в таком подробном описании совершенно нет. К тому же, это мешает применить описание стиля к другому элементу. Если в вашем коде есть такие уточнения, то следует разобраться, есть ли действительно в этом необходимость. Логичней будет написать так:

Пункт №3: Использование очень широких селекторов Иногда для очень общих тегов применяют слишком подробное описание. Например:

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

Пункт №4: Жестко заданные описания стилей

Подобные «страсти» в CSS-файле — это попытка хоть как-то засунуть элемент в нужное место. Если вы тщательно планировали страницу, то к использованию таких «костылей» дело не дойдет. А может, вы просто плохо разобрались в блочной верстке и не можете считать себя хорошим верстальщиком?

Пункт №5: Осторожное использование !important Инструмент !important позволяет повысить приоритет стиля. Поэтому использовать его нужно только в тех случаях, когда вы уверены, что подобный приоритет вам будет нужен всегда. Например, для выведения ошибки. Если же вы применили !important , чтобы грубо перекрыть свои ошибки, то лучше еще раз пересмотреть код.

Пункт №6: Тонкости использования ID Стоит быть осторожным, прежде чем использовать идентификатор. Потому что один и тот же id можно использовать один раз на странице. Приоритет id намного выше класса, что требует еще большей осторожности при использовании. Классы вы можете объявлять сколько угодно раз или применять множество классов к одному и тому же элементу. Например:

То есть id стоит применять только для специфичных элементов, но лучше всего — для связки с JavaScript.

Пункт №7: Непонятные имена классов Когда пишете код, классу стоит приписывать понятное обозначение, которое бы максимально точно давало определение того, чему он принадлежит. При проектировании большого проекта нужно избегать слишком общих названий классов, например .tel . Допустим, у вас есть телефон горячей линии в шапке документа, а также номера в разделе контактов. Поэтому использование названий — .tel-header и .tel.contacts — добавит конкретики. Таким образом, вы не запутаетесь и точно будете знать, где и зачем используется класс.

Пункт №8: Излишняя точность названия классов Противоположностью предыдущей ошибке можно считать такой класс:

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

Пункт №9: Комментарии Многие начинающие верстальщики недооценивают комментарии, считая их глупой тратой времени. Поверьте, если ваш проект перейдет к другим специалистам, комментарии значительно сэкономят их время при разборе всего кода. Полезная практика — оставлять пометки в HTML файле рядом с закрывающимся div о том, какой элемент был закрыт. Данная процедура ускоряет работу с кодом. Да и, поверьте, вернувшись через полгода к сайту для нововведений, вы сами себя будете благодарить за щепетильные описания.

Интернет-ресурсы для изучения CSS W3.org — этот сайт Мекка для верстальщика, потому как является официальным ресурсом Консорциума Всемирной Паутины. Именно эта организация разрабатывает и внедряет стандарты. Технический английский довольно прост, поэтому у вас есть шанс справиться с полезной информацией на сайте даже при плохом владении языком.

Верстка сайта с нуля на HTML5 и CSS3

Ссылка на эту страницу:

Встроить HTML код видео:

Видео на тему: Верстка сайта с нуля на HTML5 и CSS3

Верстка сайта с нуля — Как правильно и быстро сверстать органичный шаблон

Уроки от профессионалов.

Что говорит автор видео:

В ходе этого видео мы сделаем полноценный шаблон сайта на чистом HTML5 и CSS3. Дополнительно мы также поработаем с сервером и опубликуем наш сайт в Интернете на VDS сервер, используя панель VestaCP.

Ссылки из видео:

  1. VDSina сервер: http://bit.ly/2N3Pucm
  2. Макхост: https://mchost.ru/
  3. VestaCP: http://vestacp.com/install/
  4. Код и все материалы: https://itproger.com/course/one-lesson/16

Сообщество программистов: https://itproger.com/

  • Вступай в группу Вк — https://vk.com/prog_life
  • Группа FaceBook — https://goo.gl/XW0aaP
  • Instagram: https://www.instagram.com/gosha_dudar/
  • Telegram: http://t.me/itProger_official
  • Twitter — https://twitter.com/GoshaDudar

Уроки от #GoshaDudar
Все уроки по хештегу #goshaLessons

Коллаж на тему Верстка сайта с нуля

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

Цукерберг рекомендует:  CSS меню с помощью спрайтов

Как сверстать сайт профессионально — 75 видео

Все основы верстки HTML и CSS в одном уроке для начинающих с нуля. Верстаем реальный макет сайта (лендинга) из Photoshop. СКАЧАТЬ МАКЕТ И ФАЙЛЫ верстки для ДЗ: https://wayup.in/lm/load/lm30 И еще кое что.

Посмотрите другие видео о верстке:

День Верстальщика: Верстка С Нуля ☉ HTML/CSS/Адаптив — https://www.youtube.com/watch?v=xlwPU0BRQKQ

Создаем Сайт-Блог С Нуля За 4 Часа ☸ Photoshop/HTML/CSS/CMS — https://www.youtube.com/edit?o=U&v >
Как Сверстать Сайт Адаптивно? HTML/CSS — https://www.youtube.com/watch?v=ROn-glSIKO8

Подписывайтесь на мой канал: https://www.youtube.com/c/wayupin?sub_confirmation=1

Спасибо за просмотр!

Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись.

Все основы верстки HTML и CSS в одном уроке для начинающих с нуля. Верстаем реальный макет сайта (лендинга) из Photoshop. СКАЧАТЬ МАКЕТ И ФАЙЛЫ верстки для ДЗ: https://wayup.in/lm/load/lm30 И еще кое что.

Посмотрите другие видео о верстке:

День Верстальщика: Верстка С Нуля ☉ HTML/CSS/Адаптив — https://www.youtube.com/watch?v=xlwPU0BRQKQ

Создаем Сайт-Блог С Нуля За 4 Часа ☸ Photoshop/HTML/CSS/CMS — https://www.youtube.com/edit?o=U&v >
Как Сверстать Сайт Адаптивно? HTML/CSS — https://www.youtube.com/watch?v=ROn-glSIKO8

Подписывайтесь на мой канал: https://www.youtube.com/c/wayupin?sub_confirmation=1

Спасибо за просмотр!

Верстка сайта с нуля. Начало, шапка сайта.

Наконец то на канале верстка адаптивного сайта с нуля. В этом видео я покажу процесс создания сайта для новичков. Мы начнем проект с самого начала, с создания index.html и последующей адаптивной версткой. В этом курсе верстки мы сделаем полноценный сайт с несколькими страницами за 10 уроков. В нем будут различные компоненты от применения flexbox с css grid до встраивания видео и слайдеров на сайт. Вообще html верстка это занятие не сложное но творческое и весьма время затратное. Курсы верстки я разделил на уровни. В данном курсе первого уровня будут самые простые моменты верстки.

Промокод на 3 месяца бесплатного хостинга по тарифу Мак-10 — WebDeveloper (вводить при регистрации на сайте https://billing.mchost.ru/order.php?hosting=1&plan_ >
Группа вк: https://vk.com/developblog
Пост с логотипом в группе: https://vk.com/developblog?w=wall-110872645_500

Современная верстка сайта — Начинаем с нуля

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

Группа вк: https://vk.com/developblog
Ссылка на шаблон: https://vk.com/developblog?w=wall-110872645_630

Верстка сайта HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная версия

Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись. Таймкоды и PSD макет ниже в описании.
Бесплатный виджет обратной связи на сайт: https://www.spikmi.com/

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

СКАЧАТЬ МАКЕТ: https://mega.nz/#!bt0zTYYI!CwkKtOFtMC-Zb6G—0AyW7IiImwg3ODQzDS2mQSwR5A

ТАЙМ КОДЫ К ВИДЕО:

00:00 Введение
00:30 Реклама
02:07 Экспорт графики для верстки из Photoshop
03:40 Экспорт графики для верстки из Avocode
05:55 Разбираемся со шрифтами.
07:10 Оцениваем макет — сетка и контейнеры
09:25 Начало верстки
11:10 Google Fonts
14:23 Верстка навигации
28:46 Верстка шапки
01:10:23 Блок Инструкторы
01:21:10 Блок Посты в блоге
01:36:26 Блок CTA (Заголовок с кнопкой)
01:42:08 Блок Подвал (Footer)

Данное видео входит в серию из 2-х уроков:
1. Верстка HTML + CSS За 2 Часа: https://www.youtube.com/watch?v=ZY6DaPHYO34&t=5568s
2. Адаптивная верстка HTML + CSS: https://www.youtube.com/watch?v=uIYa_9jtSRM

Плейлист серии уроков:
https://www.youtube.com/playlist?list=PLRoXQfrhqdOo-dmbtHNj4hktKE5w3qCTk&disable_polymer=true

�� Бесплатный курс по верстке сайтов: http://webcademy.ru/htmlsite/
�� Курс для начинающих «Профессия: Верстальщик»: http://webcademy.ru/htmlstart/
�� Продвинутый курс «Веб-разработчик. Frontend и Backend»: http://webcademy.ru/webdev/

�� Сайт школы: http://webcademy.ru
�� Наша группа Вконтакте: https://vk.com/webcademy
�� Телеграм-чат для верстальщиков: https://t-do.ru/webcademychat

Процесс верстки сайта с нуля до выгрузки 5,5 часов // Марафон Верстки 1.0

Если хочешь скачать PSD макет и шрифты, переходи по ссылке:
http://glo-academy.ru/psd2money/first/

Получить нужные материалы для любого веб-разработчика — https://taplink.cc/glo_web_academy

Получить консультацию куратора — http://bit.ly/2Ym5SqS

Связаться с автором: https://vk.com/aislam23
Мой блог: https://vk.com/islamov_blog

Архив с исходником bootstrap: https://yadi.sk/d/4dviXOWqwTTjC

Плавный скролл до якоря: http://vk.cc/4mTp13
Плавный эффект hover: http://vk.cc/Xay8p
Конвертер шрифтов: http://vk.cc/3DZJzH
Анимация css: http://daneden.github.io/animate.css/
wow.min.js: http://vk.cc/5eFfPL
Слайдер fotorama: http://fotorama.io/
Расширение для chrome для адаптива: http://vk.cc/5eFk8K

Больше контента в нашей группе Вконтакте
https://vk.com/glo_academy
Присоединяйтесь к нашему сообществу Discord
https://discord.gg/k5XzZ68

Мой канал в telegram «Лысый из браузера»
https://tele.click/baldfrombrowser
————
Я использую хостинг Link Host с 2014 года
https://link-host.net/billing/pl.php?1786

Адаптивная верстка сайта. HTML5 + CSS3 За 90 минут. Из PSD. С Нуля.

Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись. Бесплатный виджет обратной связи на сайт: https://www.spikmi.com/

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

Данное видео входит в серию из 2-х уроков:
1. Верстка HTML + CSS За 2 Часа: https://www.youtube.com/watch?v=ZY6Da.
2. Адаптивная верстка HTML + CSS: https://www.youtube.com/watch?v=uIYa_.

Плейлист серии уроков: https://www.youtube.com/playlist?list=PLRoXQfrhqdOo-dmbtHNj4hktKE5w3qCTk

СКАЧАТЬ МАКЕТ: https://mega.nz/#!bt0zTYYI!CwkKtOFtMC-Zb6G—0AyW7IiImwg3ODQzDS2mQSwR5A

ТАЙМ КОДЫ К ВИДЕО:

02:13 Медиазапросы
05:00 Адаптация блока навигации
16:41 Адаптация шапки
54:54 Адаптация блока Интсрукторы
01:05:45 Адаптация блока Посты в блоге
01:19:02 Адаптация блока CTA (Заголовок с кнопкой)
01:20:17 Адаптация Подвала (Footer)

�� Бесплатный курс по верстке сайтов: http://webcademy.ru/htmlsite/
�� Курс для начинающих «Профессия: Верстальщик»: http://webcademy.ru/htmlstart/
�� Продвинутый курс «Веб-разработчик. Frontend и Backend»: http://webcademy.ru/webdev/

�� Сайт школы: http://webcademy.ru
�� Наша группа Вконтакте: https://vk.com/webcademy
�� Телеграм-чат для верстальщиков: https://t-do.ru/webcademychat

Учим HTML за 1 Час! #От Профессионала

Хотите выучить HTML всего за 1 Час и при этом сделать это качественно? — Тогда смотрите от профессионала как!

Подпишись и поделись видео с друзьями!

Хочешь зарабатывать на своих видео в YouTube?
Подключайся! — https://youpartnerwsp.com/join?23195

#Ссылки из видео:
1) https://ru.wikipedia.org/wiki/HTML
2) http://ruseller.com/htmlshpora.php? > 3) http://www.w3schools.com/tags/default.asp
4) Исходный код получившейся HTML странички http://pastebin.com/qHk9rHyS
5) Скачать Notepad++ можно тут https://notepad-plus-plus.org/downloa.

Жми красную кнопку «Подписаться» под видео ��
Есть вопрос? — Задай его лично мне в наших группах!
===
Наша группа ВКОНТАКТЕ — www.vk.com/howdyho_net
Наш Twitter — www.twitter.com/howdyho_net

Почти бесплатные игры из Стима тут — http://bit.ly/SteamAlmostFreeGames

HTML верстка сайта. Урок 1. Настройка рабочего места

��‍�� Обучение веб-разработке: http://webcademy.ru/htmlstart/
За 2 месяца научим создавать веб-сайты и зарабатывать на этом, используя передовые технологии HTML/CSS/JS/PHP/MySQL.
�� возможна рассрочка
�� если курс не понравится, вернём деньги в первую неделю.
Нужна консультация? → https://vk.com/webcademy

�� Бесплатный курс «Создай свой первый сайт на HTML5 и CSS3» 7 уроков по 30 мин: http://webcademy.ru/htmlsite/

Видео урок из бесплатного курса по HTML верстке.
Чтобы получить файлы макета и готовой верстки, необходимо подписаться на курс. Страница курса: http://webcademy.ru/htmlsite/

Представляю мини курс по HTML верстке сайта. В данном курсе вы увидите как сверстать сайт HTML из PSD шаблона. Добавить адаптивность к сайту. И сделать внутренние страницы. Этот курс подойдет для тех кто уже освоил азы и основы верстки и хочет сделать сверстать свой первый сайт.

�� Курс для начинающих «Профессия: Верстальщик. HTML5+ CSS3, основы PHP, JS и jQuery»: http://webcademy.ru/htmlstart/
�� Продвинутый курс «Веб-разработчик. Frontend и Backend»: http://webcademy.ru/webdev/
�� Сайт школы: http://webcademy.ru
�� Наша Группа Вконтакте: https://vk.com/webcademy
�� Телеграм-чат для верстальщиков: https://t-do.ru/webcademychat

HTML верстка реального макета от А до Я. Джедай верстки #7 (Все выпуски)

Полезно? Подпишись на канал: https://goo.gl/o1TVqF
Приветствую вас, друзья в комплексном видео уроке по адаптивной HTML верстке макета на реальном примере. Данный выпуск является сборником всех выпусков «Джедай вёрстки #7» в одном видеоролике длительностью более 12 часов с подробными объяснениями всех нюансов современной адаптивной HTML верстки. Мы рассмотрим важнейшие моменты использования лучших инструментов и плагинов в профессиональной работе, использование адаптивной Bootstrap сетки для адаптации сайта на мобильных устройствах, использование CSS Flex для быстрой реализации нестандартных приёмов вёрстки, оптимизацию скорости загрузки сайта инструментом Google PageSpeed, а также подробно рассмотрим автоматизацию HTML верстки и правильный деплой проекта на рабочий хостинг с помощью Gulp.

Референсы для прохождения курса: https://goo.gl/RQ3sYS

Создание контентного сайта от А до Я: https://goo.gl/ankxq9
Создание интернет-магазина от А до Я: https://goo.gl/7mDqYD
Фриланс для начинающих: https://goo.gl/xOPRQ0

Группа Вконтакте: https://vk.com/agragregra
Twitter: https://twitter.com/agragregra

День Верстальщика: Верстка С Нуля ☉ HTML/CSS/Адаптив

Бесплатный урок (обучение) верстке сайта с нуля на html5, css3, js из psd-макета. Расскажу, как сделать эффекты и анимацию. Работа над настоящим лендингом. Скачать файлы из занятия для прохождения: https://wayup.in/lm/frontend-day?from=xlwPU0BRQKQ

Еще больше бесплатных мастер-классов для веб-дизайнеров, верстальщиков и фрилансеров: https://www.youtube.com/watch?v=ztYs5mLL2J0&list=PLQ2eyErB1Ejz9GWDzFbp15k7RjzmWf8qm

300 Сайдбаров ► Как сверстать структуру сайта?

Знаете HTML, CSS, но Вам всё еще сложно верстать сайдбар, футер, шапку и так далее?
Научитесь как это делать правильно в этом видео!

►►► Второй канал Хауди, подпишись ��
http://vk.cc/5lPADD

Человеческие цены на игры Steam и рандомы только тут — http://bit.ly/SteamAlmostFreeGames

Хочешь зарабатывать на своих видео в YouTube?
Подключайся! — https://youpartnerwsp.com/join?23195

#Ссылки из видео:
1) https://css-tricks.com/snippets/css/clear-fix/

► Жми красную кнопку «Подписаться» под видео ��
► Есть вопрос? — Задай его лично мне в наших группах!
===
► Наша группа ВКОНТАКТЕ — www.vk.com/howdyho_net
► Наш Twitter — www.twitter.com/howdyho_net

#Реквизиты для донатства | Поддержи канал!
Z252920208434
R250434217196

Музыкальный трек предоставлен YouTube Audio Library.

Сколько времени нужно, чтобы научиться верстать сайты?

Сколько времени нужно, чтобы научиться верстать сайты?

Photoshop:
1) https://photoshop-master.ru/
2) https://photoshop-master.ru/lessons/sait/sozday-dizayn-veb-sayta-v-fotoshop.html
3) https://photoshop-master.ru/lessons/sait/stilnyiy-maket-dlya-portfolio-v-fotoshop.html
4) https://photoshop-master.ru/lessons/sait/maket-dlya-delovogo-sayta.html
5) https://photoshop-master.ru/lessons/sait/sozdam-fotoshop-novogodniy-dizayn-dlya-sayta.html
6) https://photoshop-master.ru/lessons/sait/sozdam-maket-portfolio-v-fotoshop.html

Макеты PSD для верстки:
1) http://tpverstak.ru/free-psd-website-templates/
2) http://tpverstak.ru/20-free-psd-website-templates/

HTML:
1) https://webref.ru/layout/learn-html-css/getting-to-know-html
2) http://htmlbook.ru/html/

CSS:
1) Книга «Изучаем HTML, XHTML и CSS» — Элизабет Фримен, Эрик Фримен
2) http://flexboxfroggy.com/
3) http://yoksel.github.io/flex-cheatsheet/
4) http://cssgridgarden.com/
5) http://htmlbook.ru/css/

jQuery:
1) https://www.w3schools.com/jquery
2) http://kenwheeler.github.io/slick

Задай вопрос и получи онлайн-ответ от фронтенд разработчика бесплатно — https://frontendhelp.me/ru

Курс «Супер Старт» — http://tpverstak.ru/super-start/
Отзывы — https://vk.com/topic-149247708_36129364

Базовый курс — http://tpverstak.ru/training/
Продвинутый курс — http://tpverstak.ru/training-profi/
Отзывы — https://vk.com/topic-149247708_35960122


Программа базового: https://goo.gl/fvB8zC
Программа продвинутого: https://goo.gl/58v3yg

Сайт — http://tpverstak.ru
ВК — https://vk.com/tpverstak
Instagram — https://www.instagram.com/tpverstak/
Telegram — https://t.me/tpverstak и https://t.me/annbloknote
Чат Telegram — https://t.me/tpverstakchat

Верстаем Landing Page С Нуля За 3 Часа [HTML/CSS/JS]

Урок по верстке Landing Page (одностраничного сайта) на HTMl/CSS/JS с нуля под присмотром профессионала. Скачайте макет .psd и файлы верстки БЕСПЛАТНО: https://wayup.in/lm/load/lm52

Подпишитесь на мой канал: https://www.youtube.com/c/wayupin?sub_confirmation=1

Посмотрите полезные мастер-классы:

Создаем Адаптивный Сайт На Bootstrap 4 За 2 Часа —
https://www.youtube.com/watch?v=SQIh8SBXc5c

Как Работать На Фрилансе Веб-Дизайнером + Экскурсия В Яндекс — https://www.youtube.com/watch?v=CUi_qUoeHRs&t=1414s

HTML/CSS/JS: 10 Ошибок Начинающих Верстальщиков — https://www.youtube.com/watch?v=paWoMWy3n7A
—————

Верстка сайта с нуля по макету — Начинаем верстку. Введение

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

WBLOGHOST – скидка 40% на любой пакет виртуального хостинга по ссылке https://goo.gl/REHcV7
Если надоел ваш текущий хостинг, то HOSTiQ перевезет бесплатно на оставшийся оплаченный срок у старого хостера. Подробнее: https://goo.gl/VtePab

Ссылка на макет: https://vk.com/developblog?w=wall-110872645_600

Верстка сайта с нуля до публикации за 7 часов // Марафон Верстки 3.0

Если хочешь скачать PSD макет, переходи по ссылке:
http://glo-academy.ru/psd2money/third/

Получить нужные материалы для любого веб-разработчика — https://taplink.cc/glo_web_academy

Получить консультацию куратора — http://bit.ly/2Ym5SqS

Связаться с автором: https://vk.com/aislam23 telegram: https://t.me/aislam23
Мой блог: https://vk.com/islamov_blog

Больше контента в нашей группе Вконтакте
https://vk.com/glo_academy
Присоединяйтесь к нашему сообществу Discord
https://discord.gg/k5XzZ68

Мой канал в telegram «Лысый из браузера»
https://tele.click/baldfrombrowser

Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
http://vk.me/glo_academy
—————————————————————————————————————-
В этом видео я покажу процесс создания landing page с нуля до выгрузки на хостинг.
Пожалуйста, если вы нашли ошибку — напишите в комментариях. Свои вопросы тоже пишите в комментарии.
При верстке используется фреймворк Boostrap 3. Что это такое и урок по фремворку можно посмотреть тут: https://youtu.be/pIRF9SaL6ic
Также используется препроцессор Less для облегчения написания css кода. Урок по препроцессору здесь: https://youtu.be/GHYPsEDd_bs
————
Я использую хостинг Link Host с 2014 года
https://link-host.net/billing/pl.php?1786

Онлайн верстка интернет магазина.

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

.
Ссылка на макет: https://yadi.sk/d/Ay_kFVnW3a5Qsz
.

.
��‍�� Обучение веб-разработке: http://webcademy.ru/htmlstart/
За 2 месяца научим создавать веб-сайты и зарабатывать на этом, используя передовые технологии HTML/CSS/JS/PHP/MySQL.
�� возможна рассрочка
�� если курс не понравится, вернём деньги в первую неделю.
Нужна консультация? → https://vk.com/webcademy

�� Бесплатный курс «Создай свой первый сайт на HTML5 и CSS3» 7 уроков по 30 мин: http://webcademy.ru/htmlsite/

�� Курс «Профессия HTML Верстальщик»: http://webcademy.ru/htmlstart/
�� Продвинутый курс «Веб-разработчик. Frontend и Backend»: http://webcademy.ru/webdev/
�� Сайт школы: http://webcademy.ru
�� Наша Группа Вконтакте: https://vk.com/webcademy
�� Телеграм-чат для верстальщиков: https://t-do.ru/webcademychat
.

.
ТАЙМ КОДЫ К ВИДЕО:

00:27 — Приветствие.
05:30 — Рассматриваем стоимость вёрстки.
07:10 — Рассматриваем процесс разработки сайта.
07:45 — История создания одного сайта.
26:25 — Приступаем к практике.
27:00 — Знакомство с макетом.
1:02:20 — Вёрстка — «Логотипа и Навигации».
1:06:30 — Скачиваем бутстрап сетку.
1:40:15 — Ответы на вопросы в чате.
1:41:20 — Вёрстка Хедера.
2:02:05 — Ответы на вопросы в чате.
2:13:30 — Вёрстка блока с товарами.
2:21:03 — Ответы на вопросы в чате.
2:22:20 — Вёрстка карточек.
2:33:52 — Ответы на вопросы в чате
2:41:42 — Вёрстка блока – “Get something you love”.
2:51:20 — Верстаем блок с брендами.
2:54:30 — Ответы на вопросы в чате.
2:57:10 — Вёрстка блока – “Fetured Products”.
3:08:25 — Ответы на вопросы в чате.
3:09:55 — Вёрстка блоков – “Blog Posts и футер”.
3:12:15 — Ответы на вопросы в чате.
4:06:20 — Презентация Марафона 11 услуг по веб-разработке.
4:09:05 — План марафона 11 услуг по веб-разработке.
4:19:15 — Ответы на вопросы в чате.
.

Основы Верстки HTML5 / CSS3 С Нуля За 3 Часа

Верстка сайта с нуля на Bootstrap 4 — Адаптивный сайт

Мы продолжаем курс по bootstrap верстке адаптивного сайта с нуля. В верстке сайтов главное усидчивость и внимание, дело это совсем не трудное, просто применяете приобретенные ранее на практике знания. Bootstrap верстка сайта это совсем просто, главное понять сам принцип и следовать ему в каждой секции адаптивного сайта применяя нужные классы. В данном уроке по верстке сайта мы применим все необходимые классы и я вкратце расскажу про hover эффекты css фреймоврка material design bootstrap.

Bootstrap верстка современного сайта за 45 минут!

Урок на сайте itProger: https://itproger.com/course/one-lesson/3

Как создать сайт на Bootstrap 4? В этом видео мы с вами создадим полноценный адаптивный сайт на Bootstrap всего за 45 минут. Верстка сайта дело несложное, поэтому вы научитесь делать отличные сайты всего за 45 минут!

✔ Основной сайт: https://itproger.com/

✔ ————-
Группа Вк — https://vk.com/prog_life
Группа FaceBook — https://goo.gl/XW0aaP

Instagram: https://www.instagram.com/gosha_dudar/
Я в Google+ — https://goo.gl/Tqt9W0
Страничка Twitter — https://twitter.com/GoshaDudar
Страничка Вк — https://vk.com/codi999

✔ Начните зарабатывать на YouTube — http://join.air.io/money_air
✔ Видео по заработку на YouTube — https://goo.gl/RLPXV8

Помощь в развитии канала.
* Яндекс Деньги: 410014343706921

* Кошельки WebMoney:
— Доллар: Z331064341236
— Гривна: U386388718252
— Рубль: R214610220703

Верстка сайта HTML + CSS

1) Как организовать проект
2) Первоначальный шаблон
3) Сброс стилей
4) Подключение js, css
5) Проверка работы js
6) Первоначальная верстка, как сделать шапку, тело, футер

Используемые технологии: HTML, CSS, JavaScript

Компьютерная Школа Hillel

site: http://itschool-hillel.org
тел.: +38 (097) 156-58-27

fb: https://www.facebook.com/hillel.it.school
vk: https://vk.com/hillel_itschool_kiev
in: https://www.instagram.com/hillel_itschool
tw: https://twitter.com/hillel_itschool
ln: https://www.linkedin.com/company/hillel_itschool
yt: https://www.youtube.com/user/hillelitschool
g+: https://plus.google.com/107393502085367390120

Как сверстать сайт с нуля на HTML5 и CSS3 — полноценное руководство

Как правильно и быстро верстать сайты

Всем привет, друзья. Сегодня мы затронем очень важную тему — быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку. Теперь, я с радостью поделюсь накопленными знаниями, хитростями и фишками скоростной верстки, чтобы вы, дорогие мои друзья, смогли заработать больше денег за единицу времени. Ведь именно скорость верстки влияет на то, какую колбасу вы будете кушать на завтрак. Обычно медленные веб-дизайнеры кушают на завтрак колбасу за 80 рублей из эмульсии шкурок, в то время, как более прозорливые и быстрые — хорошую докторскую за 900 рублей/кг. Конечно, есть много веб-дизайнеров, которые скажут — «Я выполняю работу вдумчиво и качественно, соответственно, медленно». Я не буду долго углубляться в психологический анализ, но это отговорки и самооправдание. Можно верстать очень быстро и качественно, это не картину маслом малевать.

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

1. Анализ макетов и подготовка к верстке

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

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

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

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

Если вы — самобытный верстальщик 80lvl и считаете, что сами сможете сделать сетку проекта лучше Bootstrap — разработайте вашу собственную сетку, протестируйте и подключите к вашему проекту. Проект без сетки — геморрой на долгие года, благоприятная и теплая среда для размножения HTML костылей в будущем.

1.2 Определите параметры проекта

Не зависимо от того, используете ли вы какой-либо CSS фреймворк, обязательно используйте CSS препроцессор. Это очень важно, так как позволит вам сэкономить время на написании CSS. Открывая любой свой выполненный проект я с ужасом наблюдаю, как много времени было потрачено на написание CSS, можно сказать, что 60-70% работы на этапе верстки — это написание CSS. И было бы логично данный этап автоматизировать. Я рекомендую использовать препроцессор Sass, но здесь вы можете выбрать любой препроцессор, который вам нравится. Если вам понравился Sass синтаксис, рекомендую ознакомиться с руководством Sass для самых маленьких, где я рассказываю о преимуществах использования препроцессора и привожу примеры, которые демонстрируют эффективность верстки с использованием Sass. Довольно трудно объяснить новичку преимущества использования препроцессора, но ребята, которые, как говорится, «уже хлебнули», понимают, на сколько это эффективный инструмент. Думаю, после выполения верстки 10-15 макетов к вам придет это понимание, а пока просто поверьте мне на слово — верстать с CSS препроцессором быстрее.

Цукерберг рекомендует:  Практика java - Где найти практические задания для Java

Создайте файл _typography.html, подключите к нему все необходимые стили и библиотеки. Это будет ваш базовый плацдарм с типовыми элементами. Исходя из данных открытого в графическом редакторе макета, определите такие параметры проекта, как:

  1. Базовый шрифт. Определяется для селектора body. Это размер и шрифт текста на текстовых макетах сайта, например, на странице «Статья» или размер и шрифт текста наиболее часто повторяющихся текстовых блоков на макете Landing Page. Если не смогли определить размер, так как, например, все элементы одностраничника разные, напишите font-size: 16px, это среднее значение по больнице. Отобразите базовую верстку в _typography.html;
  2. В файле _vars.sass определите переменную акцентного цвета и остальных явных цветов макета. Здесь и далее я буду приводить в пример и менно Sass, но вы можете без труда спроецировать информацию на ваш препроцессор. Постарайтесь задавать интуитивно понятные названия переменным и комментировать переменные, чтобы в дальнейшем не запутаться;
  3. Пройдитесь по всем страницам проекта и определите заголовки от h1 до h6 (Размеры, капс/некапс, шрифт, цвет). Сделав это заранее, вы сэкономите около 10 минут вашего времени или 1 часа, с учетом времени на прокрастинацию. Также определите инверс для заголовков и цвета текта. Добавьте родительский класс .dark-section ко всем заголовкам и тегам типографики p, blockquote, ol, ul, если в вашем макете есть секции «светлым по черному». Отобразите базовую верстку типографики в _typography.html;
  4. Также было бы полезно сразу определить типографику вашего проекта. Для тега body определите такой параметр, как line-height, обычно это 1.4 — 1.7 без указания единиц измерения. Расстояние между строк базового текста должно быть ориентировочно такое-же, как на макете в графическом редакторе. Здесь очень важную роль играет ваш глазомер, он очень сильно влияет на скорость вашей работы. Вам не придется измерять линейкой всё и вся, если ваш глазомер работает как надо. Данный скилл, к сожалению, развивается только с опытом и я не могу представить себе упражнения лучше, чем верстка, сам рабочий процесс.
  5. Определите кнопки. В вашем макете, наверняка есть кнопки. Определите параметры самой большой кнопки и используйте CSS модификатор для получения кнопок другого размера. Не определяйте заранее отношение элементов к «внешнему миру», такие как float, только внешний вид. Единственное, опытным путем было выявлено, что чаще всего кнопки наиболее универсальны по отношении к внешним элементам, если определены, как display: inline-block по-умолчанию. Отобразите базовую верстку кнопок в _typography.html;
  6. На ваше усмотрение, определите другие специфичные конкретно для вашего проекта параметры и повторяющиеся блоки заранее. Если вам кажется, что можете что-то забыть — комментируйте.

1.3 Ускоряем экспорт данных из макета

Раньше было такое понятие, как «Нарезка изображений» или «Нарезка макета». Сейчас такое определение не совсем корректно и более подойдет Экспорт данных из макета. Экспорт данных заключается в экспорте изображений и определении параметров для CSS.

Если вы пользователь Photoshop, вы можете использовать плагины для определения CSS свойств, такие, как CSS Hat. Отличная альтернатива подобным плагинам и инструментам — развитый глазомер. Когда у вас будет достаточный опыт, вы естественным образом откажетесь от подобных инструментов. Обратите внимание, что копируя абсолютно все CSS свойства из CSS Hat, вы будете верстать несколько быстрее, но потеряете в качестве и возможностях кастомизации. Дело в том, что CSS Hat не всегда правильно определяет отношение элементов к другим. Там где нужен padding, он определяет margin, там где нужна резиновая ширина или значение в процентах, он определяет фиксированные значения. Поэтому развивайте глазомер и храните базовые параметры в переменных.

Для быстрого экспорта картинок достаточно пользоваться новым Adobe Photoshop или Adobe Experience Design. У первого достаточно кликнуть на слое правой кнопкой мыши и вырать пункт Quick Export As PNG. В Adobe XD процесс экспорта изображений также прост и даже есть возможность экспорта нарисованных иконок в формат SVG. На данном этапе не слишком заморачивайтесь оптимизацией изображений, так как это задача для таск-менеджера. Об этом чуть позже.

Что касается иконок:

  1. Если это сложные иконки или иконки-изображения, которые предположительно должны меняться контент-менеджером через админку сайта — экспортируйте их как png и подключайте в тег img, как обычные картинки;
  2. Если это «фиксированные» иконки, которые ни под каким предлогом не будут изменены на сайте и контент-менеджеру их менять незачем (например, иконки телефонов, почты, карты и т.д.), можете объединить их в спрайт и использовать через CSS, задавая одной картинке разные координаты background-position. Данную операцию можно автоматизировать с помощью Gulp плагина css-sprite. Хотя можете сделать сами, если иконок немного, просто разбив направляющими поле на матрицу из квадратов заданной ширины и высоты. К Gulp вернемся чуть позже и подробнее рассмотрим важность таск менеджера в быстрой верстке. Только предварительно убедитесь, что дизайнер не использовал какой-либо шрифтовой айконпак. Если это так то достаточно будет подключить соответствующий айконпак к проекту;
  3. Если это одноцветные простые иконки, также убедитесь, что дизайнер не использовал шрифтовой айконпак. Если это так то подключите соответствующий айконпак к проекту. Чаще всего используется шрифтовой айконпак Font Awesome. Если иконки самобытные — переведите их в вектор и создайте свой шрифтовой айконпак. У нас есть урок на эту тему: Создание шрифтового Icon Pack с использованием сервиса Fontello.

2. Скорость печати

После того, как вы подготовили все материалы, экспортировали картинки, сделали шрифтовой Icon Pack проекта, подготовили все иконки, настроили проект, можно приступать к верстке. Думаю, очевидно, что если вы хорошо знаете теги и CSS свойства, узким местом в скорости может быть только скорость набора символов на клавиатуре в процессе HTML верстки и написания CSS свойств. Для прокачки данного скилла более, чем достаточно освоить какой-либо метод быстрого набора символов на клавиатуре. Методов много и эта информация легко гуглится. Занимайтесь, практикуйтесь и все получится. Здесь также немаловажную роль играет практика именно верстки.

Мне как-то написал начинающий веб-разработчик, который сетовал на то, что его мечты о легком заработке не оправдались и за верстку макета Landing Page на биржах фриланса ему предлагают 2000 руб. Он отправил мне примерный макет. Я спросил, сколько бы он взял за этот макет денег, на что бедолага ответил мне — 10-12 т.р. Если бы мне предлагали на верстку LP за 2000, когда у меня была небольшая пригоршня опыта, как у этого парня, я искренне был бы рад таким возможностям. Конечно, сейчас верстка в моем исполнении стоит несколько дороже этой цифры, но если бы я брал такие проекты за 2т.р, с текущей скорость работы я без проблем поднимал бы 4-5 т.р в день без потери в качестве, работая по 7 часов в день. Не густо, но уже не плохо. Вообще, признаюсь вам, друзья, меня подбешивают нытики, у которых все плохо, у таких всегда будет куча отговорок и бублик в кармане. Поэтому оставим эту историю и двигаемся дальше к нашей цели верстать быстро и качественно.

3. Используйте Emmet и/или Jade

Я люблю Emmet. Благодаря этой полезной штуке, моя работа в 10 раз быстрее, чем без нее. Без лишних слов, просто посмотрите урок: на YouTube.

Также, вы можете использовать Jade или любой другой HTML препроцессор. Штука тоже удобная и классная, но для моих задач хватает Emmet с головой. Вангую много недовольных поклонников Jade, но несмотря на все преимущества и фишки, include для меня не многим проще вставки шапки Ctrl+V, а репит миксина не легче того-же Ctrl+Shift+D. Теоритически, если подумать, изменив шаблон миксина, можно не заморачиваться с переверсткой однотипных накопированных элементов, но таких ошибок я не допускаю, да и крупные проекты не по моей части, поэтому, надобности в ускорении подобных моментов нет. Пробуйте, друзья, экспериментируйте, может вам понравится такой инструмент :-)

4. Используйте ваши наработки

Используйте Github Gist для сохранения ваших наработок, кусов кода, блоков и даже целых секций. Всего того, что вам может оперативно пригодиться в процессе верстки. У нас есть урок по настройке Github Gist в редакторе Sublime Text для быстрого доступа и поиска нужного гиста: урок на YouTube с таймкодом на подключении Gist и отдельный урок по Gist.

5. Используйте таск-менеджер

Использование таск менеджера, например, Gulp — важнейший элемент быстрой работы над версткой. С помощью таск-менеджера вы сможете автоматизировать такие моменты, как: создание рабочего веб-сервера с автообновлением страницы при сохранении в редакторе кода; удобное использование препроцессоров; автоматизация рутиных задач, таких, как оптимизация изображений, сжатие CSS, JS, если нужно, то и HTML и многие другие задачи.

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

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

6. Изучайте jQuery

Если бы данное руководство было написано для Front-End разработчиков, все сводилось бы к изучению JavaScript и его фреймворков, таких, как Angular. Но я не силен во Front-End, как и в программировании в целом, моя стихия — веб-дизайн, поэтому пусть настоящий глубокий фронтенд остается на закуску акулам прграммирования. Чаще в процессе верстки приходится решать несколько другие задачи. А именно: анимация каких-либо блоков, настройка сортинга в таблицах, создание табов и аккордеонов, подключение библиотек, определения фоллбека для SVG файлов, определение параметров документа для несложных операций и прочие мелкие скриптовые работы. Для этих целей нет лучше библиотеки, чем любимой всеми верстальщиками jQuery. Она проста, элегантна и обрасла огромным количеством плагинов, которые решают практически все необходимые задачи маленьких и средних проектов.

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

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

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

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье «Как стать крутым веб-дизайнером», но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

  1. Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
  2. Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
  3. Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
  4. Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
  5. Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
  6. Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: «Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок. «;
  7. Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
  8. В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
  9. Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
  10. Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
  11. Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? — да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

2. Как быть с Perfect Pixel? — я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея, простите за выражение, говно, то хоть сколько ее не полируй и подгоняй по пикселам, она так и останется неработающим высером. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

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

4. Где кончается грань верстки и начинается Front-End, это разве не одно и то же? — все просто, если стоит задача разработать сложный интерактивный интерфейс какого-либо сервиса или веб-приложения, где нужна тесная работа с базой данных — это Front-End. Такие уникальные проекты выходят за рамки области компетенции и бюджета одного фрилансера, чаще всего подобные задачи ставятся команде разработчиков и подходы к таким проектам совершенно другие.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

20 полезных советов по CSS для начинающих верстальщиков

Опубликовано 05 Апрель, 2009 автор Hiway в категориях Верстальщику.

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

Поэтому, сегодня, благодаря друзьям из далекого «забугра» (источник), я хочу опубликовать 20 полезных советов, которые очень помогут начинающему CSS-кодеру.

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

1. Использование reset.css

По умолчанию браузеры, например Firefox и Internet Explorer, по разному интерпретируют стили из-за собственных базовых CSS. reset.css помогает сбросить дефолтные стили браузеров, что дает вам возможность начать с «чистого листа» — увидеть базовые CSS-свойства одинаково в большинстве браузеров.

2. Используйте сокращения в CSS

Шорткаты в CSS дают более короткий способ описания свойств, при этом код становится чище и легче.
Вместо CSS кода такого типа:

Можно написать более понятный и короткий код:

3. Понимание Class и ID

Эти два селектора часто путают новичков. В CSS, class представлен точкой «.» в то время как id соответствует символ «#». Если кратко, то id используется в стиле, который является уникальным и не повторится, а class можно использовать повторно.

4.Власть

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

    или
      особенно в случае создания меню.
      Полезные сылки — Taming Lists, Amazing LI.

5. Забудьте — попробуйте

Одним из самых больших преимуществ CSS является использование

Имеют в отличие от

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

6. Средства отладки CSS

Очень удобно использовать специальные инструменты для отладки CSS на стадии разработки, чтобы увидеть и исправить ошибки. Вот несколько бесплатных инструментов отладки CSS, которые вы можете использовать в браузере: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, и Firebug.

7. Избегайте лишних селекторов

Иногда ваши CSS правила могут быть значительно короче, вот например посмотрите на два варианта кода:

Блочная верстка сайта

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

Отличия блочной вёрстки от табличной

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

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок

Конечный HTML-документ представляет собой набор блоков

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

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

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

Разберём некоторые моменты.

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

Теперь добавим файл CSS, код которого приведён ниже.

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

#clear запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих