FrontEnd tricks
FrontEnd tricks
  • 38
  • 250 079
Вёрстка сайта для НАЧИНАЮЩИХ | 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 537

Відео

Вёрстка сайта для НАЧИНАЮЩИХ | FIGMA | Урок 4
Переглядів 2,1 тис.Рік тому
Всем привет, добро пожаловать, на четвертый урок из моего нового курса по вёрстке сайта для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! HtmlBase - bit.ly/3sOc0YR Это новый курс по вёрстке, верстаем магазин Дизайн - bit.ly/3NfFvyq Яндекс диск - bit.ly/3orB9dh Dr...
Вёрстка сайта для НАЧИНАЮЩИХ | FIGMA | Урок 3
Переглядів 6 тис.Рік тому
Всем привет, добро пожаловать, на третий урок из моего нового курса по вёрстке сайта для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! HtmlBase - bit.ly/3sOc0YR Это новый курс по вёрстке, верстаем магазин Дизайн - bit.ly/3NfFvyq Яндекс диск - bit.ly/3orB9dh Drive...
Вёрстка сайта для НАЧИНАЮЩИХ | FIGMA | Урок 2
Переглядів 8 тис.Рік тому
Всем привет, добро пожаловать, на второй урок из моего нового курса по вёрстке сайта для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! HtmlBase - bit.ly/3sOc0YR Это новый курс по вёрстке, верстаем магазин Дизайн - bit.ly/3NfFvyq Яндекс диск - bit.ly/3orB9dh Drive...
Вёрстка сайта для НАЧИНАЮЩИХ | FIGMA | Урок 1
Переглядів 37 тис.Рік тому
Всем привет, добро пожаловать, на первый урок из моего нового курса по вёрстке сайта для начинающих Верстать будем на чистом HTML | CSS без дополнительных инструментов. Нужен хостинг? bit.ly/3Hs71W2 Сервис по доменам и хостингу, регистрируйся по ссылке, получи скидку! HtmlBase - bit.ly/3sOc0YR Это новый курс по вёрстке, верстаем магазин Дизайн - bit.ly/3NfFvyq Яндекс диск - bit.ly/3orB9dh Drive...
Получение позиции курсора Javascript | JS
Переглядів 291Рік тому
Простой урок по javascript, получение позиции курсора на странице, и показ тултипа) Поддержать канал - www.donationalerts.com/r/frontendtricks Телеграм чат - t.me/frontendtrickschat Boosty - boosty.to/frontendtricks
Javascript с нуля | Урок 1 | JS
Переглядів 1,4 тис.2 роки тому
Всем привет, добро пожаловать, на первый урок из моего курса по 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
Переглядів 8 тис.2 роки тому
Всем привет, добро пожаловать, на пятый и заключительный урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом 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
Переглядів 9 тис.2 роки тому
Всем привет, добро пожаловать, на четвертый урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом 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
Переглядів 8 тис.2 роки тому
Всем привет, добро пожаловать, на третий урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом 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
Переглядів 20 тис.2 роки тому
Всем привет, добро пожаловать, на второй урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом 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
Переглядів 84 тис.2 роки тому
Всем привет, добро пожаловать, на первый урок из моего курса по вёрстке сайта с нуля для начинающих Верстать будем на чистом 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,9 тис.2 роки тому
Делаем видео Overlay HTML, CSS, JS | Урок 21
Кнопка показать/скрыть пароль | JS Урок 20
Переглядів 2,9 тис.2 роки тому
Кнопка показать/скрыть пароль | JS Урок 20
Видео Background HTML, CSS | Урок 19
Переглядів 3522 роки тому
Видео Background HTML, CSS | Урок 19
Gradient Border HTML, CSS | Урок 18
Переглядів 7583 роки тому
Gradient Border HTML, CSS | Урок 18
Javascript parallax | Урок 17
Переглядів 2643 роки тому
Javascript parallax | Урок 17
Javascript для модального окна | Урок 16.1
Переглядів 2973 роки тому
Javascript для модального окна | Урок 16.1
Вёрстка модального окна HTML,CSS | Урок 16
Переглядів 6443 роки тому
Вёрстка модального окна HTML,CSS | Урок 16
Nav scroll на Vanilla Javascript | Урок 15.1
Переглядів 2723 роки тому
Nav scroll на Vanilla Javascript | Урок 15.1
ScrollSpy на Vanilla Javascript | Урок 15
Переглядів 5523 роки тому
ScrollSpy на Vanilla Javascript | Урок 15
Валидация формы на Javascript | Урок 14
Переглядів 22 тис.3 роки тому
Валидация формы на Javascript | Урок 14
Анимация при загрузке сайта HTML, CSS | Урок 13
Переглядів 5 тис.3 роки тому
Анимация при загрузке сайта HTML, CSS | Урок 13
Фиксируем шапку при прокрутке сайта Javascript | Урок 12
Переглядів 4,5 тис.3 роки тому
Фиксируем шапку при прокрутке сайта Javascript | Урок 12
Flip карточки на HTML, CSS | Урок 11
Переглядів 1,3 тис.3 роки тому
Flip карточки на HTML, CSS | Урок 11
Полоса прогресса при прокрутке сайта Javascript | Урок 10
Переглядів 7593 роки тому
Полоса прогресса при прокрутке сайта Javascript | Урок 10
Ставим Google maps на сайт Javascript | Урок 9
Переглядів 4,3 тис.3 роки тому
Ставим Google maps на сайт Javascript | Урок 9
Получение изображения с выбранного файла Javascript | Урок 8
Переглядів 8923 роки тому
Получение изображения с выбранного файла Javascript | Урок 8
Кнопка для меню "Burger" на HTML, CSS | Урок 7
Переглядів 7853 роки тому
Кнопка для меню "Burger" на HTML, CSS | Урок 7
Прижимаем Footer к низу страницы на HTML, CSS | Урок 6
Переглядів 6513 роки тому
Прижимаем Footer к низу страницы на HTML, CSS | Урок 6

КОМЕНТАРІ

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

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

  • @olegkostiv2971
    @olegkostiv2971 12 днів тому

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

  • @МаринаРадченко-е7ж

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

  • @МаксимСерёгин-х5ц
    @МаксимСерёгин-х5ц 2 місяці тому

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

  • @МясоХаляль-ж2м
    @МясоХаляль-ж2м 5 місяців тому

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

  • @IvanKeats-q3q
    @IvanKeats-q3q 6 місяців тому

    19:40 20:00

  • @lvovich_biz
    @lvovich_biz 6 місяців тому

    Пушка 🎉🎉🎉

  • @НиколайНиколаев-х1ц
    @НиколайНиколаев-х1ц 6 місяців тому

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

  • @НиколайНиколаев-х1ц
    @НиколайНиколаев-х1ц 6 місяців тому

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

  • @НиколайНиколаев-х1ц
    @НиколайНиколаев-х1ц 6 місяців тому

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

  • @lookforthesky
    @lookforthesky 7 місяців тому

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

  • @IvanKeats-q3q
    @IvanKeats-q3q 7 місяців тому

    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 7 місяців тому

    25:00

  • @doccok
    @doccok 7 місяців тому

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

  • @kutehell
    @kutehell 8 місяців тому

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

  • @АнатолийШуменков-р2х
    @АнатолийШуменков-р2х 8 місяців тому

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

  • @ОлуксійСергіїович
    @ОлуксійСергіїович 8 місяців тому

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

  • @baboon_hero
    @baboon_hero 8 місяців тому

    Топ !

  • @baboon_hero
    @baboon_hero 8 місяців тому

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

  • @baboon_hero
    @baboon_hero 8 місяців тому

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

  • @baboon_hero
    @baboon_hero 8 місяців тому

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

  • @Санька-г6у
    @Санька-г6у 8 місяців тому

    лучший видос

  • @Java-Develop
    @Java-Develop 9 місяців тому

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

  • @tumannnn888
    @tumannnn888 9 місяців тому

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

    • @electron_kg
      @electron_kg 5 місяців тому

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

  • @АбайШайкенов-ь3ш
    @АбайШайкенов-ь3ш 9 місяців тому

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

  • @ivanvyskrebentsev3017
    @ivanvyskrebentsev3017 9 місяців тому

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

  • @allaghayfajyan8753
    @allaghayfajyan8753 9 місяців тому

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

  • @КонстантинСуетин-ь8з
    @КонстантинСуетин-ь8з 9 місяців тому

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

  • @Funto-zl6ly
    @Funto-zl6ly 10 місяців тому

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

  • @ЮрийБарабаш-г4д
    @ЮрийБарабаш-г4д 10 місяців тому

    @frontendtrickschat не найден

  • @ЮрийБарабаш-г4д
    @ЮрийБарабаш-г4д 10 місяців тому

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

  • @gamechanel921
    @gamechanel921 10 місяців тому

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

  • @gamechanel921
    @gamechanel921 10 місяців тому

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

  • @IvanKeats-q3q
    @IvanKeats-q3q 11 місяців тому

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

  • @fluent_if_english
    @fluent_if_english 11 місяців тому

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

    • @FrontEndtricks
      @FrontEndtricks 11 місяців тому

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

  • @BezhovHF
    @BezhovHF 11 місяців тому

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

  • @BezhovHF
    @BezhovHF 11 місяців тому

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

  • @dorichez
    @dorichez 11 місяців тому

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

  • @BezhovHF
    @BezhovHF 11 місяців тому

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

  • @IvanKeats-q3q
    @IvanKeats-q3q 11 місяців тому

    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 11 місяців тому

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

  • @Санька-г6у
    @Санька-г6у 11 місяців тому

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

    • @Funto-zl6ly
      @Funto-zl6ly 10 місяців тому

      А тебе зачем?

  • @IvanKeats-q3q
    @IvanKeats-q3q 11 місяців тому

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

  • @Funto-zl6ly
    @Funto-zl6ly 11 місяців тому

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

  • @IvanKeats-q3q
    @IvanKeats-q3q 11 місяців тому

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

  • @aleksandramerabishvili4011
    @aleksandramerabishvili4011 11 місяців тому

    А еще будут ?

  • @aleksandramerabishvili4011
    @aleksandramerabishvili4011 11 місяців тому

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

  • @Санька-г6у
    @Санька-г6у 11 місяців тому

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

  • @Санька-г6у
    @Санька-г6у 11 місяців тому

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

  • @Hardtotell-t5n
    @Hardtotell-t5n 11 місяців тому

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