Css3 — Начинающий верстальщик ищет учителя по верстке(front-end).

Содержание

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

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

Практика

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

Различия между профессиями верстальщик и front-end разработчик

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

Разница между верстальщиком сайтов и разработчиком front-end

Давайте постараемся разобраться чем же они отличаются

Верстальщик

Реализует сборку сайта по графическому макеты, созданному в программе Adobe Photoshop или Adobe Illustrator.

верстальщик должен знать:

Язык разметки гипертекста HTML и CSS (причём HTML5 и CSS3);

Уметь подключать скрипты к сайту и оформлять их стилями. То есть знание библиотек JavaScript например jQuery. И начальные навыки работы с самим JavaScript;

Так же от верстальщика требуется умение верстать кроссбраузерно (учитывать особенности основных браузеров);

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

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

Цукерберг рекомендует:  Сила специальных переменных Google Analytics

Разработчика front-end

Наполняет сайт контентом, которые получает через ajax запросы, делает «заглушки» для запросов. Часто от разработчика front-end требуется начальные навыки программирования на серверных языках, таких как php, ruby или python

разработчик front-end должен знать:

HTML5 и CSS3;

Глубокое знание JavaScript и его фреймворков;

Знание нескольких популярных cms (Joomla, wordpress, drupal);

Умение применять Ajax

Вывод:

Разработчик front-end отличается от верстальщика более высоким уровнем знаний, иногда даже граничащий с разработчиком back-end.

Верстальщик 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 и подключает простые плагины анимации. Именно эти навыки в дальнейшем помогут Вам стать фронтенд-разработчиком. Работая в студии, удаленно или в офисе, есть вероятность того, что Вы будете сталкиваться с нестандартными задачами, которые позволят Вам освоить те или иные технологии. Например, программист создаст проект на Github и Вам придется изучить систему контроля версий или попадется заказчик, который захочется, чтобы его проект был выполнен через SCSS. Таких примеров может быть масса, но именно благодаря таким случаям Ваш скил будет расти.

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

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

Я бы дополнила этот список следующими пунктами:

  • CSS-препроцессоры (SCSS, LESS)
  • опыт работы с JSON, JSONP, XML
  • азы PHP, MySQL
  • Flexbox, Grid (специально выделю от CSS в отдельную группу, потому что эта тема крайне актуальна для 2020 года)
  • Git (система контроля версий)
  • React, Angular
  • Dev Tools браузеров
  • Сборщики GRUNT, GULP
  • Уметь работать с разными графическими редакторами

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

Дата публикации: 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 на практическом примере по созданию веб-приложения

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

Ключевые темы курса

  • Методология БЭМ.
  • Применение препроцессора SCSS на практике.
  • Работа с Git и GitHub.
  • Вёрстка с помощью Flexbox и Grid.
  • Профессиональные инструменты верстальщика.
  • Автоматизация и сборка проекта c помощью Gulp.
  • Flexbox для адаптивного дизайна.
  • Типографика.
  • Современные приёмы адаптивной верстки.
  • Обеспечение кроссбраузерности.
  • Подводные камни в вёрстке сайтов.
  • SVG изображения.
  • CSS фреймворк Bootstrap.
  • Вёрстка email шаблонов.
  • Разработка и использование модульных сеток.

Что даст прохождение курса?

Также ты научишься работать по методологии БЭМ и узнаешь тонкости профессиональной вёрстки, в том числе для email-рассылок. Особое внимание уделено работе с Git и GitHub.

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

  • Использовать в работе препроцессор SCSS.
  • Настроить сборку стилей с помощью gulp.
  • Работать по методологии БЭМ.
  • Верстать шаблоны для email-рассылок.
  • Использовать SVG, в том числе с анимацией.
  • Профессионально работать с фреймворком Bootstrap 4.
  • Познакомишься с фреймворком Foundation for Emails 2.

Ты освоишь:

  • Работу с системой контроля версий Git и хостингом репозиториев GitHub.
  • Приёмы адаптивного дизайна и типографики (em, rem и др.).
  • Flexbox и CSS grid.
  • Кроссбраузерное тестирование.
  • Вёрстку с PerfectPixel.

Кому подойдёт этот курс

  • Начинающим верстальщикам
  • Младшим Frontend-разработчикам
  • Back-end разработчикам, которые хотят научиться использовать продвинутые инструменты вёрстки
  • Выпускникам нашего курса по вёрстке веб-сайтов для начинающих (HTML5 & CSS3)

Кому этот курс не подходит

Этот курс не подходит:

  • Новичкам в веб-разработке.
  • Специалистам, которые уже используют в работе препроцессоры, SVG и умеют работать по методологии БЭМ.
  • Веб-разработчикам, которые плохо знают HTML и CSS и не умеют верстать макеты по PSD-шаблонам (в таком случае обрати внимание на наш курс по вёрстке для начинающих).

Подробная программа курса

Git для верстальщика

Занятие 1. Подводные камни

Разбираемся с проблемами контекста наложения, позиционирования и специфичности селекторов

Теория:

  • Проблемы различных видов позиционирования
  • Правила расчета баллов специфичности
  • Правила использования селекторов
  • Использование ключевого слова !important
  • Контекст наложения и проблемы свойства z-index
  • Визуальные слои элементов с opacity и transform

Практика:

  • Исправление ошибок и проблемных мест в готовом макете
  • Разбор на практике принципов поиска ошибок

По итогам занятия:

  • Научитесь правильно использовать различные виды позиционирования
  • Узнаете о проблемах с контекстом наложения и научитесь их решать
  • Научитесь правильно использовать селекторы

Занятие 2. Git и GitHub, вёрстка форм

Осваиваем работу с системой контроля версий Git на примерах с вёрсткой форм

Теория:

  • Роль систем контроля версий в современной разработке
  • Основы работы с репозиторием
  • Базовые операции Git: Commit, Push, pull
  • Вопросы вёрстки различных элементов формы
  • Правильная организация стилей для формы
  • Приёмы вёрстки сложных форм
  • Проблема совместного использования textarea и fieldset

Практика:

  • Установка и настройка Git
  • Создание Git репозитория и публикация проекта на гитхабе
  • Вёрстка формы заявки на обучение
  • Решение задачи разработки универсальных стилей элементов различных типов в виде кнопок
  • Кастомизация checkbox и radio
Цукерберг рекомендует:  Обучение - Помогите с JS (переборы)

По итогам занятия:

  • Изучите основы VCS Git
  • Научитесь правильно «коммитить» изменения и публиковать их на гитхабе
  • Разберётесь с вопросами вёрстки сложных форм
  • Научитесь стилизовать «радио-кнопки» и «галочки»

Видеокурс «HTML5 и CSS3 с Нуля до Профи»

Презентация видеокурса Андрея Бернацкого 12 мин. 11 сек.

  • О видеокурсе
  • Темы уроков курса
  • Особенности

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

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

«HTML5 и CSS3 с Нуля до Профи» — это самый актуальный и полный видеокурс в Рунете. Только лишь основной раздел курса состоит из 47 подробных видеоуроков, которые образуют пошаговую практическую систему. После изучения данной системы Вы сможете освоить адаптивную верстку, используя последние новшества двух языков гипертекстовой разметки и каскадных таблиц стилей.

В курсе все макеты верстаются сразу кроссбраузерными и адаптивными. Изучение курса построено по принципу «от простого к сложному» и от «теории к практике».

Что Вы найдете внутри курса?

  1. Часть: Верстка макета сайта-визитки;
  2. Часть: Верстка макета блога;
  3. Часть: Верстка макета интернет-магазина.

Какие результаты Вы получите, изучив видеокурс:

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

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

Ищем верстальщика (frontend разработчик) html/CSS

Адрес: Походный проезд, 4к1, Москва

Смотрите также:

Похожие задания

Другие задания в категории «Web-разработка»

  • Цена договорная

Нужно сделать рендер(модель) объекта на базе фото, для презентации. Объект представляет собой насосную станцию на озере. Желательно сразу давайте ссылку на портфолио

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

Есть полотно ткань. 4х5 метра , из него нужно обтянуть 3 подушки и диванн-книжку (диван прямой 200х80см одна и другая спинка, без углов, углублений и выпуклостей). Нужно приехать, снять замер , раскроить.

Петр М. улица Знаменские Садки, 11, Москва

Разработать дизайн продающего одностраничного сайта. Дизайн страницы плюс адаптивный макет. Подробное тз есть.

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

Семён З. Чистопрудный бульвар, 13с1, Москва

Верстальщик vs Разработчик Front-end

Автор: Павел Волынцев · Published 29.08.2015 · Updated 12.01.2020

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

Выделю специальность «верстальщик». Варианты термина на английском: layout designer, web coder.
Верстальщик преобразует графический макет (Photoshop или иной) в набор HTML + CSS + картинки. Иногда к свёрстанному макету может подключить типовые библиотеки JavaScript, например, slider для картинок, light-box для видео-клипов, всплывающие подсказки (tooltip) или диалоговые окна (dialog popup).
Знания и навыки:

  • работа с графическими программами, чтобы понять, как собран макет и экспортировать из макета отдельные графические элементы
  • знание HTML/HTML5, CSS/CSS3
  • понятие про форматы PNG/JPG/SVG, веб-шрифты, спрайты и другие технологии работы с изображениями
  • пригодятся знания по HTML-фреймворкам, например, 960 Grid System, Twitter Bootstrap или Semantic UI
  • также полезными буду знания по препроцессорам CSS (SASS, LESS, SCSS, Stylus) и препроцессорам HTML для ускоренной («рапидной») вёрстки (Haml, Slim/Plim, Jade)
  • навыки кроссбраузерной вёрстки, чтобы в разных браузерах выглядело и работало одинаково
  • навыки отзывчивой вёрстки, чтобы можно было использовать на устройствах с разными возможностями и разрешениями
  • знание типовых решений JavaScript, чтобы реализовать простейшие вещи, заложенные в макете (см. Какие задачи нужно уметь выполнять на JS начинающему? с пометкой важно)

Фронтенд-разработчик делает так, чтобы макеты, полученные от верстальщика, были наполнены реальными данными. Если приложение построено как client-side (то есть вся основная логика загружается в виде огромного javascript в браузер, а данные запрашиваются с сервера по AJAX; это называется «жирный клиент» / Rich Internet Application), то фронтенд-разработчику потребуется следующее:

  • знание HTML/HTML5, CSS/CSS3
  • понятие про форматы PNG/JPG/SVG, веб-шрифты, спрайты и другие технологии работы с изображениями
  • знания по AJAX, WebSocket, Comet и другим технологиям асинхронной передачи данных; что такое CORS; навыки создания тестовых «затычек» на стороне сервера, чтобы можно было разрабатывать асинхронный обмен данными, пока бакенд не готов
  • пригодятся знания по HTML-фреймворкам, например, 960 Grid System, Twitter Bootstrap или Semantic UI
  • полезными буду знания по препроцессорам CSS (SASS, LESS, SCSS, Stylus) и препроцессорам HTML (Haml, Slim/Plim, Jade)
  • глубокое знание Javascript, включая использование готовых фреймворков, библиотек и написание расширений для них, что подразумевает объектно-ориентированное и событийное программирование (см. Какие задачи нужно уметь выполнять на JS начинающему?)

Если фронтенд строится на стороне сервера, то дополнительно потребуется знать используемый серверный язык программирования (например, Python, Ruby или PHP) и используемый фреймворк (Django, Ruby-on-Rails, Yii). На практике бывало такое, что фронтендер просил в нужной части проекта сделать var_dump от структуры данных, которую надо показать и перечислить серверные методы, которые надо вызвать по нажатию предполагаемых кнопок.
Зачастую фронтенд-разработчик может и сам закодировать эти серверные методы, если не требуется углубляться в серверную логику (отношения в данных, конкретная бизнес-логика, хранение данных, кэширование, очереди, крон-задачи). Я лично таких очень ценю.

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

Front-end developer(начинающий верстальщик)

Опции темы

Доброго времени суток! Предлагаю услуги по верстке сайтов.
На данный момент делаю проекты низкой и средней сложности.
Навыки:
— HTML, CSS
— блочная верстка
— кроссбраузерность
— семантика кода, валидность
— адаптивная верстка(Twitter Bootstrap)
— умение работать с графическим редактором Adobe Photoshop на уровне нарезания макета
— знания javascript(jquery)
Стоимость:
Около 5$ за страницу

Оплата:
После работы.
Способы оплаты: WebMoney, ЯД.

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