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

Скидка 15% по промокоду ANNBLOK на VPS и виртуальный хостинг

⚡️ Макеты и демо можно получить через донат:

🙌 Таймкоды:
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

#javascript #созданиесайта #вебразработка #сайты #css #html #верстка #версткасайта

[maryminaweb]

Хочу сказать отдельное спасибо за это видео) потому что всего за час я научилась новым фишкам в верстке 😌 Аня, видео - очень полезное, реально, а комментариев незаслуженно мало!

[dhdtdve]

Анна, не первый раз смотрю ваши видео, когда возникает какой-либо вопрос, и всегда нахожу ответ именно у вас. Большое спасибо, что данный контент остаётся доступным!

[lmeegnp]

Хотелось бы от Вас увидеть побольше про JS для верстальщика

[DimkaYaa]

Анна, больше Вам спасибо, очень интересно и доступно!

[Aleksa]

Коммент авансом. Очень люблю Ваши видео Анна. Спасибо за Ваш труд.

[gfoencs]

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

[evgeniihookah]

А можно было блок с фотографиями сделать обычным дивом и через 4 значения бордер указать тип border-radius: 0 40px 0 40px к примеру, а картинку через background: url('link') ?

[lukamj]

Напишу коммент, возможно это поможет кому-нибудь сохранить свое время. В видео используется МАКЕТ который ПОКУПАЕТСЯ ЗА ДОНАТ, о том что без него ничего не получиться вы узнаете примерно через 30 минут просмотра. Если не готовы донатить, просто потеряете время.

[olivias]

Спасибо за интересный урок, посоветуйте хорошую документацию по SVG.

[progerlife]

Не могу понять почему так мало лайков!! ВИДОС ОГОНЬ, лайк на канал Аня, многое что интересного узнал.

[kamran]

Привет, Анна. 00:43:50 Зацикленная анимация по кругу, а можно ли сделать так, чтобы текст вращался вокруг картинки, а не иконки?

[cryfos]

Анна, спасибо за видео) я узнал для себя что-то новое. У меня ещё вопрос, а почему вы использовали var а не let в JS? Я JS только начинаю изучать и стало интересно.

[eqgzvse]

Первый раз смотрю Ваши видео. Подскажите, это видео для любого уровня знаний вёрстки или лучше идти по порядку видео в плейлисте? А то местами нет объяснения, почему мы применили тот или иной приём и как и почему оно работает, да и в целом всё как-то очень быстро, только и успевай ставить на паузу и повторять код

[alpha-dzhem]

Анна, спасибо за интересную вёрстку!
Удивился когда увидел в js такие вещи как onclick, var и нестрогое равенство в if. Понимаю, что это не критично для данного проекта, но если не сложно, расскажите, почему пользуетесь именно этими средствами языка?

[indexzet]

а почему var используете в скрипте? это устаревший синтаксис js

[testsite]

Добрый день Анна а где вы продаете верстанный макет ?

[hhq]

Анна подскажите пожалуйста, макет данной верстки будет ? На boosty я его не нашел..

[ojogbwv]

Анимация не работает в Safari.
Уже и проценты добавлял и -webkit, все равно не работает, не понимаю в чем проблема

[dmitryraven]

количество товара поставить 1 по умолчанию и нет проблем.

[agag]

Анна а какая у Вас тема для vscode подскажите название