Materials for pet projects: a must have for a fresh frontender
Вставка
- Опубліковано 16 чер 2024
- Привет, друзья!
Прошлое видео с идеями для проектов в портфолио получило большой отклик. И вы просили в комментариях подсказать, где же искать такие крутые материалы для быстрого создания ваших пэт-проектов.
💎Сегодня я делюсь с вами огромной (гигантской!) подборкой абсолютно БЕСПЛАТНЫХ ресурсов для разных этапов создания ваших проектов:
1) начиная от дизайна,
2) разработки шаблонов (верстки),
3) деплоя (хостинга),
4) и заканчивая миллионом различных деталей, таких как иконки, шрифты, фото, фоны и прочие прелести, которые делают наши проекты стильными и выделяющимися.
👍Друзья, это новый экспериментальный формат видео на нашем канале - дайте нам знать вашими лайками и комментариями, нравится ли вам такой формат и хотели бы вы получать от нас новые подборки полезных и нужных ресурсов.
По каждому из этих ресурсов я постарался рассказать коротко его фишки и ценность для вас. Смотрите с удовольствием! И сразу открывайте для себя те, которые вам нужны для ближайшего проекта!
✅Все ссылки с сегодняшнего видео вы найдете также здесь: bit.ly/pet-projects-links
Присылайте также ваши личные рекомендации полезных сервисов в комментариях - но желательно не ссылкой, чтоб UA-cam не удалил комментарий, а названием сервиса. Если будут интересные ресурсы, обязательно добавим в общую подборку.
👍Обязательно делитесь этим видео с друзьями!
👍И не забудьте написать нам в комментариях что-то хорошее 🤓
🕗Таймкоды:
00:00 Intro
01:53 Дизайн
06:45 Готовые шаблоны с версткой
11:28 CSS фреймворки
17:53 Цветовые палитры
19:41 Icons
22:10 Шрифты
26:47 Лого-генераторы
31:17 Gradient-генераторы
34:15 Pattern-генераторы
41:37 CSS-анимации
45:01 Фотостоки
47:46 Deployment
51:53 Final
👍🤩 Будем благодарны за поддержку нашего канала на Патреоне: / frontendscience
---
Если видео было для вас полезным, ставьте лайк и поделитесь им с друзьями.
Подписывайтесь на наш канал: bit.ly/fs-ytb
---
Присоединяйтесь к нам в соцсетях:
FB: / frontendscience
Instagram Сергея Пузанкова: / puzankovcom
Заходите на наш сайт: frontend-science.com/
---
Music by Blue Wednesday
---
#petprojects, #frontend, #ityoutubersru
видео - просто огнище! внезапно отвлекся с чтения Гашека, и уже не могу остановиться смотреть!
Почему это видео не в топе? Крутой контент. 👏👏🔥
Вижу новое видео вышло на канале - лайк автоматом!
Класс! Благодарим за поддержку! 😊
Доброе утро,Сергей)Вы классный человек, спец и вообще чашку кофе за Вас до дна
😀 очень вдохновляет! 👍☕️
це величезний кладязь знань, дякую вам за вашу роботу)
Радий, що було корисно!
Було б цікаво побачити процес деплою на той чи інший сервіс. Дякую вам за відео!
Спасибо большое за видео, много интересного. Было бы очень полезно посмотреть отдельное видео про deployment
И Вам спасибо 😉
Благодарю за такие полезные и интересные ресурсы. Вы сделали большое добро, спасибо
Большое спасибо за вашу работу, буду использовать в проектах!
Спасибо 🙂 интересно про деплой - хероку и другие)
Хочу видос по Хироко.Отлично приподносите информацию.
отличный контент. много интересного добавил себе.
Ну здОрово! Рад :)
Как же это шикарно! Большое спасибо!
Длинный комментарий для продвижения канала. Спасибо большое!
Отличное видео, много полезных ресурсов! Спасибо
Спасибо большое! Все сохранила, очень полезные материалы для новичков, да и не только)
Спасибо! Очень полезная информация для меня 🔥
Большое спасибо за труд и ценную инфу, лайк само собой.
Вот это подборочка, ого-го, я много нового узнал, спасибо!
Спасибо огромное , сэкономили время на поиски 🙏
Спасибо, полезный материал!!
Great helpful content! Thanks a lot. Good job.
Спасибо, очень много полезной информации) Лайк и подписка.
Хотим видео про Heroku и Deploy))
+++
Очень крутое видео!!! Спасибо!
лайк не глядя
спасибо за материал
подборка очееееень крутаяяяяя! боже моооой!
пользительно! спасибо!
Отличное видео, как всегда! Спасибо большое! Все сохранила в закладки)
Рад, что пригодилось!
Воу, какая классная обложка у ролика, с x и пальцем в слове нужных, круто придумали 🔥
Огроменное спасибо за такую полезную информацию!👍😊
Очень рад, что полезно
Спасибо как раз задавалась вопросом найти сайты с готовыми макетами для учебы:) Супер)
Приятно видеть как растет любимый канал про JS👏
Здорово! Очень приятно ☺️
Полезно, спасибо!
Выпуск просто огонь! Спасибо! Проделана, просто, титаническая работа!
Это так! Рад, что понравилось и что полезно)
Спасибо за великолепную подборку! То что нужно
Супер! 👍 Я рад!
Очень понравилось, действительно полезно. Спасибо большое за видео 🙂
🤓 рад, что понравилось
Ждем виде по деплою! Спасибо за такую подборку материалов!
Сделаем )
Хороший материал,Спасибо большое!
Рад, что оказалось полезным 🤓
Извините видимо я поспешил ссылка появилась. Спасибо огромное за ролик.
Вау, спасибо большое за вашу работу! Смотрю каждое видео с большим удовольствием. Очень полезный ролик)
Супер! Очень рад 😀
Про deployment было бы очень полезно узнать, я все никак не мог найти хорошую информацию об этом. Спасибо за видео
спасибо, Отэц
Godnota!
Спасибо за полезнейшее видео, лайк на автоматизме!))
Рад, что полезно! :)
давай видео про хостинг
Супер видео, еще нужно о ресурсах и полезных сайтах
Супер!!!
Thank you so much for such an awesome and useful content ☺️ Keep it up 👍
Thanks for your support!
хотим видео про деплой.
❤спасибо!
Этому видео нужен патент! Из него другие блогеры сделают 5 видео)))
Класс, увидел вещи, которые давно искал. Спасибо большое за труд.
)) благодарю, порадовался)
Спустя 3 года, не всё из этого знаю, круто), так что видео нужно было назвать материалы для современного разработчика
Блин! Очень, очень жаль, что нельзя поставить несколько лайков одновременно! Спасибо вам огромное, не хватало именно такой информации. Вы лучший!
Благодарю) рад, что полезно!
Все норм, я поставил за Вас, Юлия, дополнительный лайк 🙂
@@ivan_kirsanov Спасибо🙂
топ, спасибо большое
Низкий поклон за такой полезный контент. Не нашел в упоминании такой отличный ресурс как Boxicons. Около 1500 разных иконок которые подгружаются в html, так еще можно анимацию им накидывать интересную. Так-же все бесплатно :)
Благодарю за рекомендацию - добавил его в список ;)
ЛУЧШИЙ
Офигенно!)
За ссылки на все проекты - отдельное спасибо!
Рад, что было полезно)
@@frontendscience Очень!
Сергей, я там кое-что ещё спросил у вас в инстаграмме, будет возможность, посмотрите пожалуйста :)
или лучше на почту написать?
Ещё раз спасибо!
Нужно видео про хероку
Привет, пожалуйста сделай видео о пет проектах для бэкенд разработчиков.
Спасибо за подборку, было бы интересно посмотреть про открытые АПИ сервисы, возможно даже не бесплатные
Скажите, а что именно вы хотите увидеть в видео про АПИ?
Го видео про деплой на Neroku
Наверное на ХЕРоку
very good stuff
👍Друзья, делитесь этим видео в соцсетях и ставьте ваши лайки - это прям ооочень помогает в продвижении нашего канала 🙂🚀
⏱ Таймкоды:
00:00 Intro
01:53 Дизайн
06:45 Готовые шаблоны с версткой
11:28 CSS фреймворки
17:53 Цветовые палитры
19:41 Icons
22:10 Шрифты
26:47 Лого-генераторы
31:17 Gradient-генераторы
34:15 Pattern-генераторы
41:37 CSS-анимации
45:01 Фотостоки
47:46 Deployment
51:53 Final
🤓И напишите нам в комментариях, хотели бы Вы и дальше видеть такие подборки полезных ссылок в наших роликах?
✅Все ссылки с сегодняшнего видео вы найдете также здесь: bit.ly/pet-projects-links
есть ли еще смысл учить фронт-энд? или через большую конкуренцию это уже бесмысленно ?
спасибо за видео
Невероятно полезное видео! Сохранил себе в подборку, буду пересматривать время от времени
рад, что полезно)
Сергей, спасибо за отличный видос с множеством полезной информации и интересной подачей. Интересно проводить вечера за просмотром Ваших видео). Подскажите, пожалуйста, на Heroku/Vercel/Netlify можно развернуть простейшую серверную часть с бд для своего проекта ?
Рад что было полезно. Да там есть опции с БД но сейчас не подскажу где именно это будет бесплатно. Надо изучать прайсинги
Лайк
👍
Спасибо огромное! Без воды! Круто! Хотелось бы видео про heroku и deploy.
Будет)
@@frontendscience Отлично!!!! Круто!
Спасибо за обзор ресурсов. Только хотелось бы добавить, что Tailwind CSS на мой взгляд должен быть где-то на первых местах, а он даже в список не попал. После моего знакомства с ним год назад, вряд ли без нужды захочется возвращаться на что-то иное.
Благодарю за рекомендацию - добавил его в список ;)
Первое место мастхев
Хачу Хероку!😛
+++
слишклм обалденная информацияя))))
Рады слышать))
Очень хорошее видео. Хорошо сделано, очень информативное. Однозначно лайк. Маленькое но - на 1:53 вы говорите о ссылке на док со всеми ссылками будет в описании. Не могу его найти.
✅Все ссылки с сегодняшнего видео вы найдете также здесь: bit.ly/pet-projects-links
Спасибо, замечательное видео, очень полезные ресурсы рассмотрены.
Было бы здорово увидеть что-то подобное по бесплатным хостингам, если таковые вообще сейчас остались. Когда самостоятельно себе искал такой для опытов, ничего более-менее приличного найти не смог. Но вдруг что-то пропустил или не нашёл?
Посмотрите еще раз видео - там есть целый раздел про деплой проектов и ссылки на бесплатные ресурсы.
@@frontendscience Я видел. Но это какие-то странные ресурсы, которые говорят о каких-то приложениях, привязках к всяким сомнительным сторонним ресурсам и всё в таком духе.
Я же говорю об обычном хостинге, по-старинке, когда получаешь доменное имя (обычно третьего уровня) и доступ к фтп-серверу, куда и заливаешь свои файлы сайта. Не вот это вот всё современное модное молодёжное, в котором необходимо ещё стопиццот дополнительных ненужных телодвижений совершить.
@@1kvolt1978 если это для Вас «сомнительные ресурсы», как Вы выразились, уверен, Вы самостоятельно найдете те, которые вызовут у Вас больше доверия, чем приведенные мной)
@@frontendscience Сомнительные в том плане, что я сомневаюсь в их необходимости. Например, зачем нужна привязка к гитхабу для выкладывания сайта в интернет? О_о
На приведённых Вами ресурсах я вообще не увидел слова "хостинг", или "домен", или хотя бы "сайт". И речь на них о каких-то "приложениях", чтобы под этим не подразумевалось в нынешние нелёгкие времена.
А сам я, к великому сожалению, найти простые бесплатные хостинги, достойные упоминания, не осилил, не смог. :) Вот и подумал, что а вдруг профессионалы знают какие-то ресурсы или иные возможности. Может, у каких-то платных хостингов есть интересные возможности бесплатно похоститься с какими-то ограничениями, неприемлимыми для коммерческих сайтов, но некритичными для некоммерческих мини-проектов. Или что-то в этом роде.
Ну нет так нет.
было бы еще интересно увидеть интересные сборки gulp+webpack к примеру, посмотреть может у кого-то есть более интересные решения, а то я пользуюсь одной сборкой, так там постоянно ругается если не стоит python или слишком новая версия ноды.. ну такое
Сергей, Здравствуйте! Хотел вас попросить совета по пути senior, как следует развиваться чтобы достичь senior уровня, какие основные требования в 2021 году, на что нужно уделить особое внимание, что прочесть и тд, заранее спасибо!
На самом деле по тех.скилам можно смотреть видео про требования к миддлу: ua-cam.com/video/VWF1XVpASgo/v-deo.html
Список тот же, только от сеньора требуются более углубленные знания и более быстрые и осмысленные ответы.
Но большую часть занимают именно софт скиллы. Я много раз уже говорил, что часто миддла от синьера отличают именно софт скиллы, потому что разработчик может быть технически супер сильным , но блин из-за слабых софт скиллов не дотягивает до синьера. Так что главный упор на них. Здесь можно посмотреть, что имею в виду: ua-cam.com/video/mOOrcf56OO8/v-deo.html
Желаю успехов!
Спасибо!@@frontendscience
Братан,ты ахуенный!
🤠
Здравствуйте, Сергей! Кто Вам 2 дизлайка-то поставил? :))) Я тут задачку про лабиринт решил! Чё-то долго с ней возиться пришлось. Обычно я Ваши задачи достаточно быстро решаю. Решил скинуть решение сюда, так как видео про лабиринт было уже давно :)))
const maze = [
["wall", "wall", "wall", "wall", "path", "wall"],
["path", "path", "path", "wall", "path", "wall"],
["path", "wall", "path", "path", "path", "path"],
["path", "wall", "wall", "wall", "path", "wall"],
["path", "path", "wall", "wall", "path", "wall"],
["wall", "path", "wall", "wall", "wall", "wall"]
];
function checkPossiblePath(maze) {
const mazeHeight = maze.length;
const mazeWidth = maze[0].length;
const entrance = {y: 0, x: maze[0].indexOf("path")};
const exit = {y: mazeHeight - 1, x: maze[mazeHeight - 1].indexOf("path")};
const passedPath = [{y: entrance.y, x: entrance.x}];
for (const element of passedPath) {
maze[element.y][element.x] = "passed";
if (element.y + 1 < mazeHeight) {
if (maze[element.y + 1][element.x] === "path") {
passedPath.push({y: element.y + 1, x: element.x});
}
}
if (element.y - 1 >= 0) {
if (maze[element.y - 1][element.x] === "path") {
passedPath.push({y: element.y - 1, x: element.x});
}
}
if (element.x + 1 < mazeWidth) {
if (maze[element.y][element.x + 1] === "path") {
passedPath.push({y: element.y, x: element.x + 1});
}
}
if (element.x - 1 >= 0) {
if (maze[element.y][element.x - 1] === "path") {
passedPath.push({y: element.y, x: element.x - 1});
}
}
}
return passedPath.some((element) => element.y === exit.y && element.x === exit.x) ? "has" : "hasn't";
}
console.log(`This maze ${checkPossiblePath(maze)} a through path!`);
Класс! Благодарю за решение!
@@frontendscience Вам спасибо за интересные видео! Так это смотрится в редакторе: clip2net.com/s/4dPWtsL
Я Вам в следующий раз буду стараться ссылками скидывать!
к сожалению ютюб комменты со ссылками удаляет (очень редко когда не удаляет). Так что лучше просто код кидать
@@frontendscience Ок!
да проекты на heroku хотелось бы посмотреть
будет!
Ваше мнение по MS Blazor?
Не пользовался и не планировал, если честно.
Если я пересмотрю, изучу и повторю все видео с этого канала, есть шансы пройти собеседование на фронт-енд разработчика?
Шансы всегда есть 😉
Здравствуйте! Подскажите пожалуйста, реально ли стать программистом без образования в физмате?) какие курсы можете порекомендовать с полного нуля, или книги может какие для начала?)
@@frontendscience благодарю за ответ) чуть уверенности добавили)
Привет, не открывается ссылка на линк, чекни плиз
Спасибо. Слава Украине!
Героям слава!