- 57
- 72 436
Илья Стоянов - Верстка Сайта
Sweden
เข้าร่วมเมื่อ 14 ต.ค. 2012
Привет меня зовут Илья, я занимаюсь версткой сайтов более 11 лет, а так же я умею
- верстаю сайты из Figma,
- верстать сайты с помощью HTML CSS javascript
- верстать сайты с помощью Gulp, SCSS
👉 Курс Продвинутая Верстка - frontend-courses.com/
👉 telegram - t.me/ilya_stoyanov
Я научу тебя верстать не сложные сайты с помощью HTML и CSS и обучением
В моих уроках я пошагово рассказываю о том как верстать не сложны сайты, как верстать сайты адаптивно.
Я обучаю Основам верстки сайта с нуля - уже более 3-х лет
Этот канал будет полезен всем тем, кто только начинает знакомиться с простой версткой сайтов.
Не важно, сколько тебе лет )) 15 или 59 - подпишись на канал - Я Верю у Тебя Получится!
- верстаю сайты из Figma,
- верстать сайты с помощью HTML CSS javascript
- верстать сайты с помощью Gulp, SCSS
👉 Курс Продвинутая Верстка - frontend-courses.com/
👉 telegram - t.me/ilya_stoyanov
Я научу тебя верстать не сложные сайты с помощью HTML и CSS и обучением
В моих уроках я пошагово рассказываю о том как верстать не сложны сайты, как верстать сайты адаптивно.
Я обучаю Основам верстки сайта с нуля - уже более 3-х лет
Этот канал будет полезен всем тем, кто только начинает знакомиться с простой версткой сайтов.
Не важно, сколько тебе лет )) 15 или 59 - подпишись на канал - Я Верю у Тебя Получится!
Как переключаться между светлой и тёмной темой на любом сайте
👉 Переключаемся между светлой и тёмной темой на любом сайте (Часть 17)
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
В этом видео я покажу, как настроить переключение между светлой и тёмной темой на сайте портфолио с использованием JavaScript и Local Storage. Мы рассмотрим, откуда взять иконки для темы, как настроить JavaScript для работы с темами, а также научимся сохранять выбранную тему даже после перезагрузки страницы или повторного открытия сайта.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Что вас ждёт в этом видео:
🔧 Как выбрать и подключить иконки для тем.
🚀 Как настроить JavaScript для переключения тем.
🛠 Как использовать Local Storage, чтобы сохранять тему, выбранную пользователем, даже после перезагрузки сайта.
👉 После этого урока ваш сайт будет поддерживать удобное переключение между темами, которое сохранится при каждом посещении!
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
👉 GitHub Repo - github.com/Ilya-Stoyanov/site-portfolio-ilya
👉 ScrollReveal - scrollrevealjs.org/
🚀 Курс по Верстке - frontend-courses.com/
💈 Подписывайтесь на Telegram - t.me/ilya_stoyanov
⏱️ Timestamps:
00:05 - Интро
00:45 - Вёрстка: создание структуры
01:08 - Добавляем иконки для переключения тем
01:36 - CSS: стилизация тем
03:43 - Работа с JavaScript для переключения тем
10:50 - Использование Local Storage для сохранения темы
17:00 - Корректировка CSS стилей для темы
17:50 - Объяснение работы со стилями для тем
👍 Спасибо за просмотр!
Если видео было полезным, ставьте лайк и подписывайтесь, чтобы не пропустить новые уроки по вёрстке и созданию сайтов! 💜
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
В этом видео я покажу, как настроить переключение между светлой и тёмной темой на сайте портфолио с использованием JavaScript и Local Storage. Мы рассмотрим, откуда взять иконки для темы, как настроить JavaScript для работы с темами, а также научимся сохранять выбранную тему даже после перезагрузки страницы или повторного открытия сайта.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Что вас ждёт в этом видео:
🔧 Как выбрать и подключить иконки для тем.
🚀 Как настроить JavaScript для переключения тем.
🛠 Как использовать Local Storage, чтобы сохранять тему, выбранную пользователем, даже после перезагрузки сайта.
👉 После этого урока ваш сайт будет поддерживать удобное переключение между темами, которое сохранится при каждом посещении!
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
👉 GitHub Repo - github.com/Ilya-Stoyanov/site-portfolio-ilya
👉 ScrollReveal - scrollrevealjs.org/
🚀 Курс по Верстке - frontend-courses.com/
💈 Подписывайтесь на Telegram - t.me/ilya_stoyanov
⏱️ Timestamps:
00:05 - Интро
00:45 - Вёрстка: создание структуры
01:08 - Добавляем иконки для переключения тем
01:36 - CSS: стилизация тем
03:43 - Работа с JavaScript для переключения тем
10:50 - Использование Local Storage для сохранения темы
17:00 - Корректировка CSS стилей для темы
17:50 - Объяснение работы со стилями для тем
👍 Спасибо за просмотр!
Если видео было полезным, ставьте лайк и подписывайтесь, чтобы не пропустить новые уроки по вёрстке и созданию сайтов! 💜
มุมมอง: 53
วีดีโอ
Как ускорить сайт и сделать адаптив секции Contact
มุมมอง 7714 วันที่ผ่านมา
👉 Адаптивная вёрстка секции Contact и оптимизация сайта | Google Speed, GitHub и кастомизация (Часть 16) :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я показываю, как сделать адаптивную секцию Contact, добавить анимацию с помощью JavaScript, а также провести оптимизацию вашего сайта, чтобы ускорить его загрузку. Мы испол...
Как сделать адаптивное портфолио с слайдером? Узнайте все секреты вёрстки!
มุมมอง 4221 วันที่ผ่านมา
👉 Адаптивная вёрстка портфолио и слайдера | Как создать профессиональный слайдер для вашего сайта (Часть 15) :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я покажу, как сделать адаптивную секцию портфолио с использованием слайдера на HTML, CSS и JavaScript. Это руководство идеально подходит для начинающих веб-разработчико...
Адаптивная верстка портфолио. Полное руководство
มุมมอง 10421 วันที่ผ่านมา
👉 Вёрстка портфолио - Адаптив секции Skills и Services (Часть 14) 👉 Как создать своё первое адаптивное портфолио на HTML, CSS и JavaScript. 👉 Как я создаю портфолио: Личные методики и подходы в вёрстке. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я покажу, как сделать адаптивным Skills и Services для вашего веб-сайта по...
Адаптив для сайта портфолио | Адаптивная верстка портфолио #13
มุมมอง 6928 วันที่ผ่านมา
👉 Вёрстка портфолио - Адаптив секции Home и About 👉 Как создать своё первое адаптивное портфолио на HTML, CSS и JavaScript. 👉 Как я создаю портфолио: Личные методики и подходы в вёрстке. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я покажу, как сделать адаптивным Home и About для вашего веб-сайта портфолио. Мы разберём,...
Вёрстка с нуля. Портфолио веб-разработчика для начинающих | part#12
มุมมอง 145หลายเดือนก่อน
👉 Вёрстка портфолио - Адаптив секции Header и Footer 👉 Как создать своё первое портфолио на HTML, CSS и JavaScript. 👉 Как я создаю портфолио: Личные методики и подходы в вёрстке. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я покажу, как сделать адаптивные хедер и футер для вашего веб-сайта. Мы разберём, как настроить эл...
Вёрстка с нуля. Портфолио веб-разработчика | part#11
มุมมอง 103หลายเดือนก่อน
👉 Вёрстка портфолио - Header 👉 Как создать своё первое портфолио на HTML, CSS и JavaScript. 👉 Как я создаю портфолио: Личные методики и подходы в вёрстке. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я делюсь своими методиками и подходами к вёрстке портфолио. Это видео предназначено для начинающих веб-разработчиков, кото...
Как сверстать идеальный Footer для портфолио? Секреты вёрстки, которые вы не знали!
มุมมอง 77หลายเดือนก่อน
👉 Вёрстка портфолио - секция Footer | Как создать профессиональный Footer с нуля (Часть 10) 👉 Как я создаю портфолио: Личные методики и подходы в вёрстке. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я покажу, как создать секцию "Footer" для вашего портфолио, используя HTML, CSS и JavaScript. Если вы хотите научиться вер...
Не знаете, как верстать секцию Contact? Узнайте всё прямо сейчас!
มุมมอง 62หลายเดือนก่อน
👉 Вёрстка портфолио - секция Contact | Пошаговое руководство для начинающих (Часть 9) 👉 Как я создаю портфолио: Личные методики и подходы в вёрстке. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я покажу, как создать секцию "Contact" для вашего портфолио с использованием HTML, CSS и JavaScript. Это видео предназначено для...
Хотите добавить слайдер в портфолио? Узнайте - как подключить Swiper Slider
มุมมอง 70หลายเดือนก่อน
👉 Вёрстка портфолио - Swiper Slider | Мои секреты для начинающих (Часть 8) 👉 Как создать своё портфолио на HTML, CSS и JavaScript. 👉 Как я создаю портфолио - Личные методики и подходы в вёрстке. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я покажу, как создать секцию "Our Clients" и добавить Swiper Slider для вашего пор...
Как сделать портфолио, которое впечатлит? Мои секреты вёрстки
มุมมอง 103หลายเดือนก่อน
👉 Вёрстка портфолио - блок Next Project | Мои секреты для начинающих (Часть 7) :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я делюсь своими личными методиками создания секции "Next Project" для портфолио с использованием HTML, CSS и JavaScript. Это видео предназначено для начинающих веб-разработчиков, которые хотят научи...
Вёрстка портфолио. Пошаговое руководство по секции Portfolio
มุมมอง 84หลายเดือนก่อน
👉 Вёрстка портфолио - секция Portfolio | Пошаговое руководство для начинающих (Часть 5) :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я покажу, как создать секцию "Portfolio" для вашего веб-сайта с использованием HTML, CSS и JavaScript. Это видео идеально подходит для начинающих веб-разработчиков, которые хотят освоить ос...
Вёрстка портфолио: Пошаговое руководство по секции Services
มุมมอง 1422 หลายเดือนก่อน
👉 Вёрстка портфолио - секция Services | Пошаговое руководство для новичков (Часть 5) В этом видео я покажу, как сверстать секцию "Services" для вашего портфолио с использованием HTML, CSS и JavaScript. Это видео предназначено для начинающих веб-разработчиков, которые хотят освоить базовые навыки и создать своё первое профессиональное портфолио. ::::::::::::::::::::::::::::::::::::::::::::::::::...
Вёрстка с нуля. Портфолио веб-разработчика для начинающих
มุมมอง 1.8K2 หลายเดือนก่อน
👉 Вёрстка портфолио - section Skills (Часть 4) 👉 Как создать своё первое портфолио на HTML, CSS и JavaScript. 👉 Как я создаю портфолио: Личные методики и подходы в вёрстке. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: В этом видео я делюсь своими методиками и подходами к вёрстке портфолио. Это видео предназначено для начинающих веб-р...
Вёрстка портфолио. Пошаговое руководство для новичков
มุมมอง 3192 หลายเดือนก่อน
👉 Вёрстка портфолио - секция About Me | Пошаговое руководство для новичков (Часть 3) В этом видео я покажу, как создать секцию "About Me" для вашего портфолио с нуля, используя HTML, CSS и JavaScript. Это видео подойдёт для тех, кто только начинает заниматься веб-разработкой и хочет научиться создавать профессионально выглядящее портфолио. :::::::::::::::::::::::::::::::::::::::::::::::::::::::...
Вёрстка портфолио. Практические советы и фишки
มุมมอง 2172 หลายเดือนก่อน
Вёрстка портфолио. Практические советы и фишки
Вёрстка портфолио для новичков. Полное руководство по HTML, CSS и JavaScript
มุมมอง 7242 หลายเดือนก่อน
Вёрстка портфолио для новичков. Полное руководство по HTML, CSS и JavaScript
React JS c Нуля 6 часов | Курс для начинающих [2024]
มุมมอง 1.9K6 หลายเดือนก่อน
React JS c Нуля 6 часов | Курс для начинающих [2024]
Перенос верстки на React. От идеи к реализации
มุมมอง 4787 หลายเดือนก่อน
Перенос верстки на React. От идеи к реализации
Урок React Custom Hooks/ #11 Custom Hooks
มุมมอง 1178 หลายเดือนก่อน
Урок React Custom Hooks/ #11 Custom Hooks
Уроки React Json Server / #9 - Fatch Data Challenge
มุมมอง 20511 หลายเดือนก่อน
Уроки React Json Server / #9 - Fatch Data Challenge
Уроки React Json Server / #8/2 - React JS для начинающих
มุมมอง 478ปีที่แล้ว
Уроки React Json Server / #8/2 - React JS для начинающих
Уроки React API/ #8 - React JS для начинающих
มุมมอง 333ปีที่แล้ว
Уроки React API/ #8 - React JS для начинающих
Уроки React Blog Part 2 / #7 - React JS для начинающих
มุมมอง 272ปีที่แล้ว
Уроки React Blog Part 2 / #7 - React JS для начинающих
Уроки React Blog / #7 - React JS для начинающих
มุมมอง 360ปีที่แล้ว
Уроки React Blog / #7 - React JS для начинающих
Учим React useEffect / #6 - React JS для начинающих
มุมมอง 276ปีที่แล้ว
Учим React useEffect / #6 - React JS для начинающих
Учим React Работа с формой / #5 - React JS для начинающих
มุมมอง 484ปีที่แล้ว
Учим React Работа с формой / #5 - React JS для начинающих
Учим React Рефакторинг кода / #4 - React JS для начинающих
มุมมอง 621ปีที่แล้ว
Учим React Рефакторинг кода / #4 - React JS для начинающих
Учим React LocalStorage / #3 - React JS для начинающих
มุมมอง 4.3Kปีที่แล้ว
Учим React LocalStorage / #3 - React JS для начинающих
Отличный проект в портфолио получился, всё успешно по вашим видео получилось, получил кучу полезных знаний. Буду ждать видео с переносом этого проекта на React). Спасибо!
Привет, спасибо за тёплый отзыв, пожелания приняты значит будет этот же проект на React!
😎👍
😎👍
Здравствуйте. Спасибо за обучающие видео, всё получается по урокам + очень интересный материал. Ночной режим я где то упустил урок как делается. В 11 видео его ещё нет, а в 12 видео уже есть.
Привет! Спасибо за то, что ты такой внимательный! 😊 Ты абсолютно прав, настройка переключения тем будет в следующем видео. Как награду за твою помощь и внимательность, я предлагаю тебе бесплатную консультацию! Напиши мне в Telegram или оставь заявку на сайте - и мы свяжемся, чтобы обсудить все вопросы. Буду рад помочь! 🚀
😎👍
😎👍
В этом видео я показываю наглядно как с помощью JavaScript можно анимировать эти секции, видео получилось довольно прикольным и уже начинает вырисовываться самое интересное. Следующее видео выйдет в конце этой неделе. С вас лайк и репост 👍❤
😎👍
Выглядит очень удобно, писать код зная на перед, что в нём должно находится. Это разширение или функция VScode ?
Я посмотрел первую часть, это функция )
😎👍
Привет! Если вам интересно увидеть это портфолио, созданное на React, ставьте лайк этому комментарию. Если наберём 100💥 лайков, я обязательно сниму видео о том, как это сделать! Давайте вместе сделаем что-то крутое 😄👍
😎👍
😎👍
hand-pink-wavingПривет! Если вам интересно увидеть это портфолио, созданное на React, ставьте лайк этому комментарию. Если наберём 100💥 лайков, я обязательно сниму видео о том, как это сделать! Давайте вместе сделаем что-то крутое 😄👍
😎👍
Сколько можно опубликовать репозиториев (шаг 4)? У меня уже есть один опубликованный с ссылкой проект, но мне надо сделать еще один с ссылкой. В новом в "branch" у меня автоматически стоит master, а main нет. Что делать?
Привет, если у тебя бесплатный аккаунт - неограниченное количество репозиториев. Branch master - main нет (master - это старое название ветки, сейчас основанная ветка). Main и master - это концептуально это одно и то же.
печально очень маленькая серия(
Я думал будет объединенная серия с этим маленьким блоком и слайдером(
Когда продолжение не терпится аж
Привет, в ближайшее время выйдет продолжение.
Почему-то этот сайт у меня плохо работает в Хроме, тормозит когда модальное окно открываешь....В Мозилле хорошо,а в Edge просто изумительно и быстро
Здорово что такие интересные проекты разбираешь, перевести это все на реакт еще было бы супер интересно
Привет! Если вам интересно увидеть это портфолио, созданное на React, ставьте лайк этому комментарию. Если наберём 100💥 лайков, я обязательно сниму видео о том, как это сделать! Давайте вместе сделаем что-то крутое 😄👍
Привет! Если вам интересно увидеть это портфолио, созданное на React, ставьте лайк этому комментарию. Если наберём 100 лайков, я обязательно сниму видео о том, как это сделать! Давайте вместе сделаем что-то крутое 😉
Привет! Если вам интересно увидеть это портфолио, созданное на React, ставьте лайк этому комментарию. Если наберём 100 лайков, я обязательно сниму видео о том, как это сделать! Давайте вместе сделаем что-то крутое 😉
Привет! Если вам интересно увидеть это портфолио, созданное на React, ставьте лайк этому комментарию. Если наберём 100 лайков, я обязательно сниму видео о том, как это сделать! Давайте вместе сделаем что-то крутое 😉
Привет! Если вам интересно увидеть это портфолио, созданное на React, ставьте лайк этому комментарию. Если наберём 100 лайков, я обязательно сниму видео о том, как это сделать! Давайте вместе сделаем что-то крутое 😉
А можно макет проекта куда-нибудь выложить?
Привет, к сожалению нет.
Спасибо, отличный урок для тех, кто уже немного знает Реакт.
Привет, если вы хотите сделать это портфолио на React ставьте лайки, Наберем 100 лайков и я запилю видео ))) Будет круто.
Было бы очень круто, буду ждать 🔥
Классные обучалки у тебя бро давай React
топчик♥
😎👍
😎👍
Спасибо! Крутой курс для начинающих!
Было бы четко, если бы этот курс был на vue 🥲
привет, я могу запелить на React ))
@@ilyastoyanov-html-css-js-react ждём тогда на реакте :)
😎👍
😎👍
СПАСИБО! Многое взяла с вашего урока! конечно, некоторое не получилось применить к моему сайту
Илья, спасибо большое! Много чему научился, особенно таблица в концовке огонь🔥🔥👍
Привет, рад что видео было полезным.
Огромное спасибо и низкий поклон!!!! Шикарный туториал как запусть слайдер!!!!😀 Очень помог!!!!
Продолжайте вашу роботу, есть еще много интересного объяснить нам , начинающим. Спасибо
А как залить на github проект если он собирался с помощью gulp? Там свои особенности!!!
Привет, при работе с gulp нужно заливать файлы из папки prod или build (она мажет по разному называться), в ней находятся готовые скомпилированные файлы.
6 часов чистого кайфа, спасибо!
Спасибо, очень помогли с дотсами !
прям очень помог, спс
Спасибо
Спасибо за урок! Как называется расширения показывающие, что это React?
Привет, расширение - React Developer Tools
Лучший, не останавливайся!
Отличный урок,спасибо!
Спасибо, хорошая работа.