Тёмный

🔥 Адаптивная верстка с нуля для начинающих | HTML, Grid & Flexbox CSS, Swiper | Создаем сайт про NFT 

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

🔥 Интенсив «Первый заработок на создании сайтов»
Участие бесплатное, но необходимо зарегистрироваться:
frontendblok.com/intensives/start
В этом видео мы потренируемся верстать макет на тему NFT, используя Swiper, чтобы сделать слайдер на весь экран. Также мы будем всё это адаптировать под разные экраны.
⚡️ Макеты и демо можно получить через донат:
1) по подписке (доступ ко всем макетам) boosty.to/annblok
2) по подписке (доступ ко всем макетам) donut/tpverstak
3) разовая оплата через крипту с получением одного макета new.donatepay.ru/@annblok (в комментариях напишите email)
✌️ Материалы видео:
Шрифты:
1) fonts.google.com/specimen/Orb...
2) fonts.google.com/specimen/Cau...
3) fonts.google.com/specimen/Cat...
Swiper: swiperjs.com/
Про позиционирование - • Позиционирование элеме...
Про псевдо-элементы - • Псевдоэлементы before ...
ПЛЕЙЛИСТ с практикой - • Создание сайтов на пра...
Таймкоды:
00:00:00 Вступление
00:00:27 Обзор макета
00:02:28 Подготовка проекта
00:08:05 Сохранение изображений
00:11:24 Создание разметки HTML
00:18:36 Стили для сайдбара
00:32:31 Стили CSS для шапки
00:39:13 Подключение шрифтов
00:42:00 Продолжаем писать стили для шапки
00:52:21 Подключение Swiper
00:53:57 Меняем формулу для пагинации
01:09:00 Стилизуем пагинацию
01:17:54 Разметка и стили нижнего блока
01:28:00 Разметка и стили контента
01:57:00 Адаптив страницы
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/

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

 

30 май 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 185   
@annblok_webdev
@annblok_webdev 2 года назад
Авторская методичка про CSS Grid ❤С ней ты познакомишься со всеми свойствами. Объясняю так, что разберется даже ребенок. 📌 ЧТО ТАМ ЕСТЬ - Разбор всех свойств с визуальными примерами - Отмечены свойства, которые 100% пригодятся в работе - Объяснения на простом человеческом, а не на языке спецификаций - Передала весь свой опыт в работе с Grid КОМУ ДОСТУПНА МЕТОДИЧКА? ⭐ Подписчикам уровня “Мидл” на Boosty: boosty.to/annblok ⭐ Подписчикам из ВК: vk.com/donut/tpverstak 💰 Оплатившим разово: boosty.to/annblok/posts/e132b0c0-a7ec-4df0-891b-e4cea8c0f676
@slevinkelevra2098
@slevinkelevra2098 2 года назад
сколько видео по вёрстке пересмотрел Анна вы лучшая !!!! семантика, БЭМ адаптив высший пилотаж!!! сам прохожу курсы у вас всё как по "учебнику" Спасибо огромное за ваш труд и то что показываете как Правильно верстать!!! Ребят,серьёзно если и пробовать приобретать какой то начальный(хотя тут наверно даже не начальный , а довольно серьёзный ) уровень по верстке то только здесь! Класс одним словом! Подписка однозначно!
@annblok_webdev
@annblok_webdev 2 года назад
Спасибо за высокую оценку! 😇🥰
@hazard383
@hazard383 2 года назад
Как всегда спасибо за полезную информацию
@maximg2274
@maximg2274 2 года назад
фантастика, такой непростой макет за 2 часа сделали, пиксель-перфект, да еще с обучением :) я бы неделю сидел))
@TamaraNikolaevna
@TamaraNikolaevna 2 года назад
Анна, спасибо за подробный учебный видеоурок и профессиональное объяснение многих фишек в css-коде. Я узнала много полезной информации!
@annblok_webdev
@annblok_webdev 2 года назад
Рада слышать! ☺️
@borislihachev8325
@borislihachev8325 2 года назад
@@annblok_webdev Анна а Вы планируете курсы по "натяжки" вёрстки на wordpress?
@annblok_webdev
@annblok_webdev 2 года назад
@@borislihachev8325 такой был, но сейчас пока недоступен. Думаю, пора бы возобновить его 🙌
@borislihachev8325
@borislihachev8325 2 года назад
@@annblok_webdev конечно нужно возобновить :)
@kuna1990
@kuna1990 2 года назад
Большое спасибо Анна за ролик.
@niceman5890
@niceman5890 2 года назад
Очень круто показываешь, как надо создавать сайт наглядно.
@annblok_webdev
@annblok_webdev 2 года назад
☺️
@user-nn1uf9ng8n
@user-nn1uf9ng8n Год назад
Спасибо . Урок что надо! рекомендую к просмотру
@user-wf4np1ne2c
@user-wf4np1ne2c 2 года назад
Отличная работа, виден опыт!)
@gum3213
@gum3213 2 года назад
Побольше таких видео
@borislihachev8325
@borislihachev8325 2 года назад
Великолепно 🔥
@MarttiSyber
@MarttiSyber 2 года назад
Контент огонь! Спасибо!
@annblok_webdev
@annblok_webdev 2 года назад
❤️
@user-cb5xj1lg1l
@user-cb5xj1lg1l 2 года назад
спасибо, нфт интересующая меня тема
@user-xc7my7by4m
@user-xc7my7by4m 2 года назад
Как вариант, когда делали полосу после номеров страниц в пагинации, чтобы лишний раз не подключать картинки, в before написать так: content: '' position: absolute display: block top: -10px width: 100% height: 1px border: 0 background-image: linear-gradient(45deg, #fff, #343131) + в pagination-art указать margin-top: 10px За счет градиента будет эффект сужения полосы
@elchinhuseynli8876
@elchinhuseynli8876 2 года назад
Рекомендую использовать flex-gap на родителе, чтобы не ставить марджины, так как потом нужны дополнительные действия, чтобы устранять марджин у первого и последнего. Так эстетичнее
@user-gm5ri4pq5t
@user-gm5ri4pq5t 2 года назад
Тоже так думаю, если пользоваться инструментом то полностью.
@mushnikov35
@mushnikov35 2 года назад
поддержка gap хромает, лучше не использовать
@user-gm5ri4pq5t
@user-gm5ri4pq5t 2 года назад
@@mushnikov35 Почти 92% всех браузеров поддерживает
@68ytka68
@68ytka68 2 года назад
26:16 -- можно же записать в одну строку: background-image: url() no-repeat center center;
@user-ju6fu7ic5r
@user-ju6fu7ic5r 2 года назад
На 55:26, достаточно было index + 1 взять в скобки. Пример для index=1: просто index+1: 1+1=2 с решеткой: '#0'+1+1 = '#011' со скобками: '#0'+(1+1) = '#02'
@user-xc7my7by4m
@user-xc7my7by4m 2 года назад
либо вообще так `0${index + 1}`
@user-zh5kg2op4h
@user-zh5kg2op4h 2 года назад
На самом деле на 26:24 вполне можно обойтись без псевдо-элемента. В CSS есть возможность задать несколько фонов. Благодаря этому можно указать картинку вместе с градиентом. Градиент указывается тоже в background-image, поэтому указание картинки на видео перебивает градиент из сокращённой записи background. Чтобы использовать вместе, надо перечислить их через запятую: background-image: url(...), linear-gradient(...); Эта запись работает так, что первый элемент показывается ближе к пользователю, а следующие отображаются уже за ним, последовательно друг за другом. Так же можно перечислить свойства для каждого слоя (картинки, градиента, в конце может быть сплошной цвет). Если для какого-то слоя свойство не указано, то оно повторяется из предыдущего слоя. Подробности см. в модуле CSS Backgrounds and Borders. Ещё в background-position не обязательно указывать «center» два раза. Правило так интересно работает, что если задано положение по одной координате, то вторая равна 50% (=center). Я писал об этом (и многом другом интересном) в статье «Нюансы CSS» ещё 11 лет назад на сайте «Веб-стандарты».
@leepoch3764
@leepoch3764 2 года назад
Интересно, зачем Вы смотрите подобное видео, если у Вас такой колоссальный опыт?
@leepoch3764
@leepoch3764 2 года назад
@Негр В пене не думаю, что опытному человеку нужно освежать память, если он постоянно занят своей работой
@oleksiivatsyk5860
@oleksiivatsyk5860 2 года назад
@@leepoch3764 чтобы поделиться опытом
@NoName-oh9fh
@NoName-oh9fh 2 года назад
@@leepoch3764 ну слушай если человек умеет верстать это не значит, что ему запрещено смотреть как делают другие. Я сам умею, и мне хочется посмотреть как другие решают те или иные задачи, вдруг что то новое узнаю. А то что Анну подправляют ничего страшного в этом нет, она увидет и будет делать лучше.
@leepoch3764
@leepoch3764 2 года назад
@@NoName-oh9fh так никто и не запрещал
@IgorKu255
@IgorKu255 2 года назад
Здравствуйте, Анна. Подскажите, на какую камеру снимаете ваши видео?
@satile7208
@satile7208 2 года назад
умничка :3
@AlekseyNaumov_734
@AlekseyNaumov_734 2 года назад
Спасибо большое! Подскажите пожалуйста. То, что margin и padding это внешние и внутренние отступы элемента. Но я никак не могу понять в каких случаях использовать тот или другой. Объясните?
@ViperWenom
@ViperWenom 2 года назад
Минифицированный код лучше с помощью форматирования переводить в удобоваримый вид (в vscode вроде f1 меню)
@user-mu2lr9zc7d
@user-mu2lr9zc7d 2 года назад
А как же одно из основных правил верстальщика, что элементы не должны двигать сами себя? А у вас то тут то там margin-top и margin-left
@user-wj1fb2wj5h
@user-wj1fb2wj5h 2 года назад
Когда уже будешь Анной Флекс ?
@umnyicoder
@umnyicoder 2 года назад
Чудесное видео и объяснение, Анна! 🔥
@dragons7589
@dragons7589 2 года назад
Большое спасибо за урок! И один вопрос: А какая у вас цветовая тема в VS Code? Мне просто зашла))
@annblok_webdev
@annblok_webdev 2 года назад
Night Owl 2
@ferdinandalay7598
@ferdinandalay7598 2 года назад
wow love this from indonesia😮😮❤👍👍
@user-if9vj5eb7z
@user-if9vj5eb7z 2 года назад
Подскажите пожалуйста как верстать элементы вне сетки bootstrap ?
@GGSoft2009
@GGSoft2009 Год назад
Пожалуйста подскажите: Как заменить бутстраповский col-lg-4 col-md-6 col-sm-12 на CSS FLEX (GRID)? и почему не использовать Bootstrap вместо CSS FLEX (GRID)?
@dedushkauuuux
@dedushkauuuux Год назад
Вопрос. Почему картинки добавляются как бекграунд, а не как теги img в структуру?
@maxstigneev
@maxstigneev 2 года назад
Спасибо! Хочется узнать, почему выбрали верстку именно на гридах, а не на флексах? Чем руководствовались?
@annblok_webdev
@annblok_webdev 2 года назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KaDz7pxbzyw.html
@user-fd1np4pt7y
@user-fd1np4pt7y 2 года назад
а если делать приложение через реакт? или заказчики хотят хтмл и цсс?
@stasclear
@stasclear 2 года назад
Все классно. Но почему во flex списках не использовать gap вместо margin ??? Лучше же, или нет ,?
@annblok_webdev
@annblok_webdev 2 года назад
Я делаю обычно с gap, но чтобы ещё support не прописывать в рамках видео, решила просто margin вписать
@adeptusCustodius
@adeptusCustodius Год назад
Так а где посмотреть остальной код адаптива можно?
@wilfredclarck639
@wilfredclarck639 2 года назад
Женщина-программист в отдельном раю
@valeriyagromyko3427
@valeriyagromyko3427 2 года назад
Здравствуйте. Расскажите пожалуйста про мейнстримный зеро-кодинг.
@Ohotnikzlat
@Ohotnikzlat 2 года назад
А где можно посмотреть на те самые авторские шпаргалки которые Анна упоминает в своих роликах?
@annblok_webdev
@annblok_webdev 2 года назад
tpverstak.ru/flex-cheatsheet/ tpverstak.ru/grid/
@hhkpinc.6626
@hhkpinc.6626 2 года назад
А что думаете если начать изучать с конструкторов сайтов. Например webflow
@annblok_webdev
@annblok_webdev 2 года назад
Начните. Кто ж вам запретит?
@user-zn6nt9hm4h
@user-zn6nt9hm4h Год назад
Добрый день, в чем может быть проблема в стилизации пагинации. Вроде бы написал стилизацию для нее в файле css, но стили не переопределяются
@user-zn6nt9hm4h
@user-zn6nt9hm4h Год назад
Проблема решается с помощью !important, только вот не знаю, корректно ли так переопределять
@annblok_webdev
@annblok_webdev Год назад
@@user-zn6nt9hm4h проверяйте, какой класс влияет на стили и стилизуйте его
@user-bf3re8gi1d
@user-bf3re8gi1d 2 года назад
Картинки через стили....... Девушка знает толк в извращениях
@ui4382
@ui4382 2 года назад
хахахххахахах, я хоть и начинвющий , но тоже думал не проще будет через html это прописать или я туп, просто мне так проще кажется
@ui4382
@ui4382 2 года назад
я много чего не понял , но много чего запомнил
@nadhit87
@nadhit87 Год назад
Аня, подскажите, а естьссылка на макет фигмы?
@annblok_webdev
@annblok_webdev Год назад
Да, есть. Можете оформить подписку на Boosty или ВК, чтобы получить доступ к макетам.
@nadhit87
@nadhit87 Год назад
@@annblok_webdev Доступ идёт ко всем макетам по практике?
@annblok_webdev
@annblok_webdev Год назад
@@nadhit87 да
@user-ho5fn2vv1g
@user-ho5fn2vv1g 2 года назад
Анна, привет. Когда можно получить оплаченные исходники?
@annblok_webdev
@annblok_webdev 2 года назад
Привет. Уточните, где вы оплатили?
@user-ho5fn2vv1g
@user-ho5fn2vv1g 2 года назад
@@annblok_webdev через разовую оплату.
@user-ho5fn2vv1g
@user-ho5fn2vv1g 2 года назад
Так что, насчет исходников?
@annblok_webdev
@annblok_webdev 2 года назад
@@user-ho5fn2vv1g как буду дома у компьютера - вышлю, часа через 3-4
@annblok_webdev
@annblok_webdev 2 года назад
@@user-ho5fn2vv1g Отправила по почте
@Gazovchik
@Gazovchik 2 года назад
Здравствуйте Друзья, подскажите пожалуйста: почему Перестали открываться (один за одним) Все html-файлы в Гугл Хроме??....... Хотя до этого Все они (те же самые) нормально Открывались,.........!!...... Спасибо тем, кто ответит.
@Gazovchik
@Gazovchik 2 года назад
(началось всё с первого файла, когда добавил в него небольшой js-код. Он тоже открывался через VSD, а после закрытия и повторного открытия - перестал.)
@user-uk5tj3qn5q
@user-uk5tj3qn5q 2 года назад
Качество исполнения верстки очень плохое. В начале видео думал что будет профессиональная верстка, а по факту на выходе качество как Adobe Dreamweaver
@annblok_webdev
@annblok_webdev 2 года назад
Что-то по фактам будет или это коммент ради коммента?)
@user-uk5tj3qn5q
@user-uk5tj3qn5q 2 года назад
​@@annblok_webdev Вертка сайта это что-то динамичное а у тебя это выглядит как будто ты SVG создаешь. Незнаю поймешь меня или нет))). Очень много сделала не правильно поэтому много проблем в конце вылезло. А если эту верстку на CMS натягивать там тоже правки пойдут по вертке а это опять откат назад))).
@NoName-oh9fh
@NoName-oh9fh 2 года назад
Согласен есть недочёты в вёрстке
@user-uk5tj3qn5q
@user-uk5tj3qn5q 2 года назад
@@annblok_webdev У меня немного стек повредился я хотел сказать создаешь из картинки картинку
@morvinglanc8471
@morvinglanc8471 2 года назад
Grid не рекомендуется использовать в верстке, так как он не поддерживается старыми версиями браузеров. Flex - более подходящая технология.
@RostyslavS-lc4qm
@RostyslavS-lc4qm 2 года назад
Ты не понимаешь о чем пишешь)))
@morvinglanc8471
@morvinglanc8471 2 года назад
@@RostyslavS-lc4qm Аргументируй. Если б не понимал, то не писал бы.
@egorrakutov4165
@egorrakutov4165 2 года назад
напиши в браузерную строку, can i use grid, смотришь и убеждаешься что грид можно использовать
@morvinglanc8471
@morvinglanc8471 2 года назад
@@egorrakutov4165 Я вкурсе. Я просто говорю, что он не так поддерживается как flex. Понятное дело что его можно и даже нужно использовать, но если для клиента не важна поддержка старых браузеров.
@codokit
@codokit 2 года назад
Насколько старых?
@AnonDe71
@AnonDe71 2 года назад
Вот бы вы рассказали как настраивать Prettier! А то из за того что мы пишем JavaScript внутри HTML, Prettier решил что было бы отличной идеей исправить все одинарные кавычки на двойные! Теперь я очень злой сижу и пытаюсь 15ю минуту понять, почему вместо списка в каунтере мне выводит undefinedundefinedundefined!
@DmitriyDev
@DmitriyDev 2 года назад
так пиши JS в отдельном файле
@drknss3021
@drknss3021 2 года назад
Мне циклы в JS дались намного проще и быстрее, чем гриды. Это вообще нормально?
@cvrsead
@cvrsead 2 года назад
здравствуй, планирую учить коды: html, css, js, что для базы можешь посоветовать? азы и понятие по поводу работы в этих языках уже имею, но по поводу прогресса в будущем, тут я в ауте :)
@adeptusCustodius
@adeptusCustodius 2 года назад
Практика, практика и еще раз практика. Ищи бесплатные макеты и пытайся их сверстать, когда заебешся и поймешь, что все сайты состоят из определенных схожих элементов (шапки, сайдбара, блоков с двумя, тремя, четырьмя элементами, футера) начни оттачивать их верстку, сделай так, что бы у тебя были готовые макеты (шаблоны) которые для готовности нужно только заполнить контентом. Когда у тебя уже будет своя готовая библиотека таких элементоа ты сможешь клепать сайты как конструкторы за считаные минуты.
@cvrsead
@cvrsead 2 года назад
@@adeptusCustodius спасибо огромное
@user-eu2kv7wq1i
@user-eu2kv7wq1i 2 года назад
Сколько такая веб-разработка могла бы стоить если делать под заказ?
@user-wj1fb2wj5h
@user-wj1fb2wj5h 2 года назад
Две булочки или горстка сухарей
@MaciFree
@MaciFree 2 года назад
вот бы в 2022 пилить уроки и не использовать препроцессоры)) а ещё иконки через бэкграудн, вместо спрайтов svg))
@peiiiajikuh
@peiiiajikuh 2 года назад
Я думал препроцессоры давно умерли, и все перешли на фреймворки, как и я сам. Но оказывается много тех, кто застрял на данном этапе.
@MaciFree
@MaciFree 2 года назад
@@peiiiajikuh препроцессоры умерли? а ничё, что твои фреймворки собираются на препроцессоре?)))) какой fw ты используешь?
@championtommy
@championtommy 2 года назад
Тут 50\50 т.к написано что уроки для начинающих и им препроцессоры знать - такое себе, основы css хотя бы понять, а в целом все верно.
@alexgrinberg1888
@alexgrinberg1888 2 года назад
I cannot find Figma prototype. Where it's located?
@kremlin_agent-_-
@kremlin_agent-_- 2 года назад
Bro, are you from USA?
@anyToMany
@anyToMany 2 года назад
Тяжёлый макет для меня, т.к. до сих пор не могу до конца понять псевдоэлементы как работают. А вообще сколько макетов нужно сверстать чтобы уже искать работу
@annblok_webdev
@annblok_webdev 2 года назад
Попробуйте начать с более простых легдингов. Они также есть в плейлисте с практикой 🔥 Искать работу можно начинать хоть с первого свёрстанного макета. Всё дело в вашей внутренной уверенности 🙌
@anyToMany
@anyToMany 2 года назад
Спасибо вам)
@SergMcl
@SergMcl 2 года назад
@@annblok_webdev А если он не сверстал ни одного макета, но уверенность у него уже есть, то можно уже брать заказы на фрилансе?
@annblok_webdev
@annblok_webdev 2 года назад
@@SergMcl пробуйте) зачем тут спрашивать об этом) так и поймёте, готовы или нет
@SergMcl
@SergMcl 2 года назад
Я-то и так понимаю, что не готов. Везде JS просят. Я за него еще только взялся.
@alpenapple
@alpenapple 2 года назад
а что за тема на VSCode стоит у тебя?)
@annblok_webdev
@annblok_webdev 2 года назад
Night Owl
@alpenapple
@alpenapple 2 года назад
@@annblok_webdev спасибо!
@autonyanyakharkiv
@autonyanyakharkiv Год назад
Не могу найти картинку Цезаря в неоновом треугольнике. Весь интернет перерыл(
@annblok_webdev
@annblok_webdev Год назад
Зачем искать, если можно оформить подписку и получить нужный макет?
@Skorpiontracer
@Skorpiontracer 2 года назад
Где вебка?
@4epart
@4epart 2 года назад
Для оптимизации скорости создавайте папки стилей и картинок под такими названиями: css, img. От этого ничего особо не зависит но значительно ускорит работу. Стили мы подключим только один раз но картинки используем постоянно и писать 3 буквы вместо 6 это намного быстрее, так как в проекте может быть и по 100 картинок то считайте) И почему div.content_sidebar если есть супер семантически подходящий тэг aside?
@anatolyannenko1821
@anatolyannenko1821 2 года назад
Анна добрый день, дайте ссылку на ваш курс
@annblok_webdev
@annblok_webdev 2 года назад
Добрый день. Вас интересует курс по веб-разработке или тестированию?
@anatolyannenko1821
@anatolyannenko1821 2 года назад
@@annblok_webdev по веб разработке, единственное что я узнал что это каждый пн старт. Но у вас несколько сайтов и на всех разная информация э, где то набор в конце года, либо просто не обновлялось Нужен курс по верстке
@annblok_webdev
@annblok_webdev 2 года назад
@@anatolyannenko1821 курс по вёрстке каждый понедельник. Скоро все будет только на этом сайте youcancode.ru/ Про курс по вёрстке можно почитать тут annblok.ru/
@boyywnkobe
@boyywnkobe 2 года назад
Как настроить претиер на такие цвета ?
@annblok_webdev
@annblok_webdev 2 года назад
Нужно просто установить тему. Night Owl.
@Edgar-pu1lc
@Edgar-pu1lc 2 года назад
Здравствуйте,а почему видео редко выходят ?
@annblok_webdev
@annblok_webdev 2 года назад
Здравствуйте, раз в 1-2 недели вполне нормально для учебного канала 👍
@PONCHIMEN
@PONCHIMEN 2 года назад
как вариант, в 29:07 можно было использовать также: display: grid; align-content: space-between; вместо: display: flex; flex-direction: column; justify-content: space-between;
@PONCHIMEN
@PONCHIMEN 2 года назад
а так классные уроки, спасибо
@skyTechVektor
@skyTechVektor 2 года назад
Было бы макет без доната(
@nikus2290
@nikus2290 2 года назад
Подскажите пожалуйста. Почему у меня Live Server необновляет страницу как у Вас?
@annblok_webdev
@annblok_webdev 2 года назад
Попробуйте перезапустить
@nikus2290
@nikus2290 2 года назад
Да я уже чего только не делал. Просто открывается страница через "Open Server", но внесённый код не меняет страницу в режиме реального времени
@user-pn9ru2et8h
@user-pn9ru2et8h 2 года назад
@@nikus2290 может поможет включение Auto Save onFocusChange в настройках vscode
@nikus2290
@nikus2290 2 года назад
@@user-pn9ru2et8h Пробовал, ноль реакции
@nikus2290
@nikus2290 2 года назад
@@user-pn9ru2et8h Вообще на какой-то всеобщий баг похоже. Установил визуалку на чистую машину и такая же ситуация
@vanzo16
@vanzo16 2 года назад
Макет уже открыт?
@annblok_webdev
@annblok_webdev 2 года назад
Открыт для донатов
@gum3213
@gum3213 2 года назад
Сделайте видео как сделать меню бургер
@annblok_webdev
@annblok_webdev 2 года назад
Там кстати в свайпере есть демо как раз такого меню. Скрипт тоже можно подтянуть оттуда. Правда по макету не ясно, что должно происходить по клику, учитывая, что шапка сайта и так открыта на сайте. Разве что регистрация в какой-нибудь личный кабинет.
@specunicom3153
@specunicom3153 2 года назад
Адаптивная верстка с нуля для начинающих? А как на счет тегов, что за теги, какой тег за что отвечает не понятно!
@annblok_webdev
@annblok_webdev 2 года назад
Приходите на наше обучение, там и теория и практика, всё разжевано 😎 youcancode.ru/
@aleksandr_rus
@aleksandr_rus 2 года назад
Аня ты ...... ты ....... З у б р и л а. Классическая учиница, такая прилежная, которые сидят всегда на 1 партах. Все такие умные. Одни пятерки.
@annblok_webdev
@annblok_webdev 2 года назад
Мои 4-ки и даже 3-ки с вами не согласятся. Да и на первых партах сидеть всегда казалось скучно и глупо)
@AntonioBenderas
@AntonioBenderas 2 года назад
Не вижу плейлист "практика"
@annblok_webdev
@annblok_webdev 2 года назад
ru-vid.com/group/PL2zhi-fIpnXDmMyjgZ9zxnixsYPkRl1J8
@annblok_webdev
@annblok_webdev 2 года назад
Добавила еще в описание ссылку
@lonely9183
@lonely9183 2 года назад
Научите меня пожалуйста
@annblok_webdev
@annblok_webdev 2 года назад
Можете оставить заявку на обучение youcancode.ru/
@user-cd6vc7kz7m
@user-cd6vc7kz7m 2 года назад
зачем html если есть No-Code?
@Jex1994
@Jex1994 2 года назад
зачем no-code, если есть HTML?
@user-cd6vc7kz7m
@user-cd6vc7kz7m 2 года назад
@@Jex1994 зачем html если есть No-Code?
@roma2686
@roma2686 2 года назад
Пожалуйста отпишите мне в телегу, я прошу вас, у меня конфуз с дизайнером.
@antonpankov9236
@antonpankov9236 2 года назад
Верстка с нуля ... Я 0 и я нифига не понимаю
@annblok_webdev
@annblok_webdev 2 года назад
Чтобы получить больше теории приходите к нам на обучение youcancode.ru/ 😉 Этот плейлист содержит только практику
@adeptusCustodius
@adeptusCustodius Год назад
Какая же кривая верстка!!!Почему сайдбар перекрывает хэдэр?Попытался довести до ума вот это вот, чуть не чокнулся, что бы ЭТО заработало нужно еще в 2 раза больше кода написать!
@goodluck8938s
@goodluck8938s 2 года назад
С нуля для начинающих? И первые 1.20 куча слов о существовании которых начинающий даже и не подозревает! 😂🤣😁
@annblok_webdev
@annblok_webdev 2 года назад
Да, это тоже для начинающих. Кто хоть раз делал слайдеры уже вряд ли будут смотреть это видео. Только если подглядеть еще раз, как пользоваться Swiper и что можно увидеть в документации. Других сценариев не вижу) Также тут используется HTML/CSS целенаправленно для новичков.
@goodluck8938s
@goodluck8938s 2 года назад
@@annblok_webdev Да ладно, то я так... Сам вот на днях думал как правильно изложить информацию для начинающих, желающих научится писать на ВордПрессе! Та ещё задача, скажу вам!😂
@annblok_webdev
@annblok_webdev 2 года назад
@@goodluck8938s прекрасно понимаю))
@fomalhaut16
@fomalhaut16 2 года назад
Зря не показала адаптив полностью. Новичкам даже с готовым кодом будет трудно разобраться, который к тому же по подписке.
@annblok_webdev
@annblok_webdev 2 года назад
Там очень много нюансов, все не озвучить. Самое главное рассказала - следить за высотой, потому что тут слайдер. Но если адаптив совсем вызывает вопросы, то можно пойти к нам на обучение, там всё разжевываем.
@mrak-9
@mrak-9 2 года назад
Да она про адаптив ничего не знает. В 22 году все в пикселях, капец. И в целом код верстки как у фрилансеров-индусов
@annblok_webdev
@annblok_webdev 2 года назад
@@mrak-9 Всегда читайте название видео, прежде чем высказывать мнение, не имеющее отношения к реальности
@mrak-9
@mrak-9 2 года назад
@@annblok_webdev И? "Адаптивная верстка с нуля для начинающих" так где она? Это видео надо было назвать "верстаю хрен пойми как из фигмы". Что начинающий поймет? Ровным счетом ничего. Что подчерпнет хоть что-то знающий? Ничего... Ни объяснений внятных, ни понимая семантики (хоть nav появился - уже чудо), за качество написания стилей вообще печаль берет (но главное именно то, что НЕТ объяснений). Кто целевая аудитория этого видео, похоже вы и сами не знаете.
@annblok_webdev
@annblok_webdev 2 года назад
@@mrak-9 аааа, только nav увидели 🤣 ок, поняла, что это просто хэйт ради хэйта.
@andrey-kramer
@andrey-kramer 2 года назад
более-менее симпатичная девушка, но делает узко специализированный контент.... вместо того чтобы трясти грудями и\или 3,14сей в роли вебкамщицы... Одно из двух - или барышня очередная моделька которая читает по сценарию или действительно шарит Алгоритмы Ютьюба наконец-то научились кидать в предложку очень достойные видосы Лайк и подписалово ;)
@pusika3
@pusika3 2 года назад
Боже, ты такой жалкий
@user-mz4iz5bq9t
@user-mz4iz5bq9t 2 года назад
Можно обойтись без псевдо элемента 26:24 background: url('../images/menu.svg') center no-repeat, linear-gradient(127.44deg, #505050 0%, #383838 100%); border: none;
Далее
Вопрос Ребром - Toxi$
46:50
Просмотров 1,7 млн
Big Mouse 😂
00:13
Просмотров 86 тыс.
Сравнивание строк в PHP
6:55
Git и GitHub Курс Для Новичков
49:35
Вопрос Ребром - Toxi$
46:50
Просмотров 1,7 млн