Что можно написать на html

Как писать на HTML

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

В этом туториале вы поможете верстальщице Оле сделать страницу с результатами поиска в Яндексе. Получится не один в один, но довольно похоже:

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

1. Создайте HTML-документ

Для начала Оле понадобится заготовка, файл index.html . Создайте у себя файл с таким же содержимым:

html> head> title>Заголовок страницыtitle> head> body> body> html>

Здесь 3 тега, которые обязаны быть в каждом html-файле:

— здесь лежат все теги страницы, он “корневой”, главный;
— в этом теге лежит всё, что не контент страницы: стили, заголовок страницы в теге , кодировка и так далее;
— “тело” HTML -документа, здесь лежит всё, что вы увидите на страничке в браузере.

2. Добавьте текст

Вот что Оля должна вывести при поиске “Коала” в поисковике, для которого она верстает страницу с результатами поиска:

Коала — Википедия Коaла (лат. Phascolarctos cinereus) — вид сумчатых, обитающий в Австралии. Единственный современный представитель семейства коаловых . Читать ещё.

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

Как получилось у Оли

Не долго думая, Оля добавила текст прямо внутрь и получила такой результат:

3. Добавьте ссылку

Без ссылок на результаты поиска работа Оли бесполезна. Люди пришли не просто почитать про коал: им нужны ссылки на сайты про коал.

Оля помнит наизусть несколько тегов: — для картинок, а

— для параграфа текста. Но как добавить ссылку? Какой у неё тег?

Оля загуглила, и получила этот ответ:

htmlbook.ru — крутой сайт, на котором хорошая документация по HTML и CSS, поэтому в первую очередь присматривайтесь к нему.

Как писать теги

У тегов бывают разные названия, но способов их написать всего два. Способ записи зависит от того парный он или одиночный.

Пример парного тега:

p>Покупайте наши веб-сайты!p>

Так на страницу можно добавить параграф с текстом. Тег

обязательно “закрывать” — добавлять в конце ещё один, но с чёрточкой:

. Так вы скажете браузеру, что всё, текст параграфа закончился.

Пример одиночного тега:

img src="адрес_картинки">

Он сам по себе, его “закрывать” не нужно. Одиночных тегов очень мало, в основном, вам пригодится только — для картинок,
— перенос строки и

— горизонтальная линия.

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

img src="https://dvmn.org/filer/canonical/1594118255/683/"> h1> Зачем нужен h1 h1> p> В теге h1 пишут заголовки, как "Как писать теги" чуть выше. Это парный тег, у него есть начало и конец, как и у тега p. p> p> У тега img нет "начала" или "конца". Он значит только то, что нужно добавить картинку. Браузеру не нужно сообщать, когда она "закончится". p>

Парные теги нужно закрывать

Допишите тег

a href="#">Читать ещёa>

Оля не знала какую ссылку поставить для ссылки, ведь ссылки будут подставляться уже при шаблонизации, поэтому оставила “#” вместо ссылки. Это называется якорь, и это такой обычай среди верстальщиков: если не знаешь, какую ссылку поставить, ставь # .

Теперь на страничке Оли появилась ссылка. Попробуйте повторить результат Оли:

4. Выделите все “коала” на странице

Поисковик выделяет жирным шрифтом все слова, которые вы искали. Оля не знает, что это за тег, но по запросу html жирный шрифт в google.com Оля нашла ссылку на заветный htmlbook.ru.

Попробуйте, у вас получится, как у Оли? У неё получился такой текст:

5. Выделите заголовок

Сейчас текст у Оли весь одинакового размера. В нём Оля хочет выделить заголовок: Коала — Википедия крупно, а чуть ниже весь остальной текст, мельче. Оля загуглила html заголовок и сразу нашла подходящий тег: .

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

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

О строчных и блочных тегах

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

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

— параграф текста. За счёт них можно оформить заголовок в одном стиле, а остальной текст — в другом:

h1 style="color:red;">Статья о котикахh1> p style=". "> b>Котикиb> — замечательные животные. Я полюбил их, когда мне было 7 лет. Как сейчас помню, на мой i>день рожденияi> мне подарили замечательного кота. p>

В этом примере заголовок статьи покрашен в красный цвет: color:red; . Текст же статьи при этом остался чёрным, покрасился только заголовок “Статья о котиках”. Для текста внутри тега

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

Внутри тега

есть несколько строчных тегов: и . Они прямо “срослись” с текстом, существуют прямо внутри него, в отличие от блочных, которые только обрамляют текст по краям.

Блочные теги незаменимы, когда хочется добавить тексту фон, рамку, отступы… Вот небольшой список из самых популярных блочных тегов:

Отдельно стоит выделить эти блочные теги:

— параграф текста;
, . — заголовок. Чем больше число — тем мельче заголовок;

Допишите код

Теперь, когда Оля разобралась с блочными/строчными тегами, она может наконец закончить незавершённую работу: добавить на страницу теги и

. Заголовок с тегом показался ей слишком крупным, поэтому она воспользовалась :

6. Сделайте заголовок ссылкой

Заголовок на то и нужен, чтобы на него хотелось кликнуть. А на ваш заголовок кликнуть нельзя. Что делать? Нужен тег для ссылок . Но как правильно: положить тег внутрь тега или наоборот.

О комбинации тегов

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

Такой код существовать не должен:

a>h1>Заголовокh1>a>

Тег — строчный, он существует внутри текста. Тег — блочный, он оборачивает собой текст и все строчные теги для этого текста. Вот как стоило поступить в этой ситуации:

h1>a>Заголовокa>h1>

Оля прислушалась к этой рекоммендации и вот что у неё получилось:

h2> a href="#">b>Коалаb> — Википедияa> h2>

Проверьте, у вас получилось сделать заголовок ссылкой?

7. Добавьте подпись под заголовком

Теперь Оля хочет подпись под заголовком ссылки, как вот тут:

Оля загуглила html мелкий текст и нашла тег, который поможет сделать текст меньше. Подпись под заголовком Оля решила делать прямо внутри тега , чтобы она была “едина” с заголовком , никуда не уехала и так далее:

h2> a href="#">b>Коалаb> — Википедияa> small>ru.wikipedia.org›Коалаsmall> h2>

Получилось не то, что хотела Оля… Во-первых, текст не сильно-то и уменьшился. Во-вторых, не хватает переноса.

В HTML обычные переносы строк игнорируются, так как текст переносится по ширине экрана. Чтобы заставить текст перенестись насильно, есть одиночный тег
:

h2> a href="#">b>Коалаb> — Википедияa> br> small>ru.wikipedia.org›Коалаsmall> h2>

Теперь нужно сделать текст ещё мельче. Оказывается, теги можно комбинировать, вот так:

small> small> ru.wikipedia.org›Коала small> small>

Тег как бы “накапливает” эффект мелкого текста и делает его ещё мельче. Проверьте, у вас тоже так получится?

Что делать, если подходящий тег не нашёлся

В первую очередь, загуглите. В этой статье перечислены не все теги, какие есть в HTML, их там очень много.

Если же и гугл не помогает — придётся подумать, как составить то, что вы хотите из того, что есть. Самый простой пример — вы хотите сделать кнопку с картинкой. Такого тега нет, зато есть кнопка и есть картинка:

button> img src="#" > button>

Или вы хотите, чтобы ваш текст был выделен жирным и при этом был ссылкой, вот так: жирная ссылка. Это можно сделать двумя способами, комбинируя теги и , они оба строчные:

a>b>Жирная ссылкаb>a> b>a>Жирная ссылкаa>b>

Что ещё почитать по теме

Статья Строчные элементы от htmlbook.ru
Слайды типичные ситуации в вёрстке

Попробуйте бесплатные уроки по Python

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

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

10 идей проектов для изучающих HTML

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «HTML Project Ideas for Beginners».

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

1. Простой биографический сайт

Самое простое, что вы можете создать для отработки навыков HTML и CSS, это обычная веб-страница с текстом и изображениями. Например, это может быть биография какого-нибудь человека, которым вы восхищаетесь.

2. Страница контактов с формой для связи

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

3. Форма регистрации

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

4. Лендинг продукта

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

5. Страница для меню ресторана

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

6. Сайт фитнес-клуба

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

7. Веб-страница с портфолио

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

Проект можно усложнить и создать не одну страницу, а целый небольшой сайт с несколькими страницами («Главная», «Обо мне», «Проекты», «Контакты»).

Кроме того, здесь можно попробовать использовать несколько CSS-анимаций.

8. Веб-страница приложения

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

Разместите на странице информацию об этом приложении, сделайте раздел про доступный функционал (с иконками), добавьте секцию о том, как ваше приложение работает. Украсьте все картинками. Да, и не забудьте кнопки для скачивания приложения (для iOS и Android).

9. Магазин продуктов для красоты и здоровья

Сайт e-commerce — тоже отличная идея для проекта, такой сайт определенно украсит ваше портфолио. На этом сайте может быть:

главная страница со слайдером и продвигаемыми продуктами,
страницы отдельных продуктов с описанием и кнопкой «Добавить в корзину»,
«корзина» с формой проверки.

10. Магазин электронных книг

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

Напоследок предлагаем несколько ссылок на полезные ресурсы.

https://freebiesbug.com
https://www.freewebtemplates.com
https://colorlib.com/wp/templates/aznews [должна сохраняться ссылка в футере]
https://free-css.com/free-css-templates
https://templated.co

https://pixabay.com
https://www.pexels.com
https://unsplash.com
https://kaboompics.com

https://www.behance.com
https://dribble.com
https://pinterest.com

8 идей для создания первого сайта

Не можете придумать, с чего начать практиковать свои навыки HTML, CSS и JavaScript? Вот несколько интересных идей, которые, вероятно, не приходили вам в голову.

Множество начинающих веб-разработчиков понимают, что им нужна только практика, практика и ничего кроме практики изученных навыков. Разработка реального проекта поможет найти трудности, которые не опишет ни один учебник или интерактивный урок. Практика поможет стать увереннее, если вы собираетесь использовать HTML, CSS, JavaScript в своей карьере. Но опыт, который может быть действительно полезен, трудно получить.

Я часто вижу новичков, спрашивающих на Reddit, Quora, Facebook и других интернет-площадках о том, за какой проект им взяться. Поэтому представляю вам восемь весёлых идей, которые помогут проверить навыки и подготовят к трудностям, с которыми сталкиваются веб-разработчики. Все они строго фронтенд: HTML, CSS, JS и jQuery. Они настолько прекрасны в своей нелепости, что будут выгодно выделять ваше портфолио на фоне остальных. Ведь если добавлять в него проекты «как у всех», то будет трудно выделиться среди большого количества однотипных работ других разработчиков.

1. Мясная лавка Большого Дейва

Идея: магазин, при котором есть гараж, где можно отремонтировать свой мотоцикл, и место для барбекю. Я надеюсь, что они физически разделены между собой для безопасности, но всё зависит от вашей фантазии.

Тип сайта: малый бизнес.

Ключевые функции:

Возможность увидеть какие услуги оказывает ремонтная мастерская и для каких моделей мотоциклов.
Положительные отзывы от реальных клиентов для магазина мотоциклов.
Отзывы для гаража и ресторана.
Меню ресторана.
Более подробная информация о кухне/поваре/история о том, как она была основана.

Ключевые дизайнерские решения:

Как вы планируете отделять гараж и ресторан, чтобы посетители легко могли выбрать то, что им нужно? Будут ли они иметь схожую конструкцию или разную тематику?
Кто будет целевой аудиторией? Это, определённо, мужчины. Но это будут мотоциклисты старой закалки или молодые городские хипстеры?
Много ли изображений вы планируете использовать? Это может быть одна доминантная картинка, соответствующая уникальной концепции сайта.
Какой будет цветовая схема? Более агрессивные сочетания вроде красного и чёрного, или что-то ещё?
Каким способом люди будут пользоваться этим магазином? Могут ли это быть байкеры, которые путешествуют на дальние расстояния? Байкеры, которые хотят перекусить, пока их мотоцикл в ремонте? Или больше случайных посетителей, которых привлекла необычная концепция места?

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

Политические хокку

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

Тип сайта: блог.

Ключевые функции:

Интерфейс блога с серией хокку, которые легко просматривать.
Смешные иллюстрации кандидатов с их хокку, удобные для чтения.
«Бесконечная» прокрутка или новая страница для каждых 20-50 хокку.
Использование Google Form для того чтобы другие тоже могли отправить своё изображение или хокку.

Ключевые дизайнерские решения:

Какая цветовая схема соответствует вашему сайту? Цвета пергамента? Как будет оформлено каждое хокку?
Как можно усилить иронию постов? Может быть делать саркастические заголовки к каждому?
Позволите пользователям выбирать посты по определённому кандидату или будет один длинный список? Если они смогут выбирать кандидата, то будет ли уникальная страница для каждого кандидата.
Как часто вы будете размещать посты, а пользователи посещать сайт? Один раз в день, или каждый раз, когда кандидат совершает забавную ошибку, или в разное время?

Что вы изучите: блоги супер просты — их читают и смотрят фотографии. Существует реальный потенциал для взаимодействия. Это означает, что ваши объявления должны быть исключительно эффективны. Необходимо создать последовательную тему с объявлениями. Если пользователи будут посещать ваш сайт в период выборов, то они хотят видеть смешные посты постоянно. И вы можете сделать это несколькими путями. Кстати, можете попробовать сделать это в стиле твитера.

3. Склад туалетной бумаги

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

Тип сайта: интернет-магазин.

Ключевые функции:

Разнообразный ассортимент бумажной продукции, которую можно разделить на категории или отсортировать по размеру, бренду, качеству или цене.
Корзина и процесс оформления заказа, чтобы имитировать процесс покупки.
Возможность подписки, чтобы пользователи могли зарегистрироваться и получать любимую туалетную бумагу автоматически.
Отдельный раздел для держателей туалетной бумаги с различным дизайном. Это может стать прекрасным подарком.

Ключевые дизайнерские решения:

Пользователи могут никуда ехать, чтобы купить туалетную бумагу. Почему они должны выбрать ваш сайт? Может быть, из-за юмористических объявлений? Или простого процесса покупки? Возможности подписаться? Подумайте, как сделать сайт уникальным среди всех остальных сайтов в сфере электронной коммерции.
Кто ваши клиенты? Мамочки? Элитные рестораны? Роскошные отели? Гермофобы? Это во многом будет определять то, какая продукция будет на вашем сайте.
Как будете структурировать посадочные страницы? Хотите чтобы пользователи переходили сразу в интерфейс покупок или иметь главную страницу, которая представит весь сайт?

Что вы изучите: электронная торговля — огромная индустрия и есть множество различных маленьких решений, которые формируют позитивный и удобный пользовательский опыт. Пройдя все необходимые шаги, чтобы сделать процесс покупки лёгким — вы получите ценный опыт. Подумайте об Amazon.com — хотите ли вы быть как они? Как быстро пользователи смогут найти продукт, который им нужен?

4. Персональный сайт Марио

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

Тип сайта: персональный сайт.

Ключевые функции:

Как и любой персональный сайт, он должен рассказывать обо всех достижениях и навыках.
Расскажите историю Марио визуально, ведь он мультипликационный персонаж. Не только рассказывайте о его опыте работы, но и используйте небольшие визуальные анимации, чтобы привнести в достижения жизнь.
Берите измеримые величины, чтобы показать достижения в его карьере: как много спас принцесс? Сколько игр продалось? И тому подобное.

Ключевые дизайнерские решения:

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

Что вы изучите: надеюсь, вы хотите, чтобы персональный сайт рассказывал историю о вас. Этот проект позволит рассказать историю персонажа с таким количеством достижений, что всё это показать нереально. Конструкция персонального сайта должна быть индивидуальна для каждого, и Марио, безусловно, имеет собственный уникальный стиль. Кроме того, вы узнаете, как добавить анимацию, которая прибавит ценность для истории и порадует пользователей — создав особое впечатление, не заставляя при этом читать много текста.

5. Избегатель общения

Идея: Существует газета электронных объявлений, в которой есть раздел «Ищу тебя», где люди могут создать пост о человеке, увиденном на улице или в любом общественном месте, который улыбнулся им или пересёкся взглядом. Они надеятся, что человек прочитает это объявление и откликнется. Мы сделаем наоборот: про людей, которых вы увидели в общественном месте и быстро отвернулись, надеясь, что они не заговорят с вами. Обычно это нищие, юристы и алкаши в общественном транспорте. Некоторые из этих типов людей могут делать эксцентричные вещи, особенно если они пьяные, так что это будет прекрасная возможность поделиться историей.

Тип сайта: блог.

Ключевые функции:

Список историй с заголовком по теме. Например, пьяный человек говорил сам с собой в поезде в 15:00. Если повезёт, то с фотографиями.
Возможность упорядочить посты по местоположению, времени суток и места (улица, кафе, автобус и так далее).
Использование Google Form, чтобы пользователи могли делиться своими историями.
Группировка сообщений по категориям так, чтобы пользователи могли видеть такие истории, как «Каких людей стоит избегать в Лондоне в 3 ночи?»

Ключевые дизайнерские решения:

Какие занятия достойны поста? Нужно учитывать только действительно прискорбные публичные поступки. Например, случайно услышали политическую позицию и несогласны с ней. Или хотите рассказать про неприятных людей в баре?
Как вы сможете защитить частную жизнь людей так, чтобы не превратиться в сайт для домогательств?
Это будет весёлый ресурс или сайт об ужасных людях?

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

6. Производство змеиного масла

Идея: небольшой магазин, где продают всякие чудесные средства, которые не проверены наукой. Например, такая бесполезная вещь, как свиной хвост может как-то вылечить рак. Термин был образован в XIX веке на западе США. Лжедоктора твердили о чудодейственном природном свойстве змеиного масла, данные о котором были так же сфальсифицированы.

Тип сайта: малый бизнес.

Ключевые функции:

Десятки природных веществ, которые, по вашему утверждению, будут иметь чудесные свойства исцеления различных недугов.
На странице «О нас» расскажете о своём фальшивом опыте и как лекарство спасло вашего двоюродного брата.
Возможность сортировать лекарства по болезни: хотите вылечить рак? Артрит?
Отзывы клиентов по каждому продукту, где они рассказывают свою историю.

Ключевые дизайнерские решения:

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

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

7. Кто недоволен музыкой? Викторина

Идея: старшему поколению часто не нравится музыка молодого поколения. Хиппи и хипстерам не нравится популярная музыка. И наоборот. Каждый раз, когда вы играете музыку в общественных местах, скорее всего, кто-то этим недоволен. Этот тест позволит выяснить свой музыкальный вкус за несколько вопросов и скажет вам, какая группа людей будет ненавидеть вас за него.

Тип сайта: интерактивная викторина.

Серия вопросов, которые появляются по одному. Каждый предоставляет множественный выбор ответов, которые определяют следующий вопрос. Например, если вы ответили «я люблю рэп» в первом вопросе, то следующий вопрос будет «Кто вам нравится больше из этих пяти исполнителей?» или «Какой именно рэп вы любите?».
Когда страница закончится, то нужно показать каких людей бесит твоя музыка и почему. Вы можете использовать небольшие юмористические видео с YouTube или GIF-картинки для того, чтобы пользователи весело отреагировали на результат.
Смешные картинки с небольшими вопросами увеличат комичность сайта. Он не должен быть серьёзным.

Ключевые дизайнерские решения:

Как будет создаваться плавный переход между вопросами? Какая анимация будет использована?
Как вы будете показывать пользователям на каком они шаге? Типа 1 из 5.
Как будете делать ответы весёлыми? Пользователи на вашем сайте здесь для развлечения, и они будут надеяться на смешной результат в конце теста.
Какие картинки смогут вызывать смех? Какие весёлые факты можно подключить? Иногда это называют «подсказкой».

Что вы изучите: полезные технические навыки, например: HTML5 и jQuery UI. А также освоите простые паттерны создания полноценных веб-приложений и это будет реальная практика.

8. Моя хроника потери веса

Идея: все мы иногда едим пищу, которую не должны есть. Но она такая вкусная. Это даст возможность писать обо всей еде, которую вы съели и пожалели об этом, так как теперь наберёте вес. Но она была такая вкусная. Можно оформить некоторые фразы, как фальшивые некрологи. Например, сожаления о том, что этот замечательный пирог погиб из-за вас.

Тип сайта: персональный блог.

Каждый раз, когда вы едите пищу, из-за которой чувствуете себя виноватым, размещайте её фотографию и свои мысли по этому поводу. Фотография может содержать тарелку с крошками или само блюдо.
Теги еды на основе времени суток или вида пищи.
Google Form, чтобы другие пользователи могли также поведать свои истории.
Список полезных ресурсов, таких как диетические форумы или фитнес-приложения.

Ключевые дизайнерские решения:

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

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

Заключение

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.