Нужны идеи для применения HTML, CSS и JavaScript? Вот вам несколько идей, которые, вероятно, не приходили вам в голову.
Многие начинающие веб-разработчики уже знают, что им необходима практика, практика и еще раз практика новых изучаемых навыков.
Создание реальных проектов приносит с собой задачи, которых вы не найдете в учебниках и в интерактивных уроках.
Также оно поможет вам завоевать доверие, если вы собираетесь использовать HTML. CSS и JavaScript в своей карьере.
Но, как всегда, самый полезный опыт является также и самым трудным.
Я вижу начинающих разработчиков, спрашивающих на Reddit, Quora и Facebook (да и вообще на каждом углу интернета) о том, какие проекты им следует разрабатывать. Вот 8 забавных идей, которые испытают все ваши новые навыки, а также подготовят вас к решению задач, с которыми сталкиваются профессиональные веб-разработчики. Все они строго фронтенд: HTML/CSS/JS/jQuery. И да, они довольно абсурдны. И благодаря этому, ваше портфолио будет более заметно по сравнению с другими. Потому, что если вы создаете проекты “как у всех”, то вам будет трудно выделиться среди многих других.
1. Мастерская
Идея: Магазин, в котором есть гараж для ремонта мотоциклов и открытая яма для барбекю. Я надеюсь, что из соображений безопасности они находятся отдельно друг от друга, но вы можете дать волю фантазии.
Тип сайта: Малый бизнес
Основные функции:
- Возможность увидеть, какие услуги оказывает мастерская, и для каких именно марок/моделей
- Положительные отзывы на мастерскую от реальных клиентов
- Отзывы на гараж и ресторан
- Меню ресторана
- Подробная информация о кухне/шеф-поваре/истории о том, как ресторан был основан
Основные проектные решения:
- Как вы будете отделять гараж от ресторана, чтобы пользователь мог выбрать то, что ищет? Будет ли у них одинаковый дизайн или же разный?
- Кто будет целевой аудиторией? Определенно, мужчины. Но, возможно, это будут мотоциклисты старшего возраста? Или же молодые городские хипстеры?
- Сколько изображений вы будете использовать? Это может быть всего одна главная картинка, соответствующая уникальной концепции сайта.
- Какой будет цветовая схема? Более агрессивное сочетание красного с черным или что-нибудь другое?
- Как люди будут пользоваться этим магазином? Могут ли это быть байкеры, которые путешествуют на дальние расстояния? Байкеры, желающие поесть, пока их байки находятся на ремонте? Или же нужно больше случайных посетителей, которые оказались там просто благодаря уникальной концепции места?
Что вы изучите: Это позволит вам творчески подойти к созданию реального отношения на вашем сайте. Вы можете показывать это отношение при помощи изображений, цветов, объявлений или небольших интерактивных элементов. В любом случае, вам нужно создать сайт, простой для пользования пожилыми мужчинами, но при этом усиливающий уникальный брендинг магазина.
2. Политические хайку
Идея: Все любят хороший политический юмор и очень часто подшучивают над политиками. Это сайт, где вы (и, конечно же, другие люди тоже) сможете разместить хайку, высмеивающее последнюю оплошность или заявление известного кандидата. Особенно актуально это будет во время предвыборной кампании!
Тип сайта: Блог
Основные функции:
- Интерфейс блога с серией хайку, которые легко просматривать
- Смешные фотографии кандидатов рядом с каждым хайку, так что читатель сможет легко просматривать страницы
- Новая страница для каждых 20 – 50 хайку и возможность “бесконечной” прокрутки
- Использование Google Form для того, чтобы другие пользователи тоже могли публиковать хайку и картинки
Основные проектные решения:
- Какая цветовая схема подойдет для сайта с хайку? Быть может, пергамент? Как вы оформите каждое хайку?
- Как усилить сарказм/пародию поста? Будете ли вы делать саркастические заголовки к каждому посту?
- Позволите ли вы пользователю выбрать пост по определенному кандидату, или это будет просто одна длинная лента? Если пользователь может выбирать кандидата, то будете ли вы создавать уникальную подстраницу для каждого кандидата?
- Как часто вы будете постить, и как часто, по вашим предположениям, пользователи будут посещать блог? Раз в день, или каждый раз, когда кандидат будет совершать смешную ошибку, или в разное время?
Что вы изучите: Блоги супер просты – их просто читают и на них просто разглядывают картинки. Здесь нет реального потенциала для взаимодействия. Это означает, что ваши объявления должны быть исключительно эффективными. Вам нужно будет создать последовательную тему с объявлениями. Если пользователь собирается посещать ваш блог на протяжении предвыборной кампании, то это означает, что он хочет последовательно просматривать смешные посты. И вы сможете сделать это только тремя путями! Вы также можете попробовать создать стиль, очень похожий на дизайн Twitter.
3. Склад туалетной бумаги
Идея: Интернет-магазин для обычной туалетной бумаги. Если вы когда-нибудь пользовались туалетной бумагой (надеюсь, все вы), то вы чувствуете значительную разницу между разными видами туалетной бумаги. Если вы подтираетесь эквивалентом картона, вы проклинаете владельцев фирмы и желаете им зла. Это может быть сайт для фанатов туалетной бумаги… если такие вообще существуют.
Тип сайта: Электронная коммерция
Основные функции:
- Разнообразие бумажной продукции, которая может классифицироваться/сортироваться по размеру, качеству, бренду или цене.
- Корзина и процесс оформления заказа для имитации процесса покупки
- Возможность подписки, чтобы пользователи могли зарегистрироваться и получать свою любимую туалетную бумагу автоматически
- Отдельный раздел для держателей туалетной бумаги с различным дизайном. Это может стать прекрасным подарком!
Основные проектные решения:
- Чтобы купить туалетную бумагу, вашим пользователям никуда не надо идти. Почему им следует выбрать ваш сайт? Возможно, из-за юмористических объявлений? Из-за простого процесса покупки? Или же из-за возможности подписаться? Подумайте о том, как сделать этот сайт уникальным среди других сайтов электронной коммерции.
- Кто ваши клиенты? Мамочки? Элитные рестораны? Отели класса люкс? Гермофобы? Это и должно определять то, какая продукция будет перечислена на сайте.
- Как вы хотите структурировать свою целевую страницу? Вы хотите, чтобы пользователи сразу проходили в торговый интерфейс, или же вы хотите иметь главную страницу, чтобы представлять свой сайт?
Что вы изучите: Электронная коммерция – это огромная индустрия, имеющая много маленьких решений, которые формируют приятный и удобный торговый опыт. С каждым шагом, необходимым для упрощения процесса покупки, вы будете получать опыт. Вспомните Amazon.com – что вам в нем нравится? Как быстро они находят продукт, который вы хотите?
Возможный вдохновитель: Diapers.com
4. Персональный сайт Марио
Идея: Марио, один из самых популярных мультяшных персонажей, не имеет персонального сайта! Он нуждается в вас, создайте сайт, который представит его как персонажа. Очевидно, что это не может быть просто любой персональный сайт, потому что Марио – такой весьма характерный персонаж. Нужно много интерактивности и анимаций, как в видео-игре. Вы можете прочитать об истории Марио здесь, а также вы можете увидеть невероятно сложный персональных сайт, вдохновленный видео-игрой здесь.
Тип сайта: Персональный сайт
Основные функции:
- Как и любой персональный сайт, он должен рассказывать обо всех его достижениях и о его опыте/приключениях
- Расскажите историю Марио визуально – в конце концов, он же мультипликационный персонаж. Не только рассказывайте о его работе. Используйте еще и немного визуальных анимаций, чтобы “оживить” эти достижения.
- Используйте числа, чтобы показать достижения всей его карьеры: как много принцесс он спас? Сколько игр продалось? И т.д.
Основные проектные решения:
- Какая цветовая гамма ассоциируется с играми про Марио? Та же самая, которую вы хотите использовать, также как и соответствующие шрифты из мультфильма.
- Как использовать анимацию для дальнейшего рассказа его истории? Возможно, вы захотите использовать jQuery UI для этого.
- Какие изображения ассоциируются с Марио? Как легко вы сможете добавить эти изображения, не тратя времени на рисование?
- Можете ли вы создать ощущение приключения на сайте? Или же, возможно, ощущение временной шкалы на протяжении всей его истории?
Что вы изучите: Надеюсь, что вы захотите, чтобы ваш собственный персональный сайт рассказывал уникальную историю о вас. Этот проект позволит вам рассказывать историю персонажа с таким большим количеством достижений, что все это будет действительно нереально показать! Дизайн персонального сайта в этом плане должен быть уникальным, а Марио, безусловно, имеет свой собственный уникальный стиль. Кроме того, вы узнаете, как добавить немного анимаций, которые добавят истории важность и порадуют пользователей – они создают особое впечатление, при этом не заставляя читать много текста.
5. Избегатель общения
Идея: Крейгслист имеет известный раздел под названием Упущенные Встречи, где пользователь может создать пост о человеке, встреченном в общественном месте, который пересекся с ним взглядом или улыбнулся ему, в надежде, что этот человек тоже читает данный раздел и свяжется с ним. Это сайт является его противоположностью: он про людей, который вы видели в общественных местах и быстро отвернулись от них, в надежде, что они не заговорят с вами и даже не обратят на вас внимание. Часто этими людьми являются нищие, юристы или пьяницы в общественном транспорте. Некоторые из таких людей могут совершать весьма эксцентричные действия, особенно подшофе. Так что это отличная возможность поделиться этой историей.
Тип сайта: Блог
Основные функции:
- Список историй с заголовками по теме. Например, пьяный мужчина в электричке на 15:00, говорящий сам с собой. По возможности с фотографиями.
- Возможность рассортировать посты по местоположению, времени суток и месту (улица, кафе, автобус и т.д.)
- Использование Google Form, чтобы пользователи могли делиться своими собственными историями
- Возможность группировать посты по категориям так, чтобы пользователи могли просматривать такие истории, как «Кого следует избегать в 3 часа ночи в Лондоне?»
Основные проектные решения:
- Какие действия достойны поста? Следует учитывать только действительно “печальное” публичное поведение. Как насчет услышанных вами политических позиций, с которыми вы не согласны? Или неприятные люди, встреченные в баре?
- Как вы сможете защитить частную жизнь человека, чтобы сайт не превратился в сайт притеснений?
- Это будет смешной ресурс, или, скорее, ресурс о жутких людях?
Что вы изучите: Маленькие факторы, влияющие на чувство сплоченности в блоге. Если он стал популярным, то вам стоит создать поток смешных историй. Тогда пользователи будут постоянно возвращаться сюда. Используйте такие детали, которые сделают историю правдоподобной и вызовут у читателей ощущение, будто они сами были участниками этого.
6. Производство змеиного масла
Идея: Небольшой магазин, где продается множество чудесных лекарств, непроверенных наукой. Например, казалось бы, такая бесполезная вещь как хвостик свиньи как-то может излечить рак. Термин появился в XIX веке на западе США. Врачи-самозванцы утверждали, что змеиное масло обладает чудодейственными природными свойствами, способными вылечить любой недуг. Но в действительности они, конечно же, обманывали.
Тип сайта: Малый бизнес
Основные функции:
- Десятки натуральных веществ, которые, как вы утверждаете, обладают чудесными свойствами лечения различных заболеваний
- На странице «О нас» расскажите о фальшивой квалификации владельца и о том, как эти поддельные лекарства спасли его кузена.
- Возможность сортировать лекарства по болезни – ищете что-нибудь от рака? Или от артрита?
- Отзывы клиентов по каждом продукту, где они рассказывают о своем опыте
Основные проектные решения:
- Если человек действительно собирается купить одно из этих «чудесных» лекарств, то какую информацию он должен увидеть, чтобы убедиться в своем выборе?
- Какая цветовая схема сюда подойдет? Цветовая гамма природных, “земляных” цветов или что-то другое?
- Какие люди будут посещать этот сайт? Если это поклонники здорового питания, то дизайну лучше быть похожим на дизайн привычных им сайтов.
Что вы изучите: Вам нужно придумать особое объявление о продаже этих фантастических продуктов. Вам нужно сделать их как можно более привлекательными. Кроме того, скорее всего, это будет небольшой, независимый, уникальный магазин, более привлекательный, чем обычные сайты электронной коммерции.
7. Кого раздражает ваша музыка? Викторина
Идея: Старшему поколению часто не нравится музыка молодого поколения. Хиппи и хипстерам часто не нравится мейнстримная музыка. И наоборот. В действительности, когда вы играете музыку в общественных местах, кого-то вы, вероятно, раздражаете. Этот сайт задаст вам несколько вопросов на выяснение музыкального вкуса и расскажет, какая группа людей вас за это возненавидит.
Тип сайта: Интерактивная викторина
Основные функции:
- Ряд вопросов, которые появляются по одному. У каждого из них есть несколько вариантов ответов, которые определяют следующий вопрос. Например, если на один вопрос вашим ответом было «Я люблю рэп», то следующим вопросом может быть «Кто вам больше нравится из этих пяти исполнителей?» или же «Какой именно рэп?»
- На последней странице нужно указать, каких людей раздражает ваша музыка и почему. Также можно добавить несколько забавных гифок или видео с YouTube, чтобы люди реагировали с юмором.
- Смешные картинки, сопровождающие каждый вопрос, повысят комичность сайта. Он не должен восприниматься серьезно!
Основные проектные решения:
- Как вы собираетесь создавать плавный переход от вопроса к вопросу? Какие анимации используете?
- Как вы дадите пользователям знать, на каком они шаге? Типа 1 из 5.
- Как вы сделаете ответ смешным? Пользователи будут заходить на ваш сайт для развлечения, поэтому они будут надеяться на что-то смешное в конце теста.
- Какие картинки смогут рассмешить? Какие веселые факты можно добавить? Иногда это называется “микрофильм”.
Что вы изучите: Вы освоите такие технические навыки как вставка с HTML5 и с jQuery UI. А также научитесь создавать общие шаблоны для полноценных веб-приложений. Так что это будет реальная практика!
8. Моя хроника потери веса
Идея: Мы все едим пищу, которую есть не должны. Но ведь она такая вкусная! Так вот теперь будет возможность писать о вкусной еде, съев которую, вы чувствуете себя виноватым, так как она может привести к набору веса. Вы даже можете оформлять посты как фальшивые некрологи. Например, написать, что вы сожалеете о гибели этого замечательного куска пирога.
Тип сайта: Персональный блог
Основные функции:
- Каждый раз, когда вы едите пищу, из-за которой испытываете чувство вины, размещайте ее изображение и небольшую заметку о ее “смерти”. На фотографии может быть изображена либо тарелка с крошками/объедками, либо само блюдо.
- Сортируйте пищу по времени суток и по ее виду.
- Используйте Google Form, чтобы другие пользователи тоже могли добавлять свои “виноватые” истории.
- Список ресурсов взаимопомощи, таких как сообщества, посвященные диетам, и фитнес-приложения.
Основные проектные решения:
- Хотите оформить сайт в “траурном” стиле для максимально саркастического эффекта?
- Сможете ли вы составить эти описания так, чтобы они были смешными для широкой аудитории и легкими для восприятия?
- Что вам нужно сделать, чтобы создать полноценный сайт, а не просто блог, напоминающий Twitter?
Что вы изучите: Юмор в интернете может быть коварным! Главное – придерживаться одного определенного тона, чтобы пользователи всегда знали, что ожидает их на вашем сайте. В то же время юмористические сайты могут быть завирусованы, потому что люди любят делиться шутками с друзьями.
Заключение
Почти любую идею моно превратить в сайт! Вы всегда стоит рассматривать пути, которые могут сделать ваш сайт незабываемым – это поможет вам выделиться в поисках работы или клиентов. Также он останется в памяти ваших пользователей: они будут решать, возвращаться ли на ваш сайт или нет. Вы сможете отличаться от других, если приложите все усилия, чтобы выделиться!