- Видео 17
- Просмотров 47 592
Web Developer Master
Россия
Добавлен 11 май 2021
Привет, с вами Web Developer Master. На этом канале будут уроки web-разработке. Уроки по html, css, bootstrap, различные cms системы такие как wordpress, OpenCart, ModX и многое другое! Также много уроков по верстке сайтов! Подписывайтесь на наш канал, оставляйте свои вопросы и мы обязательно их рассмотрим в видео!
Адаптивная верстка сайта на Flexbox css | Реальный заказ за 12000₽ | Часть 5
Бесплатные курсы по верстке:
👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS
ikles77.programsite.ru/freemakeup2
👉 Обучение адаптивной вёрстке сайтов для начинающих
ikles77.programsite.ru/makeup2
Ссылка на исходники:
boosty.to/web_developer_master
Ссылка на макет:
www.figma.com/file/YdsPhMbuQSTXwod2YqOyjI/clean-ikles?node-id=1%3A676
Давно хотели изучить основы верстки, но теоретические видео слишком скучные? Решение верстка реального сайта с нуля для клиента с фриланса. Я покажу как происходит верстка макета из FIgma. В этом уроке мы будем верстать лендинг клининговой компании. Разберем, в этом уроке как с помощью html и css сделать грамотную верстку.
Также будет рассмотрена адаптивная верс...
👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS
ikles77.programsite.ru/freemakeup2
👉 Обучение адаптивной вёрстке сайтов для начинающих
ikles77.programsite.ru/makeup2
Ссылка на исходники:
boosty.to/web_developer_master
Ссылка на макет:
www.figma.com/file/YdsPhMbuQSTXwod2YqOyjI/clean-ikles?node-id=1%3A676
Давно хотели изучить основы верстки, но теоретические видео слишком скучные? Решение верстка реального сайта с нуля для клиента с фриланса. Я покажу как происходит верстка макета из FIgma. В этом уроке мы будем верстать лендинг клининговой компании. Разберем, в этом уроке как с помощью html и css сделать грамотную верстку.
Также будет рассмотрена адаптивная верс...
Просмотров: 493
Видео
Адаптивная верстка сайта, flexbox сетка на css | Реальный заказ за 9000₽ | Часть 10
Просмотров 465Год назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 Ссылка на макет: www.figma.com/file/AqDA03SyNkkxqpRwx3DGX4/Round-Ligistic-RUclips?...
Адаптивная верстка сайта, flexbox сетка на css | Реальный заказ за 9000₽ | Часть 9
Просмотров 561Год назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 В этой части видео мы будем верстать блок используя адаптивную flex сетку, flexbox...
ВЕРСТКА САЙТА ПО РЕАЛЬНОМУ МАКЕТУ | Как сделать слайдер на сайт | Слик слайдер на HTML и CSS #8
Просмотров 707Год назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 В этом видео мы будем делать верстку слайдера на слик слайдер. На очереди верстка ...
Адаптивная верстка сайта на FLEXBOX. Учимся верстать на флексах. Флексбокс уроки #7
Просмотров 7012 года назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 В этом видео мы будем делать верстку сразу 3 блоков. Да, будет верстка на Flexbox....
Верстка слайдера для сайта Slick Slider на html, css, Js/Jquery | Часть #6
Просмотров 1,4 тыс.2 года назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 В этом видео мы будем делать верстку сладйера (Slick Slider). Сначала сделаем верс...
Стилизация чекбоксов и радиокнопок на CSS HTML | Checkbox, radio buttons
Просмотров 3802 года назад
Бесплатные курсы по верстке: 👉 Практика верстки сайта-лендинга с нуля до результата goo.su/wRiZkWC 👉 Практика верстки сайта на CSS Grid goo.su/2qFtcfe 👉 Верстка лендинга мобильного приложения с нуля goo.su/tjkJZIs Ссылка на код формы: codepen.io/ikles/pen/LYzVVoY Ссылка на макет: www.figma.com/file/5BIvPhaKKpnSJDiUPuX5IC/Chekboxes-radios-youtube?node-id=0:1 В этом видео мы будем делать стилизац...
Верстка сайта с нуля по макету фигма | Реальный заказ за 9000₽ #5
Просмотров 5642 года назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 В видео показан процесс верстки сайта с нуля по макету фигма для реального заказчи...
Адаптивная вёрстка по БЭМ. Как сделать верстку сайта. Респонсив верстка. HTML, SCSS, Gulp, JQuery #4
Просмотров 9242 года назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 В этом видео я покажу как делаю адаптивную верстку блока преимуществ используя мет...
Адаптация сайта под мобильные устройства | Адаптация сайта для телефона | Медиа запросы css #3
Просмотров 9372 года назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 В этом видео я покажу делать адаптацию сайта под мобильные устройства, используя c...
Верстка бургер меню на HTML CSS JS. Адаптивное бургер меню #2
Просмотров 1,4 тыс.2 года назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 В этом видео я покажу как делать адаптивное бургер меню для сайта на HTML CSS JS. ...
Адаптивная верстка шапки сайта html css | Header сайта | Верстка сайта с нуля #1
Просмотров 7 тыс.2 года назад
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 Адаптивная верстка шапки сайта на html css ждет вас в этом уроке. Сначала мы сдела...
Адаптивная верстка сайта на Flexbox css | Реальный заказ за 12000₽ | Часть 4
Просмотров 2,4 тыс.2 года назад
Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 Давно хотели изучить основы верстки, но теоретические видео слишком скучные? Решение верстка реального сайта с нуля для клиента с фриланса. Я покажу как происходит верстка макета из FIgma. В эт...
Верстка сайта с нуля до завершения html/css/js | Реальный заказ за 12000₽ | Часть 3
Просмотров 2,5 тыс.3 года назад
Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 Давно хотели изучить основы верстки, но теоретические видео слишком скучные? Решение верстка реального сайта с нуля для клиента с фриланса. Я покажу как происходит верстка макета из FIgma. В эт...
Верстка сайта с нуля для начинающих html css | Реальный заказ за 12000₽ | Часть 2
Просмотров 3,8 тыс.3 года назад
Верстка сайта с нуля для начинающих html css | Реальный заказ за 12000₽ | Часть 2
Верстка сайта с нуля по макету фигма | Реальный заказ за 12000₽
Просмотров 20 тыс.3 года назад
Верстка сайта с нуля по макету фигма | Реальный заказ за 12000₽
спасибо за урок, можешь поделиться полным макетом? (по ссылке только половина, хотелось бы доделать до конца...))
www.figma.com/file/kXLojUdBGV2TYxVvCaoKvW/clean-FULL?type=design&node-id=0%3A1&mode=design&t=zrrfaM5q2Pb0XUIx-1
благодарю)
Спасибо большое, очень помогло))
Бомба, честно говоря
Это точно!
Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 Ссылка на исходники: boosty.to/web_developer_master Ссылка на макет: www.figma.com/file/YdsPhMbuQSTXwod2YqOyjI/clean-ikles?node-id=1%3A676
Чтоб учить нужно не просто показывать как надо делать, нужно комментить каждую строчку когда, каждое действие почему оно принято итд, не очень подходит для новичков, учить надо уметь))))
Какое разширение у тебя который добавляет webkit
В sublime text это hayaku вроде, но это в scss вообще не нужно, так как gulp потом компилирует в css c уже добавленными webkit и прочими префиксами.
@@webdevelopermaster7475 спасибо большое
Спасибо большое за проект, полностью сверстал проект по твоим видео, много чего извлек из видео. Супер, будем ждать следующий проект )
Рад, что помогло!
Здравствуйте, скажи-те пожалуйста, что за плагин для браузера используете, когда меряете расстояние и смотрите ровно не ровно элемент в браузере
cliptonet программа для скриншотов экрана. Просто когда делаешь скриншот, он показывает какое расстояние. Но думаю можно найти плагин линейки, просто набрать в поиске "плагин для chrome линейка"
лучший , очень помог
нормас, монтажа не нужно, лайв есть лайв
Принял
Добрый день. Есть адаптивный сайт, когда с компа растягиваешь/уменьшаешь проверяешь все отлично, моб версия тож все как надо, но когда нажимаешь на "версию для пк" в телефоне , в некоторых местах дизайн слетает. От чего это может быть?
Привет, на конец-то ты вернулся!
Ссылка на исходники проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 Ссылка на макет: www.figma.com/file/AqDA03SyNkkxqpRwx3DGX4/Round-Ligistic-RUclips?node-id=255%3A0 Предыдущие уроки: 1. часть: ruclips.net/video/O4KuE2vqApg/видео.html 2. часть ruclips.net/video/UIf9rl6Qv6U/видео.html&t 3. часть ruclips.net/video/yi9yTmOZubQ/видео.html&t 4. часть ruclips.net/video/3mKfS_nILpI/видео.html&t 5. часть ruclips.net/video/7d4PyHiF2rk/видео.html 6. часть ruclips.net/video/P8Q0B5HRfLo/видео.html 7. часть ruclips.net/video/F9c_eBH0LTM/видео.html 8. часть ruclips.net/video/BYPkk7iGkHw/видео.html 9. часть ruclips.net/video/vU6f-YBhWpQ/видео.html
О круто, наконец-то! Как раз сейчас буду делать, выходной не пропадет!
клава канешно жесть
Красавчик
Заказчик уже год ждёт?
Это реальный макет реального проекта, но он уже давно сверстан и отдан. На видео он верстается во второй раз с объяснениями.
Спасибо большое
Спасибо, прикольный макет и неплохая верстка.
можете подсказать, где брать заказы начинающему верстальщику, чтобы набраться опыта?
Можно на бирже фриланса предложить очень маленькую цену или вообще договориться за отзыв. Также можно в соцсетях, если много друзей, написать в ленте, что делаете верстку по низкой цене для наработки опыта.
Не плохо делаешь, интересный формат, есть пожелания по поводу того, что бы весь проект проходил с самого начало, то есть: как находишь заказ, общение с заказчиком, приступаешь к работе, вёрстка и сдача проекта с поправками от заказчика(если нужны), что бы посмотреть детальнее как происходить именно весть процесс, а вообще очень классно, спасибо за контент))
Хорошая идея!
Привет. 1 часть год назад?
Привет, да
Спасибо, круто, буду смотреть. Как раз пока праздники, в самый раз!
Отлично!
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 Ссылка на макет: www.figma.com/file/AqDA03SyNkkxqpRwx3DGX4/Round-Ligistic-RUclips?node-id=255%3A0 Предыдущие уроки: 1. часть: ruclips.net/video/O4KuE2vqApg/видео.html 2. часть ruclips.net/video/UIf9rl6Qv6U/видео.html&t 3. часть ruclips.net/video/yi9yTmOZubQ/видео.html&t 4. часть ruclips.net/video/3mKfS_nILpI/видео.html&t 5. часть ruclips.net/video/7d4PyHiF2rk/видео.html 6. часть ruclips.net/video/P8Q0B5HRfLo/видео.html 7. часть ruclips.net/video/F9c_eBH0LTM/видео.html 8. часть ruclips.net/video/BYPkk7iGkHw/видео.html
Спасибо, как раз то что искал, подписался, остальные видео тоже крутые!
Рад, что вам было полезно!
Очень грамотная работа! Я удивляюсь как вы без каких-то проблем сверстали сайт.Я сам новичок и с проблемами верстаю сайты) уверен ошибок там много.Но смотря на вас я узнал о многих фишек и функций! Спасибо
Пожалуйста! Рад, что вам помогло
Круто! Было бы замечательно, если бы вы добили верстку этого сайта! А так спасибо за практику, учитель!)
Здравствуйте, ну как так-то и этот макет не доделан.....((((
Здравствуйте, не могу разобраться в чём же причина, жквери подключил, при нажатии на бургер, не выдвигается менюшка, только оверфлоу(затемняет экран) срабатывает, в чём может быть проблема?
Попробуйте еще раз проверить весь js код по уроку. Возможно стереть весь свой и повторить мой заново. Я когда учился делал именно так. В будущем вам нужно будет самостоятельно искать свои ошибки, поэтому лучше сразу этому учиться.
Также вот посмотрите файлы проекта. Там есть правильный код, может найдете причину disk.yandex.ru/d/sPRwdbrAKrB_HA
Здравствуйте, как же жаль, что продолжения не будет, ну кто же так делает, на половине всех обломать(
На канале есть второй плейлист, там видео другого макета с адаптацией
@@webdevelopermaster7475 Так то да, но и этот проект интересно было бы доделать до конца
Привет, скажи, цена 12000 указана с учетом адаптива под мобилку и планшет? Сколько времени в среднем у тебя уходит на верстку такого макета?
Цена за всю верстку. 15-20 часов
Привет, дружище, скажи пожалуйста, где берёшь заказы?
на фл.ру
А я запутался,на фига такая большая вложенность?
в каком именно месте?
@@webdevelopermaster7475 Привет,ну где ты начал вкладывать top-1,top-2 и тд.Но было интересно).Я как раз учу позиционирования,и display свойства
@@Tornado-ln7fq на первом этапе нужно просто повторять, если не понятно. После повторения 3-4 макетов. Нужно самому пытаться сверстать с нуля, иногда подглядывая в прошлые работы. Далее уже будет становиться понятно для чего такая вложенность и сами выработаете свою технику, где возможно вложенность будет совсем другая.
@@webdevelopermaster7475 Хорошо спасибо за совет)
Спасибо
css воспринимает за ошибку + span{}, что это и как по другому можно написать
напишите ваш полный код
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 Ссылка на макет: www.figma.com/file/AqDA03SyNkkxqpRwx3DGX4/Round-Ligistic-RUclips?node-id=255%3A0 Предыдущие уроки: 1. часть: ruclips.net/video/O4KuE2vqApg/видео.html 2. часть ruclips.net/video/UIf9rl6Qv6U/видео.html&t 3. часть ruclips.net/video/yi9yTmOZubQ/видео.html&t 4. часть ruclips.net/video/3mKfS_nILpI/видео.html&t 5. часть ruclips.net/video/7d4PyHiF2rk/видео.html 6. часть ruclips.net/video/P8Q0B5HRfLo/видео.html 7. часть ruclips.net/video/F9c_eBH0LTM/видео.html
Посмотрел с удовольствием, спасибо за видео! Я только начал изучать адапатив и твое видео очень кстати👍
Пожалуйста продолжай блог, очень приятно и полезно смотреть твои видеоролики. Полезный канал, грустно что мало людей смотрят и Тебя демотивируют..
Что-то не, когда указываю параметры для класса контейнера к примеру .contain { width: 1556px; margin-left: auto; margin-right: auto; min-height: 100vh;} Серый цвет который мы указали в Топ-1 занимает всю площадь то есть весь экран примеру .top-1 { display: flex; background-color: #efefef; } А если указать дополнительный параметр height: 54px; align-items: center; Все кнопки указынные в UL/Li пропадает
Я разве контейнеру указывал min-height: 100vh? На каком видеои на какой минуте?
@@webdevelopermaster7475 Дауж в контайне не было min-height 100vh оказывается я по ошибке добавил
@@webdevelopermaster7475 Спасибо большое все работает
@@webdevelopermaster7475 ответь на еще один вопрос пожалуйста .top-1-w { display: flex; justify-content: space-between; При указание данного параметра у меня пункт меню прижат к левому краю а личный кабинет по центру почему так
@@adiletashimbaev676 у блоков внутри .top-1-w не должно быть внешних боковых отступов, тогда должно работать.
Урок хороший! Но у меня вопрос а почему все кнопки ты делаешь через тега а не через button?
Привык так делать, это никак не влияет на результат или доход
Холодно😀
Делая margin -rigth: 54 px; в самом верхнем меню, у последнего элемента Контакты у вас тоже будет 54 px, это надо убирать ?
Делайте так, чтобы соответствовало макету. Или повторяйте за мной в видео.
А продолжения то нету 😁
Четкий тип, хорошо все показывает и обьясняет . Без заумной хy*ни , типо как фрилансер по жизни и другие.
Ждём продолжение. Хотя я сам наверное доверстаю 😁
Очень интересный урок 👍
Отлично, нашел прикольную верстку, буду учиться вместе с вами!)
Спасибо за видео. Продолжение планируется?
Ссылка на исходники готового проекта boosty.to/web_developer_master/posts/768f043a-80ab-4f76-8052-e4b72cf6497c Бесплатные курсы по верстке: 👉 Больше 6-ти часов бесплатных видеоуроков по HTML и CSS ikles77.programsite.ru/freemakeup2 👉 Обучение адаптивной вёрстке сайтов для начинающих ikles77.programsite.ru/makeup2 Ссылка на макет: www.figma.com/file/AqDA03SyNkkxqpRwx3DGX4/Round-Ligistic-RUclips?node-id=255%3A0 Предыдущие уроки: 1. часть: ruclips.net/video/O4KuE2vqApg/видео.html 2. часть ruclips.net/video/UIf9rl6Qv6U/видео.html&t 3. часть ruclips.net/video/yi9yTmOZubQ/видео.html&t 4. часть ruclips.net/video/3mKfS_nILpI/видео.html&t 5. часть ruclips.net/video/7d4PyHiF2rk/видео.html 6. часть ruclips.net/video/P8Q0B5HRfLo/видео.html
Было бы правильнее писать нескучная и понятная теория.