Верстка сайта с нуля из Figma для начинающих #3 

а я думал у меня только эта проблема)

Скриншот был удален. Подскажи еще как можно склонировать проект он у меня только во вкладке recents

Благодарю)

просто с 1 раза от 50 до 80 процентов понятно но остаются вопросы но стоит посмотреть 3 раза как уже минимум 80 процентов понимаешь а то и 90-100 но вот мне понадобилось пересмотреть 4 раза)

За лайк спасибо, но со временем сейчас беда - миллион проектов на работке. Я делаю выпуски как только появляется свободное время

;)

На нормальных проектах, дизайнер и верстальщик работают плотно в тандеме. Волей не волей выучишь основы работы друг друга.

Сенкс!

Ничего себе :) Буду безумно рад, если этот курс поможет вам найти работу ;)

как успехи, получилось найти работу?

Пожалуйста

Это здорово!

:)

Вы справитесь!

Сложно заставить себя чем то заниматься. Люди начинают, но потом лень побеждает тебя. Я этот урок долго прохожу, постоянно отвлекаюсь.

​@@besquait2882 Почитайте про клиповое мышление. В современном мире это самая частая проблема, мешающая продуктивному обучению.

@@steptoweb503 Спасибо, буду бороться с этим. Нашел несколько способов которые подходят мне.

Занимающихся - как шерсти на корове, достигших - как рогов у единорога. Китайская пословица.

Пожалуйста!

Да, я тоже об этом подумал, но уже после того, как сверстал. Обычно, если в дизайне есть радио, то хотя бы один рисуется заполненным. А здесь этого нет, поэтому ввело в заблуждение

@@steptoweb503 Понял, принял) Спасибо!

Верно, только иногда на проектах кнопки могут превращаться в ссылки, которые застилены под кнопки - поэтому на всякий случай не помешает :)

Аутлайны убирать не всегда хорошая идея ;)

Спасибо, приятно слышать! Это стандартное поведение кнопок

Если я не понял значит нету таланта у него. Был один блогер которого я понимал но я его нигде не могу найти.

Оно уже на канале :)

Пажалста)

Пасхалочка - я сам заметил спустя пол года)

Посмотрел 7 минут, делая то же самое у себя. Естессно, особо не вчитывался в мелкий шрифт, но глаз выхватил фразу 'attack the child'. Прочитал все.. ору вместе с вами))

Используйте там, где это уместно :)

@@steptoweb503 Понял, спасибо)

Я не совсем понял вопрос, но отвечу на то, как понял. Дополнительная обертка нужна для разных ситуаций, например, когда вам необходимо указать отступы только для одного блока. Если у вас всё будет обернуто во wrapper, и вы для него напишете значение отступов, то данное значение применится ко всем блокам wrapper. Но изначально задача стояла изменить отступы только для одного блока. Соответственно, нужна доп обертка. Вообще, хорошо использовать связку wrapper > row, но об этом попозже :)

@@steptoweb503 про отступы понял. Я имел ввиду, почему просто не обернуть весь контент в обёртку изначально? Он ограничит размер, задаст отступы и не нужно будет повторять его постоянно.

@@СергейЕрёмин-у9я А, понял вопрос - потому, что дальше по макету у нас контент будет фиксироватсья по другой ширине.

@@steptoweb503 Понял.

У какого ?

@@steptoweb503 под "Discover Amazing places in Japan" )

@@Dianochka86 Так, и что с ним?)

я правда в английском не сильна, но переводчик вот что выдал: "Спрыгните с балкона на голову незнакомца. Погоня за клубком прячется, когда гости приходят. Будучи великолепным с животом стороной вверх, я мог бы мочиться на это, если бы у меня была энергия, но под кроватью, чтобы напасть на ребенка, откройте дверь," Мне это показалось забавным)

@@Dianochka86 Я не знаю какой переводчик вы используете, но Google перевел это как " Откройте для себя удивительные места в Японии", что и является верным переводом)

можете сделать

Да без проблем, делайте :)

@@steptoweb503 просто хотел сказать, что есть и такой варик

@@mr.vorchun это вёрстка - здесь всегда есть тысячи вариантов ;)

@@steptoweb503 Полностью согласен )

Пажалста!

Пажалста

Пару слов туда-сюда сделай, брат © Я думаю, что после нового года уже активно начну выпускать новые

Да да да😅

Завтра или в субботу

А как я сделал?

А чем теперь занимаетесь?

@@steptoweb503 занимаюсь прежней работой, государственные заказы по ремонту и строительству, зарабатываю не меньше чем сеньор программист

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

@@justspartak Программирование "чистая" сфера, чем и привлекает!

Почитайте про mix-blend-mode

em - это всего лишь единицы измерения и с ними очень сложно создавать крутые интерфейсы потому, что большинство дизайнеров не умеет создавать дизайны опираясь на относительные величины напилить поддержку планшетов можно используя медиазапросы - об этом будет какой-то из роликов там будет адаптация под мобайл

уберите position fixed в css с блока header

Хороший вопрос - советую прочитать вот эту статью developer.mozilla.org/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form

Встречный вопрос: а как вы с таким подходом будете делать адаптивные сайты?

Вероятно потому, что в путь установили слэш, что значит ссылка на корень. А проект, вероятно, запущен без серверной среды и поэтому открывается корневая папка компьютера

Сделай родительский контейнер display: flex И укажи для него justify-content: center

Ты пробовал с margin?

А что я использовал?

Верстка тем и хороша, что одно и то же можно сделать разными способами :)

Это не просто мелочи, а опечатки. Как они могут повлиять на понимание материала?

Ну могу привести простой пример. Допустим, вы используете rem и у вас все зависит от базового шрифта, который пусть будет равен 16 пикселям. Предположим, на десктопе есть заголовок первого и второго уровня. По дизайну заголовок первого уровня равен пусть 48 пикселей, а второго уровня - 36 пикселей. Вы такие думает... Хм? Напишу ка я для h1 font-size: 3rem, а для h2 font-size: 2rem. Идеально! Делаем так. Затем вы идёте в макеты для мобильных устройств. А там заголовок h1 по размеру равен, например, 36 пикселям, а h2 30 пикселям. И вы такие окей. А как мне сейчас поменять величину базового шрифта так, чтобы не писать дополнительные медиа запросы для изменения rem заголовков? Ответ - а никак (потому что изменения размера шрифта h1 больше, чем h2). Дизайнеры крайне редко продумывают такие аскпеты разработки, а зачастую не продумывают вовсе. И поэтому вопрос - если вам нужно будет в мобилках пойти и написать дополнительный медиа запрос для того, чтобы изменить font-size h2 с 2rem на 1.5rem или любой другой, то чем это отличается от того, что вы будете использовать пиксели? :) Если интересна тема ДЕЙСТВИТЕЛЬНО гибких шрифтов, то гуглите CSS шлюзы. Статья на хабре есть хорошая.

@@steptoweb503 Ок. О шлюзах почитаю никогда не сталкивался. А ту ситуацию о который вы говорили выше, действительно придется решать через медиа запросы. НО. По-моему гораздо проще контролировать все шрифты только через медиа запросы в root. Чем искать нужный тэг и каждый раз писать новый медиа запрос только для него. Это как минимум менее читабельно. Ну вообщем почитаю о шлюзах возможно что то не так понял. А за видео спасибо.

@@JohnDoe-p1y Так вам придётся писать два медиа, один для изменения базового шрифта и второй для элемента :) Можно, конечно, положить всё в переменные css, но это уже другая история.

Прочитайте про методолгию БЭМ ;) Имя типа contact-form - это название блока Имя типа contact__form - это название элемента И, наконец, имя типа contact__form_disabled - это название модификатора. Это по русской документации от самих разработчиков, т.е. яндекса. На западе немного другие символы используют, но суть та же

Нет конечно

@@steptoweb503 а как тогда она будет выглядеть?

Код скиньте

первый проект

Почему вы думаете, что для пользователя это выглядит пугающе? Если хотите, можете через label имитировать плейсхолдер

@@steptoweb503 спасибо вам, у меня всё получилось

Ссылка обычно есть под видео - в этом забыл, наерн Вот здесь ищите chepelevich.info/youtube.html

я думаю очень мало

@@steptoweb503, с чем же сие связано?

Паддинг не нужен, секцию по желанию)

@@steptoweb503 если у верхнего блока не являющимся фикседом сделать бэкграунд прозрачным,бэкграунд нижнего блока будет в верхнем или нет?или в таком случае лучше оба блока в 1 секцию внедрить?

@@андрейдраконов-я3к я ничего не понял))

Потому что префиксы мы проставим только в предпоследнем видео. Для мозилы нужно использовать -moz-placeholder - но вообще лучше автопрефиксером по коду пройтись)

Префикс тоже не помог. Погуглив, узнал, что у мазилы свои причуды с дефолтным оформлением и в стилях для нее еще нужно прописать opacity: 1;

@@alexandersmirnov5702 Не сталкивался с таким

Это вопрос к разработчикам технологий)

Оно и не должно отправлять - в этих уроках только верстка. Чтобы отправлялись данные, нужно написать обработчик на js и затем на php, например

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

@@max_zhuravel я же не ясновидящий) миллион причин может быть

нашёл причину - постыдная невнимательность. извини за беспокойство, уроки очень классные

Как понять всё стоит на месте?

@@steptoweb503 делала шаг за шагом по примеру надо все с начала делать чтобы увидеть ошибку, да ? о боже, i want to cry

@@Mia_cc нет. Я не могу понять в чем у вас проблема

Я уже строчила длинный текст, Но вот прикол, Заметила что Вместо «px» - «xp» ставила, Два дня непонимания и два дня попыток понять что не так 😂 Спасибо за поддержу, продолжаю далее 👌👌

@@steptoweb503 и простите за излишества

Какие кругляши?

@@steptoweb503 в интро 2 белых круга в формах

@@vadim4ikplay4free В данном случае это не радио кнопки, иначе у них в дизайне было бы состояние, когда они выделены. И я не могу придумать функцию, которую они бы выполняли внутри инпутов