Pet-projects. What projects must a beginner front-end developer do?

Друзья, привет! Наконец-то мы подошли к долгожданной теме пэт-проектов. В этом видео я собрал для вас 30 классных идей для ваших первых проектов в портфолио. Я также дал подсказки, как вы всегда можете проапргрейдить любой pet-project, где и какую функциональность доработать и какие фишки добавить, чтобы выделиться в глазах работодателя и впоследствии получить заветный офер.
Мы также разберем с вами, для чего еще программисты делают свои пэт-проекты, обсудим, как правильно создавать дизайн проекта (и важно ли это вообще), как правильно использовать готовые проекты из видео-туториалов и где брать готовые API с различными открытыми данными для использования в своих проектах.
Приятного просмотра! Уверен, видео будет для вас очень полезным!
👍 Если тема вам интересна - ставьте обязательно лайк! И пишите в комментариях, создание каких проектов вы хотите видеть на нашем live-stream.
✅ Ссылка на большую подборку открытых API: github.com/public-apis/public...
⏱ Таймкоды:
00:00 Интро
00:37 Подписывайтесь на наш канал
01:01 Для чего нужны pet projects
03:52 Про дизайн
06:52 Про готовые проекты из видео-туториалов
08:17 Идеи проектов
09:12 Todo app
09:32 Таймер с отсчетом
10:00 Гирлянда
10:45 Заметки
11:50 Таймер
12:26 Pomodoro Clock
13:22 Landing pages
14:45 Голосование
15:17 Рецепты
16:02 Погода
16:53 Заказывайте проекты на LiveStream
17:45 Каталог книг
18:24 Card Memory Game
18:58 Конвертеры
19:58 GitHub Profiles
20:34 Markdown Editor
20:55 Генератор паролей
21:28 Генератор QR кодов
22:00 Корзина покупок
22:45 Интернет магазин
23:07 Генератор турнирных сеток
23:38 Клавиатурный тренажер
24:01 Чат
24:48 Каталог фильмов
25:31 Опросники
26:21 Клон instagram
26:40 Клон Spotify
27:08 Stock Trading
27:48 File Sharing
28:55 Бронирование отеля
29:20 Календарь
30:38 Игра Жизнь
31:19 Где брать открытые API
31:59 Напутствие ;)
32:32 Пишите ваши идеи для проектов
👍🤩 Будем благодарны за поддержку нашего канала на Патреоне: / frontendscience
---
Если видео было для вас полезным, ставьте лайк и поделитесь им с друзьями.
Подписывайтесь на наш канал: bit.ly/fs-ytb
---
Присоединяйтесь к нам в соцсетях:
FB: / frontendscience
Instagram Сергея Пузанкова: / puzankovcom
Заходите на наш сайт: frontend-science.com/
---
Music by Blue Wednesday
---
#petprojects, #frontend, #ityoutubersru

[@frontendscience]

👍Друзья, делитесь этим видео в соцсетях и ставьте ваши лайки - это прям ооочень помогает в продвижении нашего канала 🙂🚀 ⏱ Таймкоды: 00:00 Интро 00:37 Подписывайтесь на наш канал 01:01 Для чего нужны pet projects 03:52 Про дизайн 06:52 Про готовые проекты из видео-туториалов 08:17 Идеи проектов 09:12 Todo app 09:32 Таймер с отсчетом 10:00 Гирлянда 10:45 Заметки 11:50 Таймер 12:26 Pomodoro Clock 13:22 Landing pages 14:45 Голосование 15:17 Рецепты 16:02 Погода 16:53 Заказывайте проекты на LiveStream 17:45 Каталог книг 18:24 Card Memory Game 18:58 Конвертеры 19:58 GitHub Profiles 20:34 Markdown Editor 20:55 Генератор паролей 21:28 Генератор QR кодов 22:00 Корзина покупок 22:45 Интернет магазин 23:07 Генератор турнирных сеток 23:38 Клавиатурный тренажер 24:01 Чат 24:48 Каталог фильмов 25:31 Опросники 26:21 Клон instagram 26:40 Клон Spotify 27:08 Stock Trading 27:48 File Sharing 28:55 Бронирование отеля 29:20 Календарь 30:38 Игра Жизнь 31:19 Где брать открытые API 31:59 Напутствие ;) 32:32 Пишите ваши идеи для проектов

[@andreislashikov9618]

Respect+ спасибо) поделись ссылкой на лендинг (как в видео) или где почитать что за библиотека.

[@frontendscience]

@@andreislashikov9618 2019.lesanimals.digital/en

[@andreislashikov9618]

@@frontendscience спасибо)

[@user-or1hy4xz8u]

@@frontendscience , а что если портфолио просто на github сделать? залить примеры работ да и все....

[@frontendscience]

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

[@user-paint-alexandra]

Спасибо, интересные примеры. И не только для pet-проекта, но и для стартапа)))

[@betelgeuse.21]

Ура! ДОЖДАЛИСЬ! Спасибо Вам огромное, Сергей, за Ваш труд!

[@frontendscience]

Благодарю, Ильнура! Рад слышать :)

[@racman9964]

Как много идей) Спасибо большое за подборку

[@user-mm2uc6ye9x]

Лайв-стриминг с написанием проекта было бы круто. Можно посмотреть на качественный код и подходы, которыми пользуетесь вы. Так что было бы клёво 👍

[@vitliyscripter2802]

Очень ждал, спасибо!

[@frontendscience]

Ура! 🤗

[@user-np3ob1ji8w]

Да, классные набор идей! Спасибо!

[@kratvol]

качество сьемки и идея великолепны

[@user-rc4zm2qe4c]

По началу думал что кроме классики по типу todo ничего интересного не будет, нно ближе к концу даже приглянул пару тем, спасибо!

[@user-zd1re3vm8l]

лайк за топовые идеи уж больно приятного докладчика :)

[@Golpotrop]

Здравствуйте, если будет такая возможность сделайте видео о типовых задачах, которые решает Джуниор, мидл, сеньор. Было супер, особенно если будут примеры. Сразу будет понятно, интересно ли это или нет. Я понимаю, что сфера айти не ограничена багфиксами, электронными письмами и формированием списков из бд, вот и хочется узнать что там и как там за стенами "интервью".:) С меня лайк и письменная благодарность 😅

[@user-gr7kn5np3w]

Джуниор - шрифт поменять на 31.4пкс

[@yoda8954]

@@user-gr7kn5np3w задать блоку fz=2px а подблоку с текстом 15,7rem и у текста будет шрифт 31,4?

[@user-wr1vy5vb9e]

@@yoda8954 15.7rem = 251.2px по умолчанию

[@PacoOfficial]

Классное видео, и подборка проектов в портфолио =)

[@anneart8489]

Какое же видео качественное! Спасибо за полезную информацию, Сергей!

[@frontendscience]

Рад, что полезно! Успехов!

[@user-hm3np8um3s]

Спасибо за подборку открытых api

[@sagdieff]

Спасибо большое за подборку! Как раз встал вопрос выбора проектов для портфолио.

[@frontendscience]

Здорово! Надеюсь, найдете парочку для себя

[@user-rp9po1ev5r]

Очень актуально сейчас для меня) Спасибо😊👍

[@frontendscience]

Рады, что вовремя ;)

[@IT-Svyatoslav]

Благодарю за большое количество идей и советов 👍

[@frontendscience]

Рад, что было полезно 👍

[@oleksandrkalinichenko533]

Дуже корисне відео для мене! Дякую, можливо використаю одну з ваших ідей проекта, для портфоліо! 👍

[@frontendscience]

Супер! Бажаю успіху!

[@oleksandrkalinichenko533]

@@frontendscience Дякую!

[@Marv3L_777]

Сергей, Огромная благодарность вам за ваши силы и идеи!! Спасибо за ваш контент! Он помогаем нам "нубам"!! Удачи вам, вдохновения и сил!!!

[@frontendscience]

Благодарю за поддержку! Рад, что было полезно) Успехов Вам!

[@andreyveda]

Благодарю за пример проектов! 🔥

[@frontendscience]

И Вас благодарю!

[@user-lz9co6iz6h]

Класс! Спасибо😀.

[@user-md5mw1tp3e]

Спасибо большое за интересные идеи)

[@user-gk3qs4em6q]

Какое же офигенное качество видосов, монтажа и подачи материала. Это что-то с чем-то😍

[@frontendscience]

Очень приятно) спасибо

[@komidik1548]

Круто, спасибо ♥️

[@channel_sedoli]

Ребята, давайте насыпем лайков нашему дорогому другу за старание! 👉👍♥️

[@frontendscience]

Да, ребята, давайте 🥳

[@Sergey-lg1ke]

комментарий, чтобы комментарий. Спасибо за видео!

[@nikitaandrus2133]

Сергей, проделанная работа над видео просто поражает! По-моему вы вышли на новый уровень, в качестве видеороликов. Я когда ранее искал подобные видео или статьи на форумах, думал что уже все видел, но то что я увидел тут, действительно очень порадовало! Очень много интересных и уникальных идей для проектов. Приметил себе парочку 😉 Спасибо за ваш труд!

[@frontendscience]

Ценю Вашу поддержку! Рад, что понравилось )

[@odines.a]

Напишу комментарий чтобы похвалить и для продвижения ) Двух зайцев так сказать ) прекрасные видео, классный канал! Успехов в дальнейшей работе ! Радуйте нас всё больше!

[@frontendscience]

Благодарим Вас за поддержку! Очень вдохновляете! :)

[@enigma9445]

Спасибо, вы мне очень помогли !

[@VirtuozEd]

Лайк однозначно. Автор всегда знает какие темы надо затрагивать

[@frontendscience]

Рад, что оказалось актуально

[@asonwilson849]

Спасибо большое!

[@SoltonAnna]

Спасибо огромное, очень полезное видео!! Собираюсь разработать портфолио, обязательно воспосльзуюсь идеями которыми вы поделились !!!

[@user-jw1vz9mu5w]

Здравствйте, подскажите, пожалуйста, удалось ли вам найти работу?

[@AleksandrKS]

Спасибо за крутые идеи.

[@AB-uo5ej]

блин как интересно рассказываете. суперски все ^ ^

[@ada4741]

Сергей, ждём стрим от вас!!! Спасибо за труды!

[@frontendscience]

Благодарю за поддержку! )

[@coolrash]

Коммент на продвижение! Мощное видео

[@thecatwrites9731]

Сергей как всегда топ!

[@DocVampir]

Спасибо большое за советы!

[@frontendscience]

Успехов!

[@channel_sedoli]

Лайк на автоматизме)

[@stormd2902]

Лайк не глядя 🔥

[@romanmatrosov9863]

Очень полезное и информативное видео, как всегда на уровне Спасибо!

[@frontendscience]

Благодарим за поддержку!

[@cryfos]

спасибо за видео! Интересная подборка

[@sergkuznetzov3469]

Спасибо,очень интересно!

[@frontendscience]

И Вам спасибо)

[@user-qf7np9ls1x]

Очень полезное видео, нашёл кучу вариантов, как всегда лайк, спасибо)

[@frontendscience]

Благодарим! Рады слышать)

[@pedroarmandogaliardi]

класний якісний контент і класна музика на фоні 😎 супер 👍

[@frontendscience]

Тішимося, що зацінили! Дякуєм! ;)

[@user-zh6df8rc7w]

Спасибо, ты лучший))Очень крутые идеи

[@user-zh6df8rc7w]

Кстати, я решил проблему с webpack-ом)

[@user-ri2pc8ws9u]

Спасибо, классный канал!

[@Azkett]

Спасибо!)

[@frontendscience]

Рад, что полезно)

[@huskyzinFPS]

Афигенное видео, очень полезно!

[@youtubeyh]

Комментарий в поддержку .

[@tonyrotay]

Помню, когда первый раз заинтересовался веб-разработкой (это было еще в школе, больше 6 лет назад), делал себе сайт-визитку, и добавил там такую же гирлянду) Приятные воспоминания :)

[@user-mn1so6hs8z]

Привет, сейчас развиваешься в этой же сфере ?

[@tonyrotay]

@@user-mn1so6hs8z ага

[@amkolchina]

Интересно было бы создать каталог книг или библиотеку, а еще нечто типа ежедневника

[@dobryden7196]

Спасибо!)

[@vladko9623]

Отличное видео. Аж дополнительная мотивация появилась.

[@frontendscience]

Круто! Поделитесь потом ссылкой на свои проекты! (Как Вам такая мотивация? ;))

[@vladko9623]

@@frontendscience как только сделаю - с удовольствием)

[@user-vo7lo3bo4z]

По одному слову "рекомендасьён", понятно кто смотрит Птушкина :) Спасибо за идейки пет проектов! 👍👍👍

[@frontendscience]

Привет, касатик! ;)

[@ok_kov]

изучайте Web оно того стОит ))

[@pvttrix]

Лично я учусь так: когда только начинал - читал доку, создавал себе задаче по узким темам и решал, когда понял что дока закончена и вроде готов - делал примитивный туду, где использовал то, что изучил, а дальше смотрел туториалы, так же как автор закрывал видео и повторял по памяти) по мне - идеальный вариант изучения, плюс периодически перечитывать доку и справочники.

[@amletixq]

С тудушками жиза! Какая бы не технология, все к ним пихал: и туду с авторизацией на postgres в связку в ts и стайледами, то тэйлвинд с локалсторэджами чисто для разминки, то просто на обычном js с необычной ui составляющей 😂😂😂 удачи вам!

[@anton-vr5xw]

оч круто, как раз делаю портфолио) спасибо)))

[@frontendscience]

Очень рад, что вовремя! )

[@frontendscience]

@@NotTheLastOne А Вы?

[@frontendscience]

@@NotTheLastOne 🙂

[@vladimirlebedev00010]

Вот спасибо! :)

[@frontendscience]

Очень рад! И Вам спасибо! )

[@user-pg6fz5wh5n]

Очень хотелось бы стрим для начинающих Понравилось с рецептами

[@AlexMedovnik]

Да. Автор хорошо постарался! Супер!

[@frontendscience]

Рад, что понравилось

[@Svetoz]

Вдохновляющее видео!

[@viktorbrunza4880]

Супер видео, очень полезно для новичков)

[@frontendscience]

Рады, что было полезно!

[@tamarbunturi2817]

Спасибо большое

[@Nikita-gn4bg]

Как раз искал идеи, а тут видео, большое спасибо, досмотрю и пойду что-то из 30 реализую

[@frontendscience]

Круто! :) Успехов!

[@dimkailyukovich1414]

Было бы очень интересно. Презентованный Ваш Landing меня очень удивил. Много интересных моментов и сложный дизайн. Я за него

[@frontendscience]

Рад, что понравилось

[@MonkeyBoy248]

Лайк за плейлист с Tool в рассказе про клон Spotify :)))

[@frontendscience]

🤘

[@mx9807]

за tool в примере клона спотифай респект=)

[@denisoleksyuk5346]

Спасибо за видео! Если будет стрим с разработкой проекта я бы проголосовал за проект с питанием, типа вводить информацию какие продукты имеются и получать список возможных блюл, плюс добавить туда какой-то функционал который решал бы проблему в основном тех людей который часто готовят на семью, "Что сегодня приготовить") Помню у меня мама постоянно не знала что готовить, а теперь и девушка задается постоянно этим вопросом, а общем насущная проблема)

[@vasyatv9149]

Очень классный выпуск

[@deniscreator7913]

Жду стрим!)

[@amator8219]

мне надо будет раз 50 пересмотреть видео прежде чем самому повторить :D обычно записываю всё что необходимо и с конспектом уже пишу сам

[@stitch8508]

Очень полезно!

[@frontendscience]

Это классно! Радуюсь!)

[@dj-sandro]

Я работал диджеем в ночном клубе, захотел чего то нового, стал там Светооператором и Звукарём. Одновременно с этим я работаю айтишником, обычным системным администратором. Давным давно сделал для компании своей новостной\фотоархивный корпоративный портал на wordpress. Спустя 8 лет решил заняться ещё чем-нибудь интересным и стал изучать 1С - не пошло. Встретился с одноклассником и тот рассказал, что работает фуллстаком, но начинал с фронтенда с нуля, не понимая ничего в html даже. И вот я в поиске ютуба попал на первое видео с вашего канала про то, "кто такие фронтенды". Сейчас посмотрел это видео и действительно захотел попробовать! Спасибо за такие понятные рассуждения!

[@frontendscience]

Прикольно! Благодарим, что поделились! Желаем Вам успехов!

[@SunlighT_90]

Подписка - есть. Лайк - есть. Теперь по поводу live-stream проекту - топ тема. Только одна просьба - не просто показать название и его реализацию. Но и показать как вы создаете план действий, все шаги по пунктам, до того как начинаете писать код.

[@frontendscience]

Постараюсь :)

[@a.osethkin55]

Сразу лайк!

[@frontendscience]

🎈

[@just__did__it]

15:54 хаха я об этой идее уже год думаю. А тут оказывается не один о таком думаю) Хочу в будущем реализовать эту идею.

[@frontendscience]

Если б она еще сама готовила))) вот это приложенька была бы! 🧞

[@korolev10s]

Было бы очень круто сделать с тобой сайт для погоды на стриме!

[@Diana-uu1dy]

Можно пожалуйста видео про сложную анимацию🙏❤️

[@user-nl8er2sz7u]

было бы интересно , сделать weather app, но что бы в нём было что-то вроде input type="range" и этим ползунком можго было смотреть погоду в любое время дня

[@Radical_video]

Было бы интересно сделать лендинг с такими анимациями

[@user-mg1xl1ip6x]

анимации просто нереальные

[@leonidas1987]

Замечательный канал !

[@frontendscience]

Спасибо большое! Ценна Ваша поддержка!

[@ziegimondvishneuski3317]

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

[@frontendscience]

Классная идея!

[@a_mexdiev]

спасибо

[@kishafromukraine]

Лучший! Учите делать контент, посоны.

[@Life-si4tp]

спасиба вам сергеей

[@frontendscience]

И Вам спасибо)

[@pavelarkharov1692]

Спасибо, очень своевременно и вдохновляюще!) Вопрос по поводу видеоряда под лендинги - как такие анимации делаются как те, где SPACE, переход на оленя и в космос потом? Подскажете куда смотреть?) Спасибо!

[@frontendscience]

Думаю конкретно про эту можно спросить у Юрия: kzbin.info Возможно он знает как такое реализовано. А может он на своем канале уже даже разбирал похожие эффекты. Еще я рекомендую регулярно листать codepen - там есть очень много крутых примеров анимаций и сразу видно как реализовано.

[@dimitridoroshko]

И ещё одна очень актуальная тема для Пэт проджекта: Bad habits / Addiction Lapse Timer. Можно вводить какие-то плохие привычки и отслеживать, как они исчезают. Можно ещё добавить функционал по тому, сколько денег/времени сэкономил человек. Например, я много играю в видео игры и покупаю их же в Steam, можно написать софтинку, которая будет отсчитывать, сколько я денег сохранил, сколько не играл. Или же если вы курите или же пьете алкоголь - можно сделать аналогично.

[@FlashViolet]

будешь показывать своему работодателю сколько в последний раз ты продержался без выпивки?)

[@dimitridoroshko]

@@FlashViolet а почему бы и нет))

[@frontendscience]

Полезные проекты, интересные идеи! Можно доработать идею и трекать не только вредные, но и полезные привычки, внедряя их.

[@murad40]

Воу, реально очень полезное видео, настолько что возникают опасения что все ринутся в IT. ) ПрЕкол) "я, когда пришла ЗП" - 33:06

[@user-po3lh2mc3s]

Рвутся то рвутся, но не все осиливают

[@user-fh2ok6kq7p]

@@user-po3lh2mc3s нашел, привет я из прошлого

[@viktoriiashevchenko3939]

Было бы интересно создать словарик, разговорник)

[@userfromworld]

Лайк

[@vladserhiychuk8925]

цікаво. дякую

[@user-ex8we1sn5h]

крутые проекты

[@bekzodabdullayev6148]

Можно сделать LMS в качестве пет проекта. Там будет booksharing, Chat, Поисковик и тд

[@frontendscience]

Классная идея!

[@user-lc5kg3zw1s]

👍

[@denpol9956]

Подкину идею - Перемещение локальных заметок на другое устроство по QR коду )

[@frontendscience]

Да, прикольная идея! Благодарим

[@a-sher]

Да! Live-stream! Каталог книг!

[@main4650]

Начал изучать программирование, и это видео натолкнуло меня на стартап) Вопрос: Я стану программистом или владельцем бизнеса?

[@coolrash]

бизнес будет брат 100000 0руб лей всразу в кашелек залетит

[@splcell]

Можно сделать календарь дивидендов и корпоративных событий, который берет информацию из API

[@oksanababichevska6191]

Добрый день, подскажите, где лучше размещать свои pet projects?

[@zergzerg4844]

Объясните пожалуйста, что вы подразумеваете под опытом работы с UI и UX 5:10? То есть веб программер должен еще быть графическим дизайнером и уметь рисовать и делать макеты в той же фигме? Я думал, что прогеру надо только сверстать сайт по предосталвенному макету и навесить все эффекты да событий и все , ну а рисованием пусть графические дизайнеры мучаются.