FrontEnd tricks
FrontEnd tricks
  • 38
  • 251 940
Вёрстка сайта для НАЧИНАЮЩИХ | FIGMA | Урок 5
Всем привет, добро пожаловать, на пятый урок из моего нового курса по вёрстке сайта для начинающих
Верстать будем на чистом HTML | CSS без дополнительных инструментов.
Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку!
HtmlBase - bit.ly/3sOc0YR
Это новый курс по вёрстке, верстаем магазин
Дизайн - bit.ly/3NfFvyq
Яндекс диск - bit.ly/3orB9dh
Drive Google - bit.ly/3Au0lT7
Brackets - bit.ly/3JTRTj5
VsCode - bit.ly/3JHaWNn
Поддержать канал - www.donationalerts.com/r/frontendtricks
Телеграм чат - t.me/frontendtrickschat
#Вёрстка #HTML #CSS
มุมมอง: 1 573

วีดีโอ

Вёрстка сайта для НАЧИНАЮЩИХ | FIGMA | Урок 4
มุมมอง 2.1Kปีที่แล้ว
Всем привет, добро пожаловать, на четвертый урок из моего нового курса по вёрстке сайта для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! HtmlBase - bit.ly/3sOc0YR Это новый курс по вёрстке, верстаем магазин Дизайн - bit.ly/3NfFvyq Яндекс диск - bit.ly/3orB9dh Dr...
Вёрстка сайта для НАЧИНАЮЩИХ | FIGMA | Урок 3
มุมมอง 6Kปีที่แล้ว
Всем привет, добро пожаловать, на третий урок из моего нового курса по вёрстке сайта для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! HtmlBase - bit.ly/3sOc0YR Это новый курс по вёрстке, верстаем магазин Дизайн - bit.ly/3NfFvyq Яндекс диск - bit.ly/3orB9dh Drive...
Вёрстка сайта для НАЧИНАЮЩИХ | FIGMA | Урок 2
มุมมอง 8Kปีที่แล้ว
Всем привет, добро пожаловать, на второй урок из моего нового курса по вёрстке сайта для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! HtmlBase - bit.ly/3sOc0YR Это новый курс по вёрстке, верстаем магазин Дизайн - bit.ly/3NfFvyq Яндекс диск - bit.ly/3orB9dh Drive...
Вёрстка сайта для НАЧИНАЮЩИХ | FIGMA | Урок 1
มุมมอง 38Kปีที่แล้ว
Всем привет, добро пожаловать, на первый урок из моего нового курса по вёрстке сайта для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! HtmlBase - bit.ly/3sOc0YR Это новый курс по вёрстке, верстаем магазин Дизайн - bit.ly/3NfFvyq Яндекс диск - bit.ly/3orB9dh Drive...
Получение позиции курсора Javascript | JS
มุมมอง 298ปีที่แล้ว
Простой урок по javascript, получение позиции курсора на странице, и показ тултипа) Поддержать канал - www.donationalerts.com/r/frontendtricks Телеграм чат - t.me/frontendtrickschat Boosty - boosty.to/frontendtricks
Javascript с нуля | Урок 1 | JS
มุมมอง 1.4K2 ปีที่แล้ว
Всем привет, добро пожаловать, на первый урок из моего курса по Javascript, тут я буду стараться максимально просто, и доходчиво объяснять как работает и как писать на JS Поддержать канал - www.donationalerts.com/r/frontendtricks Телеграм чат - t.me/frontendtrickschat 00:00 - Введение 01:38 - Комментарии 03:30 - Вывод в консоль 05:22 - Переменные 07:41 - Типы данных ( Примитивные) 11:44 - Типы ...
#5 | Вёрстка сайта с нуля | Для начинающих | Figma | HTML, CSS
มุมมอง 8K2 ปีที่แล้ว
Всем привет, добро пожаловать, на пятый и заключительный урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! Ссылки: Дизайн - bit.ly/3JxgERO Исходники - bit.ly/3NPOULj HtmlBase - bit.ly/3sOc0YR Can i use - bit.ly/35aLssu ...
#4 | Вёрстка сайта с нуля | Для начинающих | Figma | HTML, CSS
มุมมอง 9K2 ปีที่แล้ว
Всем привет, добро пожаловать, на четвертый урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! Ссылки: Дизайн - bit.ly/3JxgERO Исходники - bit.ly/3NPOULj HtmlBase - bit.ly/3sOc0YR Can i use - bit.ly/35aLssu Brackets - bi...
#3 | Вёрстка сайта с нуля | Для начинающих | Figma | HTML, CSS
มุมมอง 8K2 ปีที่แล้ว
Всем привет, добро пожаловать, на третий урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Ссылки: Дизайн - bit.ly/3JxgERO Исходники - bit.ly/3NPOULj HtmlBase - bit.ly/3sOc0YR Can i use - bit.ly/35aLssu Brackets - bit.ly/3JTRTj5 VsCode - bit.ly/3JHaWNn Поддержать канал - www.donationalerts.com/r/frontendtricks #Вёрстк...
#2 | Вёрстка сайта с нуля | Для начинающих | Figma | HTML, CSS
มุมมอง 20K2 ปีที่แล้ว
Всем привет, добро пожаловать, на второй урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! Ссылки: Дизайн - bit.ly/3JxgERO Исходники - bit.ly/3NPOULj HtmlBase - bit.ly/3sOc0YR Can i use - bit.ly/35aLssu Brackets - bit.l...
#1 | Вёрстка сайта с нуля | Для начинающих | Figma | HTML, CSS
มุมมอง 84K2 ปีที่แล้ว
Всем привет, добро пожаловать, на первый урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! Ссылки: Дизайн - bit.ly/3JxgERO Исходники - bit.ly/3NPOULj HtmlBase - bit.ly/3sOc0YR Can i use - bit.ly/35aLssu Дизайн файлом - ...
Делаем видео Overlay HTML, CSS, JS | Урок 21
มุมมอง 1.9K2 ปีที่แล้ว
Делаем видео Overlay HTML, CSS, JS | Урок 21
Кнопка показать/скрыть пароль | JS Урок 20
มุมมอง 2.9K2 ปีที่แล้ว
Кнопка показать/скрыть пароль | JS Урок 20
Видео Background HTML, CSS | Урок 19
มุมมอง 3642 ปีที่แล้ว
Видео Background HTML, CSS | Урок 19
Gradient Border HTML, CSS | Урок 18
มุมมอง 7823 ปีที่แล้ว
Gradient Border HTML, CSS | Урок 18
Javascript parallax | Урок 17
มุมมอง 2683 ปีที่แล้ว
Javascript parallax | Урок 17
Javascript для модального окна | Урок 16.1
มุมมอง 3013 ปีที่แล้ว
Javascript для модального окна | Урок 16.1
Вёрстка модального окна HTML,CSS | Урок 16
มุมมอง 6573 ปีที่แล้ว
Вёрстка модального окна HTML,CSS | Урок 16
Nav scroll на Vanilla Javascript | Урок 15.1
มุมมอง 2733 ปีที่แล้ว
Nav scroll на Vanilla Javascript | Урок 15.1
ScrollSpy на Vanilla Javascript | Урок 15
มุมมอง 5643 ปีที่แล้ว
ScrollSpy на Vanilla Javascript | Урок 15
Валидация формы на Javascript | Урок 14
มุมมอง 22K3 ปีที่แล้ว
Валидация формы на Javascript | Урок 14
Анимация при загрузке сайта HTML, CSS | Урок 13
มุมมอง 6K3 ปีที่แล้ว
Анимация при загрузке сайта HTML, CSS | Урок 13
Фиксируем шапку при прокрутке сайта Javascript | Урок 12
มุมมอง 4.6K3 ปีที่แล้ว
Фиксируем шапку при прокрутке сайта Javascript | Урок 12
Flip карточки на HTML, CSS | Урок 11
มุมมอง 1.3K3 ปีที่แล้ว
Flip карточки на HTML, CSS | Урок 11
Полоса прогресса при прокрутке сайта Javascript | Урок 10
มุมมอง 7813 ปีที่แล้ว
Полоса прогресса при прокрутке сайта Javascript | Урок 10
Ставим Google maps на сайт Javascript | Урок 9
มุมมอง 4.4K3 ปีที่แล้ว
Ставим Google maps на сайт Javascript | Урок 9
Получение изображения с выбранного файла Javascript | Урок 8
มุมมอง 9243 ปีที่แล้ว
Получение изображения с выбранного файла Javascript | Урок 8
Кнопка для меню "Burger" на HTML, CSS | Урок 7
มุมมอง 8143 ปีที่แล้ว
Кнопка для меню "Burger" на HTML, CSS | Урок 7
Прижимаем Footer к низу страницы на HTML, CSS | Урок 6
มุมมอง 6613 ปีที่แล้ว
Прижимаем Footer к низу страницы на HTML, CSS | Урок 6

ความคิดเห็น

  • @necr0ssis
    @necr0ssis หลายเดือนก่อน

    Спасибо за урок! Часа 2 пытался найти скрипт под несколько инпутов с паролем... Лучший

  • @olegkostiv2971
    @olegkostiv2971 2 หลายเดือนก่อน

    почему-то не отображается .header__link-event... два раза проверял... никак...

  • @МаринаРадченко-е7ж
    @МаринаРадченко-е7ж 2 หลายเดือนก่อน

    Благодарю. Полезное видео. Хотелось бы еще подобное видео, но с адаптивным дизайном.

  • @МаксимСерёгин-х5ц
    @МаксимСерёгин-х5ц 4 หลายเดือนก่อน

    А как сделать с бордер радиусом, чтобы фон был прозрачный а содержимое то есть текст тоже был грвдиент?

  • @МясоХаляль-ж2м
    @МясоХаляль-ж2м 7 หลายเดือนก่อน

    Как же ты хорошо объясняешь бро

  • @IvanKeats-q3q
    @IvanKeats-q3q 7 หลายเดือนก่อน

    19:40 20:00

  • @lvovich_biz
    @lvovich_biz 8 หลายเดือนก่อน

    Пушка 🎉🎉🎉

  • @НиколайНиколаев-х1ц
    @НиколайНиколаев-х1ц 8 หลายเดือนก่อน

    Так хорошо начал в начале, всё объяснял а теперь 3 урок, тараторит, альтабается с максимальной скоростью

  • @НиколайНиколаев-х1ц
    @НиколайНиколаев-х1ц 8 หลายเดือนก่อน

    transition : background-color не работает, смотрел в справочнике HTMLBase там такой команды нету

  • @НиколайНиколаев-х1ц
    @НиколайНиколаев-х1ц 8 หลายเดือนก่อน

    хороший контент для начинающих👍

  • @lookforthesky
    @lookforthesky 8 หลายเดือนก่อน

    почему вся верстка слетает вплане масштаба из-за паддингов будто

  • @IvanKeats-q3q
    @IvanKeats-q3q 9 หลายเดือนก่อน

    8:30 11:40 12:35 12:55 13:07 15:00 16:55 18:10 21:35 24:54 26:40 28:31

  • @IvanKeats-q3q
    @IvanKeats-q3q 9 หลายเดือนก่อน

    25:00

  • @doccok
    @doccok 9 หลายเดือนก่อน

    Наконец-то по вашим видео сверстал сайт все очень понятно и коротко . Одним словом топ!!!

  • @kutehell
    @kutehell 9 หลายเดือนก่อน

    жаль, пока новая часть выходила уже смог сам доделать макет. спасибо, ты много чему научил

  • @АнатолийШуменков-р2х
    @АнатолийШуменков-р2х 9 หลายเดือนก่อน

    не работают ссылки на макет

  • @ОлуксійСергіїович
    @ОлуксійСергіїович 10 หลายเดือนก่อน

    мы используем теги header footer main ..... и прочие песятки тегов 1 для четкой симантики корректной верстки что говорит о вашем професионализме. 2 читаемость структуры становиться в разы проще. 3 поисковые роботы смогут точнее идентифецировать структуру вашего сайта что играет ключевую роль для поискового запроса пользователем. А не потому что нам так проще...

  • @baboon_hero
    @baboon_hero 10 หลายเดือนก่อน

    Топ !

  • @baboon_hero
    @baboon_hero 10 หลายเดือนก่อน

    Как раз хотел узнать как сделать валидацию формы и бац наткнулся на твое видео. Это топчик !!!!!!!!!!!

  • @baboon_hero
    @baboon_hero 10 หลายเดือนก่อน

    Очень понятно объясняете спасибо 🤗

  • @baboon_hero
    @baboon_hero 10 หลายเดือนก่อน

    Спасибо огромное за твой обучающий видеоролик - продолжай свое дело 😊

  • @Санька-г6у
    @Санька-г6у 10 หลายเดือนก่อน

    лучший видос

  • @Java-Develop
    @Java-Develop 10 หลายเดือนก่อน

    Очень интересно и понятно . С нас однозначно лайк 👍🏻 🎉

  • @tumannnn888
    @tumannnn888 10 หลายเดือนก่อน

    Что за сайт на котором ты это всё делал?

    • @electron_kg
      @electron_kg 6 หลายเดือนก่อน

      Что за вопрос........

  • @АбайШайкенов-ь3ш
    @АбайШайкенов-ь3ш 10 หลายเดือนก่อน

    Вопрос, такая практика реально помогает новичкам?

  • @ivanvyskrebentsev3017
    @ivanvyskrebentsev3017 11 หลายเดือนก่อน

    офигенные уроки. спасибо

  • @allaghayfajyan8753
    @allaghayfajyan8753 11 หลายเดือนก่อน

    Большое спасибо за подробное объяснение, все понятно и очень интересно 🥰

  • @КонстантинСуетин-ь8з
    @КонстантинСуетин-ь8з 11 หลายเดือนก่อน

    Отличное простое решение. Повторил и все получилось! спасибо огромное!

  • @Funto-zl6ly
    @Funto-zl6ly 11 หลายเดือนก่อน

    Привет! Я хочу спросить почему у меня не отображается картинка мусорки. Она у меня не отображается, по этому, что бы ее увидеть надо написать в альт. Ка решить эту проблему? (Извините за грамматические ошибки, у меня русский язык убрали ещё в 4 классе

  • @ЮрийБарабаш-г4д
    @ЮрийБарабаш-г4д 11 หลายเดือนก่อน

    @frontendtrickschat не найден

  • @ЮрийБарабаш-г4д
    @ЮрийБарабаш-г4д 11 หลายเดือนก่อน

    Зачем нужен overlay? В плане пользы для общего развития в навыках верстки, это хорошо. Но какая практическая польза в плане дизайна? Кстати, я использовал z-index 1 и 2 соответственно и всё также работает. Допускаю, что я недальновиден. Просто хочу во всем разобраться и ставлю попутно эксперименты. Позиционирование и геометрия для меня очень запутанная история. Не могу уяснить механизм сдвига header на intro. Мне не хватает практических примеров по этому моменту. Нужно посмотреть что-нибудь простое и наглядное с разноцветными квадратиками или кружочками)) Посоветуйте пожалуйста. Заранее благодарен. И ещё. Мне не очень нравится этот макет. Хотелось бы чтобы дизайнер прописал поконкретнее отступы между элементами. Макет необходимо доработать. Добавить нужное и убрать лишнее. Хотя, если этот макет был задуман как тренировочный для верстальщиков, то преодолевание трудностей ведет к ещё большей мудрости. PS: Мои выводы и суждения могут быть ошибочными. Я не верстальщик и не дизайнер, а только начинаю учиться.

  • @gamechanel921
    @gamechanel921 ปีที่แล้ว

    Супер очень нравится такой контент. А у вас есть файл код этого урока если да то скиньте вашем тг канале буду очень благодарен если сделаете!!!

  • @gamechanel921
    @gamechanel921 ปีที่แล้ว

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

  • @IvanKeats-q3q
    @IvanKeats-q3q ปีที่แล้ว

    6:00 11:50 14:50 17:18 17:43 20:50 30:25 30:10

  • @fluent_if_english
    @fluent_if_english ปีที่แล้ว

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

    • @FrontEndtricks
      @FrontEndtricks ปีที่แล้ว

      вам нужно скачать плагин Emmet в brackets и тогда будет) а мой редактор это phpStorm

  • @BezhovHF
    @BezhovHF ปีที่แล้ว

    Спасибо, жду ещё видео 🙃

  • @BezhovHF
    @BezhovHF ปีที่แล้ว

    Спасибо, что продолжили

  • @dorichez
    @dorichez ปีที่แล้ว

    Привет, тутор отличный, не мог бы ты пояснить еще раз за display:block в products__img. Не совсем понятно зачем он там нужен. Я вроде и так и так посмотрел и отличий не увидел, а общее представление поломалось немного. Буду благодарен если ответишь

  • @BezhovHF
    @BezhovHF ปีที่แล้ว

    Спасибо большое, благодаря тебе понял многое

  • @IvanKeats-q3q
    @IvanKeats-q3q ปีที่แล้ว

    5:25,8:05,9:53,13:40,14:53,15:45,15:50,19:15,22:40,26:00,27:38,27:55,28:26,29:20

  • @mortarion766
    @mortarion766 ปีที่แล้ว

    Спасибо за проект в мою копилку гитхаба))

  • @Санька-г6у
    @Санька-г6у ปีที่แล้ว

    а ни у кого случаем нет готового кода

    • @Funto-zl6ly
      @Funto-zl6ly 11 หลายเดือนก่อน

      А тебе зачем?

  • @IvanKeats-q3q
    @IvanKeats-q3q ปีที่แล้ว

    7:15 почему intro__block не подошел как родитель для блока ? зачем понадобился еще wrapper ?

  • @Funto-zl6ly
    @Funto-zl6ly ปีที่แล้ว

    Когда подключал анимку при помощи hover, но решил выебнуться и подключил библиотеку анимейт. А потом код в помойку потому, что я заебался искать ошибку 😎😎😎

  • @IvanKeats-q3q
    @IvanKeats-q3q ปีที่แล้ว

    59:20 как по мне ,лучше их родителю задать gap:30px чтобы небыло лишних марджинов

  • @aleksandramerabishvili4011
    @aleksandramerabishvili4011 ปีที่แล้ว

    А еще будут ?

  • @aleksandramerabishvili4011
    @aleksandramerabishvili4011 ปีที่แล้ว

    Привет а еще будут?

  • @Санька-г6у
    @Санька-г6у ปีที่แล้ว

    а это прям крайний урок по теме??

  • @Санька-г6у
    @Санька-г6у ปีที่แล้ว

    спасибо!!!!! ты делаешь кое-что крутое

  • @Hardtotell-t5n
    @Hardtotell-t5n ปีที่แล้ว

    Большое СПАСИБО