Верстка сайта с JavaScript калькулятором | HTML, CSS Grid, SVG
Вставка
- Опубліковано 19 чер 2024
- 🔥 Хостинг 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 #верстка #версткасайта
Хотелось бы от Вас увидеть побольше про JS для верстальщика
Очень классный урок! Спасибо! 🙏🙏😊
Коммент авансом. Очень люблю Ваши видео Анна. Спасибо за Ваш труд.
Спасибо ☺️
Хочу сказать отдельное спасибо за это видео) потому что всего за час я научилась новым фишкам в верстке 😌 Аня, видео - очень полезное, реально, а комментариев незаслуженно мало!
Спасибо большое ☺️
Анна, больше Вам спасибо, очень интересно и доступно!
😇
Анна,не первый раз смотрю ваши видео,когда возникает какой-либо вопрос,и всегда нахожу ответ именно у вас. Большое спасибо ,что данный контент остаётся доступным!
Рада слышать ❤️
@@annblok_webdev а на хостинге =) можно с Армении оплатить и весь мир будет видеть или только в стране России?
Видос огонь🔥 интересный макет
❤
Анна, спасибо вам за урок!
❤
Классный урок по верстке)))
😇
🔥 Предзапись на обучение - frontendblok.com/forms/courses
Оставить заявку можно до 20 октября. Оставленная заявка ни к чему вас не обязывает, но так вы можете получить максимальную скидку и подарки за участие на курсе: шаблоны договоров для работы с клиентами на фрилансе и дополнительные полезные уроки, которых нет в основной программе обучения.
Скажи пожалуйста, что за тема в VS коде у тебя?))
@@w.o.r.l.d.1.0.1.0 Night Owl
Уже лучше, я рад что вы учитываете замечания своих подписчиков в комментарих и в следующих видео не делаете прошлые ошибки в верстке.
Спасибо за контент
❤️
Благодарю🥰
❤️
Спасибо
Спасибо за старания 💋
Спасибо большое
❤
Анна, спасибо за интересную вёрстку!
Удивился когда увидел в js такие вещи как onclick, var и нестрогое равенство в if. Понимаю, что это не критично для данного проекта, но если не сложно, расскажите, почему пользуетесь именно этими средствами языка?
Анна, спасибо за видео) я узнал для себя что-то новое. У меня ещё вопрос, а почему вы использовали var а не let в JS? Я JS только начинаю изучать и стало интересно.
Не let, а const даже, это во-первых. Во-вторых onclick = calcCost можно записать (ещё лучше - использовать addEventListener). В-третьих, не очень хорошей практикой считается сравнение ==, а не ===. В-четвёртых, 1:15:11 return не возвращает никакую функцию, "которую мы прописали", он (а конкретнее функция calcCost) возвращает undefined
Первый раз смотрю Ваши видео. Подскажите, это видео для любого уровня знаний вёрстки или лучше идти по порядку видео в плейлисте? А то местами нет объяснения, почему мы применили тот или иной приём и как и почему оно работает, да и в целом всё как-то очень быстро, только и успевай ставить на паузу и повторять код
Для новичков это видео подойдёт. Порядок в плейлисте идёт не по сложности, а по дате выпуска.
Привет, Анна. 00:43:50 Зацикленная анимация по кругу, а можно ли сделать так, чтобы текст вращался вокруг картинки, а не иконки?
Вы моя радость
А можно было блок с фотографиями сделать обычным дивом и через 4 значения бордер указать тип border-radius: 0 40px 0 40px к примеру, а картинку через background: url('link') ?
Нужно
Анна подскажите пожалуйста, макет данной верстки будет ? На boosty я его не нашел..
На Boosty опубликовала сейчас. До этого была в дороге, не успела там обновить информацию((
Добрый день Анна а где вы продаете верстанный макет ?
Добрый день, Boosty. Ссылка под видео.
Не могу понять почему так мало лайков!! ВИДОС ОГОНЬ, лайк на канал подписан!!!!!!Спасибо Аня, многое что интересного узнал.
А так всегда. Делаешь образовательный контент, активность низкая, записываешь разговорный на лёгкую тему - активность высокая))
Потому что html+css не очень интересно. Да и вода сплошная который год. Одно и тоже
@@krylovDev слышишь так не смотри
Лоу-код не смотрю
Здравствуйте, подскажите что за программа в которой разрабатывали макет?
Figma
@@sutachanjam ага нашел. Спасибо за помощь.
Напишу коммент, возможно это поможет кому-нибудь сохранить свое время. В видео используется МАКЕТ который ПОКУПАЕТСЯ ЗА ДОНАТ, о том что без него ничего не получиться вы узнаете примерно через 30 минут просмотра. Если не готовы донатить, просто потеряете время.
Спасибо)
Анна а какая у Вас тема для vscode подскажите название
Night Owl
@@annblok_webdev с меня подписка на бусти со следующего месяца
@@agag5083 Всегда рада видеть! 🙌
Можно ведь было вместо обрезания изображения сделать блок и ему background-image, а затем border-radius
Можно, но зато теперь если фигура будет сложнее, то будете знать, как это реализовать 😉
а почему var используете в скрипте? это устаревший синтаксис js
Анимация не работает в Safari.
Уже и проценты добавлял и -webkit, все равно не работает, не понимаю в чем проблема
Немного не по теме выпуска) Будут ли в скором времени розыгрыши книг для разработчиков?))
Вполне возможно
В этом месте есть момент где нужно копировать инфу с макета. А этот макет скачивается за донат. Перестал смотреть на этом месте. Начинается примерно на 25 минуте.
Анна, на каком девайсе пишете код ?
Macbook Pro
@@annblok_webdev а какой год ? )
@@Lithuania-es5wc 2019
количество товара поставить 1 по умолчанию и нет проблем.
Тоже как вариант
можно код?у меня не получается написать код ибо фигма не робит
Все исходники на boosty boosty.to/annblok
Чёт так нудновато