Практические проекты для Front-End разработчиков
Опубликовано: 2020-12-17Front-end разработка, как и любой другой навык, требует огромной работы. Есть несколько способов решить эту большую задачу, в том числе:
- Работаю в агентстве фронтенд-разработчиком.
- Учитесь дома и стройте проекты на стороне.
- Работайте фрилансером для клиентов.
У каждого есть свои плюсы и минусы, но одно остается неизменным - чем больше разнообразных задач вы получите, тем быстрее вы будете прогрессировать.
В этой статье мы рассмотрим несколько потенциальных проектов, над которыми вы можете работать самостоятельно и на стороне, где вы можете изучить новые технологии, подходы и, возможно, некоторые «Ага!» моменты в вашей фронтенд карьере.
Все перечисленные ниже задачи представляют собой довольно хорошие репозитории для вашего профиля GitHub, особенно если вы решите подать заявку на позицию фронт-энда.
Записка! Все нижеприведенные примеры сделаны дизайнерами для реальных изделий. Мы НЕ предлагаем вам схватить их, запрограммировать и делать все, что вы хотите. Все это пример элементов пользовательского интерфейса, над которыми вы можете работать, не распространяя их и не продавая позже.
1 - Библиотека пользовательского интерфейса компонентов
Сложность: легкая-средняя.
Однако не обманывайтесь «легким», потому что, как и в любом другом проекте, и младший, и старший разработчик могут бороться в зависимости от решаемых ими проблем. Мы сделали это в простом масштабе, потому что он не будет состоять из каких-либо сложных элементов пользовательского интерфейса, и все можно инкапсулировать.
Вы можете выбрать существующий дизайн, подобный этому, который ориентирован на раскрывающиеся списки / кнопки:

Источник
Или вы можете выбрать более общий, например Bootstrap и Foundation. Что нужно учитывать:
- Четко определенное соглашение об именах.
- Презентация компонентов.
- Модификаторы - Большинство людей любят изменять второстепенные элементы, поэтому подумайте, как это применить. Пример - вам нужны основные, второстепенные цвета; успех, состояния ошибки и т. д.
- Держите это «подключи и работай». Ваша цель - позволить другому разработчику использовать ваш код без написания CSS. Вы также можете комбинировать его с базовой сеткой.
Хорошая архитектура такой библиотеки - дело нетривиальное. Вы можете попробовать эту же задачу в начале своей карьеры, а также через несколько лет спустя и сравнить то, что вы узнали.
2 - Реализация пользовательского интерфейса сложных анимаций
Сложность: сложная
Эта задача связана с гладкой анимацией и производительностью. Но рядом с этим вам также нужно будет записать некоторые не очень общие визуальные эффекты. См. Пример ниже:
Вы можете увидеть полную анимацию здесь. Когда пользовательский интерфейс отключен, самое время добавить интерактивности. Не вся анимация будет выглядеть как дизайн, поскольку она сделана не в браузере, а в другом инструменте, но это не значит, что вы не можете действительно приблизиться к оригиналу. Конечно, мы пропустим любые эффекты размытия в движении и странные деформации формы, но большую часть остального вы можете сделать. Существуют также библиотеки JS, которые помогут вам со всем этим.
Эта задача может занять всего две смены экрана, чтобы сделать ее немного короче. Здесь не нужно работать над мобильными представлениями, если у вас нет энергии.
3 - игровой интерфейс
Сложность: сложная
Еще одна непростая задача! Большинство игр имеют уникальный художественный стиль, который нелегко перевести в Интернете. Чтобы усложнить задачу, есть еще одно правило - не используйте изображения / svgs для создания фигур в пользовательском интерфейсе.

Источник: StarCraft II
Для этой цели мы выбрали StarCraft 2. Как видите, здесь и там есть масса мелких деталей, которые вы должны учитывать в своей реализации. Действительно, здесь правило «без активов» усложняет задачу. Вам придется работать с формами, обрезкой, магией теней, градиентами, границами и многим другим. Конечно, нужны изображения для портретов и морпеха справа.
Чтобы сделать вещи более реалистичными, верхнюю правую границу портрета можно заменить одной из верхних строк следующего изображения:

Источник: StarCraft II
Если вам удалось сделать так, чтобы он хорошо смотрелся на небольших экранах и мобильных устройствах, вы выиграете дополнительные баллы! Это было бы очень хорошо! влияние проекта на ваше резюме.
4 - Викторина
Сложность: средняя
Игры-викторины не так уж сложно создать по сравнению с некоторыми из вышеперечисленных проектов, но для их работы потребуется написать некоторый JS-код. Да, до сих пор у нас были только проекты на основе CSS, для этого вам также придется сделать его интерактивным, чтобы люди могли щелкать, видеть правильные / неправильные ответы и многое другое.

Если вы выполните поиск по запросу «Викторина» в Dribbble, вы можете найти массу примеров, но если вам сложно выбрать один, вы можете взять это:

Источник
Как видите, экранов всего два, а это значит, что вам придется придумывать остальные, основываясь на дизайне, представленном выше.
Особенности викторины:
- Считайте правильные ответы
- Ответ из N вариантов
- Показывать правильные / неправильные ответы после нажатия
- Всплывающее окно с вопросом
- Вернуться ко всем викторинам, выбрать викторину
- Показать окончательный результат после окончания викторины
Вы можете сделать гораздо больше, чем упомянуто выше, если хотите. Как правило, это проект типа «один день».
5. Выберите случайный сайт и сделайте его удобным для печати
Сложность: Легкая
Оптимизация для печати имеет свои особенности. Особенно, когда вы скрываете любые существующие элементы на сайте, очищаете фон, улучшаете типографику, работаете с разрывами страниц и форматируете страницы.
Для этой задачи вы можете выбрать сайт в Интернете, выбрать страницу статьи и начать работу над стилями печати. По этой теме написаны длинные статьи, так что есть чем помочь вам.
Примеры веб-сайтов, которые вы можете использовать:
- Страница продажи Amazon - сосредоточьтесь только на важной информации.
- Страница продаж курса - с SitePoint.
- Другая страница курса
Не стесняйтесь выбирать любой другой сайт, который вы хотите, вы можете сделать это легко или сложно для себя. Если вы хотите увидеть пример хорошего стиля печати, взгляните на https://www.smashingmagazine.com/, они действительно справились.
6 - Сложный макет в стиле журнала
Сложность: Безумие
Этот, помимо сложности, еще и сложный. И это занимает больше времени по сравнению с любыми другими задачами, упомянутыми выше, поэтому вам может потребоваться освободить для этого более 20-30 часов.

Источник
Вышеупомянутый дизайн - переработанный дизайн The New York Times Славы Корнилова. По ссылке вы увидите все созданные им дизайны, включая большие экраны, демонстрирующие всю домашнюю страницу.
В этом проекте вам нужно будет думать в терминах компонентов, стилизовать некоторые сложные элементы пользовательского интерфейса, такие как видео, выходящее за пределы области просмотра (которое должно продолжать реагировать), настройки типографики, перекрывающиеся элементы и многое другое.
Даже простой взгляд на фон за большим заголовком вверху скрывает несколько сложных моментов в его реализации.
Он разработал множество элементов, так что вы можете провести здесь больше месяца или двух, если хотите, и вам будет так много чему поучиться. Возможно, вы даже сможете снять видео в фоновом режиме, как показано ниже:

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

Источник
Что здесь нужно учитывать - графики должны быть настоящими. Они должны использовать реальные данные , и вы должны попытаться сделать их похожими на те, которые вы видите вверху. Вы можете использовать множество библиотек, и, скорее всего, вам придется много расширять / изменять.
Если вы решите добавить в него некоторые анимации, это может быть даже лучше. Это было бы так красиво в резюме, правда?
В конце концов:
Один из лучших способов научиться и стать лучшим разработчиком - это просто начать писать код и создавать сайты. Делайте это ежедневно, просто кодируйте тонну! Это особенно полезно в первые 3-4 года вашей карьеры.
Имея этот опыт позади, вы легко могли бы занять более высокую должность. Там вы можете принимать решения и эффективно руководить собственной командой, используя опыт, полученный во всех этих проектах, а также проблемы и проблемы, которые вы нашли и преодолели на этом пути. И помните, всегда старайтесь найти что-то трудное, над чем можно поработать!