8 идей для создания первого сайта
Не можете придумать, с чего начать практиковать свои навыки HTML, CSS и JavaScript? Вот несколько интересных идей, которые, вероятно, не приходили вам в голову.
Множество начинающих веб-разработчиков понимают, что им нужна только практика, практика и ничего кроме практики изученных навыков. Разработка реального проекта поможет найти трудности, которые не опишет ни один учебник или интерактивный урок. Практика поможет стать увереннее, если вы собираетесь использовать HTML, CSS, JavaScript в своей карьере. Но опыт, который может быть действительно полезен, трудно получить.
Я часто вижу новичков, спрашивающих на Reddit, Quora, Facebook и других интернет-площадках о том, за какой проект им взяться. Поэтому представляю вам восемь весёлых идей, которые помогут проверить навыки и подготовят к трудностям, с которыми сталкиваются веб-разработчики. Все они строго фронтенд: HTML, CSS, JS и jQuery. Они настолько прекрасны в своей нелепости, что будут выгодно выделять ваше портфолио на фоне остальных. Ведь если добавлять в него проекты «как у всех», то будет трудно выделиться среди большого количества однотипных работ других разработчиков.
1. Мясная лавка Большого Дейва
Идея: магазин, при котором есть гараж, где можно отремонтировать свой мотоцикл, и место для барбекю. Я надеюсь, что они физически разделены между собой для безопасности, но всё зависит от вашей фантазии.
Тип сайта: малый бизнес.
Ключевые функции:
Ключевые дизайнерские решения:
Что вы изучите: это позволит творчески подойти к созданию реальной точки зрения на ваш сайт. Можно показать своё отношение через изображения, цвета, объявления или небольшие интерактивные элементы. Нужно создать сайт, который будет лёгок в использовании для пожилых мужчин, но при этом усиляющий уникальность этого магазина.
Политические хокку
Все любят хороший политический юмор и часто подшучивают над политиками и судьями. Этот сайт будет местом, где вы (и другие, конечно же) сможете опубликовать насмешливое хокку про последнюю оплошность политика или его деятельность. Особенно актуально будет в предвыборный сезон.
Тип сайта: блог.
Ключевые функции:
Ключевые дизайнерские решения:
Что вы изучите: блоги супер просты — их читают и смотрят фотографии. Существует реальный потенциал для взаимодействия. Это означает, что ваши объявления должны быть исключительно эффективны. Необходимо создать последовательную тему с объявлениями. Если пользователи будут посещать ваш сайт в период выборов, то они хотят видеть смешные посты постоянно. И вы можете сделать это несколькими путями. Кстати, можете попробовать сделать это в стиле твитера.
3. Склад туалетной бумаги
Идея: онлайн-магазин для обычной туалетной бумаги. Если вы когда-либо использовали туалетную бумагу (надеюсь, все это делали), то поймёте существенную разницу между видами туалетной бумаги. После того как придётся подтереться каким-то эквивалентом картона, вы проклянёте владельцев фирмы и будете желать им зла. Это должен быть сайт для любителей туалетной бумаги. если такие вообще существуют.
Тип сайта: интернет-магазин.
Ключевые функции:
Ключевые дизайнерские решения:
Что вы изучите: электронная торговля — огромная индустрия и есть множество различных маленьких решений, которые формируют позитивный и удобный пользовательский опыт. Пройдя все необходимые шаги, чтобы сделать процесс покупки лёгким — вы получите ценный опыт. Подумайте об Amazon.com — хотите ли вы быть как они? Как быстро пользователи смогут найти продукт, который им нужен?
Сайт для вдохновения: diapers.com.
4. Персональный сайт Марио
Идея: Марио, один из самых популярных мультипликационных персонажей, не имеет персонального сайта. Нужно, чтобы вы создали сайт, который представит его. Совершенно точно, что это не может быть обычный персональный сайт потому, что Марио — очень характерный персонаж. Нужно много интерактивных элементов и анимации, прямо как в видеоигре. Прочитайте историю о Марио здесь и посмотрите, как эта невероятная видеоигра вдохновила при создании персонального сайта тут.
Тип сайта: персональный сайт.
Ключевые функции:
Ключевые дизайнерские решения:
Что вы изучите: надеюсь, вы хотите, чтобы персональный сайт рассказывал историю о вас. Этот проект позволит рассказать историю персонажа с таким количеством достижений, что всё это показать нереально. Конструкция персонального сайта должна быть индивидуальна для каждого, и Марио, безусловно, имеет собственный уникальный стиль. Кроме того, вы узнаете, как добавить анимацию, которая прибавит ценность для истории и порадует пользователей — создав особое впечатление, не заставляя при этом читать много текста.
5. Избегатель общения
Идея: Существует газета электронных объявлений, в которой есть раздел «Ищу тебя», где люди могут создать пост о человеке, увиденном на улице или в любом общественном месте, который улыбнулся им или пересёкся взглядом. Они надеятся, что человек прочитает это объявление и откликнется. Мы сделаем наоборот: про людей, которых вы увидели в общественном месте и быстро отвернулись, надеясь, что они не заговорят с вами. Обычно это нищие, юристы и алкаши в общественном транспорте. Некоторые из этих типов людей могут делать эксцентричные вещи, особенно если они пьяные, так что это будет прекрасная возможность поделиться историей.
Тип сайта: блог.
Ключевые функции:
Ключевые дизайнерские решения:
Что вы изучите: небольшие факты влияют на чувство сплочённости в блоге. Если он станет популярным, то стоит наладить поток забавных историй, ради которых люди будут постоянно возвращаться. У вас должны быть такие детали, которые сделают рассказ настолько правдоподобным, что у читателей возникнет чувство, будто они были участниками этого.
6. Производство змеиного масла
Идея: небольшой магазин, где продают всякие чудесные средства, которые не проверены наукой. Например, такая бесполезная вещь, как свиной хвост может как-то вылечить рак. Термин был образован в XIX веке на западе США. Лжедоктора твердили о чудодейственном природном свойстве змеиного масла, данные о котором были так же сфальсифицированы.
Тип сайта: малый бизнес.
Ключевые функции:
Ключевые дизайнерские решения:
Что вы изучите: нужно придумать особый путь для продажи этих фантастических продуктов. Заставить их быть более привлекательными. Кроме того, это будет небольшой, независимый магазин, со своей уникальностью, что сделает его интереснее обычного интернет-магазина.
7. Кто недоволен музыкой? Викторина
Идея: старшему поколению часто не нравится музыка молодого поколения. Хиппи и хипстерам не нравится популярная музыка. И наоборот. Каждый раз, когда вы играете музыку в общественных местах, скорее всего, кто-то этим недоволен. Этот тест позволит выяснить свой музыкальный вкус за несколько вопросов и скажет вам, какая группа людей будет ненавидеть вас за него.
Тип сайта: интерактивная викторина.
Ключевые дизайнерские решения:
Что вы изучите: полезные технические навыки, например: HTML5 и jQuery UI. А также освоите простые паттерны создания полноценных веб-приложений и это будет реальная практика.
8. Моя хроника потери веса
Идея: все мы иногда едим пищу, которую не должны есть. Но она такая вкусная. Это даст возможность писать обо всей еде, которую вы съели и пожалели об этом, так как теперь наберёте вес. Но она была такая вкусная. Можно оформить некоторые фразы, как фальшивые некрологи. Например, сожаления о том, что этот замечательный пирог погиб из-за вас.
Тип сайта: персональный блог.
Ключевые дизайнерские решения:
Что вы изучите: юмор в интернете может быть коварным. Главное — придерживаться одной определённой концепции и контента, чтобы пользователи всегда были уверены в том, что их ожидает на сайте. В то же время юмористические сайты могут быть очень «вирусными», так как люди будут делиться шутками с друзьями.
Заключение
Любая ваша идея может прекрасно подойти для сайта. Всегда стоит искать такие возможности, чтобы ваш сайт стал незабываем — это поможет выделиться при поиске работы и клиентов, и это останется в памяти пользователей, когда они будут думать возвращаться на ваш сайт или нет. Нужно отличаться от всех остальных, поэтому приложите усилия, чтобы выделиться.
Идеи ничего не стоят
Нажатие на кнопку — согласие на обработку персональных данных
Как сделать простой веб-сайт за один час
От переводчика: инструкция максимально простая, зато на неё можно ссылаться, если новички задают вопрос, как запустить свой сайт в интернете.
Один из моих друзей пару месяцев твердил, что сделает сайт на весенних каникулах. Сейчас каникулы заканчиваются, а он так и не начал. Завтра его день рождения, и я решил как мудак хороший друг сделать ему подарок: написать пошаговую и максимально простую инструкцию.
В реальности, достаточно всего одного часа, чтобы сделать веб-сайт. Я это знаю, потому что засёк время, когда сам выполнял нижеследующие действия, и весь процесс занял чуть меньше часа (я даже зарегистрировал новый домен и создал новый аккаунт на Github для чистоты эксперимента). Код этого сайта тоже можно посмотреть на Github.
1. Идёте на namecheap.com и регистрируете домен. Этот шаг только в том случае, если нужно собственное доменное имя.
2. Создаёте аккаунт Github и скачиваете Git, если это ещё не сделано.
4. Делаем новый репозиторий Github для сайта под названием yourusername.github.io. Например, я зарегистрирован под именем smilli, так что мой репозиторий называется smilli.github.io.
6. Создаём файл ‘index.html’ в папке с сайтом с HTML-кодом главной страницы. Здесь необязательно тратить много времени, он может быть весьма лаконичным.
8. Теперь запускаем следующие команды:
9. Идём на yourusername.github.io. Здесь вы должны увидеть свой сайт! Поздравляю, вы что-то опубликовали в онлайне.
10. Если хотите собственное доменное имя, создаёте файл ‘CNAME’ (всё прописными буквами). Туда добавляете одну строчку ‘’yourdomainname.com’ (без http или www). См. подробности конфигурации CNAME здесь.
11. Как и раньше, отправляем все изменения на Github.
12. Теперь авторизуетесь на namecheap.com и щёлкаете по доменному имени, которое нужно, в списке своих доменов. Список будет примерно таким:
После выбора домена, появится ссылка «All Host Records» в левой панели во вкладке «Host Management». Нажмите на неё. Теперь вы увидите настройки по умолчанию, которые Namecheap указал для вашего сайта.
Измените настройки следующим образом (заменив ‘username’ на своё имя пользователя, конечно).
13. После вступления в действие изменений в DNS вы сможете увидеть свой сайт на своём домене! Поздравляю. 🙂
О чем создать сайт
Дата публикации: 2016-04-04
От автора: приветствую вас на нашем блоге, дорогой читатель. У нас вы можете увидеть много обучающего материала по веб-технологиям, но сегодня давайте поговорим немного о другой теме. В частности, о чем создать сайт?
Мы часто говорим о том, как создать сайт, но, пожалуй, перед этим важно задать себе вопрос: а зачем, с какой целью? О чем он будет? Какой цели будет служить? Без ответов на эти вопросы не стоит браться за разработку. Ответ: “Разберемся в процессе”, тоже нельзя назвать оптимальным.
Итак, прежде чем приступать к созданию, вы должны подумать, на какую тему будет ваш интернет-проект. Если вы простой человек, то наверняка вам подойдет сайт-блог.
Это такой веб-ресурс, который отражает ваши личные мысли, на нем вы можете писать о чем угодно. На самом деле, если у вас нет никаких серьезных целей и планов, то вам необязательно задумываться о том, на какую тему будет сайт. Вы можете писать туда то, что вам вздумается.
Но дело, что такое бездумное ведение не принесет вам никаких результатов. Даже если вы не ставите никаких целей, все равно ведь, для какой-то цели вы пишите на сайт какие-то статьи. Зачем? Наверное, чтобы люди их читали. Но на сайте, который не отнести к какой-то общей тематике, где нет порядка в структуре, едва ли задержаться люди, да и без правильного написания контента на него просто не придут посетители, так что единственным его посетителем будете вы.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Первым делом узнайте, какие вообще существуют тематики. Для этого можно воспользоваться любым хорошим каталогом сайтов или рейтингом. Например, liveinternet.
Как выбрать тему для создания сайта?
Итак, мы приходим к выводу, что просто необходимо продумать тематику, цель вашего блога. Вам никто не запрещает делиться на нем новостями из своей жизни, рассказывать что-то интересное от себя, но все это должно быть в соответствующей рубрике, все должно быть структурировано и основной процент информации должен быть по той теме, которую вы выбрали.
Очень многие люди приходят в интернет для того, чтобы заработать денег. Соответственно, возникает справедливый вопрос, а о чем можно создать сайт для заработка? Я вас готов успокоить, тематика тут не является главным фактором, заработать можно практически в любой. Намного важнее, что подходит именно вам.
Рекомендации при выборе тематики
Личный блог подразумевает, что писать статьи будете вы лично. Из этого уже можно сделать вывод, что вы должны выбрать ту тему, в которой разбираетесь или она вам нравиться. Давайте рассмотрим 4 варианта вывода. Обдумывая каждую тематику задавайте себе вопрос: “Разбираюсь ли я в ней и нравится ли она мне?”
Я разбираюсь в данной тематике и она мне нравится. Отлично! Выбирайте ее и не прогадаете. Вам будет чем поделиться со своими будущими читателями, вы будете писать со знанием, но в то же время не будете терять интерес к этому делу. Таким образом, у вас большие шансы создать успешный интернет-проект. Вы наверняка с большим интересом будете писать материал и отвечать на комментарии и даже если ваши знания сейчас не идеальны, вы всегда сможете их пополнить.
Я разбираюсь, но мне не нравится (надоело, наскучило). Пожалуй, и такое может быть. Предположим, вы работаете в сфере IT и наверняка могли бы поделиться с читателями теми полезными знаниями, которые сами имеете. Но в жизни всякое бывает, и, возможно, ваша работа вам не так уж и нравится — вы чувствуете, что не выдержите долго писать об этом.
Что ж, я могу сказать, что жизнь в целом непростая вещь, и если вы хотите зарабатывать деньги на будущем проекте, то знания вам определенно нужны. Вы должны честно проанализировать свои возможности и сказать себе, смогу ли я работать, если меня будет одолевать лень и нежелание писать на эту тему. Возможно, уже в процессе работы она вам покажется не такой уж и скучной.
В любом случае, здесь нельзя сделать точный вывод. Очень многие бросают развитие своих проектов именно по причине того, что теряют интерес к ним. Вы должны сесть и подумать, не брошу ли я ресурс когда-нибудь просто потому, что мне надоело?
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Как протестировать себя?
Перед тем, как описать следующие 2 варианта вашего отношения к теме, я хотел бы рассказать, как проверить себя. Попробуйте написать статью на выбранную тему. Если процесс работы вам понравился, значит, тема вас увлекает. Честно сравните ее с другими статьями и вы увидите, насколько она профессионально написана, чтобы понять, насколько хорошо вы разбираетесь в этом.
Очень хорошо, когда у вас много конкретных советов в статьях, это говорит о вашем профессионализме. Зайдите на любую биржу контента (например, etxt) и посмотрите, какие вообще существуют темы, там их очень много, как раз вы можете что-то подобрать.
Я не разбираюсь в теме (плохо разбираюсь), но мне так сильно хотелось бы писать на эту тему! Тут вопросов тоже нет. Если вам хочется, но не можется, нужно делать! Желание является очень мощным стимулом. Дело в том, что даже если вы сейчас полный 0 в теме, но у вас есть желание, у вас, возможно, даже больше шансов на успех, чем в предыдущем варианте.
Интерес к тематике будет побуждать вас приобретать знания по ней, узнавать больше и делиться этим с другими. А самое главное, ваши статьи наверняка не будут сухими. Если человек интересуется каким-то делом, это будет видно даже в стиле его письма.
Приведу свой пример. Есть очень выгодные тематики в сети, такие как: строительство, финансы и т.д. Казалось бы, именно по ним нужно создавать блог, наполнять его и получать прибыль. Но что делать, если меня тошнит от таких слов, как: инвестирование, банки, проценты, вклады и т.д. Значит все, обходите эту тему десятой дорогой, даже если вы в ней не новичок.
Другое дело, если вам нравится. Например, я ничего не понимаю в баскетболе, но если мне понравился матч, я могу посмотреть еще парочку, посмотреть словарь терминов, послушать разъяснения самого комментатора, сходить на какой-нибудь форум. Таким образом, через короткое время я уже буду швыряться направо и налево спортивными терминами, о которых другие не знают. Вот так много значит желание и интерес.
Я не разбираюсь и мне не нравится. Ну тут все очевидно, зачем писать вообще об этом? Если у вас нет ни знаний, ни интереса, то вообще нужно обходить десятой дорогой такие тематики. Но знаете ли вы, что многие новички выбирают тему для своих сайтов именно так?
Например, сколько вообще блогов в рунете о заработке в интернете? Их несчетное множество, кажется, это самая популярная тематика, едва ли не каждый второй новичок создает блог на жту тему. Но что, если у него нет ни знаний, ни желания узнавать в этой теме новое? Все, неудача ему обеспечена! От силы такой человек напишет пару статей, на этом его желание, скорее всего, иссякнет.
Сколько людей пишут о том же заработке, но при этом сами не имеют никаких результатов в этом деле, да что там, рекламируют на своих сайтах откровенно жалкие способы заработать. Это лишь один пример, подобное может быть в любой тематике.
Если вы не разбираетесь в автомобилях и у вас не лежит сердце к их ремонту, едва ли стоит создавать блог на эту тему только ради того, что там дорогая реклама и хорошие партнерские программы.
Многие выбирают тему исходя из того, насколько много в ней крутится денег. Но я вам скажу, что это должен быть один из факторов, но ни в коем случае не решающий.
Итак, подытожим. Ваше желание – это самый мощный фактор. Ваши знания – еще один мощный, но не такой важный. Финансовая перспектива тематики – средний по важности фактор, который стоит учитывать, но он не должен решать все.
Надеюсь, теперь вы не сделаете ошибки при ответе на вопрос: “О чем можно создать сайт?”. Не стоит решать это за несколько минут. В конце концов, ваш интернет-проект может стать вашим будущим, к выбору нужно отнестись максимально серьезно и ответственно.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Теперь я не могу сделать даже маленький сайт
Короче, я хорошо помню, как в 2013 году я сел и написал небольшой сайт за один день.
Это был сайт про события моего родного города. На одной странице выводились все мероприятия на грядущую неделю.
Я сделал страничку с мероприятиями, и небольшую админку, где они редактировались. У меня была книжка по PHP, поэтому сайт я написал на PHP, подключил MySQL-базу, сверстал на HTML и CSS, и залил на виртуальный хостинг. Сайтом пользовались, а я усердно добавлял мероприятия каждое утро, пока не ушёл в армию, не оставив никого на поддержку. Так сайт и почил.
Идея сайта всё ещё казалась хорошей, и я решил его возродить. Казалось бы, бери и делай, но против меня играло то, что я толком не помнил PHP, и уже успел набраться опыта разработки в очень больших, средних и маленьких компаниях.
Я решил взяться за дело и стал думать.
Хм, не могу же я просто взять PHP и написать на нем несколько страничек вперемешку с HTML. Как я буду это поддерживать без ООП и вообще нормального разделения кода? К тому же, все говорят, что PHP уже не очень, да и сколько новых версий вышло!
Наверно, мне нужно взять что-то более современное, Node.js или Python. Но я, конечно, не буду просто писать на них потому, это не Best Practices. Пожалуй, возьму какой-нибудь фреймворк, например, Django или Express.js. Впрочем, это самые популярные фреймворки, а есть другие, посовременнее, надо поискать.
Определившись, что я буду использовать или Python, или Node.js, я понял, что просто так отдавать целые странички с сервера нехорошо. Как мне в таком случае сделать всплывающие окна авторизации или динамическую подгрузку? Ну уж не с jQuery, упаси боже! Пожалуй, возьму React или Vue.js, чтобы написать правильный, разбитый на компоненты, интерфейс. Angular будет уже перебором, конечно. Используя фреймворк, мне нужно подключаться к бекэнду по API, поэтому использую Django REST Framework или вроде этого. Хорошо, что Express.js умеет так сам по себе, пожалуй, стоит выбрать Node.js в итоге. На фронтенде мне стоит подключить Axios, хотя теперь есть Fetch, но поддерживается ли он всеми браузерами? А может быть мне вообще использовать Svelte, чтобы заодно научиться чему-то новому?!
Теперь стоит правильно настроить IDE, для того, чтобы соблюдать Code Styles, правильные отступы, и никогда не забывать писать тройное равно вместо двойного. Настройка получается с трудом потому, что плагины IDE спорят друг с другом и упорно делают отступ из четырёх пробелов, а не из двух.
Разобравшись, я понимаю, что мой код нужно где-то хранить. Так как я уже порядком устал, выберу популярнейший GitHub. Настроив Git и авторизацию через ssh на моем компьютере, я понимаю, что я не знаю, какую систему ветвления использовать. GitFlow слишком избыточна, пока я один, но не коммитить же все в мастер-ветку? Мало ли к проекту кто-то присоединится, или, если я покажу репозиторий на собеседовании, все будут смеяться. Остаётся и непраздный вопрос, что писать в описаниях коммитов и на каком языке, но оставим это на потом.
Стоит подумать, как это все дело развернуть на хостинге. Если бек на Python, то нужно создать виртуальное окружение и работать в нем. Почему-то на сервере сходу это не получается, что-то вечно падает. Кстати, нужно запускать приложение как сервис, чтобы всё перезапускалось после падения! Всё, теперь точно берём Ноду! Для бека на Node.js же нужно найти такой хостинг, где Node.js работает, а они все облачные и очень современные. Там нужно настроить развертывание проекта из репозитория на GitHub, но я не могу просто подключить мастер-ветку, потому, что тогда все мои изменения будут сразу же попадать на сервер, а это не очень хорошо. Конечно, можно разворачивать вручную, но это тоже как-то несовременно. Пожалуй, снова подумаю о системе ветвления.
Ах, еще же БД! Вроде PostreSQL хорошая, и я даже с ней работал, но, может, мне нужна nosql-база? Остается открытым вопрос, как ее развернуть на сервере, и как поддерживать одинаковую структуру на моём компьютере и в облаке без потери данных, но до этого пока далеко.
Ах, чуть не забыл. Раз фронтенд на JS-фреймворках, то нужно подумать о Server Side Rendering, важно, чтобы мой проект индексировался. Хм, не нужно ли для этого применить Next.js или Nuxt.js? Надо подумать.
Так как я уже стал что-то забывать, то нужно и какой-нибудь таск-трекер прикрутить, чтобы отслеживать задачи и прогресс. Стоит ли мне воспользоваться методологиями Scrum или Kanban? Или пока я один, можно и так? А как же тогда следить за дедлайнами?
Ещё я не подумал, конечно, о TS, ES6, SASS, PUG, GraphQL, ООП, функциональном программировании, иммутабельности и обо всём таком. И нужно будет сертификат HTTPS прикрутить обязательно! Может, мне позвать в команду пару друзей, чтобы сделать всё правильно вместе? Тогда без Scrum и Pull Requests не обойтись.
На этой ноте я устал окончательно и подумал, что, может, мне стоит откопать старую книжку по PHP, и сделать всё, как в 2013 году, когда я ни о чём выше не имел представления, а половина технологий ещё не появилась? Похоже, я слишком много думаю наперёд. Решу всё это потом, сейчас посмотрю сериал и пойду спать, а завтра точно начну программировать.
