Верстка сайта с нуля для начинающих | HTML, Flexbox CSS, Swiper | Создаем сайт веб-студии
Vložit
- čas přidán 8. 06. 2024
- 🔥 Зарегистрируй 10 доменов в зонах .ru и .рф по цене 10 рублей за домен на хостинге Beget: beget.com/s/DJC8o
✅ Акция продлиться с 20 апреля 2023 по 19 мая 2023 года включительно. Полные правила акции: beget.com/s/paXGn
⚡️ Макет и код можно получить через донат:
1) по подписке (доступ ко всем макетам) boosty.to/annblok
2) по подписке (доступ ко всем макетам) donut/tpverstak
3) разовая оплата через крипту new.donatepay.ru/@annblok (в комментариях напишите email и название видео)
👇 Таймкоды:
00:00:00 Коротко про проект
00:00:47 Реклама Beget
00:02:00 Подготовка проекта
00:03:31 Устанавливаем шрифт
00:04:45 Работаем с цветом
00:06:36 Сохраняем изображения
00:08:56 Верстаем главный блок
00:25:58 Делаем отступы между блокам
00:37:42 Устанавливаем баннер
00:43:10 Добавляем белый блок за пределами
00:45:28 Верстаем блок с отзывами
01:12:07 Итог
✅ Плейлист с практикой: • Создание сайтов на пра...
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/
Таких симпатичных людей в сто раз приятнее смотреть и слушать чем иных специалистов 😅
Как же здорово Вы всё объясняете! Легко и просто для восприятия выходит Ваша подача материала ))
Огромное спасибо за создание этого видео~
Круто когда есть такие люди которые всё дословно объясняют. Молодцы😊
Люблю смотреть такие классные видео: все четко, понятно и доступно объясняете. спасибо!
все легко и доступно рассказано, полезная информация!
Все понятно и доходчиво объяснила! Большое спасибо!
Ваш урок по созданию сайта на столько просто и доступен,что понятно будет даже новичку.Спасибо за информацию и рекомендации.
Обизательно сохраним, спасибо за обзор сайта
О новое видео. Нравится ваша подача знаний. Все очень доступно и понятно.
Спасибо, что так подробно объяснили все тонкости верстки сайта
Легко и просто воспринимается информация. Спасибо за хорошую подачу материала.
Благодарю вас дорогая,очень полезная информация!!!))).Я сейчас,как раз начинаю это глубоко изучать и хочу заработать на этом!
Спасибо большое за легкую и интересную инструкцию 😊
Я как раз новичок в этом деле, спасибо за помощь
Очень понравилось! Спасибо вам за такие видео на ютубе
Такого УЧИТЕЛЯ я готов слушать БЕСКОНЕЧНО ! .... +300% эффективности обучения (когда слюнки течь перестанут от такой милоты преподавателя) ))))
Когда-то пробовал учиться верстке, но забросил. Теперь думаю, что зря...Объясняете понятно и просто!
Спасибо за видео!
Скачал уже готовые скрипты. Сделал сам свой сайт. Спасибо за видео!
Спасибо за обзор, было очень интересно послушать
Понятно и просто всё объяснили , видео получилось информативным и полезным.
❤ я даже не думала что достаточно просто пару движений мушкой безумно благодарна за такую информацию❤
лолшто?
Дуже детально, дякую!
спасибо за полезную информацию за то что вы так интересно понятно объяснили спасибо вам большое
Очень красивое и качественное видео! Продолжайте в том же духе с меня лайкос....
Отличная акция, я буду себе регистрировать тоже
Интересная альтернатива но не много сложнее, чем через Jquery, но в любом случае, спасибо за подробную, наглядную инструкцию.
Полезные знания, которые помогут заработать много денег, и это очень классно, и супер, вообще молодец
довольно таки интересное видео
Кстатит, без шуток, давно искал эту информацию, чтобы сделать оригинальный сайт и вот пожалуйста полный гайд!
Знакомый решил освоить ремесло верстальщика, попросил помочь в этом деле.
Анна вот Вам я верю и готов учиться . Мне правда без надобности но то как вы все подаете подкупает.
Аня скажите пожалуйста, а где можно скачать файл с макетом фигмы? Чтобы сайт с вами по видео сделать:)
Beautiful
милая девушка . Спасибо за данные ролики)
Я сейчас,как раз начинаю это глубоко изучать и хочу заработать на этом!
Казалось бы это неимоверно сложно, но если захотеть то должно получится, спасибо за ваши советы👍👍
В начале всё сложно, а потом раз плюнуть, это со всем так.
В ближайшее время скорее всего появятся специальные проекты нейросети, которые будут автоматически создавать сайты по заданным параметрам.
Почему Вы не пользуетесь плагином, который быстро переносит все классы?
интересное и нужное видео дл тех кто делает верстку сайтов
Никогда бы не подумал, что в 2023 году сделать свой сайт будет не только достаточно легко но ещё и не потребуется почти вложений.
HTML - это основа всех современных сайтов.
а почему лучше использовать переменные, а не обычные коды колоров. Я супер навичок, извиняюсь, если вопрос глупый. Не понял просто.
Блок 🍊
Самостоятельно трудно и вряд ли получиться. Спасибо за помощь.
Анна, с какой программой мы делаем урок из этого видео?
VS Code
@@annblok_webdev Спасибо, Аня! Ты умница!
Можно еще для надёжности добавить "text-transform: capitalize;", там только в шапке в трёх местах проситься. А адаптив?
А зачем оно?
@@umnyicoder По макету видно, что дизайнер подразумевает, что в этих блоках все слова будут начинаться с заглавной. Значит в той же CMS для дальнейшего удобства можно заранее забить это свойством css. Это не обязательно, скорее как хороший тон от верстальщика.
@@ZPUA24 но ведь не факт, что оно пойдёт в CMS
@@umnyicoder Не факт. Это только на усмотрение верстальщика, если конкретно не прописано в ТЗ.
@@ZPUA24 Интересное замечание, никогда такое не делал, но... it makes sense! TY
да практика очень важна в обучении создания сайтов но всё таки думаю тем кто серьёзно начинает изучать это направление то должен использовать не только готовые скрипты но и самому учится их делать
Нууу... допустим, я могу навелосипедить слайдер (т.е. реально делал), причем даже с синхронной сменой контента в каком-то другом месте страницы одновременно со слайдами. Только зачем мне тратить время на прикручивание к нему всяких наворотов, когда "все уже сделано до нас"?
@@alext5030 возможно и так не буду спорить
Для тренировки да, но для реальной работы лучше нет)
Хорошая акция. Но выбрать имя сложно... у меня никогда не было таланта подбирать названия.
Почему пиксели?не vw vh?
vw используется в gap, vh можно будет использовать, если работать с адаптивом, чтобы контент по высоте разместился равномерно
Очень хочется видеть применение SCSS
Это уже не модно и смысла нет.
В css давно уже есть переменные, матиматические вычисления, а миксины заменяются классами.
Видео с CSS есть в плейлисте с практикой 🙌
@@virtuoz-ru Какие же глупости, препроцессоры это не только переменные
@@virtuoz-ru главным идет скорость работы. С препроцессором она в несколько раз выше, чем просто с css. Не говоря уже о всяких фишках типа автопрефиксов и прочего
@@Sacar666 Абсолютно не быстрее. Автопрефиксы уже браузерам не нужны. Как 5 лет все браузеры всё понимают. А если тебе внушили, что нужно поддерживать браузеры 20-ти летней давности, которыми уже не пользуются, но вдруг, то это глупости.
Давай какой-нибудь урок для заканчивающих, а то прям какая-то дискриминация, все начинающим да начинающим.
🤣🤣🤣
Веб технологии так быстро развиваются, вы всегда найдете что то для начинающих)
🤣🤣🤣👍
Для заканчивающих гуглить видео "Как выйти из айти" 😂
Swiper самый муторный слайдер из всех, в более сложных проектах добавляет столько запара, лучше использовать splide
А что в нем не так, кроме негуманного веса?
Swiper 8 или Swiper 9 , есть разница?
Да вроди нет
@@umnyicoder Спасибо!
@@umnyicoder Если б не было, то зачем менять версию?))
@@j-lewis Изменения ради изменения уже 15+ лет как являются краеугольным камнем любого программирования, кроме, разве что, каких-нибудь критических областей (это не про твиттеры, если что). Почти все senior-ы и большинство middle-ов такой подход называют "развитием". Sad, but true. Такая фигня...
@@alext5030 Сложно не согласиться, 80% апдейтов фуфел, как вы и описали, но не 100% же. К тому же фуфел обычно клепают в х.* или даже в х.х.* версиях, но это же main update, там должно быть что-то принципиально новое.
46:14-46:22 забыли обрезать
не понятно зачем такие мучения со стрелочкой в кнопке. Легче ведь в html добавить img и обойтись без позиционирования
Если через img добавить, то свойство stroke не сработает
Да сколько можно уже верстать для начинающих...)
смысл показывать, что то более сложное? Важна база, если знаешь базу то и все остальное познаешь. Так в любом деле. Я вот более менее познал дзен в CSS и сейчас ни чего толком не смотрю. Зачем? Легко документацию почитать или поэкспериментировать.
Ну и главное. Есть миллионы людей, которые хотят научиться верстать. Они как правило делают несколько шагов и бросают это гиблое дело. На их место приходят другие. Ну а авторы подобных каналов на них набирают просмотры.
Ах да. Легко обьяснить, что то более менее простое. Попробуй объяснить хотя бы например как сделать карусель на чистом СSS и JS. Тут уже просмотров будет в разы меньше. Скучноо не понятно, а каналу это не выгодно
@@i1nostranec332 у меня видео на чистом CSS с каруселью набрало много просмотров)))
@@annblok_webdev надо что то сложнее, и посмотреть до каких тем дойдете.
Я тут просто форум читал прогеров, в основном бэкендеров. Так все они с какого то момента своей карьеры начинают смотреть индусов. Просто русскоязычных авторов нет, европейцы и американцы откровенно не тянут и только индусы спасают, обьясняя реально сложные темы для мидлов и сеньеров
@@i1nostranec332 Всё верно. Лучше и не скажешь. Тем, кто поопытнее, видео с ютьюба редко помогают.
@@i1nostranec332 Только на хабре про индусов такое не пиши в комментах, а то там такая истерика начнется...
Вот не понимаю зачем делать переменные цветам. Это трата времени.
Чтобы, если понадобиться потом какой-то цвет изменить, то можно было бы изменить его в одном месте, а не в десятках мест и пару пропустить в добавок...
@@j-lewis Так можно выделить цвет и нажать контр+н и он везде где есть этот цвет заменит на новый
@@dimondimonov6417 в таком маленьком проекте не заметны плюсы этих переменных
Даже макет за донат продают, стыд и позор
Скажи спасибо зелибобику за это. Из-за его действий отключили доход чотким ютуберам.
@@umnyicoder Вы ничего не путаете, случайно?
@@j-lewis нет, ничего не перепутал
Стыд и позор жаловаться и зажимать пару сотен рублей за обучение новой профессии. Значит она вам не так уж и нужна.
Кстати, один простой, но не всем очевидный совет. НЕЛЬЗЯ использовать свёрстанные точь-в-точь сайты по ютьюб видосам в своём портфолио, велик шанс того, что заказчик или HR уже сто раз видел этот же макет в портфолию других кандидатов, которые также верстали по видео. Следовательно, после вёрстки, нужно менять картинки, цвета и даже переставлять секции местами, что-то убирать, что-то добавлять, менять текст. Короче делать сайт неузнаваемым, как будто это уникальный сайт. Теперь, когда вы знаете всё это, ответьте на вопрос - зачем вам макет, когда можно это делать по ходу?
Ну что это за "Верстка сайта", когда она "Вёрстка сайта". Зачем такие глупые ошибки делать. Ты же говоришь не "верстка", а "вЁрстка", но пишешь не грамотно. И не надо мне заливать обратное.
Душно стало, открой окно
@@umnyicoder Глупцам умное читать нельзя. Поднимается температура.