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