5 нетривиальных моментов разработки фронтэнда на CSS


Оглавление (нажмите, чтобы открыть):

Очередной блог фрилансера

коротко и полезно о веб-разработке

HTML 5 и CSS3: Техники, которые мы скоро будем использовать

В сегодняшней статье мы собираемся создать страницу блога, используя техники нового поколения – HTML5 и CSS3. Статья продемонстрирует вам процесс разработки веб-сайтов, после того как окончательно утвердят спецификации и поставщики браузеров начнут их поддерживать. Если вы знакомы с HTML и CSS, то вам будет легко продолжить обучение.

Что мы собираемся создавать

Вот так будет выглядеть наша страница, когда мы закончим:

Практически обычный дизайн вашего ежедневного блога. Заголовок с названием, горизонтальная навигация, контент с комментариями и формой отправки, сайдбар и подвал. Ничего особенного. Давайте начнем. Ничего особенного. Давайте начнем.

HTML 5

HTML 5 является следующей версией HTML. Он включает в себя множество новых элементов, которые сделают наши страницы более семантическими. Это значительно облегчит навигацию по странице для поисковых систем и голосовых модулей. Кроме того, HTML 5 также будет включать API для рисования графиков на экране, хранения данных на клиенте, технологию drag-and-drop, и многое другое. Давайте начнем разметку для нашего блога.

Основная структура

Прежде чем мы создадим разметку страницы, нужно представить общую структуру:

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

Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

  • В HTML 5, есть только один doctype . Он объявляется в начале страницы через . Он просто сообщает браузеру, как интерпретировать HTML-документ.
  • Новый тэг header , является контейнером для вступительных элементов, таких как заголовок или логотип. Он также может содержать оглавление или поисковую форму. Каждый заголовок обычно содержит теги заголовков от

. В данном случае заголовок используется только для представления страницы, немного позднее мы добавим его в различные секции страницы.
  • Тэг nav используется для содержания навигационных элементов, таких как основная навигация сайта или более специализированная навигация, как ссылки на следующую/предыдущую страницы.
  • aside – используется для обертывания содержимого, связанного с основным контентом страницы, которое всегда находится на одном месте. В данном случае мы используем его для сайдбара.
  • Тэг section используется для обозначения секции документа. Он может содержать все виды разметки, и множество секций могут быть вложены друг в друга.
  • Тэг footer должен содержать дополнительную информацию об основном контенте, такую как информацию об авторе, копирайты, ссылки на похожие документы и тому подобное.
  • Вместо того чтобы использовать тэг

    Разметка для Навигации

    Разметка навигации создается точно так же как и в HTML 4 или XHTML, с использованием маркированного списка. Ключ в том, что этот список располагается внутри тэгов nav .

    Разметка для Вступления

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

    Мы добавили ID к тэгу section, чтобы потом можно было назначить ему определенный стиль. Мы используем тэг header , для заключения элемента h2 . Кроме описания основного документа, тэги заголовков всегда должны использоваться для описания отдельных секций.

    Разметка Основного контента

    Наш контент содержит три секции: запись, комментарии и форму отправки комментариев. Используя наши знания о новой структуре тэгов в HTML 5, сделать разметку будет очень легко .

    Разметка для Записи

    Посмотрите разметку, и я расскажу о новых элементах ниже.

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

    Элемент header , используется для представления заголовка и метаданных о записи. Мы сообщаем пользователю, когда статья была написана, кто ее написал, и как много комментариев она имеет. Обратите внимание, что время заключено в соответствующий тэг. Этот тег также новый в HTML 5, и используется для разметки определенного участка во времени. Содержимое атрибута datetime должно быть следующим:

    Год, затем тире (знак минус)

    1. Месяц, затем тире
    2. Дата
    3. Прописная T, для определения того, что мы собираемся указывать местное время
    4. Местное время в формате hh:mm:ss
    5. Часовой пояс по Гринвичу. Я нахожусь в Дании, где GMT+1, поэтому я пишу +01.

    Разметка для Комментариев

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

    Разметка для Формы Комментирования

    В HTML 5 был представлен ряд усовершенствования для форм. Вам больше не нужно заботиться о валидации необходимых полей на клиентской стороне. Браузер все сделает за вас.

    Появилось два новых типа input-ов, email и url . Email указывает на то, что пользователь должен ввести валидный E-mail, а в поле url — валидный адрес сайта. Если вы добавите атрибут required , пользователь не сможет отправить пустое поле. «Required» — это логический атрибут, новый в HTML 5. Это всего лишь значит, что поле обязательно должно иметь какое-то значение.

    Разметка Сайдбара и Подвала

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

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

    Стилизация с CSS 3

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

    Основные настройки

    Для начала, нам понадобится определить некоторые основные правила, касающиеся типографии, фонового цвета страницы и т.д. Все это должно быть вам известно еще из CSS 2.1.

    Сначала мы, простым правилом, обнуляем значения свойств margin — и padding -.

    Затем, мы указываем браузеру, возвращать все новые элементы HTML 5 в качестве блоков. Браузеры нормально относятся к неизвестным элементам, но им неизвестно как эти элементы должны быть отрисованы по умолчанию. Нам придется сообщать об этом браузерам до тех пор, пока HTML 5 официально не будет утвержден.

    Также обратите внимание, что я выбрал размер шрифта в пикселях, вместо em или % . Это сделано специально, для придания статье прогрессивного характера. Когда, в один прекрасные день, все основные браузеры будут осуществлять полную поддержку HTML 5 и CSS 3, у нас появится возможность масштабирования страницы, вместо простого ресайзинга текста. Благодаря этому исчезнет необходимость указывать единицы измерения в относительных единицах, поскольку браузер в любом случае сможет масштабировать страницу.

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

    Стилизация Навигации

    Обязательно обратите внимание, что ширина у body задана 940 px , и он располагается по центру. Нашему блоку навигации нужно растянуться по всей доступной ширине окна, так что мы должны применить необходимые для этого стили:

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

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

    Стилизация Предисловия

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

    Мы использовали два новых свойства. Первое, это background — size , которое позволит вам масштабировать фоновое изображение. В нашем случае, мы будем масштабировать его на 100% по обеим осям. Если при добавлении контента, бокс растянется, то лежащий в фоне градиент будет масштабироваться вместе с боксом. Это как раз то, что нельзя реализовать в CSS 2.1 не нарушая семантики разметки.

    Второе новое свойство это – border — radius , которое применяет закругленные углы к элементу. Радиус наших закругленных углов равен 22 px , для каждого угла. Вы можете назначить различные значения для любого угла, или назначить закругленными только определенные углы.

    К сожалению, ни одно из этих свойств, полностью не поддерживается в популярных браузерах. Тем не менее, мы можем получить некоторую поддержку, используя специфические расширения для браузеров. Background — size поддерживается в последней версии Safari , Opera и Konqueror . Border — radius поддерживается в последней версии Safari и Firefox .

    После того как мы указали свойство background — color , можно не боятся проблем с отображением страницы в браузерах, не поддерживающих background — size , таких как Firefox . Теперь нам нужно стилизовать заголовок и текст.

    Картинку цветка можно легко поместить на страницу, путем добавления второго фонового изображения, то, что поддерживается в CSS 3, для секции # intro .

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

    К сожалению ни один из браузеров полностью не поддерживает этого. Поэтому нам пока придется действовать по старинке: будем использовать картинку и позиционировать ее с использованием CSS .

    Стилизация Контента и Сайдбара

    Контент и сайдбар должны быть расположены рядом друг с другом. Обычно это делается с помощью float , но в CSS 3 это можно сделать с помощью таблиц!

    «Что?! Таблицы?», наверное, удивитесь вы. Потому что давным-давно знаете, что использование таблиц для создания раскладки очень и очень плохая идея, и это до сих пор так. Вы никогда не должны использовать элементы таблицы для верстки раскладки. Однако, с помощью CSS 3, мы можем сделать элементы похожими на таблицы, без появления таблиц в разметке. Для начала, нам потребуется немного элементов div , чтобы сгруппировать секции, более логичным образом.

    Вся разметка остается семантической, но теперь мы можем ее стилизовать. Нам нужно сделать блок #content похожим на таблицу, с колонками из блоков #mainContent и aside . С CSS 3 это очень легко:

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

    Стилизация Записи

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

    Множественные колонки

    Множественные колонки текста раньше невозможно было создать без ручного разделения текста, но с CSS 3 это очень просто, все, что нам понадобится это завернуть параграфы в элемент div , для работы с текущими браузерами.

    Теперь мы можем добавить два простых свойства.

    Нам нужно создать 2 колонки с расстоянием 22 px между ними. Дополнительный div нужен, потому что на данный момент нет поддерживаемого способа выстраивания элементов в несколько колонок. В будущем, возможно, вам будет достаточно указать свойство column — span , и написать всего лишь:

    Конечно, свойства column — count и column — gap поддерживаются только некоторыми браузерами, Safari и Firefox . Нам, пока что, придется использовать специальные расширения браузеров.

    Box-shadow

    Если вы внимательно взгляните на картинку статьи, вы увидите тень. Мы можем сгенерировать ее используя CSS 3 и свойство box — shadow .

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

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

    Полосатые Комментарии

    Полосатая раскраска или подсветка каждого второго элемента в последовательности, традиционно связана с выбором всех элементов, с помощью JavaScript , затем прогон их в цикле и подсветка всех четных элементов. CSS 3 предоставляет псевдо-класс « nth — child », который делает это до смешного легко, без использования JavaScript . Мы используем его для полосатой раскраски комментариев.

    Таинственное значение «2 n +1», на самом деле очень простое, если вы понимаете что это значит:

    2 n – выбор каждого второго элемента списка. Если вы напишете 3 n , будет выбран каждый третий элемент, 4 n – четвертый, и так далее.

    +1 сообщает браузеру, что начать нужно с первого элемента. Если вы знакомы с программированием, то должны знать, что все массивы начинаются с 0, здесь точно так же. Это значит что элемент с номером 1, на самом деле второй элемент в последовательности.

    В качестве альтернативы, вы можете написать просто:

    Здесь используется один из наиболее часто используемых стандартных значений, odd и even . Стилизация остальной части комментариев довольно проста для понимания, с вашими новыми знаниями.

    Стилизация Формы отправки комментариев, Подвала и Сайдбара

    Для стилизации подвала сайдбара и формы комментариев, была использована пара CSS 3-техник. В форме комментариев и в подвале, я использовал ту же технику табличной раскладки, что и в основном макете. В сайдбаре использовался border — radius , для добавления закругленных углов различным секциям.

    Финальный Дизайн

    Смотрите результат нашей работы, со всеми стилями.

    Заключение

    Когда HTML 5 и CSS 3 однажды начнут поддерживать все браузеры, жизнь разработчика веб-сайтов станет гораздо проще. Мы, наконец, перестанем использовать флоаты для раскладки (которые вообще не предназначены для этого), терять значительное количество времени на написание JavaScript -кода, для масштабирования фоновых изображений, или полосатой раскраски таблиц.

    Рассказать друзьям

    Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

    5 нетривиальных моментов разработки фронтэнда на CSS

    These crawls are part of an effort to archive pages as they are created and archive the pages that they refer to. That way, as the pages that are referenced are changed or taken from the web, a link to the version that was live when the page was written will be preserved.

    Then the Internet Archive hopes that references to these archived pages will be put in place of a link that would be otherwise be broken, or a companion link to allow people to see what was originally intended by a page’s authors.

    The goal is to fix all broken links on the web. Crawls of supported «No More 404» sites.

    This is a collection of web page captures from links added to, or changed on, Wikipedia pages. The idea is to bring a reliability to Wikipedia outlinks so that if the pages referenced by Wikipedia articles are changed, or go away, a reader can permanently find what was originally referred to.

    This is part of the Internet Archive’s attempt to rid the web of broken links.


    Список тестовых заданий от подписчиков #1

    В vk получил следующее предложение:

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

    Не вопрос! В конце каждого ТЗ краткий комментарий от редакции.

    Если вам есть о чем рассказать — пишите в vk/telegram. Так же у мы проводим разборы тестовых заданий.

    Задания с собеседования Web-программист/верстальщик

    Задачи:

    • верстка сайта по макетам;
    • поддержка существующих сайтов;
    • интеграция сайтов на платформы UMI, WordPress.

    опыт работы верстальщиком, web-разработчиком от 1 года;

  • HTML5, CSS3, Адаптивная кроссбраузерная верстка;
  • JavaScript, jQuery, AJAX;
  • желательно знание PHP и XSLT (возможно обучение);
  • базовые знания Photoshop для работы с готовыми макетами;
  • общие знания предмета: клиент-сервер, понимание ООП.
  • Общение перед заданием:

    Сначала общение с HR общие вопросы о прошлом месте работы, что разрабатывали, с чем работали и причина ухода

    Потом общение с лидом вопросы про общие вопросы про верстку (про способы центрования, позиционирование). Вопросы про CMS(с какими и как работал), немного Javascript

    Задание

    • Сверстать макет
    • В шапке сайта изображение заполняет весь блок и располагается по центру.
    • Контент страницы может быть от 1 до 1000 строк.
    • Количество пунктов и подпунктов правого меню может варьироваться в диапазоне от 1 до 10.
    • Эффект для разворачивания подменю выбирается самостоятельно.
    • Боковое меню является фиксированным при прокрутке до тех пор, пока блок соцсетей не оказывается на расстоянии 50 пикселей от футера. При этом следует учитывать различные размеры меню, контента и экрана.

    От редакции «Без воды»:

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

    Тестовое задание из вакансии junior front-end developer

    Требования к разработчику

    • HTML5/CSS/LESS/SASS/SCSS
    • Работа со сборщиками GULP/WEBPACK
    • Базовые навыки Javascript/ES5/ES6

    Общение перед заданием:

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

    Задачи

    Создать компонент для отображения таблицы с данными (Таблица с фейковыми данными из JSON’a, данные любого вида)

    • Получить данные с backend’a и вывести полученные данные в табличку, описание запросов было предоставлено.
    • Кнопка добавления новой записи
    • Запись посылаем на бэкэнд
    • Кнопка удаления записи напротив каждой строки таблицы, по клику запись удаляется запросом на бэкэнде, по успеху — на фронтэнде удаляется
    • Кнопка редактирования напротив каждой строки таблицы
      • По клику на нее, в таблице все инпуты становятся редактируемыми и на месте кнопки редактировать, появляется кнопка сохранить
      • По нажатию на сохранить, отправляется запрос на бэкэнд, по успеху — инпуты опять становятся ридонли и кнопка меняется на «редактировать».

    Задания с собеседования HTML-верстальщик

    Задачи:

    • Адаптивная блочная верстка страниц pixel perfect (мобильные устройства, десктоп)
    • Табличная вёрстка писем
  • HTML5 (tags)
  • CSS3 (flexbox, grid layout, media queries, pixel ratio, etc …)
  • Markdown
  • Stylus
  • SVG fonts
  • Gulp
  • Git
  • NPM (Yarn)
  • опыт вёрстки под мобильные устройства.
  • Общение перед заданием:

    Вопросы про то с какими сборщиками работал, как происходит отрисовка сайта(введение имени, запрос, отрисовка документа),какие навыки JS имеются. Как происходила работа совместно с дизайнером.

    На выбор давалось одно из трех заданий

    Задание 1

    Вариант №1:

    Нужно выводить текстовые сообщения в html блок (общий вид приведён в приложенном файле «messages.jpg»).

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

    Блок 2 — отображает полный список сообщений, удалённые сообщения помечены знаком «х», новые сообщения добавляются в конец списка.

    Блок 3 и 4 для отправки сообщений и включения в очередь для показа.

    Вариант №2 (для усложнения):

    На одном из серверных языков с подгрузкой данных с сервера. Данные будут добавляться в блок 2 и также отображаться по очереди в п1.

    Не функциональные требования:

    • Разрешено использовать js фреймворки
    • Желательно, чтобы html был максимально чист (минимум вёрстки, скриптов в html)
    • Кроссбраузерная вёрстка, в т.ч. для мобильных устройств.

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

    Задание 2

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

    Для отображения график можно использовать сторонний компонент, например
    http://www.highcharts.com/demo/ или любой другой.

    Вёрстка должна быть адаптированной с поддержкой мобильных устройств (на одном из изображений есть пример). Должна быть возможность скрывать некоторые строки из таблицы (например удалением через настройки).

    Нужно в html+js (можно использовать фреймворки) сверстать. Данные для таблицы и графика нужно хранить в json-файле. Бэкенд вообще не нужен.

    Задание 3

    Нужно сверстать расписание работы сотрудников. На графике отображено плановое время работы сотрудника (закрашенные прямоугольники) и фактическое (закрашено штриховкой). На вход приходит 2 набора данных в json формате, которые содержат 2 набора строк. На выходе ожидаем: html страницу + js + css + json-файл с данными. БД & бэкэнд не требуются. В json-файле должны быть данные с приложенной картинки.

    Вариант №1. Облегченная задача (минимум):

    • Отобразить план работы всех сотрудников;
    • В диапазоне дат ограничиваем принудительно максимальную длительность – 4 дня;
    • У одного сотрудника может быть несколько смен в выбранном фильтре дат в одном ресторане (как у Гоку Петра), нужно отобразить оба отрезка в одной строке, как на приложенной картинке;
    • При щелчке на смене сотрудника отображать плановую длительность этой смены.

    Вариант №2. Задача нормальной сложности:

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

    Важно:

    Перед выполнением оцените время на выполнение задания, выберите вариант (1 или 2) и дату выполнения задания.

    Задание 1/2 неплохо. Задание 3 уже сложновато.

    Задания с собеседования на Frontend разработчика

    Веб-приложение для проведения тестирования (es5)

    Требования:

    • Хорошее знание Javascript, css, html
    • Знание любого UI framework (React/Redux, Vue, Angular and etc.). Мы работаем с React/Redux
    • Желательно знание webpack, TypeScript, SASS (SCSS)

    Общение перед заданием:
    Общие вопросы про верстку, алгоритмы и базовые понятия js/react , в чем фишка реакт, взаимодействие между родителем/потомком. Несколько вопросов про es5/es6 зачем были созданы, какие преимущества дают

    Написать веб-приложение для проведения тестирования.

    • Вид начального экрана — название теста, кнопка запуска.
    • Вид экрана вопроса — текст вопроса, варианты ответов, кнопка «Продолжить».
    • Вид экрана результата — текст «Ваши баллы:», и кнопка «Пройти еще раз»

    Back-end: создать базу данных с помощью Entity Framework подходом Code First, в которой
    будут храниться вопросы тестирования. Заполнить БД данными из скрипта (приложен к заданию).

    Сервис должен реализовывать интерфейс ITestService из диаграммы классов.

      Метод TestInit случайным образом выбирает N вопросов из БД и сохраняет в сессии. Возвращает количество вопросов N.

    Метод GetNext возвращает данные вопроса из списка(п.1) по индексу(берется из тела запроса)

    Front-end: в соответствии с диаграммой классов на js реализовать объектную модель приложения.

    Для разработки логики руководствоваться UML диаграммой.

    testController — основной класс для управления процессом тестирования.


    question — общий класс(родитель) для объекта вопроса.

    radioQuestion — класс потомок question для вопросов с одним правильным вариантом ответа.

    checkboxQuestion — класс потомок question для вопросов с несколькими правильными вариантами ответов.

    • Поле Text — текст вопроса в формате Base64.
    • Поле Options — варианты ответов в формате Base64 с разделителем «#;» пример(base64#;base64).
    • Поле Answers — правильные ответы, в формате как в поле Options.
    • Поле TimeOut — необязательное, время для ответа на вопрос в секундах.

    Доп.Задание(необязательное): реализовать таймер для вопросов, у которых в поле Timeout !== null

    Веб-приложение для проведения тестирования (es6)

    Тоже самое, что и выше, но с дополнениями:

    Для выполнения задания необходимо настроить webpack (версии 2, 3 или 4) для работы с кодом ES6+ используя babel-polyfill и babel-loader c пресетами env и stage-3.

    Пояснения по заданию:

    В задании идет основной упор на синтаксис ES6+ и новые возможности языка, а именно:
    1. Новый синтаксис классов
    2. Промисы (Promises)
    3. Генераторы и итераторы (включая их асинхронные варианты)
    4. Коллекции Map и WeakMap

    Перед выполнением задания рекомендую ознакомиться с книгой «ECMASrcipt для разработчиков» (автор Николас Закас).

    Для реализации методов загрузки данных (прим. ajaxToService) использовать API Fetch, организовать перехват ошибок.

    Наследование использовать с новым синтаксисом, обязательно использование ключевого слова super.

    Приватные переменные реализовать с использованием WeakMap (посмотреть в книге как это делается)

    Пояснения по классам:

    TestController — класс синглтон. Содержит асинхронную функцию init, которая запускает тест через асинхронный итератор, который получает из функции questionGenerator.

    Функция questionGenerator представляет собой асинхронный генератор.
    Метод questionFactory создает экземпляр дочернего класса для Question и возвращает его.

    Подробнее по асинхронным итераторам:
    https://github.com/tc39/proposal-async-iteration

    Задание определенно «Борщ». Большое, сложное, зачем такое давать на тестовое? Да еще и для такой позиции.

    Должен ли фронтенд разработчик уметь верстать (css)?

    1) Должен ли фронтенд разработчик уметь верстать (psd-to-css)?
    или достаточно знать twitter bootstrap/angular material?
    2) если заказчик взял меня как full-stack, как ему объяснить что я не верстальщик?
    I’m not a css developer? Please find a css developer in our team. Or let’s use angular material
    Как думаете, норм?

    Спасибо за любые идеи 🙂

    • Вопрос задан 21 мая
    • 2523 просмотра

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

    Иерархия навыков упрощённо выглядит так:

    1. Верстальщик (умеет только html + css)
    2. Фронтендер (умеет также в JS)
    3. Full-Stack (умеет и фронтенд и бекенд)

    Если вы не умеете верстать, то вам ещё рано называться фронтендером. Если вы умеете, но не хотите, это другой вопрос. Тут уж как договоритесь.
    Если вас взяли как full-stack, а вы умеете только frontend делать, то нужно обозначить это заказчику. Возможно вы не подходите на проект.

    Интересная иерархия 🙂
    То есть вы предлагаете распыляться на разные технологии и сферы их применения, вместо хорошего и подробного изучения одной?

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

    То есть вы предлагаете распыляться на разные технологии и сферы их применения, вместо хорошего и подробного изучения одной?

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

    Full-Stack — это не «распыляться на технологии и сферы». Это изучение полного цикла разработки, где разные языки дополняют друг друга.
    Распыление это когда человек одновременно и PHP, и Ruby, и Python, и .NET изучает. И ещё мобильной разработкой занимается.

    Stalinko, вы сейчас говорите с точки зрения фриланса? Или работы над большими проектами?

    а фулл-стек хорошо знает либо фронт либо бек.

    ИМХО, в больших проектах намного удобнее не пускать тех, кто хорошо знает бэк к фронту и наоборот, это лишние издержки.

    Фронтэнд должен верстать лучше профессионального верстальщика. Судя по всему мало кто понимает что такое проф верстка.

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

    Пренебрежительное отношение к верстке скорее всего из-за отношения к результату ‘и так сойдет’.

    И если фронт не умеет в верстку — он будет костылить на js и писать чудовищную разметку, лишь бы работало.

    5 лет был чистым верстальщиком, сейчас второй год пишу на реакте (в основном).

    И да — качественный фронт лучше растить из верстака. Но такое встречается все реже и реже.

    Однозначно должен уметь.

    Я никогда не учился верстать именно осознанно, скилл сам приходит, если так или иначе с ним сталкиваться. Тем более , flex очень прост в освоении и покрывает 90% задач.
    Потратьте недельку на какие то задачки по верстке и вы не будете проседать по этому навыку.

    Флекс не покрывает 90% задач, если говорить о верстке в целом. Флекс — это капля в море: небольшая группа css св-в, решающая много вопросов по позиционированию элементов и на этом все.

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

    Еще есть верстаки, которые думают что БЭМ это когда в верстке используешь __ и _ )) У кого больше черточек, тот молодец)))

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

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

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

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

    Я в первую очередь занимаюсь джаваскриптом и всякими задачами связанными с ним, и, мне кажется, достаточно много фронтенд разработчиков занимаются чем то похожим, и в этих задачах не так важна идеальная верстка, как просто умение что-то сверстать.
    Я вообще styled-components использую, по БЭМу никогда не работал.
    От недостатка работы не страдаю, нет чувства, что я серьезно проседаю.

    Можно даже js не знать, главное react и nodejs изучить. Извините, не сдержался.
    А так вообще не претендую на истину, но мой взгляд таков: фронт обязан уметь верстать, понимать что такое БЭМ нейминг и уметь использовать на практике. Scss pug gulp по вкусу. Был опыт в компании подключили ко мне к вёрстке фронта(я верстальщик). Он написал ну прям достаточное количество отвратной вёрстки, которая не по бэму, а по кайфу(ща сдадим нормально все будет), не предусмотрено если 2 строчки заместо 1 будет. В исходники смотришь там медиазапросы одни сплошные. Прям супер абусфуцировал вёрстку. Прошло уже месяцев 6 вроде. Совсем недавно прекратились правки по его страницам.

    Ну и как это? Недофронтэнд или фронт неверстак? По мне так первый вариант и профнепригодность.

    Я не говорю что фронт обязан верстать, я говорю о том что он обязан уметь верстать и делать это хорошо.

    Можно даже js не знать, главное react и nodejs изучить

    Ребят, похоже у вас нет понимания назначения слова frontend developer.
    Фронтендщик уметь верстать не должен.

    Кто хочет поспорить и написать что он крутой и верстальщик и фронтендер — скиньте ссылку на ваш плагин у которого 10к + скачиваний или аналогичная разработка. Нет такого плагина? Тогда какой же из вас фронтендщик?

    Все ваши знания по gulp и sass — это всё ещё вёрстка — да, более продвинутые инструменты, но инструменты вёрстки, и к фронтенду не имеющие никакого отношения.

    Фронтендщик должен уметь писать очень хороший абстрактынй ОО-js код на классах и прототипах — способный работать вне любой и на любой вёрстке.
    Фронтендер — тот, кто пишет логику плагинов, оптимальную и быструю в соответствии с последней редакцией EcmaScript.
    Верстальщик — тот кто верстает: разметка + оформление + немного скриптов.
    Фронтендер не только не должен верстать, он должен ни в коем случае в вёрстку не лезть.

    back-end, front-end и верстальщик — это три разных специалиста, с совершенно разными технологическими стеками.

    Вы можете быть не согласны, но хороший специалист не работает 24 из 24 часов в сутки. Брать на себя лишнее — значит специалистом не быть. Или давайте тогда ещё на верстальщика повесим обязанность — дописывать нативный код браузеров, на фронтендера написание веб-сервера, а на бэкендщика — разработку СУБД. А почему нет? давайте втащим сюда ещё и descktop и системную разработку, и драйверы и операционку и мобильную разработку повесим на верстальщика, да и вообще пусть это всё контенщик делает.

    Ты же контенщик? Наколи мне интернет, контенщик!

    Трюки с CSS writing-mode

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

    От автора: свойство CSS writing mode устанавливает горизонтальное и вертикальное направление написание текста. Хотя оно предназначено для целей мультиязычности, но может быть использовано для дизайна.

    Основы

    Свойство CSS writing-mode устанавливает направление содержимого как по горизонтали, так и по вертикали.

    Как создать сайт самому?

    Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

    horizontal-tb — Контент размещается горизонтально слева направо, вертикально сверху вниз. Значение по умолчанию.

    vertical-rl — Контент размещается вертикально сверху вниз, горизонтально справа налево.

    vertical-lr — Контент размещается вертикально сверху вниз, горизонтально слева направо.

    Фронтэнд разработка и вёрстка.html, css, js(jquery)

    Об этом кворке

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

    Этот кворк Вам подходит если:

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

    — Адаптировать шаблон под мобильные устройства

    — Исправить ошибки css/js/html

    — Придать элементам динамики

    — Работаю на живую, непосредственно на сайте. Никаких прототипов и *.psd(фотошоп) макетов готовить не буду.

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

    — Поправлю кривую или просто некрасивую вёрстку шаблона Вашего сайта, попутно уберу все найденные мной ошибки в javascript, css и html.

    Услуги превышающие рамки стоимости одного кворка вынесены в отдельные опции.

    Как стать frontend-разработчиком и всё таки делать сайты

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

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

    Специалистам и критике — рада. Если обратите моё внимание на недоработки, буду благодарна за подсказки и советы.

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

    1. Создание идеи сайта, определение с видом и структурой сайта, знание видов сайта (статичный/динамичный, адаптивный/отзывчивый дизайн), определение с контентом (текст, графика, фото) — этот пункт сугубо ознакомительный, с этого можно начать понимание основной информации о сайтах.

    2. Сервер, хостинг, домен — также понимать, как это работает, какой хостинг выбрать, и тд.

    3. Проектирование сайта

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

    3.2. Юзабилити (изучить хотя бы основные принципы эргономичного расположения элементов сайта)

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

    4.1. Отрисовка макета в Photoshop

    4.1.1. Основные инструменты рисования, техника, горячие клавиши.


    4.1.3. Шрифты, цвета

    4.2. Фреймворки (использование дополнительных бибилиотек может сэкономить время при разработке проекта — дизайне, верстке)

    4.2.4. Material Design

    5. Разработка — начинаем оживлять дизайн

    5.1. Редакторы кода (Notepad++, Sublime Text, DreamViewer)

    5.2. Структура и хранение файлов (создание директорий, помещение файлов в определенные папки, именование файлов)

    6. Вёрстка/нарезка макета сайта — трансформация дизайна в HTML / CSS. Вот и добрались до основной части нашей работы.

    6.1. HTML — изучаем досконально, не ленимся практиковаться, делать хотя бы легкие странички, экспериментировать.

    6.2. CSS — то же самое, только можно изучить еще и применение препроцессорных языков SASS и LESS.

    6.3. JavaScript — мне однажды дали совет, что для фронтендщика достаточно знать JQuery, и понимать JavaScript. Так или иначе, покорпеть над ними обоими придется.

    6.4. JQuery — им нужно владеть больше чем хорошо.

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

    6.6. Git — сюда же поместила и систему управления версиями. Пригодится работающим в команде.

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

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

    9. Ну и напоследок, средства автоматизации, такие как Emmet, Jade, владение командной строкой, Gulp и Grunt, но это уже после первых 8 пунктов, и еще сюда можно добавить СЕО-оптимизацию, но это всё же не наша зона работы.

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

    Топ-5 вопросов и задач, которые задают на собеседованиях на Frontend-разработчика

    Доброго времени суток. Приветствую вас снова на моем блоге.

    Сегодня речь пойдет о том, какие вопросы и задачи задают на собеседовании на позицию frontend-разработчика. Выборка сделана по 10 очным интервью и скайп-собеседованиям с техническими специалистами из разных IT-компаний города Казани и Иннополиса. А собеседование, которое я проходила в Яндексе, это вообще отдельная тема.

    Почему на вакансию Frontend Developer задают вопросы на знание Javascript

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

    Для веба клиентский Javascript считается основообразующим — практически все интерфейсы, с которыми взаимодействует пользователь в браузере, и их логика написаны на этом языке программирования. Другими словами, браузер понимает только HTML, CSS и Javascript (стандарт ES5, ES6 пока добрая половина браузеров не поддерживает, но думаю в ближайшие 1-1,5 года эта проблема решится и не придется использовать транспайлеры вроде Babel и синтаксический сахар).

    Поэтому все JS-фреймворки и библиотеки (Angular, React, Vue) требуют понимания чистого Javascript. Например, мой любимый ReactJS — это сплошь и рядом нативные javascript-функции, поэтому чтобы освоить его особо не приходится ничего изучать нового, в отличие от Angular, который тащит почти всё свое из коробки. Сложности в изучении библиотеки возникают в настройке проекта — React это не фреймворк, а библиотека, где проект собирается из кучи мелких библиотечек. И чтобы собрать на нем проект, требуется знание Webpack и npm.

    Что касается Vue.js, то написание проекта на нем несколько проще, чем React за счет расширения html javascript-ом. Если вы когда-нибудь работали с jquery, то на чисто интуитивном уровне можно освоить его, поработав несколько часов. На React наоборот — javascript расширяется html за счет jsx-синтаксиса. Также Vue.js работает по принципу «всё одним разом скачали, установили и пишите код» (интереса ради попробовала написать на нем небольшое приложеньице).

    Сразу оговорюсь, что мои рассуждения касаются frontend-разработчиков, создающих Single Page Applicaton, так как для фреймворков типа Yii2 (язык PHP) и ASP.NET MVC5 (язык C#) требуются дополнительные знания других языков, кроме HTML, CSS, Javascript. А следовательно вопросы от технического специалиста будут касаться и них. Поэтому неважно, на каком фреймворке или библиотеке вы пишите код, но если он исполняется в браузере, вопросы и задачки по javascript-у будут.

    Список популярных вопросов на знание Javascript

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

    1. Перечислите типы данных.
    2. Что такое ООП? Объясните, как вы понимаете основные его принципы.
    3. Что такое MVC.
    4. Что такое замыкания и callback-и?
    5. Что означает запись ‘use strict’ ?

    Задачи для решения:

    1. Даны переменные a = 3, b = 5. Необходимо поменять их местами, не используя третью переменную. Массив тоже использовать нельзя.
    2. Дан массив чисел. Написать программу, которая отсортирует его на четные и нечетные числа. Четные числа должны находиться в порядке возрастания, нечетные — по убыванию. Посмотреть ответ на решение задачи на Github — Задача 2
      Что почитать на эту тему и где? Тема «Массивы: методы» на learn.javascript о встроенных методах массивов JavaScript.
    3. Задача на приведение к типу данных в Javascript

    Пример тестового задания для Frontend-разработчика (JavaScript, React.js)

    На выполнение этого задания дается 1 неделя. Система бронирования переговорных комнат в режиме реального времени на React.js.

    Реализовать одностраничное приложение системы бронирования переговорных комнат в режиме реального времени.

    Логика работы приложения:

    • Интерфейс приложения должен отображать доступные даты для бронирования переговорных комнат.
    • Забронированные даты должны сохраняться в localStorage и видны при перезагрузке страницы.
    • Перечень переговорных комнат доступных для бронирования: желтая, красная, зеленая, синяя, фиолетовая.
    • Разработка фронт-энда — ReactJS/JavaScript/JQuery/HTML5/CSS3
    • Кроссбраузерная верстка (min. IE10)
    • Приложение должно быть адаптировано под мобильные устройства, без использования CSS фреймворков (Bootstrap).
    • Использование препроцессоров: LESS/SASS
    • Размещение исходного кода на ресурсе github с пошаговыми коммитами разработчика.

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

    6 комментариев для “ Топ-5 вопросов и задач, которые задают на собеседованиях на Frontend-разработчика ”

    Hi my friend! I want to say that this post is awesome, great written and come with approximately all significant infos.

    I would like to look more posts like this .

    Привет! Очень интересная статья! А это тестовое задание на какой уровень разработчика (джуниор, мидл, сеньёр)? Ну или на какую зп.

    Хочется по больше тестовых заданий посмотреть��

    Задачка рассчитана на разработчика с опытом 1 год +. Совсем зелененькому новичку будет ее выполнить сложновато, потому что требуется уверенное знание Javascript. То есть уровень где-то продвинутый джуниор или начинающий мидл. Насчет зарплаты сказать не могу, так как между Москвой, Петербургом и регионами вилка цен разная на один и тот же грейд разработчика.

    На сколько я понял это задание от казанской фирмы? Я сам Казанда Яшим.

    Да, всё верно, собеседование было в Казани.

    Front-end разработка

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

    Современный developer должен легко владеть html5, css3, JavaScript (и как минимум JQuery). У каждого специалиста есть свои наработки, которые он хранит в виде framework. Многие разработчики в работе пользуются популярными , такими как: Twitter, Bootstrap, Foundation 3, Compass.

    Что необходимо знать разработчику:

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

    Вот основные базовые навыки:

      JavaScript

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

    Система управления версиями файлов GIT

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

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

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

    Если вышеописанный вариант не подходит по причинам, можно использовать инструменты вроде UglifyJS или Closure Compiler, которые грамотно сжимают необходимый код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

    Инструменты разработчика, встроенные в браузер

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

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

    1. ssh для подключения к другой машине или серверу
    2. scp для копирования файлов на другую машину или сервер
    3. ack или grep для поиска файлов в проекте по строке или шаблону
    4. find для обнаружения файлов, чьи названия совпадают с данным шаблоном
    5. git для выполнения хотя бы базовых действий вроде add, commit, status и pull
    6. brew для использования Homebrew для установки пакетов
    7. npm для установки пакетов Node
    8. gem для установки пакетов Ruby

  • Тестирование

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

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

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

    5 проектов для фронтенд разработчиков

    Канадский разработчик Гаретт Левин, собрал 5 проектов, для начинающих фронтенд разработчиков.

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

    Проект 1 – Одностраничная адаптивная верстка

    Цель: воссоздать pixel perfect дизайн и решить проблемы адаптивной верстки

    The Conquer template это отличная стартовая площадка для новичков. Здесь у новичков будет возможность создать то, что будет действительно не стыдно добавить в портфолио. The Conquer template использует Вootstrap, но не стоит не использовать его при создании проекта. Здесь вы найдете множество задач, с которыми веб-разработчик сталкивается в реальном мире. Он погрузит вас в новые технологии (такие, как flex box и float) и поможет приобрести опыт в разных техниках верстки. Сверстать макет адаптивно – будет дополнительной целью, которая заставит вас попотеть!

    Изучайте веб разработку, с помощью онлайн уроков, каждый понедельник и среду в 20:00, на канале: Быстрый старт в веб-разработке (на странице проекта доступный записи всех уроков).

    Проект 2 – Многостраничный адаптивный веб-сайт

    Цель: воссоздать pixel perfect дизайн и научиться адаптивно верстать сложные макеты

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

    Для более быстрого старта в веб разработке оцените проект: Быстрый старт в веб-разработке

    Проект 3 — Маленькая игра-викторина, написанная на языке JavaScript

    Цель: Создать простую игру на JavaScript и jQuery.

    Особенность изучения JavaScript для начинающих фронтенд разработчиков в том что бывает сложно выбрать проект по своим силам. Отличным вариантом для начинающего веб программиста может стать разработка викторины . Это поможет вам разобраться в Document Object Model. Уровень сложности викторины будет зависеть только от вас. Начните с создания простой игры, в которой будет несколько вопросов с возможностью выбора варианта ответа. Вы узнаете много нового о работе с данными. В этот раз не стоит тратить много времени на дизайн того, что вы создаете. Я бы порекомендовал вам использовать CSS-фреймворк, например: Bootstrap, дабы быстро стилизовать вашу игру.

    Проект 4 — Сделайте аналог Giphy, используя открытый API

    Цель: Создать веб-приложение, которое использует Giphy’s API

    Как только вы получите опыт в работе с DOM и JavaScript, я рекомендую изучить шаблонизацию данных и их отображение в DOM. Отличная цель для начинающих фронтенд разработчиков — создать аналог веб-сайта giphy, используя Giphy API. Я рекомендую их API, потому что у них нет проблем с получением ключа, и форматы запросов-ответов там достаточно простые. Используя их API, создайте небольшое веб-приложение, которое будет делать следующее:

    • Отображать популярные gif-файлы при загрузке приложения
    • Позволять искать определенные gif-файлы
    • Создать кнопку «Загрузить больше»

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

    Проект 5 — Веб-приложение Punk Beer

    Цель: Использовать Punk Beer API для создания проекта, использующего шаблонизацию для отображения данных на странице. Попробуйте использовать какой-нибудь фронтенд фреймворк, например, React.

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

    Верстка данного проекта во многом будет схожа с версткой предыдущего. Из нового: функции «корзина покупок» или «любимый товар». Добавьте быть возможность посмотреть отобранный список товаров. Я бы рекомендовал для начинающих фронтенд разработчиков углубиться в изучение фреймворков — это поможет расширить ваши возможности и получить общее представление о современной веб-разработки. Так как я активно работаю с React от Facebook, я бы советовал начать с него. Сперва это может показаться трудной задачей, поэтому сосредоточьтесь на создании веб-приложения поэтапно:

    • Разместите данные на странице из запроса к API
    • Добавьте строку поиска (через отдельный запрос к API)
    • Добавьте функцию «любимый товар»
    • Подключите react router и добавьте функциональность просмотра «любимых товаров»

    Решение этих проблем позволит серьезно продвинуться в веб-разработке. Здесь я тоже рекомендую прибегнуть к использованию CSS-фреймворка. Я решил использовал Bulma для данного примера.

    Совершенствуйтесь и создавайте

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

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

    Мастер Йода рекомендует:  12Go Asia
  • Добавить комментарий