- 25
- 68 681
Андрей Шопинский
Приєднався 11 кві 2024
Помогаю новичкам в освоении профессии Frontend-разработчика!
Личная консультация 👉 t.me/IT_shopen/143
Начни менять жизнь сегодня! 💪
Личная консультация 👉 t.me/IT_shopen/143
Начни менять жизнь сегодня! 💪
HTML для новичков с нуля! (Часть 2)
✍️Курс по основам HTML для новичков! (часть 2)
Что изучаем в курсе: популярные теги для создания форм на сайте и атрибуты к ним, вёрстка таблиц, работа с изображением, аудио и видео. В основном касался темы html-форм, так как это то, с чем вы будет взаимодействовать постоянно в рамках профессии Frontend-разработчика.
📹Тайм-коды к видеокурсу:
00:00 - вступление
00:50 - продвинутая форма (теги label, select, option)
09:22 - input с типом file и его атрибуты
10:50 - где и как выучить все теги и атрибуты
11:48 - где узнать другие атрибуты тегов
18:56 - разбор input с типом checkbox
21:29 - разбор input с типом radio
26:35 - что такое DOM-дерево
30:15 - разбираем продвинутую форму с тегом fieldset
37:32 - разбираем изображения (тег img), абсолютные и относительные путь к файлам
42:17 - пара слов про SVG
44:01 - тег audio и video
45:50 - для чего нужен iframe
46:32 - изучаем вёрстку таблиц
52:45 - более сложная версия таблицы
56:48 - пробуем объединять ячейки в одну(colspan, rowspan)
1:00:46 - немного про тег "а" и ссылки
1:00:57 - подведение итогов курса!
1:02:16 - домашнее задание + заключение!
✏️Автор курса:
- Telegram: t.me/+uCLZuzWBLFAzZmJi
Получить персональный code review - t.me/+kLGXXG20XdIyZGQy
Полный Курс по VS Code - ua-cam.com/video/SE0_wdokumg/v-deo.html
Первая часть курса - ua-cam.com/video/tjXzswOacAc/v-deo.htmlsi=DQdP_N3lGHm-PfVV
Благодарю за просмотр!
#frontend #html #web
Что изучаем в курсе: популярные теги для создания форм на сайте и атрибуты к ним, вёрстка таблиц, работа с изображением, аудио и видео. В основном касался темы html-форм, так как это то, с чем вы будет взаимодействовать постоянно в рамках профессии Frontend-разработчика.
📹Тайм-коды к видеокурсу:
00:00 - вступление
00:50 - продвинутая форма (теги label, select, option)
09:22 - input с типом file и его атрибуты
10:50 - где и как выучить все теги и атрибуты
11:48 - где узнать другие атрибуты тегов
18:56 - разбор input с типом checkbox
21:29 - разбор input с типом radio
26:35 - что такое DOM-дерево
30:15 - разбираем продвинутую форму с тегом fieldset
37:32 - разбираем изображения (тег img), абсолютные и относительные путь к файлам
42:17 - пара слов про SVG
44:01 - тег audio и video
45:50 - для чего нужен iframe
46:32 - изучаем вёрстку таблиц
52:45 - более сложная версия таблицы
56:48 - пробуем объединять ячейки в одну(colspan, rowspan)
1:00:46 - немного про тег "а" и ссылки
1:00:57 - подведение итогов курса!
1:02:16 - домашнее задание + заключение!
✏️Автор курса:
- Telegram: t.me/+uCLZuzWBLFAzZmJi
Получить персональный code review - t.me/+kLGXXG20XdIyZGQy
Полный Курс по VS Code - ua-cam.com/video/SE0_wdokumg/v-deo.html
Первая часть курса - ua-cam.com/video/tjXzswOacAc/v-deo.htmlsi=DQdP_N3lGHm-PfVV
Благодарю за просмотр!
#frontend #html #web
Переглядів: 343
Відео
HTML с нуля до результата КУРС для новичков! (Часть 1)
Переглядів 749Місяць тому
✍️Курс по основам HTML для новичков! (часть 1) Что изучаем в курсе: рассматриваем базу для работы с технологией HTML, всё самое необходимое и только то, что применяется каждый день любым профессионалом в сфере веб-разработки! 📹Тайм-коды к видеокурсу: 00:00 - вступление советы по прохождению? 01:36 - что такое HTML? 02:55 - что такое CSS? 03:55 - что такое JS? 05:34 - как все 3 технологии работа...
Основы веб-разработки для новичков (БАЗА по Frontend #2)
Переглядів 1,1 тис.3 місяці тому
✍️Курс по основам веб-разработки для новичков! Что изучаем в курсе: основы разработки программных продуктов, как программисты разрабатывают сайты, как работает интернет, Frontend? Backend? Всё это разбираем и смотрим на профессию программиста комплексно! 📹Тайм-коды к видеокурсу: 00:00 - в чём смысл данного курса? 00:45 - информационные технологии и информационные системы 02:32 - веб-сайт или ве...
Основы Программирования на JS для Новичков! (БАЗА по Frontend №1)
Переглядів 1,9 тис.4 місяці тому
✍️Курс для начинающих JS-программистов! Что изучаем в курсе: основы программирования на JS, принцип мышления программиста, базовые понятия и термины ПРОСТЫМИ словами без нудятины и трудностей! 📹Тайм-коды к видеокурсу: 00:00 - зачем и кому нужно это видео? 00:57 - что общего у программистов и поваров? 02:26 - понятие "Алгоритм" 03:46 - понятие "Блок-схема" 05:43 - понятие "Программа" 09:33 - ПРА...
Топ-5 причин: почему я люблю Frontend-разработку?
Переглядів 3914 місяці тому
В этом видео делюсь своими плюсами профессии Frontend-разработчика и рассказываю почему мне нравится развиваться в сфере IT. Таймкоды: 00:00 - вступление 00:26 - причина №1 02:02 - создай свой сайт с нуля! 02:02 - причина №2 04:29 - причина №3 06:12 - причина №4 09:14 - причина №5 Telegram: t.me/IT_shopen Получить бесплатный code review - t.me/ kLGXXG20XdIyZGQy Благодарю за просмотр! #frontend ...
Создание сайта с нуля + адаптивная вёрстка по макету! HTML | SCSS | БЭМ
Переглядів 25 тис.5 місяців тому
✍️Курс: Вёрстка сайта с нуля до результата, используя современные технологии - SCSS, html, БЭМ. Что разрабатываем: в данном видео создаём сайт на html и css с нуля, также я объясняю методологию БЭМ простым языком и показываю на реальном примере как делается адаптивная вёрстка сайта. Рекомендую изучать новичкам, которые уже смотрели обучающие видеоматериалы по вёрстке и понимают как работает HTM...
ЛУЧШИЙ способ освоить Frontend-разработку!
Переглядів 2,4 тис.5 місяців тому
В этом видео раскрываю подробно тему правильного подхода к обучению Frontend-разработки. Также даю несколько рекомендаций начинающим и говорю про ошибки новичков во время процесса учёбы. Тайм-коды: 00:00 - вступление 00:29 - кто такой Frontend-разработчик и какие у него задачи? 02:45 - ставь цель и чётко её описывай! 04:00 - почему многие забрасывают обучение и как это исправить? :( 04:41 - выб...
Как изучить профессию JavaScript-разработчика?
Переглядів 6236 місяців тому
Как изучить профессию JavaScript-разработчика?
Разработка приложения "Список задач" на JavaScript с нуля. Часть №2 (продвинутый курс)
Переглядів 7437 місяців тому
Разработка приложения "Список задач" на JavaScript с нуля. Часть №2 (продвинутый курс)
Разработка приложения "Список задач" на JavaScript с нуля. Часть №1 (базовый курс)
Переглядів 4,5 тис.7 місяців тому
Разработка приложения "Список задач" на JavaScript с нуля. Часть №1 (базовый курс)
VS Code ПОЛНЫЙ курс + настройка (интерфейс, плагины, работа с кодом)
Переглядів 22 тис.8 місяців тому
VS Code ПОЛНЫЙ курс настройка (интерфейс, плагины, работа с кодом)
видео 🔥лайк и подписка
Познавательно, спасибо.
У тебя круто получается объяснять, но есть большой минус в том, что ты озвучиваешь то, что делаешь уже после того, как все сделал, а не в реальном времени. Видел ты уже отвечал на подобный комментарий, я думаю, что лучше сделать курс подлиннее, но качественней. Здесь не так заметна озвучка, но, когда я делал туду лист по твоим видео это было супер заметно, так как ты отставал от кода и приходилось либо сначала слушать, а потом писать код, или писать код, а потом слушать, в итоге все равно тратитшь в два раза больше времени. Поэтому подумай насчет объяснением в реальном времени, будет на много лучше!
Очень доступно! Благодарю!
Благодарю за такую развернутую подборку видеоконтента.Все доходчиво и понятно. Ждем СSS !
Разница между VSCode и Webstorm в том, что VSCode какие плагины не ставь он останется тупым редактором (за счёт этого он производительный). А Webstorm это очень умный комбайн написанный через пень колоду и не вытягивающий большие проекты. Что не ставь в VSCode но тебе всегда придётся мучатся с импортами и прочей фигнёй, которую никто не может реализовать, это редактор текста или максимум для вёрстки подойдёт. Webstorm же реальный редактор кода упрощающий жизнь, помогающий в обучении и ускоряющий написание кода. Без хейта, сам бегаю между ними из-за больших проектов, ни один не идеален, был бы выбор выкинул бы оба на помойку.
Интересное мнение) Я привык к VS Code, проблему с импортами сейчас исправили, они как в шторме работают. Пути к файлу везде меняются при перемещении файла в другую папку. Я пробовал шторм. Да, классная штука, вопросов нет к нему, но я остался на VS Code. По большому счёту спустя 5 лет в iT я понимаю, что особой разницы прям нет, больше на вкус и цвет)
@@andrew_front Прямо из коробки решили или плагин какой ставить?
привет. в миксине btn по двум последним названиям параметров не понял. может p-topbtoom и p-leftright. если для padding задано два параметра то это верх-низ и лево-право
Очень крутой видос! Но, как мне кажется такого рода сайты можно сверстать бесплатных примеров с бутсрапа. Но в целом для освоения вёрстки отличное видео. Продолжай делать больше такого контента. Подписался
Спасибо! Да, всё верно, данный курс именно для того, чтобы освоить инструменты и продвинуться в профессии!
полюбому нада уметь просто верстать
Здравствуйте! А где можно взять ваши настройки JSON. В Телеграм не нашел. Буду очень благодарен.
Здравствуйте! Ссылка: t.me/IT_shopen/102
поддерживаю. у меня только 4 базовые настройки JSON
очень полезное видео
Огромное спасибо!
Спасибо за отличное видео. 👍По новым данным Scss :вместо import теперь use. (как для новичка-это было сложно). Плюс у меня не вышло проработать dashboard picture, он терялся за синим фоном или выходил за рамки синего фона(первого экрана).
@@iuliiapankevych547 спасибо! Да, посмотрю новые спецификации, поправлю. Но знать старые моменты по коду не менее важно, так как на работе вы столкнётесь с реальной кодовой базой и она, поверьте, не всегда новая и далеко не всегда там всё соответствует современным стандартам)) Вскоре планирую выпустить ролик похожего формата, но попроще с уклоном в новичков, надеюсь будет полегче. В любом случае спасибо вам, успехов в обучении!
только начал смотреть и уже жду 2 часть! очень круто, спасибо
Сможете мне помочь сверстать один макет?)
можем попробовать вместе
Отличный ввод в профессию) Спасибо.
У меня проблема в VS Code с расширением Codeium - перестали работать подсказки - генерации кода. Я внятного решения проблемы так и не получил.
Ролик реально бомбовый, во время верстки узнал много нового, бэм выучил, в scss разобрался, еще и первый сайт сверстал, спасибо огромное тебе!!!
Привет. Очень круто!
У студентов нет времени? Тут действительно играют приоритеты. А как быть работающим людям,как учить,когда нужно решать много бытовых вопросов и вообще отдыхать как-то.
В моё время, когда я был студентом времени реально не было, у нас была трудная и большая программа, которая требовала от учеников много времени и внимания, чтобы учиться хотя бы без троек, а я учился на отлично и поэтому моя нагрузка была кратно выше. Что касается взрослых людей, то тут ситуация ещё серьёзнее. Лучший вариант, который я вижу - жить некоторое время на финансовой подушке и переучиваться спокойно в своём темпе - в среднем это за год вполне реализуемо. Проблема в том, что у многих кредиты/обязанности и ситуации разные и подушки финансовой как правило нет, либо маленькая. Поэтому есть вариант 2 - через силу и боль. Где-то урезаем встречи с друзьями, где-то объясняем близким людям почему мы не идём с ними развлекаться. Переработки, ночной коддинг, учёба вместо выходных. Другого варианта нет, это самый сложный путь, но он возможен, если вы готовы идти до конца.
Why are you using png, instead of svg ? 7:20
Многие расширения не актуальны, так как есть встроенная поддержка уже в vs code, допустим тот же тег
И что?) Удалите, если не нужны вам. Расширения не главная часть курса.
помогло.
😎👍 так держать!
Спасибо за это видео!
О первый комент, просмотр и лайк!
Досмотрел видос оч классный кайфовый но тем медленный, поидеи я как тип что шарит и все понимаю, но кто впервые мб им норм. В любом случае я смотрел на 1.5x
Спасибо! Да, расчёт был на новичков, которым многое не понятно) Верно, что выбрали 1.5х - так и нужно, если уже многое понимаете в теме.
Офигенный видос, посмотрел только 15 минут но уже многое понял и принял. P.S. закинь аудио в ИИ плс а то клики мышки слышны не приятны
Круто! Рад за вас! Да, ок, пофикшу щелчки.
Хочешь стать Frontend-разработчиком? Я лично помогу тебе в решении вопроса! Запись на консультацию и условия здесь: t.me/IT_shopen/143
Спасибо за мотивацию
Спасибо за урок! Но у меня возник вопрос, ведь адаптив не полноценный. Если зайти в панель разработчика и поставить масштаб 200%, то все станет крупно, значит верстка не подстроилась под размеры экрана полноценно. Если зайти на яндекс(короткий адрес) то как бы ты не увеличивал на десктопе верстка подстраивается под экран.
Благодарю за просмотр! Только что перепроверил финальный сайт - адаптив выполнен корректно, вёрстка подстраивается под размер экрана устройства на любом масштабе + можно открыть панель разработчика и попробовать отобразить сайт на разных устройствах - всё смотрится верно. На ПК версии если масштаб увеличивать всё тоже окей - просто всё крупное так как мобильная версия активируется, а у Яндекса по другому реализовано - там на большом масштабе просто сужается интерфейс, а для смартфонов вообще отдельная версия страницы загружается, а в моём курсе просто десктопный сайт превращается в мобильную версию постепенно, но с адаптивом в целом всё в порядке.
а у вас тоже ощущение, что он под дулом?
Да, заставляют производить контент без остановки)
В душу смотришь
Hexlet + HTML Academy)
База! Ты либо стремишься и добиваешься, либо остаёшься пользователем ПК.
🔥🔥🔥
лучше расскажи, как ты научился не моргать 52 секунды!
Все по факту
Очень классное видео! Спасибо😊
Очень качественное видео, спасибо! Конкуренции много, но уверен что подписчики будут только расти в количестве;)
Спасибо 🙏
Хочешь стать Frontend-разработчиком? Я лично помогу тебе в решении вопроса! Запись на консультацию и условия здесь: t.me/IT_shopen/143
Крайне полезное видео! Особенно помогли фишки vs code
Спасибо!!!!!!!
хорошо что чуть позже покажешь как в программе настроно про неровности кода и пустую балтовню побил вемя однозачно дизлайк
Ну вот, собственно, таким как Вы и следует поучиться выравнивать свой код, а в идеале ещё и текст в комментариях + узнать, как запятые ставятся в предложении, ибо я смысл вашего коммента понял только c третьего раза.
@@andrew_front 2 фишки уже использую подсветку цветов сss и иконки в проекте удобно на ларе. ставил плагин уже н помню какой он равгяет код в html что впринципе мне совсем не нужно так как работаю в php есть плагин равнять код в php файле на ларе к примеру в шаблоне там php или блат и html это равнять есть плагин.?
а вобще ставлю лайк 2 фишки использую
сделай подобное с SQLite
Спасибо огромное! Узнала много нового!!!
По семантике лучше делать структуру header main> section footer
нуууу хз, подумаю, посмотрю, если что в следующих курсах поправлю, спасибо.
Хочешь стать Frontend-разработчиком? Я лично помогу тебе в решении вопроса! Запись на консультацию и условия здесь: t.me/IT_shopen/143
Блин, видео классное, но для начинающих лучше было бы разбить это видео на 2 части и помедленнее. Ставлю скорость на 0.75. Как то пытаюсь вникнуть.
да, перебрал я со скоростью, буду улучшать со временем качество видео. Спасибо :)
@@andrew_front В любом случае, спасибо за такую огромную работу. Будем подтягиваться до Вашего уровня.
Видео классное, только пожалуйста, в следующий раз, если есть такая возможность, записывайте аудио и видео одновременно, потому что записанное аудио после записанного видео не очень удачно ложиться на видеоряд и воспринимать информацию сложно. Аудио с опозданием идёт от видео на 10-20 секунд.
попробую, конечно, но такое видео затянется на 4+ часов.