Андрей Шопинский
Андрей Шопинский
  • 25
  • 68 681
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
Переглядів: 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 ПОЛНЫЙ курс настройка (интерфейс, плагины, работа с кодом)

КОМЕНТАРІ

  • @loveretromusic4246
    @loveretromusic4246 3 дні тому

    видео 🔥лайк и подписка

  • @Pulsonic
    @Pulsonic 5 днів тому

    Познавательно, спасибо.

  • @0tec228
    @0tec228 5 днів тому

    У тебя круто получается объяснять, но есть большой минус в том, что ты озвучиваешь то, что делаешь уже после того, как все сделал, а не в реальном времени. Видел ты уже отвечал на подобный комментарий, я думаю, что лучше сделать курс подлиннее, но качественней. Здесь не так заметна озвучка, но, когда я делал туду лист по твоим видео это было супер заметно, так как ты отставал от кода и приходилось либо сначала слушать, а потом писать код, или писать код, а потом слушать, в итоге все равно тратитшь в два раза больше времени. Поэтому подумай насчет объяснением в реальном времени, будет на много лучше!

  • @ВиталийРябенко-з1ь

    Очень доступно! Благодарю!

  • @ifrpz
    @ifrpz 20 днів тому

    Благодарю за такую развернутую подборку видеоконтента.Все доходчиво и понятно. Ждем СSS !

  • @gigor1433
    @gigor1433 21 день тому

    Разница между VSCode и Webstorm в том, что VSCode какие плагины не ставь он останется тупым редактором (за счёт этого он производительный). А Webstorm это очень умный комбайн написанный через пень колоду и не вытягивающий большие проекты. Что не ставь в VSCode но тебе всегда придётся мучатся с импортами и прочей фигнёй, которую никто не может реализовать, это редактор текста или максимум для вёрстки подойдёт. Webstorm же реальный редактор кода упрощающий жизнь, помогающий в обучении и ускоряющий написание кода. Без хейта, сам бегаю между ними из-за больших проектов, ни один не идеален, был бы выбор выкинул бы оба на помойку.

    • @andrew_front
      @andrew_front 14 днів тому

      Интересное мнение) Я привык к VS Code, проблему с импортами сейчас исправили, они как в шторме работают. Пути к файлу везде меняются при перемещении файла в другую папку. Я пробовал шторм. Да, классная штука, вопросов нет к нему, но я остался на VS Code. По большому счёту спустя 5 лет в iT я понимаю, что особой разницы прям нет, больше на вкус и цвет)

    • @gigor1433
      @gigor1433 13 днів тому

      @@andrew_front Прямо из коробки решили или плагин какой ставить?

  • @prokloff
    @prokloff 24 дні тому

    привет. в миксине btn по двум последним названиям параметров не понял. может p-topbtoom и p-leftright. если для padding задано два параметра то это верх-низ и лево-право

  • @Iongarbay
    @Iongarbay 26 днів тому

    Очень крутой видос! Но, как мне кажется такого рода сайты можно сверстать бесплатных примеров с бутсрапа. Но в целом для освоения вёрстки отличное видео. Продолжай делать больше такого контента. Подписался

    • @andrew_front
      @andrew_front 26 днів тому

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

    • @sssfalse
      @sssfalse 6 днів тому

      полюбому нада уметь просто верстать

  • @askarseidakhanov6869
    @askarseidakhanov6869 Місяць тому

    Здравствуйте! А где можно взять ваши настройки JSON. В Телеграм не нашел. Буду очень благодарен.

    • @andrew_front
      @andrew_front 27 днів тому

      Здравствуйте! Ссылка: t.me/IT_shopen/102

    • @loveretromusic4246
      @loveretromusic4246 3 дні тому

      поддерживаю. у меня только 4 базовые настройки JSON

  • @t1mohah
    @t1mohah Місяць тому

    очень полезное видео

  • @user-wr1eh3pp6w
    @user-wr1eh3pp6w Місяць тому

    Огромное спасибо!

  • @iuliiapankevych547
    @iuliiapankevych547 Місяць тому

    Спасибо за отличное видео. 👍По новым данным Scss :вместо import теперь use. (как для новичка-это было сложно). Плюс у меня не вышло проработать dashboard picture, он терялся за синим фоном или выходил за рамки синего фона(первого экрана).

    • @andrew_front
      @andrew_front Місяць тому

      @@iuliiapankevych547 спасибо! Да, посмотрю новые спецификации, поправлю. Но знать старые моменты по коду не менее важно, так как на работе вы столкнётесь с реальной кодовой базой и она, поверьте, не всегда новая и далеко не всегда там всё соответствует современным стандартам)) Вскоре планирую выпустить ролик похожего формата, но попроще с уклоном в новичков, надеюсь будет полегче. В любом случае спасибо вам, успехов в обучении!

  • @user-wr1eh3pp6w
    @user-wr1eh3pp6w Місяць тому

    только начал смотреть и уже жду 2 часть! очень круто, спасибо

  • @Begay17
    @Begay17 Місяць тому

    Сможете мне помочь сверстать один макет?)

    • @salimoon17
      @salimoon17 Місяць тому

      можем попробовать вместе

  • @iuliiapankevych547
    @iuliiapankevych547 Місяць тому

    Отличный ввод в профессию) Спасибо.

  • @alexbear2842
    @alexbear2842 Місяць тому

    У меня проблема в VS Code с расширением Codeium - перестали работать подсказки - генерации кода. Я внятного решения проблемы так и не получил.

  • @woodju69
    @woodju69 Місяць тому

    Ролик реально бомбовый, во время верстки узнал много нового, бэм выучил, в scss разобрался, еще и первый сайт сверстал, спасибо огромное тебе!!!

  • @DanyaBudyanu
    @DanyaBudyanu Місяць тому

    Привет. Очень круто!

  • @Sameeec
    @Sameeec Місяць тому

    У студентов нет времени? Тут действительно играют приоритеты. А как быть работающим людям,как учить,когда нужно решать много бытовых вопросов и вообще отдыхать как-то.

    • @andrew_front
      @andrew_front Місяць тому

      В моё время, когда я был студентом времени реально не было, у нас была трудная и большая программа, которая требовала от учеников много времени и внимания, чтобы учиться хотя бы без троек, а я учился на отлично и поэтому моя нагрузка была кратно выше. Что касается взрослых людей, то тут ситуация ещё серьёзнее. Лучший вариант, который я вижу - жить некоторое время на финансовой подушке и переучиваться спокойно в своём темпе - в среднем это за год вполне реализуемо. Проблема в том, что у многих кредиты/обязанности и ситуации разные и подушки финансовой как правило нет, либо маленькая. Поэтому есть вариант 2 - через силу и боль. Где-то урезаем встречи с друзьями, где-то объясняем близким людям почему мы не идём с ними развлекаться. Переработки, ночной коддинг, учёба вместо выходных. Другого варианта нет, это самый сложный путь, но он возможен, если вы готовы идти до конца.

  • @azizbekjuraev1
    @azizbekjuraev1 2 місяці тому

    Why are you using png, instead of svg ? 7:20

  • @BBCTry
    @BBCTry 2 місяці тому

    Многие расширения не актуальны, так как есть встроенная поддержка уже в vs code, допустим тот же тег

    • @andrew_front
      @andrew_front 2 місяці тому

      И что?) Удалите, если не нужны вам. Расширения не главная часть курса.

  • @marinapetit32
    @marinapetit32 2 місяці тому

    помогло.

  • @mikhaildolgov
    @mikhaildolgov 2 місяці тому

    😎👍 так держать!

  • @douleurdivine
    @douleurdivine 2 місяці тому

    Спасибо за это видео!

  • @нитьянандамухамедзянов

    О первый комент, просмотр и лайк!

  • @As1996Kz
    @As1996Kz 3 місяці тому

    Досмотрел видос оч классный кайфовый но тем медленный, поидеи я как тип что шарит и все понимаю, но кто впервые мб им норм. В любом случае я смотрел на 1.5x

    • @andrew_front
      @andrew_front 3 місяці тому

      Спасибо! Да, расчёт был на новичков, которым многое не понятно) Верно, что выбрали 1.5х - так и нужно, если уже многое понимаете в теме.

  • @As1996Kz
    @As1996Kz 3 місяці тому

    Офигенный видос, посмотрел только 15 минут но уже многое понял и принял. P.S. закинь аудио в ИИ плс а то клики мышки слышны не приятны

    • @andrew_front
      @andrew_front 3 місяці тому

      Круто! Рад за вас! Да, ок, пофикшу щелчки.

  • @andrew_front
    @andrew_front 3 місяці тому

    Хочешь стать Frontend-разработчиком? Я лично помогу тебе в решении вопроса! Запись на консультацию и условия здесь: t.me/IT_shopen/143

  • @СтаниславГорячев-г1ъ

    Спасибо за мотивацию

  • @NtDrke
    @NtDrke 3 місяці тому

    Спасибо за урок! Но у меня возник вопрос, ведь адаптив не полноценный. Если зайти в панель разработчика и поставить масштаб 200%, то все станет крупно, значит верстка не подстроилась под размеры экрана полноценно. Если зайти на яндекс(короткий адрес) то как бы ты не увеличивал на десктопе верстка подстраивается под экран.

    • @andrew_front
      @andrew_front 3 місяці тому

      Благодарю за просмотр! Только что перепроверил финальный сайт - адаптив выполнен корректно, вёрстка подстраивается под размер экрана устройства на любом масштабе + можно открыть панель разработчика и попробовать отобразить сайт на разных устройствах - всё смотрится верно. На ПК версии если масштаб увеличивать всё тоже окей - просто всё крупное так как мобильная версия активируется, а у Яндекса по другому реализовано - там на большом масштабе просто сужается интерфейс, а для смартфонов вообще отдельная версия страницы загружается, а в моём курсе просто десктопный сайт превращается в мобильную версию постепенно, но с адаптивом в целом всё в порядке.

  • @srulik5334
    @srulik5334 3 місяці тому

    а у вас тоже ощущение, что он под дулом?

    • @andrew_front
      @andrew_front 3 місяці тому

      Да, заставляют производить контент без остановки)

  • @Adam_Aushev
    @Adam_Aushev 3 місяці тому

    В душу смотришь

  • @Гусь-ж2ъ
    @Гусь-ж2ъ 3 місяці тому

    Hexlet + HTML Academy)

  • @StSeaborgium
    @StSeaborgium 3 місяці тому

    База! Ты либо стремишься и добиваешься, либо остаёшься пользователем ПК.

  • @МатвійМаксимчук-ф8щ
    @МатвійМаксимчук-ф8щ 3 місяці тому

    🔥🔥🔥

  • @ArkatovArt
    @ArkatovArt 3 місяці тому

    лучше расскажи, как ты научился не моргать 52 секунды!

  • @Triplanar
    @Triplanar 3 місяці тому

    Все по факту

  • @juliar7429
    @juliar7429 4 місяці тому

    Очень классное видео! Спасибо😊

  • @vladneskin7823
    @vladneskin7823 4 місяці тому

    Очень качественное видео, спасибо! Конкуренции много, но уверен что подписчики будут только расти в количестве;)

  • @marpusik1277
    @marpusik1277 4 місяці тому

    Спасибо 🙏

  • @andrew_front
    @andrew_front 4 місяці тому

    Хочешь стать Frontend-разработчиком? Я лично помогу тебе в решении вопроса! Запись на консультацию и условия здесь: t.me/IT_shopen/143

  • @forelolit3739
    @forelolit3739 4 місяці тому

    Крайне полезное видео! Особенно помогли фишки vs code

  • @_KLA1N_
    @_KLA1N_ 4 місяці тому

    Спасибо!!!!!!!

  • @ДмитрийСеверин-в7е
    @ДмитрийСеверин-в7е 4 місяці тому

    хорошо что чуть позже покажешь как в программе настроно про неровности кода и пустую балтовню побил вемя однозачно дизлайк

    • @andrew_front
      @andrew_front 4 місяці тому

      Ну вот, собственно, таким как Вы и следует поучиться выравнивать свой код, а в идеале ещё и текст в комментариях + узнать, как запятые ставятся в предложении, ибо я смысл вашего коммента понял только c третьего раза.

    • @ДмитрийСеверин-в7е
      @ДмитрийСеверин-в7е 4 місяці тому

      @@andrew_front 2 фишки уже использую подсветку цветов сss и иконки в проекте удобно на ларе. ставил плагин уже н помню какой он равгяет код в html что впринципе мне совсем не нужно так как работаю в php есть плагин равнять код в php файле на ларе к примеру в шаблоне там php или блат и html это равнять есть плагин.?

    • @ДмитрийСеверин-в7е
      @ДмитрийСеверин-в7е 4 місяці тому

      а вобще ставлю лайк 2 фишки использую

  • @Tosha.V
    @Tosha.V 4 місяці тому

    сделай подобное с SQLite

  • @МарияПостникова-к4ъ
    @МарияПостникова-к4ъ 4 місяці тому

    Спасибо огромное! Узнала много нового!!!

  • @sevdev9374
    @sevdev9374 4 місяці тому

    По семантике лучше делать структуру header main> section footer

    • @andrew_front
      @andrew_front 3 місяці тому

      нуууу хз, подумаю, посмотрю, если что в следующих курсах поправлю, спасибо.

  • @andrew_front
    @andrew_front 4 місяці тому

    Хочешь стать Frontend-разработчиком? Я лично помогу тебе в решении вопроса! Запись на консультацию и условия здесь: t.me/IT_shopen/143

  • @Oleksandr-l9g
    @Oleksandr-l9g 4 місяці тому

    Блин, видео классное, но для начинающих лучше было бы разбить это видео на 2 части и помедленнее. Ставлю скорость на 0.75. Как то пытаюсь вникнуть.

    • @andrew_front
      @andrew_front 4 місяці тому

      да, перебрал я со скоростью, буду улучшать со временем качество видео. Спасибо :)

    • @Oleksandr-l9g
      @Oleksandr-l9g 4 місяці тому

      @@andrew_front В любом случае, спасибо за такую огромную работу. Будем подтягиваться до Вашего уровня.

  • @nekonatapersono8754
    @nekonatapersono8754 4 місяці тому

    Видео классное, только пожалуйста, в следующий раз, если есть такая возможность, записывайте аудио и видео одновременно, потому что записанное аудио после записанного видео не очень удачно ложиться на видеоряд и воспринимать информацию сложно. Аудио с опозданием идёт от видео на 10-20 секунд.

    • @andrew_front
      @andrew_front 4 місяці тому

      попробую, конечно, но такое видео затянется на 4+ часов.