#1 Верстка сайта для начинающих | Шапка сайта 

Таймкоды: 1:08 Что сделаем в уроке 1:35 Создаем структуру папок для проекта 2:34 Подключаем шрифты 4:00 Нарезаем изображения 9:06 Подключаем normalize css 10:08 Базовые стили CSS 13:00 Разбираем section-top 13:52 Верстаем section-top 16:02 Установка browser-sync 16:40 Запускаем browser-sync 18:10 Стили для section-top 36:25 Адаптив для section-top 39:42 Разбираем header-page 41:04 Верстаем header-page 44:58 Стили для header-page 01:01:04 Адаптив для header-page

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

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

Очень круто и пошагово рассказываешь) продолжай в том же духе)

Спасибо!!! Круто, толково и системно. Мало кто умеет так точно определить и объяснить самые важные моменты. 👌👍

Чувак, ты просто красава! Легко, без затяжной интонации, быстро и понятно.

Очень понравилось! На фоне "курсов", где для верстки LP в 3 экрана 45 минут настраивается окружение (понты - понты), все по делу.Коротко и ясно. Согласен с комментарием автора, что любая задача в верстке имеет несколько решений и какой способ выбрать в конкретном случае решает верстальщик (например в верстке под CMS будет логичным один подход, в другом случае - другой) Успехов!

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

Как спокойно просто и понятно все комментируете, спасибо большое подчерпнула для себя новые знания.Удачи в развитии♥

Спасибо большое за данные уроки. Делать сайты это хорошо, мне одному нравится что это кайф)?

Вообще четкая верстка , с объяснениями что да почему... аплодирую! Нового ничего конечно для себя не узнал но для новичков этот контент на вес золота).

Отдельное спасибо за горячие клавиши

Очень качественно. Каждая строчка объясняется, в описании материалы урока и полезные ссылки... Мечта, а не канал

Спасибо Зема! Красиво все и подробно, годнота! Респектище тебе!

Спасибо большое за урок. Узнала много нового, отдельное спасибо за гамбургер :)

Для тех у кого нет в PS шрифтов Roboto и Monserrat: Заходите в Google Fonts, выбираете их и все их вариации, как в этом видео (все также) далее в верхнем правом углу есть иконка загрузки (стрелка вниз) вот ее нажимаете и у вас качается в загрузки зипованный файл. Распаковываете его где-то и потом когда зайдете в эту (распакованную) папку просто мышкой кликаете по каждому шрифту он открывается и там сверху должна быть кнопка "Установить" (нужны права админа). далее перезагружаетесь и заново открываете PS. Шрифты должны автоматом заработать.

Комментарий в поддержку автора! Так держать

Спасибо! Жду новые видео! Было бы интересно узнать про натяжку вёрстки карточки товара в Woocommerce. То есть как изменять карточку товара в соответствии с макетом/вёрсткой.

Спасибо, снова появилась мотивация верстать!

Очень качественный урок, лайк.

Спасибо за труд, все круто!

Спасибо большое! Жду ещё видео.

*Классно, практически все понятно*

Урок не совсем для новичков. Эта верстка учитывает многие аспекты для работы высокого качества. Объяснение супер и сам макет интересный!

Привет. на 55 минуте делаешь плашки для меню с помощью before. Подскажи, не проще ли сделать с помощью paddinga? и в чем отличие?

Очень интересно!!! Желаю Удачи!!!

Удачно зашел сюда!Первое видео отличное!Подписка ,буду дальше смотреть!Только не пропадай,делай дальше такие видео)

Привет! Спасибо за материал! :) Просьба: я сижу за ноутом и одновременно повторяю за тобой. Но очень тихий звук, прям напрягает сильно, уже хочется подключить наушники. Было бы здорово, если звук будет погромче. Из сильных сторон: твой урок - это редкий случай, когда не то чтобы 1,25 или 1,5 не хочется ставить, а наоборот, иногда думал притормозить. ))) Очень хороший контент, много решений. Ставлю на паузу и экспериментирую)) Думаю, название не соответсвует, это не для новичков, а для тех, кто уже достаточно «поковырялся в коде. Например, новичку не реально влезть в Настройки VS Code и настроить GIT и Bush. C Photoshop будут тоже трудности. (А почему ты не стал использовать Figma? ) Например, как включить сетку, как приближать картину итд. Надеюсь, и дальше будет также ))

Молодец. Крутой урок!

Привет! Скажи пожалуйста на 1:04:00 зачем делать такую разметку у кнопки, не совсем понимаю, я знаю метод через button и внутри просто 3 span а и мы к ним потом к каждому обращаемся, чтобы поменять расположение, а вот тут, как я понял, btn-menu__box мы делаем для того чтобы область нажатия была 40px или область нажатия делается в стилях самой кнопка btn-menu, указав padding 15px, а сами полоски это уже btn-menu__inner, верно?

Молодец, спасибо за видео, только мало объясняешь то, что пишешь.

30:00 Box-shadow для кнопки 31:00 styles :hov посмотреть hover в браузере эффект нажатия: transform: scale(0.95)

здравствуйте, а что если в другом макете не получается открыть картинку(к примеру, логотип) в иллюстраторе таким способом как вы показываете? Это значит, что она была сделана не в иллюстраторе, а в фотошопе? И тогда ее просто нужно экспортировать в растровом формате?

Спасибо! Отличный урок! Жаль что мне не попался когда я только вёрстку осваивала, сейчас смотрю ради WP) Но качество видео и звука печалька(

Очень понравилась подача материала. Спасибо за проделанную работу. С вами можно как-нибудь связаться?

А в чем разница между добавлением svg картинки в иллюстратор и тем, что можно нажать на кнопку экспортировать как, и тоже на выходе получишь svg изображение?

Спасибо!

Спасибо за видео.Вопрос: Зачем там много классов к элементам (я про классы page-li, img logo, phone и т.д.) разве это не считается дурным тоном?

а нормальной ли практиков будет писать названия классов типа section-top__p или section-top__h1 или это будет считаться не очень правильно?

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

Спасибо большое за видео! Классный формат, уместные и понятные комментарии 👍 Возник вопрос на 53:30 - здесь используются стили top: 50%; transform: translateY(-50%). Почему нельзя применить просто top: (-50%)?

Круто) давай натяним на водпресс после верстки 👍

почему не на основе bootstrap вёрстка построена? Где грань когда нужен bs, а когда вручную проще?

имхо проще скачать расширение в vsc называется LiveServer

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

Курс очень интересный , но пожалуйста подумай над микрофон . Басс перевешивает уровень и долго слушать больно.Заранее спасибо )

У меня вопрос? ? Я к примеру не совсем новичок Знаю плохо html и css и все Подойдут ли такие видео для меня?? А пока жду ответа, буду смотреть все эти видео

не подскажите почему логотип в свг не отображается, а в пнг отображается.Экспортировал не как Вы,просто правой кнопкой и экспортировать как, может из-за этого?

Привет, застрял на фотошопе. Как сделать так чтобы в фотошопе ничего не двигалось? Например когда ты тянешь картинку он у тебя обратно встает на место. Еще не могу найти как экспортировать несколько изображений. Пытался сделать как ты, но не получается.

Такой вопрос. Фоновая картинка не отображается на Iphone ?Как можно исправить ?

Добрый день) Урок крутой, подскажите можно пожалуйста макет в фигме? Буду очень благодарна

Юзайте @import в main.css для подключения файлов, чтобы не копить все css файлы в .

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

Добрый, подскажи пож, почему в инспектор кода для section-top__container width: 520px; перечернкуто, в чем проблема?

но есть же live server :)

Чувак кровь из носа как нужна верстка при помощи сборщика gulp 4 и всех нужных плагинов и препроцессоров!!! Я просто уже наверно 10 макет верстаю для нащинающих но никак немогу найти видосы про реальную верстку с gulp или webpack*(((. Но лайк не глядя!

ахуенно

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

Прошел всё по шагам, Browser-sync не работает, может ты что то упустил в инструкции, например, как установить git bash, может нужно что то установить через командную строку? удаляю короче всю эту хрень Git и Node.js не работает ни хера этот браузер синк

Надеюсь, ты живой ибо нужна помощь!!!

Как скачать файлы с гит хаб?

Привет! видео классные, пока все получается. Но пока обновляю страничку вручную, не могу установить browser-sync. Установил нод, вроде все норм запускаю команду и выходит ошибка npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 =4

Как скачать с гит хаба исходники

1:12:55 Кто придумал этот тренд в web-дизайне, всегда делать фиксированную шапку... оно ж реально сжирает область видимости. Особенно на мониторах с 16:9, и тем более на 21:9. Ну это кошмар какой-то. И чуть ли не на каждом втором сайте эта хрень.

До 18мин для начинающих,а как ушли из редактора это уже для профи,жаль,уже сложнее воспринимать что делаете.

43:25 ... в хедер одни дивы )))), вэм типа применяем а html5 не обращаем внимания. почем нельзя использовать секшен, артикл или иннер как оббертку, номер теле тоже нало своим тэгом, чтобы на сотке смотреть и набирать.... может вам рановато учить других? на 8 уроков столько ошибок. На продакшен пойдет, заказчик и так не шарит, но если это для начинающих надо давать строго по правилам... незнаю, так кажись правильно )))

вообще не для новичков.........................

Зачем ты запретил скачивать архив файлов?????? может я хотел код заценить чет поменять, тупо трата времени, дизлайк за такое

Бред

Спасибо!