Верстаем с нуля

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

В этой статье я расскажу как стать начинающим верстальщиком. Т.е. после выполнения всех рекомендаций в можете претендовать на данную позицию. Статья создана специально для учеников 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

Практика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше?

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

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

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

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

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

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

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

Блочная верстка сайта — 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. Бесплатный мини-курс по вёрстке сайта.

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

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

Верстка сайта с нуля [подборка] лучших курсов по HTML/CSS

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

Здесь я выложил неплохие на мой взгляд курсы по верстке сайтов для начинающих. А в конце я расскажу свой метод, который позволил мне в игровой манере и бесплатно освоить HTML-CSS. Поехали!

Лучше курсы «Верстка сайтов с нуля» 2020

Давайте договоримся: под версткой сайтов с нуля мы понимаем начальный уровень изучения HTML, CSS и, возможно, JavaScript в придачу. Остальное это уже не с нуля.

Значение для нас будет иметь методология, наличие рабочих материалов, поддержка продавцов курса. А также, насколько данный курс крут — не устарел ли морально. Ну и конечно, цена-качество.

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

1. Udemy.com

Udemi.com это просто гигантский международный образовательный портал по Digital дисциплинам и не только. Всё самое лакомое на английском. Курсы стоят $65-200, однако можно поймать период скидок и взять курс за 1500 руб. Это очень большое преимущество перед многими другими курсами.

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

На Юдеми я лично изучал курс по AdWords и Python. Поскольку это площадка, то здесь есть рейтинг преподавателей, который довольно объективно отражает реальность.

Вначале определитесь с направленностью: азы HTML-CSS, респонсив дизайн для предпринимателей или сайт с нуля? А далее смотрите по рейтингу и отзывам.

2. Курсы Михаила Русакова

Какой-то айти-самородок решил не только писать код, но и обучать этому всех желающих. У Рускова очень конкурентные цены (4-7K рублей) и масса бесплатных курсов, включая HTML-CSS. Форум общения есть. Насчет скорости поддержки и сопровождения не могу сказать.

Для жадных есть возможность набрать пакет курсов по сниженной стоимости. Учитесь наздоровье! Браво, Михаил.

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

3. Codecademy.com

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

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

4. Htmlacademy.ru

Как написано на сайте Хтмл-академии, курс подойдёт тем, у кого мало времени. При этом курс профессиональный и охватывает все аспекты веб разработки: разметка, работа с сеткой, графика. За 14 500 руб. студенты получают знания, работу с наставником и доступ другим материалом академия на время курса.

Курс HTML и CSS, уровень 1 длится 9 недель. На мой взгляд, довольно привлекательный формат и цена-стоимость. Есть много положительных отзывов об этом курсе.

5. Skillbox

Skillbox одни из лидеров русскоязычного образовательного контента в области интернет-разработки и маркетинга. Круто, но дорого (50000 руб.).

Компания основана создателями landing page, которые работали в связке с Бизнес Молодостью на пике популярности их концепции. Миша с Петей рассказывали про лендинги, а Дима Крутов и Ко. принимал заявки на изготовление.

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

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

Курсы по верстке от Скилбокс

6. Geekbrains.ru

Geekbrains.ru это образовательная площадка от Mail.ru, которая охватывает все диджитал дисциплины и даже предлагает гарантию трудоустройства после прохождения курсов.

Курс Фронтэнд разработчика от Geekbrains длится 7 месяцев и стоит 50000 рублей (оплата разбита помесячно). Возможно, не самая лучшая стратегия для, например, маркетолога или предпринимателя, который не собирается с головой погружаться в профессию.

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

Курс HTML/CSS от Гикбрейнс чисто по верстке. Стоит 11 370 рублей, длительность 1 месяц. Это уже приемлено, если вы не собираетесь стать гиком.

7. Coursera.org

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

Курсы, имеющие отношение к веб-верстке на Coursera есть как на английском, так и на русском (от Яндекса)! Курсы платные, но зато вы можете подать заявку на финансовую помощь от Курсеры.

8-10. Другие курсы HTML-CSS от частных школ

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

Имеет значение преподаватель – нравится он вам лично или нет? А также цена, которая колеблется в районе 12-30 килорублей. Такие вещи как дистанционность и график обычно вторичны.

Просто накидаю ссылок на некоторые из них:

info-hit.ru/catalog/sozdanie-saytov туева туча курсов, курсиков и бесплатных пособий

webdesign.tutsplus.com (видео уроки на английском, по подписке $16,5/мес.)

brunoyam.com (19 900 руб. оффлайн курс в СПб)

berloga13.ru (11 800 руб. тоже в офисе в СПб)

Бесплатные курсы по верстке сайтов с нуля

Для тех, кто не привык платить, я собрал несколько хороших ресурсов, которые помогут в самостоятельном освоении веб-верстки.

htmlbook.ru и www.w3.org/ — это ликбез для самообразования, справочники по HTML/CSS. С ними вам придется, так или иначе, сталкиваться в любом случае, поскольку они первые в выдаче, если вам придется гуглить что-нибудь по вопросам кода.

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

Также я рекомендую такую песочницу (место, где можно потестить код) — JSfiddle.net. В ней очень удобно проверять куски кода, и работает это прямо из браузера.

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

Бесплатный интерактивный метод изучения HTML-CSS

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

Webflow.com — вот мой верный друг в путь от дизайна к веб-дизайну.

Webflow: сначала перетягиваем, потом понимаем, что выучили HTML/CSS

Это фреймворк, который позволяет верстать сайты в визуальном редакторе. Основное отличие Вебфлоу от других редакторов типа ЛП-генератора в том, что на выходе вы получаете чистый код, responsive design и возможность экспорта кода — HTML CSS, Javascript, картинки и шрифты (в платной версии или используя трюки).

Если пример вы знакомы с Tilda, то Вебфлоу это совсем другая история. В Тильде невозможно заниматься кодом, поскольку настройки напрямую не привязаны к элементам HTML или стилей CSS. А в Webflow привязаны!

Настройки панели Вебфлоу даже названы в точном соответствии со стилями CSS: когда вы изменяете параметр Float, вы именно редактируете CSS правило float, а ни какое другое. Всплывающие подсказки над иконками сообщают значений этих параметров.

В качестве html элементов Вебфлоу предоставляет на выбор свои предустановленные тэги (section, container, columns), а также общеупотребимые типа div, a, button, ul, H1-H6, p, img, и прочих.

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

Вот и все обучение!

Можно подгружать собственные фотографии, менять фоны, цвета и даже настраивать анимацию. Потом все это можно просматривать В режиме превью или опубликовать на домене вида sitename.webflow.io.

Это прекрасно: у вас есть защита от дурака, в коде не будет ошибок. На первых порах вы будете выбирать неоптимальные настройки разных параметров, таких как margin/padding на родительских и вложенных элементах, будете по 10 раз переписывать разные правила, делать названия классов без унифицированной нейминг-конвенции. Но это не страшно.

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

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

• Выберите понравившийся сайт в рубрике Showcase / (можно Cloneable)
• Убедитесь, что автор предоставляет доступ к просмотру в режиме правки Webflow (ваши изменения не сохранятся)
• В другом браузере откройте свой чистый проект и начинайте копировать работу дизайнера

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

Вам же важно разобраться с базовыми терминами HTML/CSS. При этом посматривайте на название параметра и названия значений настроек, которые вы изменяете в правой колонке. Так играючи за пару месяцев можно выучить базовые элементы верстки.

Особенно круто изучать Flex и Grid layout при помощи Вебфлоу. Иначе, я не представляю, как можно запомнить все эти атрибуты у родителя и вложенных элементов.

Что вы не сможете изучить с помощью Вебфлоу:

• псевдоклассы :before, :after, :not и др.
• Задание стилей через CSS селекторы вида «.some-class ul» — вместо этого придется создавать дополнительный стиль для конкретного элемента ul.
• Интегрировать кастом код свыше 5000 знаков (как вариант, можно сделать это после экспорта)

Обучающие видео и мануалы — их в избытке на самом Вебфлоу. Открывайте и вдохновляйтесь.

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

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

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

Программы для верстки сайтов.

06.02.2020

Программы для верстки сайтов.

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

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

1. Редактор кода — думаю можно скачать бесплатно

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

Сейчас по факту у меня на пк установлены две программы для верстки, — IDE PHPStorm и Sublime Text. Саблайм хорошо выезжает на дополнительно установленных пакетах и темах. А вот PHPStorm, — умеет уже из коробки, то что обычно до устанавливаю на SublimeText3. Поэтому PHPStorm это мой основной редактор кода. Чаще всего на нем юзаю горячими клавишами:

• Выравнивание кода(как правило по ) ( выделяю всё crtl + A, выравниваю ctrl+alt+L)
• Поиск по всему проекту + найти и заменить (ctrl + shift +F)
• Найти метод или его использование ( ctrl + клик левой кнопкой мыши)
• Закомитить + запушить (ctrl + K ctrl + shift + K)
• Работаю с базой данных проекта (на правой стороне панели редактора)
• Обнять часть кода новым тегом html (ctrl +alt + J)
• Показать идентичные куски кода (ctrl + alt + shift + J)
• создание и использование сниппетов и пр.

2. Emmet.

Программа для верстки сайтов в программе редактора кода. Эдакий набор плагинов для текстовых редакторов. Этот товарищ поможет быстрее набирать код в HTML & CSS.
Например такой строкой:
nav>ul>li*3
По жамканью на tab Вы получите такой код:

Или вот так например в CSS :
bg
Даст:
background: #000;

3. CSS препроцессоры.

Это конечно не программа для верстки сайтов, а наверное больше быстрый и умный способ написания кода CSS. Сам использую LESS, SASS, SCSS. Разобравшись с одним из них, остальные Вы тоже поймете. Они отличаются только синтексом. Я использую препроцессоры потому что в них есть:

Код css получается более удобочитаемым, структурированным, легко редактируемый и расширяемый. Ух какие длинные слова, но они очень важны для верстальщика HTML .

4. Grid (сетка).

Как правило .psd макет веб-дизайнер разбивает на колонки(12, 24 и прочие извращения). Самостоятельно подгонять под сетку с помощью отступов, это издевательство над собой. Поэтому лучше воспользоваться сетками от фреймворков. Самая известная от Bootstrap. Bootstrap — это свободный набор инструментов. Который закрывает сразу множество задач по верстке. Поэтому советую изучить его и использовать как повседневный инструмент в верстке.

Есть еще менее известные сетки, но не значит, что они хуже остальных, например:
Skeleton или
Smart-Grid(Дмитрий Лаврик), — это вообще самое лучшее что может быть в сетках для быстрой и качественной верстки сайтов.

5. Таск-менеджер | Сборщик проектов | Менеджер задач | Ваш личный раб

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

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

• Расставляет префиксы CSS для всех браузеров
• Минимизирует CSS удаляя пробелы, и переносы
• Создает файлы .map указывая номер строк браузеру для того что бы дебажить изначальный код
• Группирует медиа запросы(что бы не повторялись для разных элементов DOM в одной ширине)
• Преобразует препроцессорный код в обычный CSS
• Минимизирует изображения
• Уродует и минимизирует код JavaScript
• Объединяет все файлы CSS в один(уменьшая количество обращений к серверу)
• Минимизирует файлы HTML
• Отслеживает изменения в редактируемых файлах и самостоятельно обновляет браузер во время верстки
• Конфигурирует файл Smart-Grid

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

6. Онлайн программы, для верстки и работы с .psd макетами сайтов.

И еще когда нет под рукой Photoshop или просто хочется что-то новенького, можно использовать для препарирования .PSD макета, — онлайн программы типа:

Верстка сайта с нуля на 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

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

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

Как сверстать сайт профессионально — 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 — полноценное руководство

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

Из собственного опыта:
начинал с книг, статей, htmlbook — дало начальную базу, позволяло с большего править готовые шаблоны.
Потом появились интерактивные курсы:
— codecademy.com показались слабыми: пройти лишним не будет, но особо не продвинетесь.
— teamtreehouse.com — неплохие курсы, активно развиваются, но платные.
— htmlacademy.ru — очень крутые: отлично подается теория, много практики, основной раздел бесплатный. К тому же сервис русскоязычный.

У этих же ребят есть интенсив по верстке сайтов с нуля. Прошел его.
Если есть возможность оплатить — очень рекомендую. Реально вырастете за месяц. Плюс у вас останутся записи вебинаров и бесплатный доступ на все последующие интенсивы.
Могу поделиться промо-кодом «344a1a5b»(без кавычек) — скидка 800р.

Верстаем с нуля

Оплата деньгами производится через сервис ROBOKASSA, принимающий платежи самыми разными способами (карты VISA/MasterCard, электронные кошельки и другие).

После оплаты, пожалуйста, нажмите на кнопку «Вернуться в магазин» для возврата на наш сайт. Защищенное соединение.

Оплата деньгами производится через сервис PayAnyWay, принимающий платежи самыми разными способами (карты VISA/MasterCard, электронные кошельки и другие).

PayAnyWay не передает данные Вашей карты магазину и иным третьим лицам. Безопасность платежей с помощью банковских карт обеспечивается технологиями защищенного соединения HTTPS и двухфакторной аутентификации пользователя 3D Secure.

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

К сожалению, мы не можем принять платеж из Вашей страны

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

Всем привет, друзья. Сегодня мы затронем очень важную тему — быстрая и правильная 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 препроцессором быстрее.

Создайте файл _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 от А до Я

Как сверстать сайт?

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

В этой статье я покажу, как сверстать его из PSD-макета в готовую веб-страницу, используя инструменты HTML-разметки и каскадные таблицы стилей (CSS).

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

Подготовительный этап

Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:

• back_all — подложка сайта.
• header_top — фон шапки.
• big_pic — логотип.
• title — фон заголовков левой панели.
• footer — заливка низа сайта.
• 1mini — первое фото для основной части страницы.
• 2mini — второе фото.

В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.

Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.

Делим документ на блоки

Откройте документ index.html и впишите в него следующий код:

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

Блоков у нас 7, перечислим их по идентификатору (значению атрибута >

1. content — блок, внутри которого будут храниться остальные блоки.

2. header — блок шапки, внутри которого будут:

2.1. menu — верхняя навигация.

2.2. logo — картинка с текстом.

3. right — основная часть страницы.

4. left — панель слева.

5. footer — низ сайта.

Так и запишем (в контейнер вставьте следующий код):

В браузере страница будет по-прежнему пустой, но структуру документа уже можно понять, она готова.

Устанавливаем базовое форматирование

Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.

Откройте style.css и добавьте туда строки кода, которые встретите ниже.

Убираем отступы и поля на странице по умолчанию:

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

Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:

Определение блока content:

Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.

Оформляем горизонтальное меню

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

Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа.

Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:

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

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

Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:

Страница в обозревателе тут же преобразится и будет выглядеть так.

Теперь можно добавить и само меню в файл index.html:

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

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

Теперь форматирование меню можно сопоставить с PSD-шаблоном.

Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover).

Настраиваем логотип

Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.

Логотип вставлен ровно по размеру.

Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:

Текст появился, но его тоже нужно оформлять.

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

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

Верстаем основную часть страницы

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

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

Заполним контейнер right. Изображения поместим в простую таблицу.

Контент получил разметку, но ему явно не хватает белого фона, полноценно который появится ещё не скоро.

Создание левой панели

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

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

В файл CSS впишите следующий код.

Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно.

В контейнер left HTML-документа добавим сначала информационный блок без меню.

Белый фон распространился ещё ниже по странице.

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

Взгляните, как смотрится список. Многие могут подумать, что это таблица.

Подменю работает, надо только подвести мышку к пункту, его содержащему (у нас это Галерея, Прайс и Образцы).

Делаем ноги

Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.

Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).

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

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

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

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