Верстка сайта с нуля, для новичков. Интенсив по верстке, день 1
HTML-код
- Опубликовано: 1 июн 2020
- Марафон по верстке сайта. За 3 дня полностью сверстаем сайт и сделаем адаптив. Объясню все что делаю, и зачем. Отвечу на вопросы.
Тема в VSC - плагин Material Theme
Макет - drive.google.com/file/d/1w5dk...
Все исходники, инструкция и информация в телеграм канале.
Ссылка на телеграм канал:
bit.ly/3eaDJKi
Ссылка на телеграм канал с впн:
teleg.one/from0to1ru
Если это не помогает, просто зайдите в телеграм и в поиске введите from0to1ru или марафон по верстке.
Чат верстальщиков:
t.me/chat_from_0_to_1
Написать мне в ВК:
vadimprokopchuk
Написать мне в телеграм:
t.me/silver8light
Отзывы о моем авторском курсе по верстке:
topic-104892258_40476405
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Хочу вам сказать СПАСИБО! Я много уроков смотрела, но так как вы никто не объясняет. Вы супер! Жду с нетерпением от вас уроки. То что вы делаете это большой труд.! Спасибо!
Благодарю
Спасибо большое.
Первый раз смотрела- разбирала тонкости и делала записи интересных/новых моментов для меня, а во второй просмотр уже вместе с вами делала верстку. Так удобно, мне показалось)
Время с вами проводить весело и полезно!!))
Мужик, ты как всегда лучший, несёшь нам непросветленным (я о себе и таким как я), еще сто раз спасибо за твои старания, добра тебе и благополучия))
Благодарю!
Спасибо тебе огромное!!! пишу не первый раз уже это)) но так круто как ты - объясняет очень мало.
Благодарю
красавчик, хорошая подача, доступно для более-менее новичков, посмотрел на одном дыхании
Sergey Chaus благодарю
Спасибо за запись, труд, старались видно
Благодарю!
Как всегда класс!!! Спасибо за вашу работу,сверстала практически все ваши стримы,не все получается...но все-таки это здорово. До сих пор в раздумьях записываться ли на ваши курсы...
спасибо, рад что все полезно
Вадим, спасибо вам огромное! за ваши вечеринки ))
Вадим, спасибо тебе! шикарные уроки! Есть только одна просьбочка=) ты не мог бы добавлять разделы на видео, чтобы человек когда будет возвращаться то мог бы , например найти раздел : " Подключаем шрифты " =) прям как я сейчас=) или еще что=)
Спасибо за твой труд!!
Топовый канал. Идеально доносишь информацию
Спасибо Вадим! Очень познавательно!
Шикарный видос! Волшебнейший парень
Супер, спасибо за контент, я новичок, буду начинать учиться по вашим видосам=)
Очень классно и информативно!
0:00 Приветствие;
2:12 Регламент;
7:00 Погнали;
8:14 Figma;
9:15 Файлы;
11:47 Открываем код;
12:15 Начинаем верстать;
18:35 Вставляем картинку в Header;
23:53 кастомизация картинки-фона;
28:19 Меню и номер телефона (html);
45:07 Название (Cappadocia) (html);
49:38 Картинка телефона (html);
52:18 Контейнер (CSS)
1:02:45 Меню и номер телефона (CSS);
1:04:49 Делаем список в строку;
1:05:51 Отступ между средним пунктом меню;
1:14:31 Подключаем шрифты;
1:31:04 Подчёркивание при наведении на ссылку;
1:34:56 Картинка телефона (CSS);
1:40:43 Название (Cappadocia) (CSS);
1:47:00 Ответы на вопросы;
Большое спасибо! Просто и понятно.
класс! начинаю смотреть, нравится юмор :)
спасибо за шикарный мануал!
Спасибо. Очень интересно.
Ну что погнали)
Вадим,ти the BEST
Годный контент👍
Вадим , спасибо за контент, будет ли стрим(видео) про гриды? И марафон с средним/сложным макетом?
обязательно
21:21 - ставим фото , делаем обложку
34:01 - весь код html (полный (header))
41:20 - nav
_______________________
52:28 - контейнер
***59:45 - просто надо
1:03:00 - header__top (css)
***1:05:57 - особенность
1:09:51 - body
_____________________________
1:14:54 - скачиваем шрифты
1:29:06 - еще раз body
1:38:06 - телефончик слева с рядом номера телефона
1:40:50 - Capadocia (title)
1:12:05 - как у ссылок поменять цвет (у всех)
Спасибо !)
Благодарю)
начинается непойми с чего, потому что ютуб не сразу весь стрим добавляет, время должно пройти. завтра утром уже точно всё будет нормально
Да братан погнали
Красава супер
Вадим, привет! У меня вопрос. Если даже пунктов меню будет не 3 а 7, или 8, то все равно правильнее через "+"-ы им марджины задавать, а не через first/last-child?
spaibo ogromnoe Vadim
Вадик давай видео о зарубежной фриланс бирже. Срочно!!!
1:07:06 не проще ли между словами добавить отступы через word-spacing?
Вадик посоветуй что делать с выпадением? Блока
Сверху мы выравниваем padding а снизу margin. Как лучше поступать ?
А то приходиться каждый раз дополнительно потом выравнивать. Бугаю по css свойствам.
спасибо за контент, как всегда на высоте!!!!
в теге можно не писать сразу , тогда зачем дишняя обертка?
в теге menu можно не писать
Подскажи где почитать или скачать про твои макеты и программу для их разбора.
Можно ли будет купить курс 150 долларов который через какое-то длительное время?
А где можно скачать папку с исходниками?
Привет! Недавно стал изучать верстку. Не легче ли использовать бутстрап для адаптации сайта на разных экранах? Или есть что-то для этого на CSS?
бутсрап заберет слишком много ресурсов, это того не стоит
У меня такой вопрос: я верстаю на ноутбуке (1366х768). Если ставить такие размеры шрифта, то будет капец как плохо. Как правильно делать, макет как-то макет уменьшать пропорционально или я просто где-то туплю? Чтобы и у меня сайт корректно отображался и у заказчика.
верстать можно на любом мониторе, можешь просто в браузере отдалить экзан, писать все те же шрифты, что и на видосах, а при адаптиве уже как раз будет всё подстаиваться под любые размеры, поэтому с адаптивом будет хорошо и тебе и заказчику
Почему у меня не видна КОНТЕЙНЕРА через figma
Добрый день! Скажите, пожалуйста, через какой графический редактор Вы работаете с PSD расширением? Есть ли альтернатива?
Psd через фотошоп, можно ещё использовать авакод. В видео макет не psd, там фигма
@@vadymprokopchuk спасибо, очень доходчиво обьясняете!
Спасибо за марафон!
Вопрос: шрифт belqis не работает, вместо него Times New Roman. В чем может быть проблема?
Вопрос решился.Все работает :)
Как Вы исправили ошибку? Потому что у меня тоже не работает и показывает Times New Roman
@@user-st7ev5dd4t не знаю, нашёл ответ или нет, но на всякий случай напишу - пути проверь в подключенных шрифтах, там где указывается путь к файлам шрифтов, в какой папке они находятся и как к ним у тебя прописан путь, потому что обычно по умолчанию просто пишут fonts/***.woff, а надо исправлять на ../fonts/***.woff нужно добавлять ../ это говорит коду, что нам нужно выйти из папки в которой находится файл scss на один уровень выше и потом уже найти папку fonts
А зачем картинку которая на о=фоне вставлять через css? Тогда если эта верстка попадет на вордпресс то эта картинка получится харткодом, ее не смогут сделать динамической и менять если попросит заказчик или сам захочет поменять, можешь объяснить?
а где начало?начинается не пойми с чего ....
хотел поинтересоваться, насколько актуален твой 7 часовой видос сейчас? Спустя год может уже что-то изменилось и некоторые моменты устарели?
актуален
Все классно! Но микрофон - басс бустер, в наушниках смотреть аж больно.
Когда на стол руки кладешь или печатаешь. *
сколько стоит курс
Хм... Только два часа ютубчик отчехлил после трансляции(
Ребят, не работает шрифт Balqis на Mac Os, подключил верно, проверил 100500 раз, инспектор кода его видит, но в браузере отображается какой-то другой( Уже сломал голову, в чем может быть проблема?
И у меня та же тема..., не могу понять ...
Вот так будет правильнее ;)
:root {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
Продолжай делать уроки
Omg yes! Is your video Software free? let's be youtube friends? xo
Здравствуйте) Я вообще ни разу не верстала. Подскажите, пжс, какие проги надо установить, чтобы начать верстку?
Googlechrome, figma, VSCode
@@user-mk3qg3zt2z Спасибо за совет!
А где исходники? В телеграмме нет их(((
есть, просто отмотай немного, все продумано))
мне б такого учителя в школе..нормально б хоть учился..юмор рулит
А почему нету ссылки на псд макет?
потому что макет в figma
@@vadymprokopchuk ?
все круто но звук бьет по ушам, сделай шумоизоляцию в комнате
порешаем
@@vadymprokopchuk спасибо что прислушиваетесь к аудитории) миллион подписчиков вам
честно говоря, ни разу не засекал какой-то шум, ни на видео ни на стримах у Вадима... я не придираюсь, просто пытаюсь понять, о каких шумах некоторые говорят... исправный хороший звук, проблем нет... может что-то с настройками звука у вас (со стороны клиента) ?
@@user-Arvard при спрослушивании в хороших наушниках, слышен каждый удар рукой по столу(особенно при жестикуляции). реально бьет по ушам
(woff)Нужно было кавычки поставить из за этого не работал шрифт('woff')Кавычки мать их
У меня я птшу 100vh не работает
если я дам свой телеграм, то можешь прислать етот сайт?
Дорогие верстальщики, подскажите, пожалуйста, что делать? Ситуация следующая:
Я делала дизайн сайта для детской студии. Далее макет отдали на сборку какому-то программисту.
Он собрал сайт очень коряво. Мало того что сайт на разных разрешениях отображается не так как в макете, есть еще куча косяков. Вместо текста практически везде вставлены картинки. Фотогалереи не работают. Раздел для статей собран из картинок вместо нормальных статей. Программист говорит, что он все делает по макету. Но функционал, элементарный не работает! Он даже карты в начале просто картинками вставил, а не кодом, пока я ему не объяснила что карта должна работать.
Ссылка на сайт alferova-studio.tilda.ws/
Что-что делать? Переделывать, кстати, красивый дизайн, я бы такой сверстал с удовольствием!
Пускай переделывает, если не хочет то жулик значит. Решение проблемы самой освоить верстку либо ребятам в чат напишите там вам точно помогут. Всего скорее попали на ленивого жулика, который хочет только по быстрее деньги получить
@@user-kp8wj5fj7u Значит это вовсе не нормально? А то он гнет палку и доказывает девочкам заказчикам, которые ничего не понимают в верстке, что так и должно быть и все сверстано по макету. А меня динамит по телефону, мол перезвоните позже или я вам перезвоню сам и быстро вешает трубку. Я даже не успеваю ничего сказать.
Имя и фамилию этого разработчика - в студию! Желательно ещё и фотографию, и ссылку на какой-нибудь его профайл: в ЛинкедИн или Фейсбук, Вконтакт, а если работает на Upwork или любой другой бирже фриланса - то ссылочку и на них. Или на то место, где вы его откопали. Запостьте эту инфу по максимуму - репостьте в соцсетях, пересылайте друзьям и т.д., чтоб побольше людей узнало, в т.ч. и потенциальных работодателей, ху из зис и как "оно" работает, с предъявлением результата этого галимого труда - чтоб не давали работу таким вот кадрам. Пусть страна знает своих героев... Но перед всем этим поговорите с этой обезьяной, и скажите, что вы всё так и сделаете, если он за приемлемый срок не сделает всё нормально...
@@vladimirk1394 Согласна, что о подобных случаях надо сообщать везде, где только можно, чтобы другие люди не тратили зря время, нервы и деньги на подобных исполнителей. Пока заказчики ведут переговоры с разработчиком. Посмотрим как он будет реагировать, согласится исправлять работу или хотя бы вернет деньги. Он настаивал на 100% предоплате, хорошо хоть на 50% сошлись. Со мной, дизайнером сайта, он так и не поговорил толком и вообще ни разу за время работы над сайтом со мной не связывался, говорил ему все понятно. В нашем разговоре по телефону вчера, который все-таки состоялся после того как он динамил меня весь день и разговаривать вовсе не собирался, пока я не повысила голос, - не смогла сдержать эмоции, высказала претензии по поводу того как халтурно собран сайт. В итоге он кинул трубку, сказав, что общаться будет только с заказчиком напрямую. А там девочки - педагоги, милые, добрые и доверчивые. Хотя сейчас они уже понимают, что их водили за нос на протяжении нескольких месяцев, а по сути сделали мертвый сайт. Не знаю чем все закончится, но всю информацию по нему собираем и потом разместим где следует.
Звонил весь вечер! Не берут трубку! Отписка!!!