Тёмный

Верстка сайта с JavaScript калькулятором | HTML, CSS Grid, SVG 

Анна Блок
Подписаться 102 тыс.
Просмотров 27 тыс.
50% 1

🔥 Хостинг MasterHost - bit.ly/3KyFN04
Скидка 15% по промокоду ANNBLOK на VPS и виртуальный хостинг
⚡️ Макеты и демо можно получить через донат:
1) по подписке (доступ ко всем макетам) boosty.to/annblok
2) по подписке (доступ ко всем макетам) donut/tpverstak
3) разовая оплата через крипту с получением одного макета new.donatepay.ru/@annblok (в комментариях напишите email)
➡️ Адаптив этой страницы - boosty.to/annblok/posts/e71a0...
🙌 Таймкоды:
00:00:00 Вступление
00:41:00 Хостинг MasterHost
00:04:43 Промокод на скидку 15%
00:04:57 Разбор макета
00:07:23 Подготовка проекта
00:10:26 Подключение шрифтов
00:12:50 Верстка первого блока
00:16:13 Создание CSS переменных
00:21:26 Обрезка изображений через SVG
00:30:54 Подключение normilize
00:31:32 Продолжение верстки первого блока
00:35:44 Верстка второго блока
00:43:50 Зацикленная анимация по кругу
00:52:30 Работа с JavaScript калькулятором
01:17:13 Адаптив страницы
01:17:30 Загрузка файлов на хостинг MasterHost
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
#javascript #созданиесайта #вебразработка #сайты #css #html #верстка #версткасайта

Опубликовано:

 

28 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 73   
@user-lm9ee1gn5p
@user-lm9ee1gn5p Год назад
Хотелось бы от Вас увидеть побольше про JS для верстальщика
@Aleksa013
@Aleksa013 Год назад
Коммент авансом. Очень люблю Ваши видео Анна. Спасибо за Ваш труд.
@annblok_webdev
@annblok_webdev Год назад
Спасибо ☺️
@user-dh3dt5dv6e
@user-dh3dt5dv6e Год назад
Анна,не первый раз смотрю ваши видео,когда возникает какой-либо вопрос,и всегда нахожу ответ именно у вас. Большое спасибо ,что данный контент остаётся доступным!
@annblok_webdev
@annblok_webdev Год назад
Рада слышать ❤️
@mikaelgevorgyan4521
@mikaelgevorgyan4521 Год назад
@@annblok_webdev а на хостинге =) можно с Армении оплатить и весь мир будет видеть или только в стране России?
@user-qj5gw2qy5c
@user-qj5gw2qy5c Год назад
Очень классный урок! Спасибо! 🙏🙏😊
@maryminaweb
@maryminaweb Год назад
Хочу сказать отдельное спасибо за это видео) потому что всего за час я научилась новым фишкам в верстке 😌 Аня, видео - очень полезное, реально, а комментариев незаслуженно мало!
@annblok_webdev
@annblok_webdev Год назад
Спасибо большое ☺️
@DimkaYaa
@DimkaYaa Год назад
Анна, больше Вам спасибо, очень интересно и доступно!
@annblok_webdev
@annblok_webdev Год назад
😇
@ihopeingod1
@ihopeingod1 Год назад
Анна, спасибо вам за урок!
@annblok_webdev
@annblok_webdev Год назад
@Cats_Dogs.
@Cats_Dogs. Год назад
Видос огонь🔥 интересный макет
@annblok_webdev
@annblok_webdev Год назад
@user-gf6oe8nc7s
@user-gf6oe8nc7s Год назад
Уже лучше, я рад что вы учитываете замечания своих подписчиков в комментарих и в следующих видео не делаете прошлые ошибки в верстке.
@redjack6999
@redjack6999 Год назад
Классный урок по верстке)))
@annblok_webdev
@annblok_webdev Год назад
😇
@alpha-dzhem
@alpha-dzhem Год назад
Анна, спасибо за интересную вёрстку! Удивился когда увидел в js такие вещи как onclick, var и нестрогое равенство в if. Понимаю, что это не критично для данного проекта, но если не сложно, расскажите, почему пользуетесь именно этими средствами языка?
@user-lm9ee1gn5p
@user-lm9ee1gn5p Год назад
Спасибо за контент
@annblok_webdev
@annblok_webdev Год назад
❤️
@kamran7295
@kamran7295 8 месяцев назад
Привет, Анна. 00:43:50 Зацикленная анимация по кругу, а можно ли сделать так, чтобы текст вращался вокруг картинки, а не иконки?
@MrGaribasik
@MrGaribasik Год назад
Благодарю🥰
@annblok_webdev
@annblok_webdev Год назад
❤️
@cryfos
@cryfos Год назад
Анна, спасибо за видео) я узнал для себя что-то новое. У меня ещё вопрос, а почему вы использовали var а не let в JS? Я JS только начинаю изучать и стало интересно.
@RavenMusicNest
@RavenMusicNest Год назад
Не let, а const даже, это во-первых. Во-вторых onclick = calcCost можно записать (ещё лучше - использовать addEventListener). В-третьих, не очень хорошей практикой считается сравнение ==, а не ===. В-четвёртых, 1:15:11 return не возвращает никакую функцию, "которую мы прописали", он (а конкретнее функция calcCost) возвращает undefined
@user-gt1ky5mn1j
@user-gt1ky5mn1j Год назад
Спасибо
@leoalex9385
@leoalex9385 Год назад
Спасибо большое
@annblok_webdev
@annblok_webdev Год назад
@evgeniihookah9924
@evgeniihookah9924 Год назад
А можно было блок с фотографиями сделать обычным дивом и через 4 значения бордер указать тип border-radius: 0 40px 0 40px к примеру, а картинку через background: url('link') ?
@RavenMusicNest
@RavenMusicNest Год назад
Нужно
@user-eq9gz9vs2e
@user-eq9gz9vs2e Год назад
Первый раз смотрю Ваши видео. Подскажите, это видео для любого уровня знаний вёрстки или лучше идти по порядку видео в плейлисте? А то местами нет объяснения, почему мы применили тот или иной приём и как и почему оно работает, да и в целом всё как-то очень быстро, только и успевай ставить на паузу и повторять код
@annblok_webdev
@annblok_webdev Год назад
Для новичков это видео подойдёт. Порядок в плейлисте идёт не по сложности, а по дате выпуска.
@lukamj8546
@lukamj8546 Год назад
Напишу коммент, возможно это поможет кому-нибудь сохранить свое время. В видео используется МАКЕТ который ПОКУПАЕТСЯ ЗА ДОНАТ, о том что без него ничего не получиться вы узнаете примерно через 30 минут просмотра. Если не готовы донатить, просто потеряете время.
@Sershir
@Sershir 6 месяцев назад
Спасибо)
@yurok1991
@yurok1991 Год назад
Спасибо за старания 💋
@indexzet
@indexzet Год назад
а почему var используете в скрипте? это устаревший синтаксис js
@hhq258
@hhq258 Год назад
Анна подскажите пожалуйста, макет данной верстки будет ? На boosty я его не нашел..
@annblok_webdev
@annblok_webdev Год назад
На Boosty опубликовала сейчас. До этого была в дороге, не успела там обновить информацию((
@samiribadov6914
@samiribadov6914 Год назад
Здравствуйте, подскажите что за программа в которой разрабатывали макет?
@sutachanjam
@sutachanjam Год назад
Figma
@samiribadov6914
@samiribadov6914 Год назад
@@sutachanjam ага нашел. Спасибо за помощь.
@testsite2371
@testsite2371 Год назад
Добрый день Анна а где вы продаете верстанный макет ?
@annblok_webdev
@annblok_webdev Год назад
Добрый день, Boosty. Ссылка под видео.
@asadullamoldabekov2883
@asadullamoldabekov2883 Год назад
Вы моя радость
@user-oj1og5bw3v
@user-oj1og5bw3v Год назад
Анимация не работает в Safari. Уже и проценты добавлял и -webkit, все равно не работает, не понимаю в чем проблема
@agag5083
@agag5083 Год назад
Анна а какая у Вас тема для vscode подскажите название
@annblok_webdev
@annblok_webdev Год назад
Night Owl
@agag5083
@agag5083 Год назад
@@annblok_webdev с меня подписка на бусти со следующего месяца
@annblok_webdev
@annblok_webdev Год назад
@@agag5083 Всегда рада видеть! 🙌
@min8132
@min8132 Год назад
В этом месте есть момент где нужно копировать инфу с макета. А этот макет скачивается за донат. Перестал смотреть на этом месте. Начинается примерно на 25 минуте.
@yungcashmaker4444
@yungcashmaker4444 Год назад
Можно ведь было вместо обрезания изображения сделать блок и ему background-image, а затем border-radius
@annblok_webdev
@annblok_webdev Год назад
Можно, но зато теперь если фигура будет сложнее, то будете знать, как это реализовать 😉
@annblok_webdev
@annblok_webdev Год назад
🔥 Предзапись на обучение - frontendblok.com/forms/courses Оставить заявку можно до 20 октября. Оставленная заявка ни к чему вас не обязывает, но так вы можете получить максимальную скидку и подарки за участие на курсе: шаблоны договоров для работы с клиентами на фрилансе и дополнительные полезные уроки, которых нет в основной программе обучения.
@w.o.r.l.d.1.0.1.0
@w.o.r.l.d.1.0.1.0 Год назад
Скажи пожалуйста, что за тема в VS коде у тебя?))
@annblok_webdev
@annblok_webdev Год назад
@@w.o.r.l.d.1.0.1.0 Night Owl
@ivanov_roman
@ivanov_roman Год назад
Немного не по теме выпуска) Будут ли в скором времени розыгрыши книг для разработчиков?))
@annblok_webdev
@annblok_webdev Год назад
Вполне возможно
@Lithuania-es5wc
@Lithuania-es5wc Год назад
Анна, на каком девайсе пишете код ?
@annblok_webdev
@annblok_webdev Год назад
Macbook Pro
@Lithuania-es5wc
@Lithuania-es5wc Год назад
@@annblok_webdev а какой год ? )
@annblok_webdev
@annblok_webdev Год назад
@@Lithuania-es5wc 2019
@dmitryraven4141
@dmitryraven4141 Год назад
количество товара поставить 1 по умолчанию и нет проблем.
@annblok_webdev
@annblok_webdev Год назад
Тоже как вариант
@miraschilanov7523
@miraschilanov7523 Год назад
можно код?у меня не получается написать код ибо фигма не робит
@annblok_webdev
@annblok_webdev Год назад
Все исходники на boosty boosty.to/annblok
@progerlife6690
@progerlife6690 Год назад
Не могу понять почему так мало лайков!! ВИДОС ОГОНЬ, лайк на канал подписан!!!!!!Спасибо Аня, многое что интересного узнал.
@annblok_webdev
@annblok_webdev Год назад
А так всегда. Делаешь образовательный контент, активность низкая, записываешь разговорный на лёгкую тему - активность высокая))
@krylovDev
@krylovDev Год назад
Потому что html+css не очень интересно. Да и вода сплошная который год. Одно и тоже
@progerlife6690
@progerlife6690 Год назад
@@krylovDev слышишь так не смотри
@krylovDev
@krylovDev Год назад
Лоу-код не смотрю
@aleksandr.v100
@aleksandr.v100 Год назад
Чёт так нудновато
Далее
신경치료중주의사항
3:07
Просмотров 4 тыс.
Grid сетки в CSS. Часть 1
24:29
Просмотров 9 тыс.