HTML CSS адаптивная верстка сайта Freelance Portfolio. Темная тема на JS. CSS переменные
HTML-код
- Опубликовано: 8 июл 2024
- Адаптивная HTML верстка сайта портфолио для новичков на HTML и CSS. Мобильная адаптивная верстка, медиа-запросы. Темная тема на CSS переменных и JavaScript. Публикация сайта на GitHub Pages.
Макет, скрипты и готовый код: webcademy.ru/blog/932/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Тайм коды:
00:00 Обзор проекта
01:03 Курс по верстке
01:41 Создание проекта, настройки редактора
13:18 Верстка навигации
23:42 Логотип и пункты в навигации
44:54 CSS переменные
53:27 Верстка шапки
01:27:36 Секция Projects
01:44:43 Верстка подвала
01:55:23 Страница с проектом
02:12:48 Страницы Skills и Contacts
02:23:28 Страница Contacts
02:27:40 Sticky footer
02:31:00 Мобильная адаптация
02:52:35 Темная тема. Верстка переключателя
03:11:27 Позиционирование переключателя
03:18:09 CSS переменные для темной темы
03:35:20 localStorage для сохранения темной темы
03:42:56 Ориентир на системные настройки для темной темы
03:47:48 Отслеживание системных настроек
03:51:42 Порядок в JS коде
03:57:50 Публикация проекта на GitHub Pages
04:05:24 Анонс следующего проекта
04:05:50 Курс по JS Frontend разработке
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews
Продолжаю удивляться тому, что люди выкладывающие хомячков да котиков набирают сотни тысяч лайков. А у человека, который делится своим бесценным опытом да и на целых 4 часа их так мало. Видео очень подробное. Я не новичок. Но и я смог что то для себя подчеркнуть. Спасибо тебе за твой труд.
Неудивительно, так как в моем ближайшем окружении почти нет людей, знающих английский, а программирование (ну или верстка) для них вообще тёмный лес. Зато в каком-то бытовом споре что-то доказать им почти невозможно, и это несмотря на то, что я человек достаточно упрямый. И да, котиков они обожают.
@Дмитрий Самарин я к тому, что неудивительно, что так мало людей ставит лайк этому видео в сравнении с видео с котиками, потому что мало кто таким интересуется, умных вообще мало в моем окружении, вернее, их почти нет.
@Дмитрий Самарин В любом случае желательно знать. Это будет как + тебе в копилку, ведь можно красиво называть переменные, вместо того чтобы лазить по переводчикам, которые не всегда точно переведут, программы часто на английском, и не всё понимаешь, так же основная часть контента в интернете на английском, и проще будет найти какую-то информацию именно на этом языке. Читать документации, общаться с заказчиками, для такого себе уровня может и не надо, а так желательно, и это не миф, что программистам нужен английский, ведь вообще всё тут на английском
Я рад этому
Мощнейший труд для нас простых смертных! Огромное спасибо за такой основательный урок!!!
Спасибо большое за урок! Все информативно и понятно!
Один из лучших уроков по верстке из тех, что мне встречались. Очень удобно, что вы проговариваете каждое действие, чтобы можно было не отрываться от своего кода, а просто следовать за вашими инструкциями. Спасибо большое!!
Юрий, большое спасибо Вам за ваш труд! Вы объясняете без "воды" и по факту.
Очень интересные и познавательные уроки, ждём новых уроков от Вас!
Юрий! огромное тебе спасибо за то, что все подробно поясняешь, очень приятно учится у тебя. Продолжаю активно набираться опыта и закрепляю знания на твоих верстках! Всего тебе наилучшего!
Идеальная подача информации)) Большое спасибо за ваш труд))
Спасибо огромное за уроки!)) Всё чётким и понятным языком объясняете. Я многое узнала благодаря вашим урокам. Ценю ваш труд.
Как всегда круто!!!
Не знаю, что написать. Просто лайк и коммент в благодарность.
Наткнулся случайно на ваш урок по grid, подписался.. Спасибо за труды.
Спасибо за классный контент!) жду вёрстку на React!)
Ваш урок, Юрий, структурирует кашу в моей голове и дает понимание "как" и на “что” обращать внимание. Выводы таковы:
-я усвоила, как нужно сворачивать выбранный блок кода ;
-получила сведения, в какие теги нужно поместить дополнительные, пояснительные фразы к заголовкам;
-уловила, как написать заглушку, чтобы не было прокрутки, когда мы нажимаем на ссылки.(например где-нибудь в подвале) ;
-узнала про практику хорошего верстальщика - предусмотреть различные варианты контента, внутри блока, и написать специальную конструкцию;
-для меня, была полезна и информация, о предварительной заглушки, чтобы ссылка не работала;
-я узнала, какое стилевое свойство нужно назначить HTML, если я хочу, чтобы элемент не отображался и не реагировал на события;
-как быстро дублировать нужный блок кода (shift +alt и стрелочка вниз);
-узнала, как в медия-запросы производить упорядочение, в зависимости от значений технических параметров устройств;
-изучила, как сделать медия - запрос на темную тему на уровне системных настроек Windows ;
-разобралась как регистрироваться, создать репозиторий и опубликовать “свой опус” на GidHub.
Юрий, я ценю ваш огромный труд и прекрасно осознаю масштабы Вашего вклада в построение этих уроков. Спасибо.
Неля, спасибо огромное за комментарий и четкие сформулированные итоги тому что вынесли из видео!) Я всегда стараюсь чтобы в новом МК были вот такие полезные приемы которые помогают верстать. А вы все это заметили и указали. Рад что вы растете в верстке, развиваетесь и есть прогресс!) И всегда приятно получать такую обратную связь от учеников. Желаю успехов в изучении верстки и веб-разработке, а после и в работе в данном направлении!)
@@WebCademy Здравтсвуйте почему не Sass?
Добрый день. У Вас случайно не сохранился данный макет?
спасибо за огромную работу!
Лучший урок из все что видел.
Юрий доброго вечера!!! Спасибо за контент, как всегда все понятно и интересно!!! Надеюсь мастер-класс будет в записи.
Спасибо за комментарий!) Да, видео с МК остается на канале.
Спасибо за уроки !!!!!
Всем салам алейкум! Да каждый раз убеждаюсь что Юрий талант и крутой и верстальщик и программер! Спасибо что ты есть! Спасибо за уроки и ролики!
Спасибо тебе родной этот урок был великолеаный
Решил начать учить реакт, и подкочать знания верстки, уроки просто топ, столько проектов забрасывал, и тут взял и всё сделал. Очень круто!
Это наверное лучшее что я вдиел по html css js, просто топ!!!
Это слишком хорошо 😱
Ждём! 🎉🎉🎉
Огромное спасибо,дружище!
Делал 3 дня. Не новичок, но несколько полезных фишечек нашел. И... ннада 2 монитора)
Афтору респект - за топовое видео по адаптивной верстке на HTML CSS, переменным CSS и по подключению dark темы на уровне верстки.
Обязательно добъю данный проект на React. Там реально должна быть мааагия)
без МИНИМУМ 2-х моников в верстке делать нечего. Я тоже не новичок, но люблю смотреть видео подобного рода, потому что практически ВСЕГДА что-то новое будет полезное
Спасибо за урок, все сделала, все получилось!!!🤩
Супер!)
Красава Юра,благодарю тебе.Всех благ и успехов и много денег😆😉👍
Спасибо!) 🤝🤝🤝
очень четко! спасибо!
Cпасибо за видео!
Спасибо большое) ...
Спасибо!
А я то голову ломал, как мне портфолио показывать, тоже надо сверстать отдельный сайт для портфолио. Спасибо за идею!
Меня тоже зовут Юрий, ждём)
Просто смотрел и повторял и все получилось, добавил фиксированную шапку при скроле страницы без js и теперь можно по id туда-сюда ходить, спасибо вам большое автор данного канала!
привет, подскажи пожалуйста как закрепить шапку
@@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; что бы твоя шапка не сливалась с контентом при прокрутке)
Рад был помочь )
@@user-ju3sc2ik5v спасибо)
Жду)))
Спасибо большое за такие видео, отшлифую свои навыки по верстке и приду к Вам на курс по JS))) Очень нравится подача.
Один из самых классных каналов. Хотелось бы посмотреть на реализацию проекта уровня senior, чисто ради интереса и контента.
💯💯💯
жду
3:23:59
не переопределяются переменные
и руинится позиционирование элементов.
будто ломается display: flex и flex-direction:column
Здравствуйте! Я интересуюсь, чтобы понять, почему при написании секции "projects" на гридах, теряется адаптивность, в то время как на флексах проблем с этим нет. Почему так происходит? :)
Спасибо за твой труд дорогой .
Скажи пожалуйста почему в гитхабе не грузит стили ??
HTML есть но стили не срабатывают…..
Поставьте точку. Например : и
Здравствуйте, может кто то подсказать, почему при body.dark не меняет цвет текста? Меняется только бекграунд.
Из различностей, вместо обычного css использую sass
Смотрите на CSS который формируется в итоге.
Когда меняете стили в инструментах разработчика, то чтобы их скопировать нажимайте ПКМ на самом свойстве или на классе, там будет много опций. Мне так проще, чем выделять все.
спасибо за уроки а что сделать для защиты диплома или сертификата
Смотря какие у вас требования к диплому. Где то и сайта на html хватает, где-то нужен Фреймворк или работа с БД.
Помогите как сделать адаптивный сайт в CSS добавил @media сделал max-width 620 px
Нечего неизменилось
Посмотрел в чем проблема нашел тег meta сделал так
и не помогло.
Как быть?
это можно легко обыграть ,не делать переменную под стандартный черный цвет
Доброго времени суток. Подскажите, как вы сделали чтобы strong или em подсвечивались голубым у вас в css?
Как пример тут .header__title strong
Просто цветовая тема Ayu - mirage bordered. Более ничего специально не делал.
спасибо за урок,почему то не пришли стили при деплое на гит!все файлы запушились,но на страницах стили не отображаются
очисть кеш
Скиньте пожалуйста ссылку на макет, та что под видео не рабочая
В целом все правильно, кроме странных паддингов у контейнера. Нет никакого смысла задавать паддинги контейнеру только чтобы затем увеличить его размеры на эти же паддинги.
Как насчет "прилипания" контента к краям экрана на мобильных устройствах?
@@WebCademyДумал об этом. Ни разу не встречал, чтобы для корректного отображения сайта на мобилках не писали медиа-запросы. Соответственно, туда и паддинги вставляем.
2:04:04 там задали display: flex; flex-direction: column; align-items: center; В место этих трех кода можно же да писать Text-align: center; ???
Плиз подскажите а то это меня убивает
Делаю на своем макете,но по данному уроку,почему то для лишек в меню не сработал column gap
A display: flex; прописали?
У меня проблема на протяжении всего урока, не работают некоторые свойства в 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 проверял через поиск даже, пусто
может что-то из-за reset css
Добрый день, можете написать вашу тему в VS CODE? Нравятся цвета
Кажется Groovebox
Приветствую! Есть вопрос: а почему нельзя после тега body сразу задать контейнер один раз, и больше не писать его внутри каждого тега ниже?
Можно, если у вас весь сайт в одной секции, или у всех секций единый фон. Но так как у нас в шапке темный фон, в центральной части белый и в подвале опять темный, поэтому делаем три секции с разным фоном и внутри каждой свой контейнер.
@@WebCademyблагодарю!
Отличный урок получился, Спасибо. На скорости 1,5 прошел на одном дыхании. Но есть небольшая проблема которую хотелось бы исправить - при переключении по вкладкам сначала отрабатывают белые стили потом черные если ползунок стоит в Dark. Можно ли этого избежать? Если да то как это фиксить?
Спасибо за комментарий. Насчет вопроса. При переключении по вкладкам в браузере?
@@WebCademy да по вкладкам меню
Для работы с макетом нужна платная версия Figma?
Нет, зачем. Просто дублируйте макет себе в черновики и работайте с ним. В начале урока показал как это делается.
@@WebCademy Спасибо! Теперь все получилось )
Почему у меня горизонтальный скролинг на мобилке? Делал все аналогичым образом. Как его можно исправить?
Сравните свой код с готовым из урока.
1:42:45
Почему у меня карточки проектов в 2 колонки и 3 ряда, а не в 3 колонки и 2 ряда
Пробовал менять зум, и разные девайсы через ф12, все равно не получается
помнишь как решил?))
@@nn1413 тогда как то решил, но перестал учиться в этом направлении, сейчас не подскажу)
Не очень могу понять, как "nav-link__link--active" у вас переключаться между переходами по ссылкам, так же как у вас сделал, но у меня не переключается ховер у менюшки, всегда горит у "project"
Так надо руками прописать его для нужной ссылки на каждой странице.
И скажите пожалуйста, почему Emmet не выдаёт мне Query-Selector? Именно его он мне не выдаёт и каждый раз приходится печатать вручную все символы. В остальных моментах Emmet работает идеально.. JavaScript (ES6) code snippets установлен.
В чём может быть причина?
У меня установлен js snippets от runningcoder
@@WebCademy спасибо большое, установлю тоже.
как сделать к каждой карточке проекта, свой проект? так и не поняла
Также как и первый проект который сделали. Создаете отдельную страницу для второго проекта, и на вторую карточку вешаете ссылку на эту страницу.
Джава скрипте в 3:24:57 не сработал код. Все правильно написал но нет
если не секрет сколько ~ платят за верстку из фигмы подобного макета? за 1 шт., естественно
Запись будет?
Запись осталась на канале.
3:35:23
привет, подскажи пожалуйста как закрепить шапку
position: fixed
Привет, почему то у меня не сработало свойства в container {margin: 0 auto;
padding: 0 15px;
width: 1200px;
}
Вот здесь:21:39
Весь html и css код написал правильно, но надпись NAVIGATION не хочет разместиться ближе к центру.
Когда хочется что то смотреть и что то сверстать обязательно что то препятствует(
Сравните с готовым кодом из урока. Может в другом месте допустили ошибку.
Скорее всего дело в том, что у автора видео, разрешение экрана отличается от вашего. Попробуйте просто уменьшить разрешение через колёсико мыши и всё должно встать на место.
проверьте - точно ли у вас див в нав, а не наоборот
Какая тема стоит в VSCode?
Ayu - mirage bordered
@@WebCademy Благодарю)
Вы один из немногих кто остался и объясняет очень хорошо на русском языке! Скажите пожалуйста ,а почему вы не используете wrapper и внутри него хедер мейн и футер ? Понятное дело что семантика не для новичков , но враппер что бы убрать скролл и сделать структуру флексом,почему нет? Не в коем случае не нравоучение,а наоборот интересуюсь что бы понимать.
Спасибо за комментарий. Насчет wrapper - не вижу в нем необходимости. По сути оберткой может выступать и тег body, если мы говорим например о том чтобы сделать sticky footer.
@@WebCademy большой спасибо за ответ! Удачи вам🔥
как тема называется, очень понравилась, буду рад за ответ)
Ayu
У меня почему-то на главной странице код не срабатывает. На других всё переключается. Ошибок нет. В чём дело?
Скрипт на главной правильно подключен?
@@WebCademy Да. Я даже специально алерт вывела для проверки. Код подключен.
@@WebCademy Ясно, у Вас тоже так было. Просто я решила исправить до того момента, как Вы стали править у себя.
какая это тема в vs code?
Это MacBook, там она по дефолту стоит.
Юра топовый парниша!))) FronDend))
Тоже заметил, но ролик уже был записан)
Где взять ссылка фигма
Я там не профи верстки, мне понравился макет, решил ну, чтоб не накосячить по видосу сделаю, на начале верстки через 5 минут, закрыл видео) Это для прям вообще новичков видео? Кто ж сразу все пишет(( Если делаем нав, то пишем хтмл всего нава, потом уже стили к нему
Так и не понял - видео урок для вас оказался слишком простым или наоборот сложным.
@@WebCademy слишком простым, но для новичков, конечно отличный вариант!)
И это всё бесплатно? Без какого либо подводного камня ?
Да) А еще есть вторая часть на React JS ruclips.net/video/Iz1NvqG7wTc/видео.html
я не придираюсь, но эти переменные мозги пудрят по полной и из за них теряется логика всей верстки. мне как новичку приходится слишком много времени тратить на эти переменные
На старте я вас понимаю. Можете их не использовать. В дальнейшем для темной темы они упростят переключение стилей.
Есть ли разница между селекторами ".header__text p+p" и ".header__text p:not(:last-child)" и вместо margin-top указать margin-bottom?
Можете сделать как вы описали. Визуальный результат будет таким же. Наверное он будет даже лучше, так как между абзацами могут быть изображения, и отступы все равно будут присутствовать.
Запись будет ?
Запись осталась на канале.