Html5 — Где вы училисьучитесь верстать сложные элементы сайта

Содержание

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Всем привет. Давайте обсудим самый часто задаваемый вопрос: «Cколько времени нужно, чтобы научиться верстать сайты?»

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

Изучив все это, ты уже можешь начать монетизировать свои знания.

Photoshop

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

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

В свое время я изучила несколько уроков по отрисовке макетов и вот, что у меня получилось.

Ссылки на пройденные уроки:

Если захотите повторить урок, то скидывайте в комментарии, что у вас получилось!

Вообще этот сайт дал мне понять несколько вещей:

  1. Чтобы решить ту или иную задачу, вы можете воспользоваться разными инструментами. Нет единого рецепта для реализации;
  2. Будущему верстальщику не нужно знать основы ретуши, цветокоррекции. Главное овладеть простыми инструментами, такие как текст, создание фигур и цвет;
  3. Быстрые клавиши упрощают работу с программой.

Основные комбинации, которые я использую в любом макете:
Ctrl + «-» — уменьшить масштаб
Ctrl + «+» — увеличить масштаб
Ctrl + «1» — масштаб 100%
Ctrl + J — создать дубликат слоя
Ctrl + [ — уменьшить размер кисти
Ctrl + ] — увеличить размер кисти
Ctrl + Alt + Z — шаг назад (отмена действия)
Ctrl + Shift + Z — шаг вперед (вернуть назад отменённое действие)
Ctrl + Alt + I — диалоговое окно «Размер изображения»

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

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

Если Вы не совсем понимаете, как именно работать с макетом и какие картинки необходимо сохранить перед созданием сайта, то рекомендую пройти 3-х дневный курс «Супер старт».
На этом курсе от и до показан процесс верстки вот такого сайта. Первый урок полностью посвящен работе с Photoshop и он даст ответ на все вопросы, которые возникают у новичков. Стоит такой курс 100 рублей, что равноценно стоимости чашечки кофе. После оплаты вы получаете доступ в закрытую группу, где лежат все необходимые материалы.
Отзывы о курсе можно почитать тут.
На освоение азов работы с реальными макетом потребуется не больше недели. Главное практика и Вы сами будете заранее видеть, какой объект стоит вырезать из макета, а какой — оставить на месте.

Возможно, кто-то из вас ранее слышал что-то о тегах в школе или институте, но особой ясности о них все равно нет, то рекомендую пробежаться по статье «Знакомство с HTML».
Полезно всем, кто хочет структурировать знания по всем популярным тегам, которые Вы будуте использовать практически в любом проекте. Изложено все кратко и ясно.
Второй ресурс, который порекомендует любой веб-разработчик — htmlbook.ru
Во вкладке HTML вы можете увидеть страницу Справочник HTML, в котором находятся все теги, которые используются для разметки страниц.
На изучение HTML уйдет не больше недели при интенсивном изучении.

Когда я только изучала основы создания страниц и не понимала как работает вся эта магия со стилезацией. Почему стандартная разметка HTML в тандеме с CSS можем измениться до неузнаваемости. Разобраться в этом мне помогла книга «Изучаем HTML, XHTML и CSS» — Элизабет Фримен, Эрик Фримен.

Здесь описано всё настолько гениально просто, что начать верстать сможет даже 6-летний ребенок. Да, книга 2014 года. Да, некоторые советы утратили актуальность. Но это не мешает ей быть и оставаться must have учебником для тех, кто СОВСЕМ не знает с чего начать, но хотел бы создать свои первые веб-странички. Я была такой и у меня не было ни каких наставников и даже знакомых, кто хоть чуть-чуть разбирался в сайтах, но мне в руки попала эта замечательная книга и я бесконечно рада этому. Скачивайте, читайте, изучайте.

На освоение азов CSS по этой книге может уйти примерно месяц.

Но как я уже сказала, некоторые технологии утратили свою актуальность, поэтому Вам обязательно потребуется изучить основы Flexbox-верстки. Сделать это можно в игровой форме на этом сайте — flexboxfroggy.com
Также рекомендую держать в закладках следующую шпаргалку: yoksel.github.io/flex-cheatsheet, чтобы не забывать про свойства.

А чтобы эта статья была максимально актуальной на момент выпуска, рекомендую также поиграть в игру, которая поможет изучить CSS Grid — cssgridgarden.com Эта технология ещё не используется так широко, как Flexbox, но будущее за Grid. Поэтому не забудьте пройти игру.

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

Кстати на сайте htmlbook тоже есть справочник CSS по всем свойствам — htmlbook.ru/css Не забудьте заглянуть сюда.

jQuery

Возможно, кто-то удивится, почему я не говорю о Javascript, но этому есть объяснение. Сейчас мы говорим о том, какой минимум стоит знать новичкам, чтобы монетизировать свои знания. JavaScript — это большая тема, на изучение которой может уйти несколько месяцев. Зная лишь одну библиотеку Javascript, а именно jQuery — вы уже сможете делать все то, что хотел бы заказчик. Например, сделать слайдеры, анимацию или прокрутку. Знать для этого весь Javascript и писать с нуля код для старта нет нужды.
Поэтому начните с изучения jQuery.
Лучшим учебником считается — www.w3schools.com/jquery. Статьи на английском, есть уроки и весь необходимый материал.
Если потребуется сделать слайдер, то разные вариации можно найти в плагине Slick Slider — kenwheeler.github.io/slick
Но если все-таки вам интересны основы Javacript, то обязательно посетите сайт learn.javasсript.ru

На все это может уйти от месяца до двух при интенсивном изучении.

Выводы

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

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

Второй вариант — вы можете записаться на курсы «Верстальщик от А до Я» и этот срок сократиться до 2-х месяцев. Есть 2 курса: базовый и продвинутый, каждый из которых идет по месяцу. По окончанию у Вас будут сверстанные сайты и сертификат об окончании курса. Все это позволит сформировать ваше портфолио и найти свои первые заказы. Старт обучения 12 февраля 2020 года.

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

Верстальщик HTML (HTML-верстальщик)

HTML-верстальщик – это специалист, выполняющий вёрстку web-страниц. Другими словами, он создаёт HTML-шаблон для web-сайта с использованием знаний HTML-кода и всех особенностей стиля и графического оформления. Профессия подходит тем, кого интересует информатика (см. выбор профессии по интересу к школьным предметам).

HTML — аббревиатура от Hyper Text Markup Language (англ.) — это язык разметки гипертекста, принятый в World Wide Web для создания и публикации web-страниц. Соответственно, HTML-верстальщик – это специалист, выполняющий вёрстку web-страниц. Другими словами, он создаёт HTML-шаблон для web-сайта с использованием знаний HTML-кода и всех особенностей стиля и графического оформления. Созданный код должен одинаково отображаться во всех браузерах («кросс-браузерность») с учетом разных разрешений монитора и количества цветов.

Особенности профессии

Верстальщик посредством кода HTML, CSS и JavaScript создает HTML-шаблон, реализация которого состоит из нескольких этапов:

  • анализ графического дизайна сайта;
  • подборка модели шаблона;
  • нарезка графических спрайтов;
  • сборка HTML-шаблона.

В настоящее время существует большое количество компьютерных программ, которые автоматизируют труд верстальщика, различные текстовые редакторы с подсветкой кода, визуальные редакторы (Notepad++, Adobe Dreamweaver), front-end фреймворки (наборы фрагментов кода и библиотек классов для ускоренной разработки макета сайта путем прототипирования — ZurbFoundation-4 и т.п.). Они позволяют писать большие фрагменты кода в наглядном режиме, то есть результат каждого этапа работы можно наблюдать в отдельном окне. Но профессиональный HTML-верстальщик этими программами не пользуется. Он должен уметь использовать кодировку HTML вручную, без помощи визуальных редакторов, чтобы обеспечить максимальную корректность кода в минимальном весе.

HTML-верстальщик должен знать каскадные стилевые таблицы CSS, владеть JavaScript и базовыми навыками web-программирования на языках PHP, Perl или Java, а также основными графическими редакторами Photoshop, Fireworks, Gimp. Опытный верстальщик может создать небольшой сайт, используя текстовый редактор Microsoft Word c минимальным количеством средств и инструментов.

Успешная работа HTML-верстальщика строится на трех китах: качественный код, принцип юзабилити, адаптивный дизайн. Качественный код должен быть хорошо структурирован и иметь правильное семантическое оформление в соответствии с правилами SEO-оптимизации. Принцип юзабилити подразумевает простоту в разработке интерфейса. Навигация по сайту не должна заставлять посетителей напряженно думать. Простота интерфейса — залог успеха проекта. Адаптивный дизайн сделает сайт дружелюбным к мобильным устройствам.

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

Плюсы и минусы профессии

Плюсы:

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

Минусы:

  • присутствует доля рутинности и однообразия
  • необходимость долговременного сидения за компьютером

Место работы

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

Верстка сайта с нуля [подборка] лучших курсов по 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 руб. в интернет-рекламе.

Как стать верстальщиком с нуля: шпаргалка для начинающих

Дата публикации: 2020-09-19

От автора: доброго времени суток! Для непосвященных в вёрстке есть что-то таинственное и даже, можно сказать, пугающее. Когда мы заходим на сайт, то видим красивую картинку, стройную структуру и плавно выезжающую менюшку. Но за всем этим стоит труд хорошего человека, связующего звена между веб-дизайнером и веб-программистом — «серого кардинала», который не просто создал код всех элементов на сайте, но и постарался, чтобы они правильно отображались во всех браузерах. Давайте поговорим о нюансах этой интернет-профессии и о том, как стать верстальщиком с нуля.

Не повторяйте их ошибок!

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

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

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

С чего начинается работа верстальщика?

Как вы уже поняли, верстальщик играет важнейшую роль при создании сайта. Он создает код веб-страниц с помощью языков разметки HTML и XHTML, применяя каскадные таблицы стилей CSS.

Цукерберг рекомендует:  Вакансии ООО Симплекс Софтвер

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

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

Вначале верстальщик получает макет сайта от веб-дизайнера, чаще всего, в формате программы Adobe Photoshop — шаблоне PSD, который является заготовкой для вёрстки. Шаблон полностью отражает дизайн будущей веб-страницы, ее размеры и схему расположения всех составляющих (изображений, логотипа, кнопок, меню и т. д.).

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

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

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

Основы вёрстки на примере

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

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

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

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

С помощью классов CSS задаем настройки стилей. Параметром background указываем цвет фона. Свойствами height и width устанавливаем размеры. Отступы от верхнего, левого и правого края окна выставляются значениями margin-top, margin-left и margin-right.

Для верхней части сразу устанавливается цвет и фон. Путь к изображению, вырезанному из PSD-шаблона, указывается в специальном поле background-image.

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

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

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

Упрощаем процесс вёрстки

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

Вам только потребуется указать, что, когда и как отобразить на экране, остальное Bootstrap сделает сам. Кроме этого, благодаря его популярности, вашему коллеге будет проще дополнять ваш код.

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

Подведем итоги

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

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

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

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

ТОП-10+ лучших курсов по вёрстке на HTML и CSS для начинающих

А ты знал, что, по данным сайта TRUD.COM, верстальщики HTML и CSS зарабатывают 50 тысяч рублей в месяц? Это в полтора раза больше средней зарплаты в России! Даже мой батя, который сутками пашет на заводе и то меньше получает.

То есть, освоив профессию верстальщика, ты сможешь зарабатывать немало денег. Вопрос только в том, как её освоить.

А ответ прост — с помощью платных и бесплатных курсов по HTML и CSS (вдобавок, думаю, можно припихнуть сюда также JavaScript и PHP).

О них я и расскажу в этой статье.

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

Итак. Без лишних предисловий… Полетели!

Платные курсы по вёрстке на HTML и CSS — ТОП-4

№1. Я — Веб-разработчик — PRO

Кто проводит: Даниил Пилипенко, директор кадрового центра SymbioWay, бывший руководитель отдела разработки ПО в издательстве «Вокруг Света». А также другие преподаватели онлайн-школы интернет-профессий Skillbox.

Формат: вебинары + видеоуроки + домашние задания + реальные встречи + экскурсии по ТОП-компаниям + участие в форумах веб-разработчиков + гарантированное трудоустройство с зарплатой от 100 000 рублей.

Сколько длится: 2 года обучения (6 месяцев бесплатно — то есть оплатить можно с первых заказов).

Стоимость: 6 900 рублей в месяц (репетитор английского языка в Москве и то дороже берёт).

Что ты узнаешь из курса:

  1. Как верстать сайты.
  2. Как создавать интерфейсы с помощью JavaScript.
  3. Как работать с PHP.
  4. Как делать красивый дизайн.
  5. Как работать с 1C-битрикс.
  6. И многое другое.

№2. Frontend-разработчик с нуля

Да, верстальщик по-другому ещё называется Frontend-разработчиком.

Кто проводит: университет интернет-профессий Нетология.

Формат: вебинары + видеоуроки + практические проекты для портфолио + домашние задания + личные разборы с преподавателями.

Сколько длится: 10 месяцев.

Стоимость: 6 600 рублей в месяц.

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

  1. Исчерпывающие знания об HTML5, CSS3, JavaScript, JSX, React, VirtualDOM, Flexbox и React Router.
  2. Диплом от известного онлайн-университета, который точно понравится твоим работодателям.
  3. Готовое профессионально оформленное портфолио.
  4. Трудоустройство с зарплатой от 85 000 рублей в месяц.

№3. Как создать сайт самостоятельно

Кто проводит: крупнейшее российское агентство интернет-маркетинга TexTerra.

Формат: 13 лекций по 1,5 часа + домашние задания и обратная связь.

Сколько длится: 2 месяца.

Стоимость: 10 000 рублей.

Что ты узнаешь из курса:

  1. Какие типы сайтов существуют.
  2. Что такое юзабилити и как его улучшить.
  3. Как прототипировать сайты.
  4. Как верстать на HTML и CSS.
  5. Как разрабатывать сайты на WordPress.

№4. Профессия Frontend-разработчик

Кто проводит: портал GeekBrains и Mail.ru Group (компания, которая владеет такими популярными соцсетями, как VK, Одноклассники и Мой Мир).

Формат: самостоятельная работа + работа с преподавателем (обладающим минимум 5-летним опытом Frontend-разработки) + работа с наставниками из числа лучших выпускников предыдущих потоков.

Сколько длится: 7 месяцев.

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

Грамотным Frontend-разработчиком, умеющим верстать сайты по современным стандартам и виртуозно владеющим HTML, CSS и JavaScript.

Что ты получишь:

  1. Диплом.
  2. Портфолио.
  3. Среднюю зарплату в 100 000 рублей.
  4. Возможность поработать в стартапах других выпускников.
  5. Стажировку у партнёров GeekBrains (ПАО Сбербанк, ПАО Вымпелком и других).
  6. Полные знания об HTML и CSS.
  7. Подарочный 3-месячный курс по английскому языку.
  8. Обучающие мастер-классы и воркшопы.

Стоимость: 7 141 рубль в месяц.

Бесплатные курсы по вёрстке на HTML и CSS — ТОП-13

№5. Курс HTML/CSS

Кто проводит: Beonmax.

Формат: видеоуроки + интерактивные упражнения + домашние задания.

Сколько длится: 31 видеурок = 5 часов.

Что ты узнаешь из курса:

  1. Какие программы и инструменты надо использовать для вёрстки.
  2. Какие теги HTML существуют.
  3. Основы синтаксиса CSS.
  4. Как создавать меню, хедер, футер, сайдбар и многое другое.

№6. Интерактивный курс создания сайтов HTML и CSS с нуля

Кто проводит: Fructcode.

Формат: видеоуроки + интерактивные упражнения + домашние задания.

Сколько длится: 6 часов.

Стоимость: часть курса бесплатна, другая часть доступна после оформления недорогой подписки.

Что ты узнаешь из курса:

  1. Как пользоваться html-тегами div, span, p, ul, li и другими.
  2. Для чего нужен CSS (каскадные таблицы стилей).
  3. Как использовать css-свойства margin, position, padding, color, background и другие.
  4. Что такое адаптивная вёрстка.
  5. Как сделать вёрстку сайта.
  6. Как пользоваться инструментами разработчика в браузере Google Chrome.
  7. Что такое viewport и как его использовать.
  8. Как создать раздел с комментариями на сайте.
  9. Как встроить видео в html-страницу.
  10. Как изменить вёрстку сайта в браузере.
  11. Как связать html-страницы между собой.
  12. Как сверстать меню на сайте.

№7. Курсы от HTML Academy

Помню сам проходил эти курсы. Целую неделю по 3-4 часа в день сидел за бесплатными уроками от инструктора Кекса.

Кто проводит: HTML Academy, на мой взгляд, её сайт — лучшее место для обучения основам вёрстки.

Формат: интерактивные уроки с практическими заданиями.

Сколько длится: зависит от твоей скорости и мотивации.

Стоимость: большая часть курсов бесплатна.

Что ты узнаешь из курса:

  1. Основы HTML5.
  2. Базовое представление о CSS3.
  3. Основы JavaScript.
  4. Основы PHP.

№8. Курсы на Udemy

Кто проводит: разные преподаватели со всего мира.

Формат: видеоуроки + практические задания + тесты.

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

Стоимость: есть бесплатные курсы, есть платные.

№9. Основы HTML и CSS

Кто проводит: университет онлайн-профессий Нетология.

Формат: онлайн-вебинары 2 раза в неделю.

Сколько длится: 2 недели.

Что ты узнаешь из курса:

  1. Как вносить правки в HTML-код страницы и верстать текстовые блоки.
  2. Как менять оформление и стиль элементов сайта.
  3. Как профессиональные верстальщики работают над проектами.

№10. Курсы на CodeAcademy

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

Формат: интерактивные уроки, результат виден сразу же прямо в браузере.

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

№11. Бесплатный курс Евгения Попова по HTML для новичков

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

Формат: 33 видеоурока.

Сколько длится: всё зависит от твоих сил и скорости.

Что ты узнаешь из курса:

  1. Понятие тега.
  2. Как создавать каркас страниц.
  3. Как создавать параграфы и заголовки.
  4. Как создавать списки.
  5. Как создавать атрибуты.
  6. Как ставить ссылки.
  7. Как делать красивые таблицы.
  8. Как красиво оформлять текст.
  9. Как создавать поля форм, радиокнопки и чекбоксы.
  10. И т. п.

№12. Бесплатный курс Евгения Попова по CSS

Формат: 45 видеоуроков.

Сколько длится: всё зависит от твоих сил и скорости.

Что ты узнаешь из курса:

  1. Принципы работы CSS.
  2. Как подключать 3 базовых селектора.
  3. Что такое групповые селекторы.
  4. Что такое селекторы потомков.
  5. Что такое псевдоселекторы ссылок.
  6. Какие бывают семейства шрифтов.
  7. Как выравнивать текст.
  8. Как задавать высоту строки.
  9. Как делать сокращенную запись.
  10. Как делать рамки.
  11. Как работать со списками.
  12. Что такое наследование.
  13. Каскадность и приоритетность.
  14. Блочная модель, margin и padding.
  15. Ширина и высота блока, выравнивание.
  16. Конфликты полей.
  17. Блочные и встроенные элементы.
  18. Фоновый цвет и изображение.
  19. Повтор фонового изображения.
  20. Позиционирование фонового изображения.
  21. Фиксация фона.
  22. Краткая запись фоновых свойств.
  23. Как делать таблицы.
  24. Как создавать простой каркас на основе float.
  25. Что такое чистка обтекания.
  26. Колонки одной высоты.
  27. Позиционирование.
  28. Абсолютное позиционирование.
  29. Относительное позиционирование.
  30. Фиксированное позиционирование.
  31. Z-индексы.
  32. Видимость элементов.
  33. Максимальная и минимальная ширина сайта.
  34. Два способа подключения стилей
  35. Что такое наследование ненаследуемых свойств.

№13. Курс HTML для начинающих

Кто проводит: Артём Ивашкевич, программист компании Lamoda.

Формат: пошаговые статьи-уроки.

Сколько длится: 55 уроков.

Какие уроки есть в курсе:

  1. Создаём свою первую HTML-страницу.
  2. Теги как основа HTML-страницы.
  3. Тег doctype: указываем версию HTML.
  4. Из чего должна состоять любая страница в HTML.
  5. Заголовок HTML-страницы.
  6. Кодировка HTML-страницы.
  7. Ключевые слова (кейворды, keywords).
  8. Тег description: краткое описание страницы.
  9. Комментарии в HTML.
  10. Подключение CSS-стилей к HTML.
  11. Подключение скриптов JavaScript в HTML.
  12. Итог второго уровня курса по HTML.
  13. Разметка текста.
  14. Делаем абзацы в HTML.
  15. Делаем заголовки в HTML.
  16. Маркированные списки в HTML.
  17. Нумерованный список в HTML: тег ol.
  18. Делаем вложенный список в HTML.
  19. Выделяем важное жирным шрифтом.
  20. Курсив в HTML: теги em и i.
  21. Переносы и разделители в HTML: теги br и hr.
  22. Используем цитаты в HTML.
  23. Верхние и нижние индексы: оформляем формулы.
  24. Выводим текст как есть: тег pre.
  25. Учимся делать ссылки в HTML.
  26. Что такое абсолютные и относительные ссылки.
  27. Делаем ссылку на файл.
  28. Ссылка с якорем.
  29. Всплывающая подсказка для ссылок.
  30. Как вставлять картинки в HTML.
  31. Делаем картинку ссылкой.
  32. Описание картинки в HTML.
  33. Создаём таблицу в HTML: тег table.
  34. Делаем границы для таблицы в HTML.
  35. Горизонтальные и вертикальные границы в таблице HTML.
  36. Отступы в таблицах.
  37. Название таблицы в HTML.
  38. Ячейки-заголовки в таблице HTML.
  39. Объединение ячеек в таблицах.
  40. Выравниваем текст в таблице HTML.
  41. Способы выравнивания таблицы по центру в HTML.
  42. Учимся изменять цвет таблицы в HTML.
  43. Изменяем размер таблицы в HTML.
  44. Учимся создавать формы в HTML.
  45. Как задать значение по умолчанию для поля в форме.
  46. Как правильно сделать подписи к полям ввода.
  47. Создаём форму авторизации на HTML.
  48. Многострочное поле ввода: тег textarea.
  49. Поле-галочка в HTML.
  50. Поле-переключатель в форме HTML.
  51. Делаем раскрывающийся список в HTML.
  52. Форма для загрузки файлов.
  53. Используем скрытое поле в форме.
  54. Табличная вёрстка HTML-страничек. Прототип сайта.
  55. Как выложить сайт в Интернет: простая инструкция.

№14. Курс HTML и CSS — вёрстка сайтов для начинающих

Кто проводит: PHP-School.

Формат: статьи-уроки + домашние задания.

Сколько уроков: 11.

Продолжительность: 20 часов.

№15. Free HTML and CSS tutorial

Кто проводит: Джереми Томас, американский фронтенд-разработчик и фрилансер, сотрудничающий с такими компаниями, как Microsoft и Sony.

Формат: текстовые уроки (на английском языке).

Сколько уроков: 50 уроков.

Продолжительность: зависит от тебя.

Что ты узнаешь на курсе:

  1. Синтаксис HTML.
  2. Его семантические элементы.
  3. Всё о создании ссылок.
  4. Основы форматирования текста.
  5. Как позиционировать элементы в CSS.
  6. Как менять шрифты.
  7. Как делать задний фон на сайте.
  8. И многое другое.

№16. Курсы по HTML от HTML Dog

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

Формат: текстовые уроки.

Сколько уроков: 3 курса (для начинающих, середнячков и профи) примерно по 10 уроков.

Продолжительность: зависит от тебя.

№17. Курсы по CSS от HTML Dog

Кто проводит: HTML Dog.

Формат: статьи-уроки.

Сколько уроков: также 3 курса 8-15 уроков.

Продолжительность: зависит от тебя.

Полезные сайты для обучения HTML, CSS и JavaScript — ТОП-5

Это были самые лучшие курсы HTML и CSS в 2020 году.

Надеюсь, ты нашёл для себя что-то полезное.

P. S. Вёрстка вёрсткой, а я всё-таки предпочитаю зарабатывать на копирайтинге и SEO.

Html5 — Где вы учились/учитесь верстать сложные элементы сайта?

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

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

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

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

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

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

Начало

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

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

Первые шаги

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

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

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

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

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

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

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

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

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

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

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

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

Отчаяние

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

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

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

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

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

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

Цукерберг рекомендует:  Круглая галерея с использованием jQuery

Практика

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

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

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

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

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

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

Что дальше?

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

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

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

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

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

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

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

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

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

Где учиться html и Css верстке, чтобы работать на фрилансе?

> для дальнейшего развития вам нужен будет php, java и С++ хотя бы

Зачем С++ нужен в веб-проектах? Есть хостинг с C++ в качестве серверного языка, или браузер, в котором он используется как клиентский язык?

Любой учебник откройте по html и css и начинайте вникать. После уже поймете, что для дальнейшего развития вам нужен будет php, java и С++ хотя бы. Потом сделайте пару проектов, что бы собрать себе портфолио.

на самом деле список не такой страшный потомучто

1) HTML это разновидность XML

2) Jquery,JavaScript,XML,JSON,Ajax — это все = JavaScript

Веб-
Верстальщик: Начало

Изучите основы верстки и веб-разработки в одном емком онлайн‑курсе с проверкой ДЗ и поддержкой личного наставника!

Что мы приготовили для вас

эффективных онлайн-занятий в отличном качестве

домашних заданий
для закрепления материала

личный наставник
для проверки ДЗ и поддержки

возможностей не разобраться в основах верстки

Что нам нужно от вас

Два часа на обучение в день

Вам необходимо время на просмотр занятий и выполнение/исправление домашних заданий – вы сами решаете, когда учиться

Сильное жгучее желание

5 лет на рынке образования мы в WAYUP поняли, что лучший результат получают те, кто настроен серьезно поработать

Нулевой уровень в разработке сайтов

Мы начнем с самых азов и закончим версткой настоящего сайта, с адаптивностью и основами магии JavaScript

Программа взлета вашей карьеры

Введение в профессию

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

Погружение в основы HTML5

Первое практическое занятие, посвященное HTML5, на котором мы познакомимся с языком гипертекстовой разметки — основой любого веб-сайта. Теги, атрибуты, семантика и практика-практика-практика

Знакомство с CSS3

После изучения основ HTML5 время переходить к работе с CSS3 — то, что поможет внести краски в черно-белый мир чистого HTML! Классы, айди, селекторы, правила, свойства, форматирование и особенности CSS в одном занятии

Верстка современного сайта

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

Погружение в адаптивность

Сайт, не адаптированный под мобильные устройства, просто не может считаться сайтом. Мы разберемся с темой media queries или медиа-запросов в CSS для создания отзывчивой (адаптивной) верстки. Ориентация на изучение Bootstrap в будущем

Шаг во Frontend: JavaScript

Интерактивность и живость веб-сайта — наша главная задача! Как оживить верстку с помощью JavaScript и jQuery? Мы обеспечим плавное погружение в основы языка программирования JavaScript и владение библиотекой jQuery

Фриланс и первые $500

Настало время поговорить о том, как же зарабатывать на полученных знаниях. Сколько вы можете заработать сегодня? Какие перспективы? Как правильно работать удаленно на фрилансе и не обжечься? То, без чего начинающему нет смысла изучать верстку — понимание, как зарабатывать

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

Как будет
проходить ваше обучение

Уже сегодня вы проходите 1-ое занятие

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

Выполняете домашние задания

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

Экономите время, деньги и нервы

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

Получаете быстрый и ожидаемый результат

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

Нам доверяют 144184 участников сообщества WAYUP

За второй и третий заказ я заработал 19, 5 тысяч. Я думаю, что это более чем достойно для первого месяца работы

Здесь учат работать, дают инструмент, а то, как им будете распоряжаться — это уже ваше личное дело

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

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

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

Станьте частью большой
семьи WAYUP

учеников на нашей платформе

Наша главная цель — трансформация жизни.

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

Кто ведет курс

  • Основатель WAYUP
  • Веб-дизайнер, верстальщик, разработчик сайтов

10 лет опыта в разработке и фрилансе

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

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

Какие перспективы вас ожидают

Фриланс и свобода

Работайте на себя откуда угодно с клиентами по всему миру Средний доход: от $700/мес.

Организуйте свою онлайн- или офлайн-команду специалистов Средний доход: от $1200/мес.

Бизнес или стартап

Сделайте шаг в сторону своего онлайн-проекта, изучив верстку Средний доход: от $200/мес.

Цифры основаны
на результатах наших учеников:

Так усердно я не учился ни в школе, ни в универе! Это обучение настолько увлекло меня, что все свободное время мне хотелось уделять именно верстке.

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

На фрилансе первый заказ был неудачным — меня обманули, но за второй и третий заказ я заработал 19, 5 тысяч. Я думаю, что это более чем достойно для первого месяца работы. Тем более, что я пришел на курс с нулевыми знаниями.

Большое спасибо всей команде WAYUP.

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

Я получил не только знание, но и умение ими пользоваться.

Мне приятно сознавать, что теперь я тоже часть крутого сообщества WAYUP!

Не думал, что будет столько работы на курсе, приходилось вкалывать, но мне это нравится. Есть стимул, есть стремление совершенствоваться.

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

Фриланса я ранее никак не касался, но было большое стремление и энтузиазм развиваться в этом направлении. И у меня это получается благодаря коучингу. Я активно отправлял заявки, откликнулись 10 человек, с половиной из них начал работать. За этот месяц я заработал 20 тыс рублей, с одним из заказчиков продолжаем сотрудничать еще на 30 тыс. руб.

Та информация, которая дается за столь короткий срок просто бесценна

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

Если есть энтузиазм и настрой, то все получится. Знаю по себе!

Впечатления от курса очень хорошее. Есть с чем сравнить, поверьте, прохожу уже не первое обучение!

Впечатлило то, что у Александра нет никаких заготовок, все делает в прямом эфире.

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

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

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

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

Всем больших успехов!

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

Самое главное — это результат — и у меня он есть! Еще во время обучения, к моменту выпускного мною было заработано 600 долларов!

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

Большое спасибо всей команде WAYUP от меня и от моей семьи!

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

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

Спасибо, вы очень крутые! Всем советую этот коучинг

Я выбрала этот коучинг, потому что это онлайн обучение, впервые попробовала такой формат и считаю, что это новая ступень в развитии образования. Не все могут позволить себе обучаться в университете, где надо учиться несколько лет. А здесь получили знания за 2,5 месяца и нас сразу же отправили на фриланс.

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

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

На фрилансе я стала общаться с интересными людьми, здесь открываются большие возможности и горизонты.

Рекомендую этот курс, действуйте со всей силой и энергией!

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

Теперь я работаю на фрилансе, беру заказы по дизайну и верстке. Есть уже 9 отзывов на freelance.ru и около 20 на другой бирже. Круто, работы много. Денег за месяц заработала больше, чем на своей работе.

Я учился на коучинге «Веб-Верстальщик: Код Фрилансера».

Большое спасибо моей наставнице Оле, Артему, Андрею. Это был действительно крутой коучинг!

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

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

Я из Питера, мне 27 лет. Закончил ВУЗ по специальности дизайн. Три года по окончании работал совсем в другой отрасли. Потом решил все-таки вернуться в графический дизайн. Делал логотипы, полиграфию, визитки.

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

Большое спасибо Андрею и всей команде WAYUP, наставнику Наташе. Это были прекрасные дни обучения, столько эмоций я получил!

На фрилансе сейчас два заказа, делаю два сайта. За месяц отбил затраты на обучение.

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

Мне понравилось абсолютно все! Хочется отметить, что все мы были на равных, это очень комфортно, особенно для новичков или таких людей, как я, волнующихся из-за любой мелочи.

Все уроки были хороши, все домашние задания уникальны, их интересно было выполнять. Это хороший опыт.

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

Большое спасибо Алексею, Артемию, всем ребятам с потока, всем, кто поддерживал и помогал мне.

Андрею спасибо за этот курс и за WAYUP!

Я окончила курс Графический дизайн. Хочу сказать большое спасибо нашему наставнику Леше за компетентность, понимание и терпение, за наше развитие.

По окончании курса я уже зарабатываю на фрилансе. И это только начало, не стоим на месте, развиваемся дальше

Имея опыт прохождения других курсов могу сказать, что по сравнению с курсами WAYUP — это небо и земля!

WAYUP, спасибо, что вы есть, вы мне очень помогли!

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

Поэтому я решила пройти обучение на коучинге «Графический дизайнер». Обучение начиналось 2 апреля, в день моего рождения и я решила, что это знак! Очень вдохновилась.

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

Спасибо Алексею за обучение и поддержку. Он очень вдохновлял всех нас.

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

Хочу поблагодарить всех, кто нас учил и поддерживал.

Хотелось бы посоветовать всем, кто только думает записаться на курс — просто доверьтесь, вы об этом не пожалеете!

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

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

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

Рекомендую всем этот курс

Несколько дней назад закончил обучение верстке на WAYUP. Хочу сказать большое спасибо за то, что моя жизнь изменилась на 180 градусов за последние пару месяцев.

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

По окончании надо было выходить на фриланс. Было страшно. Но уже на следующий день я получил заказ. Выполнил, все отлично. Спустя месяц я заработал (без 50$) стоимость курса обучения. Никогда не думал, что еще в процессе обучения я смогу зарабатывать, причем не 100 и не 200$!

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

Время стартовать. Вы с нами?

Начинайте уже сегодня

Занятия подготовлены заранее и уже ожидают вас в закрытом личном кабинете на следующем шаге

Обучайтесь всего 7 дней

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

За что вы платите

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

Ваш сертификат уже ждет вас!

Мы уже настраиваем ваш личный кабинет

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

Сертификат выдан

Иванову Ивану Ивановичу

данный сертификат свидетельствует об успешном завершении онлайн-курса «Веб-Верстальщик: Начало»

Так усердно я не учился ни в школе, ни в универе! Это обучение настолько увлекло меня, что все свободное время мне хотелось уделять именно верстке.

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

На фрилансе первый заказ был неудачным — меня обманули, но за второй и третий заказ я заработал 19, 5 тысяч. Я думаю, что это более чем достойно для первого месяца работы. Тем более, что я пришел на курс с нулевыми знаниями.

Большое спасибо всей команде WAYUP.

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

Я получил не только знание, но и умение ими пользоваться.

Мне приятно сознавать, что теперь я тоже часть крутого сообщества WAYUP!

Не думал, что будет столько работы на курсе, приходилось вкалывать, но мне это нравится. Есть стимул, есть стремление совершенствоваться.

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

Фриланса я ранее никак не касался, но было большое стремление и энтузиазм развиваться в этом направлении. И у меня это получается благодаря коучингу. Я активно отправлял заявки, откликнулись 10 человек, с половиной из них начал работать. За этот месяц я заработал 20 тыс рублей, с одним из заказчиков продолжаем сотрудничать еще на 30 тыс. руб.

Та информация, которая дается за столь короткий срок просто бесценна

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

Если есть энтузиазм и настрой, то все получится. Знаю по себе!

Впечатления от курса очень хорошее. Есть с чем сравнить, поверьте, прохожу уже не первое обучение!

Впечатлило то, что у Александра нет никаких заготовок, все делает в прямом эфире.

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

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

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

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

Всем больших успехов!

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

Самое главное — это результат — и у меня он есть! Еще во время обучения, к моменту выпускного мною было заработано 600 долларов!

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

Большое спасибо всей команде WAYUP от меня и от моей семьи!

Хочу поблагодарить всю команду WAYUP за создание качественного продукта. Я получил много полезной и интересной информации. Очень удобная подача, весь материал разложен по полочкам. Все понятно и доступно.

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

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

Спасибо, вы очень крутые! Всем советую этот коучинг

Я выбрала этот коучинг, потому что это онлайн обучение, впервые попробовала такой формат и считаю, что это новая ступень в развитии образования. Не все могут позволить себе обучаться в университете, где надо учиться несколько лет. А здесь получили знания за 2,5 месяца и нас сразу же отправили на фриланс.

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

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

На фрилансе я стала общаться с интересными людьми, здесь открываются большие возможности и горизонты.

Рекомендую этот курс, действуйте со всей силой и энергией!

В сфере IT я достаточно давно, хорошо знала HTML, CSS. Работала, была неплохая зарплата. Случайно наткнулась на рекламу Андрея о веб-дизайне.

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

Теперь я работаю на фрилансе, беру заказы по дизайну и верстке. Есть уже 9 отзывов на freelance.ru и около 20 на другой бирже. Круто, работы много. Денег за месяц заработала больше, чем на своей работе.

Я учился на коучинге «Веб-Верстальщик: Код Фрилансера».

Большое спасибо моей наставнице Оле, Артему, Андрею. Это был действительно крутой коучинг!

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

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

Я из Питера, мне 27 лет. Закончил ВУЗ по специальности дизайн. Три года по окончании работал совсем в другой отрасли. Потом решил все-таки вернуться в графический дизайн. Делал логотипы, полиграфию, визитки.

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

Большое спасибо Андрею и всей команде WAYUP, наставнику Наташе. Это были прекрасные дни обучения, столько эмоций я получил!

На фрилансе сейчас два заказа, делаю два сайта. За месяц отбил затраты на обучение.

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

Инструкция по восстановлению пароля уже на вашей почте

Мы перезвоним вам как можно скорее!

Оставьте номер телефона и мы свяжемся с вами максимально быстро

Пожалуйста, вводите номер в международном формате,
например +7 (987) 654-32-10, иначе мы не сможем дозвониться :(

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

В этой статье я расскажу как стать начинающим верстальщиком. Т.е. после выполнения всех рекомендаций в можете претендовать на данную позицию. Статья создана специально для учеников 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 верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку. Теперь, я с радостью поделюсь накопленными знаниями, хитростями и фишками скоростной верстки, чтобы вы, дорогие мои друзья, смогли заработать больше денег за единицу времени. Ведь именно скорость верстки влияет на то, какую колбасу вы будете кушать на завтрак. Обычно медленные веб-дизайнеры кушают на завтрак колбасу за 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 от А до Я

Цукерберг рекомендует:  Смартфон - Приложение для смартфона
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих