HTML CSS адаптивная верстка сайта Freelance Portfolio. Темная тема на JS. CSS переменные

[@neleaonila2191]

Ваш урок, Юрий, структурирует кашу в моей голове и дает понимание "как" и на “что” обращать внимание. Выводы таковы: -я усвоила, как нужно сворачивать выбранный блок кода ; -получила сведения, в какие теги нужно поместить дополнительные, пояснительные фразы к заголовкам; -уловила, как написать заглушку, чтобы не было прокрутки, когда мы нажимаем на ссылки.(например где-нибудь в подвале) ; -узнала про практику хорошего верстальщика - предусмотреть различные варианты контента, внутри блока, и написать специальную конструкцию; -для меня, была полезна и информация, о предварительной заглушки, чтобы ссылка не работала; -я узнала, какое стилевое свойство нужно назначить HTML, если я хочу, чтобы элемент не отображался и не реагировал на события; -как быстро дублировать нужный блок кода (shift +alt и стрелочка вниз); -узнала, как в медия-запросы производить упорядочение, в зависимости от значений технических параметров устройств; -изучила, как сделать медия - запрос на темную тему на уровне системных настроек Windows ; -разобралась как регистрироваться, создать репозиторий и опубликовать “свой опус” на GidHub. Юрий, я ценю ваш огромный труд и прекрасно осознаю масштабы Вашего вклада в построение этих уроков. Спасибо.

[@WebCademy]

Неля, спасибо огромное за комментарий и четкие сформулированные итоги тому что вынесли из видео!) Я всегда стараюсь чтобы в новом МК были вот такие полезные приемы которые помогают верстать. А вы все это заметили и указали. Рад что вы растете в верстке, развиваетесь и есть прогресс!) И всегда приятно получать такую обратную связь от учеников. Желаю успехов в изучении верстки и веб-разработке, а после и в работе в данном направлении!)

[@СуетаСуетливая]

@@WebCademy Здравтсвуйте почему не Sass?

[@DenisK-to8lf]

Добрый день. У Вас случайно не сохранился данный макет?

[@zaurhuseynzade6950]

Продолжаю удивляться тому, что люди выкладывающие хомячков да котиков набирают сотни тысяч лайков. А у человека, который делится своим бесценным опытом да и на целых 4 часа их так мало. Видео очень подробное. Я не новичок. Но и я смог что то для себя подчеркнуть. Спасибо тебе за твой труд.

[@ЛистокЯблони-т9к]

Неудивительно, так как в моем ближайшем окружении почти нет людей, знающих английский, а программирование (ну или верстка) для них вообще тёмный лес. Зато в каком-то бытовом споре что-то доказать им почти невозможно, и это несмотря на то, что я человек достаточно упрямый. И да, котиков они обожают.

[@ЛистокЯблони-т9к]

@Дмитрий Самарин я к тому, что неудивительно, что так мало людей ставит лайк этому видео в сравнении с видео с котиками, потому что мало кто таким интересуется, умных вообще мало в моем окружении, вернее, их почти нет.

[@denzeroneYT]

@Дмитрий Самарин В любом случае желательно знать. Это будет как + тебе в копилку, ведь можно красиво называть переменные, вместо того чтобы лазить по переводчикам, которые не всегда точно переведут, программы часто на английском, и не всё понимаешь, так же основная часть контента в интернете на английском, и проще будет найти какую-то информацию именно на этом языке. Читать документации, общаться с заказчиками, для такого себе уровня может и не надо, а так желательно, и это не миф, что программистам нужен английский, ведь вообще всё тут на английском

[@Слушательподкастов-ю8р]

Я рад этому

[@deadtie]

@@ЛистокЯблони-т9к вау, ты изучаешь программирование, ты такой умный, вау, а ведь кто-то из людей в твоем окружении изучает то чего ты не знаешь и так же думает. Ты такой умный, что не понимаешь свою тупость, умнейшиш

[@benchik100]

очень четко! спасибо!

[@ВладиславПанков-е2ж]

Здравствуйте! Я интересуюсь, чтобы понять, почему при написании секции "projects" на гридах, теряется адаптивность, в то время как на флексах проблем с этим нет. Почему так происходит? :)

[@DenisK-to8lf]

Скиньте пожалуйста ссылку на макет, та что под видео не рабочая

[@lidiamenshikova1130]

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

[@Bogdanich911]

Мощнейший труд для нас простых смертных! Огромное спасибо за такой основательный урок!!!

[@ИльяКвитковский-о4г]

Здравствуйте, может кто то подсказать, почему при body.dark не меняет цвет текста? Меняется только бекграунд. Из различностей, вместо обычного css использую sass

[@WebCademy]

Смотрите на CSS который формируется в итоге.

[@ВадимЛюманов]

Делал 3 дня. Не новичок, но несколько полезных фишечек нашел. И... ннада 2 монитора) Афтору респект - за топовое видео по адаптивной верстке на HTML CSS, переменным CSS и по подключению dark темы на уровне верстки. Обязательно добъю данный проект на React. Там реально должна быть мааагия)

[@MelkoR4111]

без МИНИМУМ 2-х моников в верстке делать нечего. Я тоже не новичок, но люблю смотреть видео подобного рода, потому что практически ВСЕГДА что-то новое будет полезное

[@GreatOsmanSultan]

Всем салам алейкум! Да каждый раз убеждаюсь что Юрий талант и крутой и верстальщик и программер! Спасибо что ты есть! Спасибо за уроки и ролики!

[@MrGreenman02]

Спасибо за классный контент!) жду вёрстку на React!)

[@АлександрДегтярёв-р6г]

3:23:59 не переопределяются переменные и руинится позиционирование элементов. будто ломается display: flex и flex-direction:column

[@uk-lych_sveta]

Юрий доброго вечера!!! Спасибо за контент, как всегда все понятно и интересно!!! Надеюсь мастер-класс будет в записи.

[@WebCademy]

Спасибо за комментарий!) Да, видео с МК остается на канале.

[@igoryavchenko3973]

Как всегда круто!!!

[@GudgiJFm]

Меня тоже зовут Юрий, ждём)

[@kova_hi5605]

синяя полоска под ссылками равна 3px, а не 2 🙃

[@zasketo255]

Спасибо большое за урок! Все информативно и понятно!

[@Evgenius-PRO]

Вы один из немногих кто остался и объясняет очень хорошо на русском языке! Скажите пожалуйста ,а почему вы не используете wrapper и внутри него хедер мейн и футер ? Понятное дело что семантика не для новичков , но враппер что бы убрать скролл и сделать структуру флексом,почему нет? Не в коем случае не нравоучение,а наоборот интересуюсь что бы понимать.

[@WebCademy]

Спасибо за комментарий. Насчет wrapper - не вижу в нем необходимости. По сути оберткой может выступать и тег body, если мы говорим например о том чтобы сделать sticky footer.

[@Evgenius-PRO]

@@WebCademy большой спасибо за ответ! Удачи вам🔥

[@juice_beatz]

привет, подскажи пожалуйста как закрепить шапку

[@MelkoR4111]

position: fixed

[@vaspurakavdalian1133]

Красава Юра,благодарю тебе.Всех благ и успехов и много денег😆😉👍

[@WebCademy]

Спасибо!) 🤝🤝🤝

[@user-jq4fl3pg8r]

Юрий, большое спасибо Вам за ваш труд! Вы объясняете без "воды" и по факту. Очень интересные и познавательные уроки, ждём новых уроков от Вас!

[@СергейГорбенко-н2з]

А я то голову ломал, как мне портфолио показывать, тоже надо сверстать отдельный сайт для портфолио. Спасибо за идею!

[@doge8633]

Почему ты не испоьзуешь семантические теги? такие как section вместо div

[@WebCademy]

Ты точно смотрел видео или код проекта? github.com/rightblogru/freelanceportfolio/blob/main/index.html

[@Astco_Hosk]

Спасибо за твой труд дорогой . Скажи пожалуйста почему в гитхабе не грузит стили ?? HTML есть но стили не срабатывают…..

[@Technokpblca]

Поставьте точку. Например : и

[@ivanpain5956]

Добрый день, можете написать вашу тему в VS CODE? Нравятся цвета

[@bobomurod]

Кажется Groovebox

[@doge8633]

Зачем ты используешь Svg иконки внутри img? есть же svg тег

[@za2oopa]

С имг легче работать

[@mksmvnv]

Почему у меня горизонтальный скролинг на мобилке? Делал все аналогичым образом. Как его можно исправить?

[@WebCademy]

Сравните свой код с готовым из урока.

[@za2oopa]

У меня почему-то для нав линках ::бефоре подчеркиваются все, а не одна страница

[@za2oopa]

З.ы. Повесил почему-то …-актив на все элементы списка))

[@timglibson7298]

Делаю на своем макете,но по данному уроку,почему то для лишек в меню не сработал column gap

[@WebCademy]

A display: flex; прописали?

[@dedlive51]

Спасибо!

[@Varushkin_17]

Спасибо большое) ...

[@Дебил-м1л]

Помогите как сделать адаптивный сайт в CSS добавил @media сделал max-width 620 px Нечего неизменилось Посмотрел в чем проблема нашел тег meta сделал так и не помогло. Как быть?

[@aleksandrmykalo439]

Для работы с макетом нужна платная версия Figma?

[@WebCademy]

Нет, зачем. Просто дублируйте макет себе в черновики и работайте с ним. В начале урока показал как это делается.

[@aleksandrmykalo439]

@@WebCademy Спасибо! Теперь все получилось )

[@midinsuyutbekov6426]

спасибо за уроки а что сделать для защиты диплома или сертификата

[@WebCademy]

Смотря какие у вас требования к диплому. Где то и сайта на html хватает, где-то нужен Фреймворк или работа с БД.

[@sitini]

Ждём! 🎉🎉🎉

[@dimitry5479]

Запись будет?

[@WebCademy]

Запись осталась на канале.

[@FghjFghj-yc5zn]

❤

[@ekaterinadobrzhanskaya3422]

Спасибо за урок, все сделала, все получилось!!!🤩

[@WebCademy]

Супер!)

[@biscuitjerry8043]

если не секрет сколько ~ платят за верстку из фигмы подобного макета? за 1 шт., естественно

[@iakovryzhichka2832]

Когда меняете стили в инструментах разработчика, то чтобы их скопировать нажимайте ПКМ на самом свойстве или на классе, там будет много опций. Мне так проще, чем выделять все.

[@ДаниилВолков-ж8ю]

это можно легко обыграть ,не делать переменную под стандартный черный цвет

[@Аслан-в6г]

Просто смотрел и повторял и все получилось, добавил фиксированную шапку при скроле страницы без js и теперь можно по id туда-сюда ходить, спасибо вам большое автор данного канала!

[@juice_beatz]

привет, подскажи пожалуйста как закрепить шапку

[@Аслан-в6г]

@@juice_beatz в CSS надо к header написать свойство Position: sticky; и Top: 0; Если ваша шапка скролится и вдруг останавливается в определенном блоке при попытке скролле страницы то можете добавить такие свойства Position: fixed; Width: 100%; ( или Top: 0; Left: 0;) заменив с Position: sticky; и Top: 0; То есть если не работает Position: sticky; Top: 0; то можете использовать Position: fixed; Top: 0; Left: 0; И да можете добавить width: 100%; на всякий случай. А да кстати не забудь свойство z-index: 1000; что бы твоя шапка не сливалась с контентом при прокрутке) Рад был помочь )

[@juice_beatz]

@@Аслан-в6г спасибо)

[@ВадимРужах]

Не знаю, что написать. Просто лайк и коммент в благодарность. Наткнулся случайно на ваш урок по grid, подписался.. Спасибо за труды.

[@rus24133]

Это слишком хорошо 😱

[@Smile-k9t]

Спасибо тебе родной этот урок был великолеаный

[@16gggtm]

Где взять ссылка фигма

[@didarmurzhukpaev6099]

Огромное спасибо,дружище!

[@МейрамбекАманжолов-к7р]

Джава скрипте в 3:24:57 не сработал код. Все правильно написал но нет

[@progover24]

жду

[@ilyaVnukchinskiy]

Спасибо за уроки !!!!!

[@yuliyaayiluy6433]

Будете ли вы дублить видео на дзен или в вк может?

[@WebCademy]

@@yuliyaayiluy6433 да, в ближайшее время сделаем каналы.

[@yuliyaayiluy6433]

@@WebCademy супер! Спасибо

[@sergeyfedorchuk1562]

Есть ли разница между селекторами ".header__text p+p" и ".header__text p:not(:last-child)" и вместо margin-top указать margin-bottom?

[@WebCademy]

Можете сделать как вы описали. Визуальный результат будет таким же. Наверное он будет даже лучше, так как между абзацами могут быть изображения, и отступы все равно будут присутствовать.

[@ДмитрийЧёрный-ж9г]

Не очень могу понять, как "nav-link__link--active" у вас переключаться между переходами по ссылкам, так же как у вас сделал, но у меня не переключается ховер у менюшки, всегда горит у "project"

[@WebCademy]

Так надо руками прописать его для нужной ссылки на каждой странице.

[@АлибекАбдуллаев-о5з]

2:04:04 там задали display: flex; flex-direction: column; align-items: center; В место этих трех кода можно же да писать Text-align: center; ??? Плиз подскажите а то это меня убивает

[@za2oopa]

Текст алигн - это форматирование только для ТЕКСТА и оно задает выравние текста по центру, другие элементы (картинки, блоки и тд) не будут работать

[@NastyaKaise]

Спасибо огромное за уроки!)) Всё чётким и понятным языком объясняете. Я многое узнала благодаря вашим урокам. Ценю ваш труд.

[@TheMcKaKoC]

Доброго времени суток. Подскажите, как вы сделали чтобы strong или em подсвечивались голубым у вас в css? Как пример тут .header__title strong

[@WebCademy]

Просто цветовая тема Ayu - mirage bordered. Более ничего специально не делал.

[@maximandreevskiy5714]

Идеальная подача информации)) Большое спасибо за ваш труд))

[@wandanacc3931]

У меня проблема на протяжении всего урока, не работают некоторые свойства в css, такие как выравнивание текста, gap и другие. В консоли разработчика пишет: The display: list-item property prevents flex-wrap from having an effect. Try setting the display: list-item property to display: flex. Translate: Свойство display: list-item предотвращает действие flex-wrap. Попробуйте установить для свойства display: list-item значение display: flex. Но в css нигде нет значения display: list-item проверял через поиск даже, пусто

[@MelkoR4111]

может что-то из-за reset css

[@yuriykolomytsyn2352]

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

[@Sergei_meison]

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

[@MelkoR4111]

очисть кеш

[@user-frond-end_dev]

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

[@WebCademy]

На старте я вас понимаю. Можете их не использовать. В дальнейшем для темной темы они упростят переключение стилей.

[@PPL2412]

Лучший урок из все что видел.

[@asgard7815]

как тема называется, очень понравилась, буду рад за ответ)

[@WebCademy]

Ayu

[@musicfan507]

И это всё бесплатно? Без какого либо подводного камня ?

[@WebCademy]

Да) А еще есть вторая часть на React JS kzbin.info/www/bejne/f6uUf6mnfJyqisU

[@hapikus5157]

спасибо за огромную работу!

[@Shiba_dub]

Я там не профи верстки, мне понравился макет, решил ну, чтоб не накосячить по видосу сделаю, на начале верстки через 5 минут, закрыл видео) Это для прям вообще новичков видео? Кто ж сразу все пишет(( Если делаем нав, то пишем хтмл всего нава, потом уже стили к нему

[@WebCademy]

Так и не понял - видео урок для вас оказался слишком простым или наоборот сложным.

[@Shiba_dub]

@@WebCademy слишком простым, но для новичков, конечно отличный вариант!)

[@user-jq4fl3pg8r]

И скажите пожалуйста, почему Emmet не выдаёт мне Query-Selector? Именно его он мне не выдаёт и каждый раз приходится печатать вручную все символы. В остальных моментах Emmet работает идеально.. JavaScript (ES6) code snippets установлен. В чём может быть причина?

[@WebCademy]

У меня установлен js snippets от runningcoder

[@user-jq4fl3pg8r]

@@WebCademy спасибо большое, установлю тоже.

[@TarasovFrontDev]

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

[@WebCademy]

Как насчет "прилипания" контента к краям экрана на мобильных устройствах?

[@TarasovFrontDev]

@@WebCademyДумал об этом. Ни разу не встречал, чтобы для корректного отображения сайта на мобилках не писали медиа-запросы. Соответственно, туда и паддинги вставляем.

[@webstep4677]

Отличный урок получился, Спасибо. На скорости 1,5 прошел на одном дыхании. Но есть небольшая проблема которую хотелось бы исправить - при переключении по вкладкам сначала отрабатывают белые стили потом черные если ползунок стоит в Dark. Можно ли этого избежать? Если да то как это фиксить?

[@WebCademy]

Спасибо за комментарий. Насчет вопроса. При переключении по вкладкам в браузере?

[@webstep4677]

@@WebCademy да по вкладкам меню

[@pawwsay]

как сделать к каждой карточке проекта, свой проект? так и не поняла

[@WebCademy]

Также как и первый проект который сделали. Создаете отдельную страницу для второго проекта, и на вторую карточку вешаете ссылку на эту страницу.

[@slavalifehacker5873]

Приветствую! Есть вопрос: а почему нельзя после тега body сразу задать контейнер один раз, и больше не писать его внутри каждого тега ниже?

[@WebCademy]

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

[@slavalifehacker5873]

@@WebCademyблагодарю!

[@DmytroTkachenko1808]

Cпасибо за видео!

[@MrStealss]

1:42:45 Почему у меня карточки проектов в 2 колонки и 3 ряда, а не в 3 колонки и 2 ряда Пробовал менять зум, и разные девайсы через ф12, все равно не получается

[@nn1413]

помнишь как решил?))

[@MrStealss]

@@nn1413 тогда как то решил, но перестал учиться в этом направлении, сейчас не подскажу)

[@КаринаЧ-н5е]

У меня почему-то на главной странице код не срабатывает. На других всё переключается. Ошибок нет. В чём дело?

[@WebCademy]

Скрипт на главной правильно подключен?

[@КаринаЧ-н5е]

@@WebCademy Да. Я даже специально алерт вывела для проверки. Код подключен.

[@КаринаЧ-н5е]

@@WebCademy Ясно, у Вас тоже так было. Просто я решила исправить до того момента, как Вы стали править у себя.

[@aslanaskar1193]

Привет, почему то у меня не сработало свойства в container {margin: 0 auto; padding: 0 15px; width: 1200px; } Вот здесь:21:39 Весь html и css код написал правильно, но надпись NAVIGATION не хочет разместиться ближе к центру. Когда хочется что то смотреть и что то сверстать обязательно что то препятствует(

[@WebCademy]

Сравните с готовым кодом из урока. Может в другом месте допустили ошибку.

[@Pinochete]

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

[@mokhammedalipatvari3063]

проверьте - точно ли у вас див в нав, а не наоборот

[@arsenmelkumyan]

💯💯💯

[@АндрейСветлов-п5о]

Это наверное лучшее что я вдиел по html css js, просто топ!!!

[@ДидарЖумабекулы]

3:35:23

[@Simphonia_store]

какая это тема в vs code?

[@kioneQ]

Это MacBook, там она по дефолту стоит.

[@НатальяТулякова-п5д]

Жду)))

[@maslovsky8969]

Какая тема стоит в VSCode?

[@WebCademy]

Ayu - mirage bordered

[@maslovsky8969]

@@WebCademy Благодарю)

[@azimnurnazarov7479]

Запись будет ?

[@WebCademy]

Запись осталась на канале.

[@nurmukhammadxxx5046]

Один из самых классных каналов. Хотелось бы посмотреть на реализацию проекта уровня senior, чисто ради интереса и контента.

[@leonpiter]

Спасибо большое за такие видео, отшлифую свои навыки по верстке и приду к Вам на курс по JS))) Очень нравится подача.

[@NIkFreedomForce]

Юра топовый парниша!))) FronDend))

[@WebCademy]

Тоже заметил, но ролик уже был записан)