Проектные идеи, которые новички могут добавить в свое профессиональное портфолио или отточить свои навыки.
Когда я впервые начал свое путешествие в веб-разработку, я был завален множеством вещей, которые нужно было изучить. HTML, CSS, JavaScript, адаптивный дизайн — все они нависали над моей головой с внушительным ростом.
Если бы я мог дать своему прошлому «я» несколько слов мудрости, я бы рассказал ему то учение, которому следую сейчас.
Просто начните.
Для любого навыка очень важно, чтобы вы начали применять свои знания в проектах как можно скорее. Вначале веб-разработка может показаться большой горой, полной сложных концепций, решений проблем и бесконечных языков для изучения.
Но с небольшой самоотверженностью — и большим количеством кода — вы добьетесь этого, если приложите усилия. Так что отбросьте любые неправильные представления, страх или замешательство, которые у вас могут быть, выберите место для начала и начните маленькими шагами подниматься в гору.
«Если вы тратите слишком много времени на размышления о чем-то, вы никогда этого не сделаете».
- Брюс Ли
Итак, без лишних слов, давайте рассмотрим пять идей веб-сайтов, которые помогут развить ваши навыки веб-разработки и заложить прочную основу для будущего.
1. Портфолио разработчиков
Это отличная отправная точка по трем причинам:
- Это простой веб-сайт с точки зрения дизайна, макета и количества страниц.
- Это позволяет вам демонстрировать проекты, которые вы построили или над которыми работали, и делает вас более законным в целом.
- По мере накопления опыта его можно дополнять новыми захватывающими функциями.
Портфолио разработчика — или портфолио любого веб-сайта — позволяет посетителям быстро понять, кто вы и чем занимаетесь. Это прекрасная возможность проявить творческий подход и проявить свою индивидуальность на своем веб-сайте.
Типичные страницы включают домашнюю страницу, обо мне, работу/портфолио или страницу контактов. Вы также можете объединить все это в разделы одностраничного дизайна. Какой бы стиль вы ни выбрали, будьте проще.
Не знаете, с чего начать? Не беспокойтесь, просто разбейте веб-сайт на более мелкие части и работайте над ними по одному, сверху вниз.
Я бы порекомендовал начать с дизайна, затем перейти к каркасу HTML и, наконец, к CSS. Это общая формула, которая поможет вам во всех типах проектов.
P.S. Вы можете использовать шаблон оформления или создать собственный дизайн.
Не бойтесь просматривать другие веб-сайты в поисках вдохновения и направления. Вы должны знать, как выглядит хорошо сделанная скульптура, прежде чем лепить ее самостоятельно.
Просто помните: воровство ранит чувства. Это также может повредить вашему банковскому счету.
2. Целевая страница
Технически это отдельная веб-страница, которая ведет пользователей на более крупный веб-сайт, но, тем не менее, это актуальный проект.
Целевая страница – это отдельная веб-страница, которая существует исключительно для того, чтобы направлять пользователей к конечной цели в форме призыва к действию или CTA. Словосочетание "целевая страница" происходит от ее роли в качестве первое место, на которое «приземляются» пользователи после перехода по внешней ссылке. Это важный аспект любой маркетинговой кампании, который помогает повысить конверсию для бизнеса.
Вашей целью будет создать целевую страницу для определенного типа бизнеса или продукта. Выберите одну цель или действие для целевой страницы, чтобы подтолкнуть пользователя к ней. Подписка на новостную рассылку, консультация или ссылка на продукт — все это хорошие примеры полезной конечной цели или CTA.
За бонусные баллы вы можете попробовать свои силы в копирайтинге текста или просто использовать lorem ipsum в качестве заполнителя. Копирайтинг также является хорошим навыком для вашего резюме.
БЫСТРЫЙ СОВЕТ: В идеале вы хотите, чтобы все внимание вашего пользователя было сосредоточено на фокусных точках страницы: CTA. Это могут быть как простые кнопки, так и сложные формы. Здесь — хорошая статья для разработки лендингов.
3. Личный блог
Это классический выбор для многих веб-разработчиков, и это был один из моих первых проектов. У этого есть потенциал вырасти во что-то большее, если вы продолжите поддерживать и улучшать его.
Личный блог – это веб-сайт, на котором вы размещаете письменные статьи на темы, связанные с определенной нишей, вашей повседневной жизнью или даже продуктами, на которые вы делаете обзоры. Он служит платформой, на которой вы можете написать о чем угодно, от «как создать API с нуля» до «рецепта домашней тамале моей бабушки». Возможности безграничны, и да, вы можете использовать последнюю.
Кроме того, если вы решите приложить больше усилий и предложить качественный контент, вы даже можете получить хороший дополнительный доход.
Это на уровень выше первых двух. Вы захотите создать стандартный набор страниц, таких как домашняя страница, страница о нас и контактная страница; а также страницу для каждого уникального поста в блоге (не менее 2-х) в формате типичного поста в блоге. Чтобы вдохновиться постами в блоге, вы можете взглянуть на любую из моих статей или любые статьи на Medium.
Еще раз, будьте проще и больше беспокойтесь о представлении и создании всего проекта только с помощью ванильного HTML и CSS. Вы также можете поэкспериментировать с CMS, такой как WordPress, хотя бы для того, чтобы ознакомиться с тем, как они работают, и добавить еще один навык в свое резюме.
4. Информационный сайт
Информационные сайты предлагают информацию. Хорошо сказано, если я сам так говорю.
Если вы когда-либо просматривали такие сайты, как Википедия или Trend Hunter, вы воочию видели, чем они отличаются от других сайтов. По своей сути информационные веб-сайты собирают и объединяют большие объемы информации, которую пользователи могут просматривать — обычно с помощью окна поиска или надежной навигации.
Это может показаться сложным, но вам не нужно беспокоиться о заполнении каждой мелочи. Цель состоит в том, чтобы набраться опыта, создавая простые виджеты и компоненты, используя только HTML и CSS. Сосредоточьтесь на том, чтобы узнать, как эти веб-сайты визуально размещают свой контент в ясной и удобоваримой форме.
Это могут быть выпадающие списки, панели поиска, боковые панели, меню, карточки и т. д. Подумайте, как можно разбить большую библиотеку информации на четкие, небольшие элементы, по которым легко перемещаться и которые помещаются на одной странице.
Будь проще.
Совет для профессионалов: найдите понравившийся информационный веб-сайт и откройте его в инструментах разработчика браузера (F12 для Chrome в Windows). Потратьте некоторое время на анализ каждого раздела, виджета и элемента, чтобы увидеть, как вы можете сделать что-то подобное в своем собственном проекте.
5. Сайт утилиты
Служебный веб-сайт – это веб-сайт, ориентированный на предоставление пользователям определенного инструмента или услуги. Это может быть онлайн-калькулятор или оптимизатор изображений, такой как Google Squoosh.
Ваша цель — создать чистый веб-сайт, содержащий как минимум двавеб-инструмента/приложения — на отдельных страницах или на одной странице. Не беспокойтесь о том, чтобы сделать приложения функциональными, просто сосредоточьтесь на дизайне, компоновке и простоте использования.
Я оставил этот проект напоследок, потому что к нему стоит вернуться, когда вы начнете углубляться в JavaScript. Конечно, если вы чувствуете себя достаточно уверенно на этом этапе, не стесняйтесь попробовать свои силы в добавлении некоторых простых функций с помощью JavaScript.
Для тех, кто хочет начать работу с JavaScript, я рекомендую учебные пособия MDM или Серию JavaScript от Free Code Camp на YouTube.
Заключение
После создания этих 5 проектов вы будете на пути к тому, чтобы стать опытным фронтенд-разработчиком. Они также предоставят вам несколько начальных проектов, которые вы сможете позже обновить с помощью JavaScript, фреймворков или серверных технологий.
Делайте это шаг за шагом, учитесь как можно больше, и я желаю вам всего наилучшего на вашем пути.
До скорого.
