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

Адаптивная HTML верстка сайта портфолио для новичков на HTML и CSS. Мобильная адаптивная верстка, медиа-запросы. Темная тема на CSS переменных и JavaScript. Публикация сайта на GitHub Pages.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 05 Августа 2024 года.

Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 12 Августа 2024 года.

💻 Курс "Разработка сайтов на PHP + MySQL":
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Тайм коды:

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 разработке

[zaurhuseynzade]

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

[Bogdanich]

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

[lidiamenshikova]

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

[neleaonila]

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

[zasketo]

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

[yuriykolomytsyn]

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

[jqflpgr]

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

[NastyaKaise]

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

[maximandreevskiy]

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

[GreatOsmanSultan]

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

[bshvqrt]

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

[MrGreenman]

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

[uk-lych_sveta]

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

[zoreyan]

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

[vjhjjkb]

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

[vaspurakavdalian]

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

[qwcgisj]

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

[ndukqwi]

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

[ekaterinadobrzhanskaya]

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

[leonpiter]

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