Pet-projects. What projects must a beginner front-end developer do?
HTML-код
- Опубликовано: 10 май 2024
- Друзья, привет! Наконец-то мы подошли к долгожданной теме пэт-проектов. В этом видео я собрал для вас 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
👍Друзья, делитесь этим видео в соцсетях и ставьте ваши лайки - это прям ооочень помогает в продвижении нашего канала 🙂🚀
⏱ Таймкоды:
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 Пишите ваши идеи для проектов
Respect+ спасибо) поделись ссылкой на лендинг (как в видео) или где почитать что за библиотека.
@@andreislashikov9618 2019.lesanimals.digital/en
@@frontendscience спасибо)
@@frontendscience , а что если портфолио просто на github сделать? залить примеры работ да и все....
Надо сделать так как будет удобно для нанимателя - кликнуть по ссылке и сразу увидеть готовый проект. Скачивать проект, ставить зависимости, билдить и запускать локально - никто не будет.
Ура! ДОЖДАЛИСЬ! Спасибо Вам огромное, Сергей, за Ваш труд!
Благодарю, Ильнура! Рад слышать :)
Лайв-стриминг с написанием проекта было бы круто. Можно посмотреть на качественный код и подходы, которыми пользуетесь вы. Так что было бы клёво 👍
Спасибо, интересные примеры. И не только для pet-проекта, но и для стартапа)))
Ребята, давайте насыпем лайков нашему дорогому другу за старание! 👉👍♥️
Да, ребята, давайте 🥳
Очень ждал, спасибо!
Ура! 🤗
Как много идей) Спасибо большое за подборку
Какое же офигенное качество видосов, монтажа и подачи материала. Это что-то с чем-то😍
Очень приятно) спасибо
Здравствуйте, если будет такая возможность сделайте видео о типовых задачах, которые решает Джуниор, мидл, сеньор. Было супер, особенно если будут примеры. Сразу будет понятно, интересно ли это или нет. Я понимаю, что сфера айти не ограничена багфиксами, электронными письмами и формированием списков из бд, вот и хочется узнать что там и как там за стенами "интервью".:) С меня лайк и письменная благодарность 😅
Джуниор - шрифт поменять на 31.4пкс
@@user-gr7kn5np3w задать блоку fz=2px а подблоку с текстом 15,7rem и у текста будет шрифт 31,4?
@@yoda8954 15.7rem = 251.2px по умолчанию
Сергей, проделанная работа над видео просто поражает! По-моему вы вышли на новый уровень, в качестве видеороликов.
Я когда ранее искал подобные видео или статьи на форумах, думал что уже все видел, но то что я увидел тут, действительно очень порадовало! Очень много интересных и уникальных идей для проектов. Приметил себе парочку 😉
Спасибо за ваш труд!
Ценю Вашу поддержку! Рад, что понравилось )
Сергей, Огромная благодарность вам за ваши силы и идеи!! Спасибо за ваш контент! Он помогаем нам "нубам"!! Удачи вам, вдохновения и сил!!!
Благодарю за поддержку! Рад, что было полезно) Успехов Вам!
Да, классные набор идей! Спасибо!
Классное видео, и подборка проектов в портфолио =)
По началу думал что кроме классики по типу todo ничего интересного не будет, нно ближе к концу даже приглянул пару тем, спасибо!
Спасибо большое за подборку! Как раз встал вопрос выбора проектов для портфолио.
Здорово! Надеюсь, найдете парочку для себя
лайк за топовые идеи уж больно приятного докладчика :)
Класс! Спасибо😀.
Очень актуально сейчас для меня) Спасибо😊👍
Рады, что вовремя ;)
Какое же видео качественное! Спасибо за полезную информацию, Сергей!
Рад, что полезно! Успехов!
качество сьемки и идея великолепны
Спасибо за подборку открытых api
Круто, спасибо ♥️
Спасибо большое за интересные идеи)
Благодарю за большое количество идей и советов 👍
Рад, что было полезно 👍
Благодарю за пример проектов! 🔥
И Вас благодарю!
Лайк однозначно. Автор всегда знает какие темы надо затрагивать
Рад, что оказалось актуально
Спасибо, вы мне очень помогли !
Спасибо большое!
Напишу комментарий чтобы похвалить и для продвижения ) Двух зайцев так сказать ) прекрасные видео, классный канал! Успехов в дальнейшей работе ! Радуйте нас всё больше!
Благодарим Вас за поддержку! Очень вдохновляете! :)
Спасибо огромное, очень полезное видео!! Собираюсь разработать портфолио, обязательно воспосльзуюсь идеями которыми вы поделились !!!
Здравствйте, подскажите, пожалуйста, удалось ли вам найти работу?
Лайк не глядя 🔥
Спасибо за крутые идеи.
Лайк на автоматизме)
комментарий, чтобы комментарий. Спасибо за видео!
Сергей как всегда топ!
блин как интересно рассказываете. суперски все ^ ^
Очень полезное и информативное видео, как всегда на уровне
Спасибо!
Благодарим за поддержку!
Спасибо!)
спасибо за видео! Интересная подборка
Сергей, ждём стрим от вас!!! Спасибо за труды!
Благодарю за поддержку! )
Спасибо!)
Рад, что полезно)
Спасибо большое за советы!
Успехов!
Дуже корисне відео для мене! Дякую, можливо використаю одну з ваших ідей проекта, для портфоліо! 👍
Супер! Бажаю успіху!
@@frontendscience Дякую!
Спасибо, классный канал!
Афигенное видео, очень полезно!
Спасибо,очень интересно!
И Вам спасибо)
Лично я учусь так: когда только начинал - читал доку, создавал себе задаче по узким темам и решал, когда понял что дока закончена и вроде готов - делал примитивный туду, где использовал то, что изучил, а дальше смотрел туториалы, так же как автор закрывал видео и повторял по памяти) по мне - идеальный вариант изучения, плюс периодически перечитывать доку и справочники.
С тудушками жиза! Какая бы не технология, все к ним пихал: и туду с авторизацией на postgres в связку в ts и стайледами, то тэйлвинд с локалсторэджами чисто для разминки, то просто на обычном js с необычной ui составляющей 😂😂😂 удачи вам!
Вдохновляющее видео!
Вот спасибо! :)
Очень рад! И Вам спасибо! )
Очень полезное видео, нашёл кучу вариантов, как всегда лайк, спасибо)
Благодарим! Рады слышать)
Спасибо, ты лучший))Очень крутые идеи
Кстати, я решил проблему с webpack-ом)
Коммент на продвижение! Мощное видео
Спасибо большое
Отличное видео. Аж дополнительная мотивация появилась.
Круто! Поделитесь потом ссылкой на свои проекты! (Как Вам такая мотивация? ;))
@@frontendscience как только сделаю - с удовольствием)
Помню, когда первый раз заинтересовался веб-разработкой (это было еще в школе, больше 6 лет назад), делал себе сайт-визитку, и добавил там такую же гирлянду)
Приятные воспоминания :)
Привет, сейчас развиваешься в этой же сфере ?
@@user-mn1so6hs8z ага
Комментарий в поддержку .
Интересно было бы создать каталог книг или библиотеку, а еще нечто типа ежедневника
оч круто, как раз делаю портфолио) спасибо)))
Очень рад, что вовремя! )
@@NotTheLastOne А Вы?
@@NotTheLastOne 🙂
Да. Автор хорошо постарался! Супер!
Рад, что понравилось
Супер видео, очень полезно для новичков)
Рады, что было полезно!
Очень хотелось бы стрим для начинающих
Понравилось с рецептами
По одному слову "рекомендасьён", понятно кто смотрит Птушкина :)
Спасибо за идейки пет проектов! 👍👍👍
Привет, касатик! ;)
изучайте Web оно того стОит ))
Было бы очень интересно. Презентованный Ваш Landing меня очень удивил. Много интересных моментов и сложный дизайн. Я за него
Рад, что понравилось
Очень классный выпуск
Жду стрим!)
Как раз искал идеи, а тут видео, большое спасибо, досмотрю и пойду что-то из 30 реализую
Круто! :) Успехов!
Очень полезно!
Это классно! Радуюсь!)
за tool в примере клона спотифай респект=)
Сразу лайк!
🎈
Лайк за плейлист с Tool в рассказе про клон Spotify :)))
🤘
Можно пожалуйста видео про сложную анимацию🙏❤️
класний якісний контент і класна музика на фоні 😎
супер 👍
Тішимося, що зацінили! Дякуєм! ;)
мне надо будет раз 50 пересмотреть видео прежде чем самому повторить :D обычно записываю всё что необходимо и с конспектом уже пишу сам
Спасибо за видео! Если будет стрим с разработкой проекта я бы проголосовал за проект с питанием, типа вводить информацию какие продукты имеются и получать список возможных блюл, плюс добавить туда какой-то функционал который решал бы проблему в основном тех людей который часто готовят на семью, "Что сегодня приготовить") Помню у меня мама постоянно не знала что готовить, а теперь и девушка задается постоянно этим вопросом, а общем насущная проблема)
Было бы очень круто сделать с тобой сайт для погоды на стриме!
спасибо
было бы интересно , сделать weather app, но что бы в нём было что-то вроде input type="range" и этим ползунком можго было смотреть погоду в любое время дня
Подписка - есть. Лайк - есть. Теперь по поводу live-stream проекту - топ тема. Только одна просьба - не просто показать название и его реализацию. Но и показать как вы создаете план действий, все шаги по пунктам, до того как начинаете писать код.
Постараюсь :)
спасиба вам сергеей
И Вам спасибо)
15:54 хаха я об этой идее уже год думаю. А тут оказывается не один о таком думаю) Хочу в будущем реализовать эту идею.
Если б она еще сама готовила))) вот это приложенька была бы! 🧞
Я работал диджеем в ночном клубе, захотел чего то нового, стал там Светооператором и Звукарём. Одновременно с этим я работаю айтишником, обычным системным администратором. Давным давно сделал для компании своей новостной\фотоархивный корпоративный портал на wordpress.
Спустя 8 лет решил заняться ещё чем-нибудь интересным и стал изучать 1С - не пошло.
Встретился с одноклассником и тот рассказал, что работает фуллстаком, но начинал с фронтенда с нуля, не понимая ничего в html даже.
И вот я в поиске ютуба попал на первое видео с вашего канала про то, "кто такие фронтенды".
Сейчас посмотрел это видео и действительно захотел попробовать!
Спасибо за такие понятные рассуждения!
Прикольно! Благодарим, что поделились! Желаем Вам успехов!
Замечательный канал !
Спасибо большое! Ценна Ваша поддержка!
Лучший!
Учите делать контент, посоны.
Было бы интересно сделать лендинг с такими анимациями
анимации просто нереальные
Еще классно если создаешь таблицу совмещаемости продуктов и с помощью искуственного интиллекта создаешь блюда по продуктам в холодильнике. При этом наличие продуктов в холодильнике это входные параметры, по таблице совместимости строиятся слои, а блюда- выходной слой.
Классная идея!
Спасибо, очень своевременно и вдохновляюще!) Вопрос по поводу видеоряда под лендинги - как такие анимации делаются как те, где SPACE, переход на оленя и в космос потом? Подскажете куда смотреть?) Спасибо!
Думаю конкретно про эту можно спросить у Юрия: ruclips.net/user/flintyara Возможно он знает как такое реализовано. А может он на своем канале уже даже разбирал похожие эффекты.
Еще я рекомендую регулярно листать codepen - там есть очень много крутых примеров анимаций и сразу видно как реализовано.
Было бы интересно создать словарик, разговорник)
крутые проекты
Лайк
Да! Live-stream! Каталог книг!
И ещё одна очень актуальная тема для Пэт проджекта: Bad habits / Addiction Lapse Timer. Можно вводить какие-то плохие привычки и отслеживать, как они исчезают. Можно ещё добавить функционал по тому, сколько денег/времени сэкономил человек. Например, я много играю в видео игры и покупаю их же в Steam, можно написать софтинку, которая будет отсчитывать, сколько я денег сохранил, сколько не играл. Или же если вы курите или же пьете алкоголь - можно сделать аналогично.
будешь показывать своему работодателю сколько в последний раз ты продержался без выпивки?)
@@FlashViolet а почему бы и нет))
Полезные проекты, интересные идеи! Можно доработать идею и трекать не только вредные, но и полезные привычки, внедряя их.
👍
цікаво. дякую
Воу, реально очень полезное видео, настолько что возникают опасения что все ринутся в IT. )
ПрЕкол) "я, когда пришла ЗП" - 33:06
Рвутся то рвутся, но не все осиливают
@@user-po3lh2mc3s нашел, привет я из прошлого
Добрый день, подскажите, где лучше размещать свои pet projects?
Можно сделать календарь дивидендов и корпоративных событий, который берет информацию из API
Можно сделать LMS в качестве пет проекта. Там будет booksharing, Chat, Поисковик и тд
Классная идея!
Подкину идею - Перемещение локальных заметок на другое устроство по QR коду )
Да, прикольная идея! Благодарим
Объясните пожалуйста, что вы подразумеваете под опытом работы с UI и UX 5:10? То есть веб программер должен еще быть графическим дизайнером и уметь рисовать и делать макеты в той же фигме? Я думал, что прогеру надо только сверстать сайт по предосталвенному макету и навесить все эффекты да событий и все , ну а рисованием пусть графические дизайнеры мучаются.
Начал изучать программирование, и это видео натолкнуло меня на стартап) Вопрос: Я стану программистом или владельцем бизнеса?
бизнес будет брат 100000 0руб лей всразу в кашелек залетит