Верстка сайта из PSD с нуля. Как сделать верстку сайта. Правильная верстка сайта. №4
ฝัง
- เผยแพร่เมื่อ 19 ต.ค. 2019
- Верстка сайта из PSD с нуля и до конца. Как сделать верстку сайта. Правильная верстка сайта. №4.
Материалы стрима / materialy-strima-30928326
Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Instagram: / freelancer.lifestyle
Facebook: / freelancerlifestyle
Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
«Фрилансер по жизни». Живи, а работай в свободное время! ©
Жень, ты так круто верстаешь, я хочу увидеть на канале твои комбинации, где ты переключаешься между строками, удаляешь, копирует, вставляешь. Сделай пожалуйста про это видос, будет очень круто.
Жека, спасибо. Твои мастер-классы несут огромную пользу. Не останавливайся 👍
Я рад!
Спасибо Вам за огромный и бесценный труд в развитие сообщества людей, который несёт огромную пользу.👍
Как всегда, на высшем уровне!
Понятно
Доступно
Качественно
Спасибо!
Спасибо большое!
Спасибо за ваш труд, после просмотра сразу же принялся верстать этот макет, используя все практики из видео
очень полезно, еще раз спасибо
Спасибо. Очень полезно! И спасибо что детально комментируешь свои действия при создании верстки.
Пожалуйста)
Евгений, как обычно гений + остроумный коучер!!! К сожалению на стрим не успел, но посмотрел в записи, действительно "Фосо". Будь здоров!!!
Я как-то пропустил этот твой стрим. А вчера столкнулся с проблемой "фильтрации" и ребята в чате подсказали, где искать. Инфа зашла на ура! Ещё раз спасибо тебе за труды и годный контент!
Пожалуйста!
Женя, спасибо Тебе за твои труды! Очень большой вклад делаешь в развитие сообщества людей, которые хотят развиваться в данном направлении! Очень интересно Тебя смотреть!)
p/s "Работая живи" , тоже не плохо сказано :)
Спасибо!
Привет Женя, учусь по твоим видосам, продолжай в том же духе)
Спасибо! Продолжаю! 👍
Отлично прошел стрим! Интересно, полезно и вкусно )
Спасибо! 👍
Шаблон для Sublime огонь! За видео лайк! Спасибо за интересные уроки!
Спасибо! 🤟🔥
Плюсы:
1. Интересные макеты
2. Не скучные стримы
3. Чуство умора
P.S. Продолжайте в том же духе и побольше вам хорошего настроения )
Спасибо большое!
Женя, классный видео урок по вёрстке! Класс!!!
Like*1000 Tab
Спасибо!
Смотрел все уроки до этой домашки, открыл и удивился. Откуда столько появилось? Будто где-то с десяток уроков пропустил...Как?, Откуда?...До этого всё было очень даже понятно, а тут такое, как-то не поэтапно что ли получается(
Блин, после таких видосов прямо жестко прокачиваешься, побольше бы таких)
Я рад! Будут!
Как всегда, твой урок - Бомбическое фосо)
Спасибо!))
@@FreelancerLifeStyle Нодьон фосо)
Спасибо большое за данный урок!
Пожалуйста!
Спасибо старания! Материал полезный)
Пожалуйста! 👍
Привет, Жека ты как всегда на высоте!Продолжай делать видосы поддержу тебя на patreon!
Спасибо!
Отличная подача материала!
Пожелания и комментарии: Данный макет вводится в обучение на уроках по БЭМ, соответственно следует использовать в построении сайта те технологии и приёмы, которые были изучены до данного урока включительно. В построении же данного макета вы используете те знания, что не были изучены студентами и процесс не может послужить грамотным примером использования полученных знаний. Необходимо постепенно увеличивать сложность практических работ рассматриваемых на практике вёрстки. Вы говорили о том, что лучше иметь твёрдые знания основ, чем гнаться за увеличением объёма получаемой информации. Это видео могло быть более полезно обучающимся, если бы выпуски соответствовали уровню знаний студентов.
Тоже ужаснулся, практика не соответствует изученным темам, нету строгого объяснения из чего состоит сайт и по каким блокам его разбивать, нету никакой мотивации верстать особенно длинные сайты ибо поддержки от автора никакой
От части согласен, тоже открыл увидел флексы, и шапка HTML вообще другая в отличии от урока по БЭМ. В общем отложил данный видос, трудно мне после урока по БЭМ сразу это все воспринять. Потом все вертски буду смотреть, как весь материал пройду.
СоГласна! Как будто год пропустила и половина непонятна, стартовый шаблон..что это где как....флексы...мы их еще не изучали..жалко( так хотелось сверстать макет
Как вариант можно посмотреть и закрепить знания по БЭМ. После просмотра флесов и т.д пересмотреть снова. Повторить БЭМ и закрепить знания про флексы.
да вы о*****? Вам он что-то должен?Человек для вас стараеться,а вам еще не нравиться.Идите учите сами флексы,практикуйтесь,а не ждите пока для вас сделают.Так можно постареть и нихрена не научиться
Жека, дякую тобі за верстку цього макету!
Я, нарешті, додивився))) Це було не одразу: паузи, перемотка, паузи, перемотка)))
Дуже інформативно і, як завжди, цікаво!
Дякую за прекрасний настрій та веселий гумор.
спасибо огромное за такой труд! обожаю ваши обучалки :)
вам удалось найти макет?
@@Oreo_Raccoon на патреоне он должен быть думаю)
Невероятно полезный урок!!!
Ух... дааа, стартовий шаблон дійсно крутий... Але для мене як початківця, він чимось схожий на Bootstrap, для того хто не знає CSS… Можна навчитись його використовувати, не знаючи як це реалізовано)))))) Твій контент чудовий! Підтримую на patreon, не ради того щоб використовувати шаблон, але щоб зрозуміти як в ньому все реалізовано, в плані коду)
Дякую Женя! Не зупиняйся!
Спасибо за стрим!
Пожалуйста!
верстаю этот макет и в шоке. у тебя всё так просто получается, и понятно почему, опыт)) надеюсь и я к такому прийду))
Конечно, все дело в практике!
Как всегда контент годный и интересный) Лайк! Самое время начучиться фронту а не сидеть только с бэком))
СПасибо!
Огромное вам спасибо, Женя, за этот стрим! Реально крутые знания даете и великолепно все объясняете! Жаль, что не могу поддержать ваш канал(Партеон не дает мне этого сделать. Удаляют мой аккаунт по каким-то непонятным причинам). Буду еще пробовать)
Фильтрация - супер. Похоже, что создана на jquery. Сейчас прохожу курс по JS не хватает такой практики на "чистом" коде.
Жека ты Крут, спасибо!!! Мира вам!!!
Видос бомбический! Молодец)))
Уже меньше конечно, но поддерживать иногда приходится.
Спасибо большое)))
Привет, как всегда на высоте! На фоне темного Sublime режет глаз белая консоль разработчика в хроме. Ее можно тоже сделать темной и будет Бомба Пушка Ракета))))
Чувствую свой прогресс, помню первый шаблон primeone - верстал 4 дня, пропуская адаптив, сейчас уже за день могу такую страничку сверстать. Теперь сначала сам делаю твой шаблон, потом смотрю, как ты это реализовал. Вижу, что путей реализации шаблона уйма. Спасибо тебе! Надеюсь найду работу в России рано или поздно.
Как успехи?
@@DmitryAvrov все хорошо, сейчас на стадии js
За flex-и отдельный респект!)
Супер!
Прекрасно!!!!!!!!!
Уважаю тебя мужик💪
Кстати, иногда будет полезно делать декор (линию под тайтлом) с помощью тэга :after так: &:after{content:’’;display:block;height:2px;width:105px;margin:35px auto 0; background-color:white;} И ещё full size страницу лучше делать с помощью min-height:100vh; (как из видео про full-size). Также можно убрать несколько лишних свойств или вообще переделать некоторые блоки, также наверное лучше картинку full-size сделать position:absolute; а не fixed
Я таки его сделала) Без адаптива правда (пока не умею) без джса (аналогично, не лезла ещё в ту степь), за несколько дней, но получилось) Первый мой "полноценный" макет
Да Жек "лохматить бабушку" не хотелось бы))) Ору с фразы, ахахах
Видосы по верстке, конечно, очень прокачивают) Начал делать в месте с тобой, параллельно для реализации фильтра и модальных окон в другие твои видосы залез, класс) Однозначно лайк)
Большое спасибо автору канала за то, что он думает о нас и показывает даже такие мелочи, чтобы все было как надо. Хотел бы услышать от Вас, насколько практично, для того, чтобы не мучаться попадать на бегающую стрелку, применить к ней что-то вроде &::before {
content: "";
display: block;
position: absolute;
width: 50px;
height: 50px;
left: -50%;
top: -150%;
margin: 0px 0px 0px -8.5px;
}
или есть другие способы для этого. Заранее благодарен. С уважением, В.К.)))
Здравствуйте, спасибо за обучающий видеоролик. Подскажите кога будет следующий стрим или видео?)
Подпишись на канал и телеграм t.me/freelancer_lifestyle. И сразу узнаешь о выходе нового видоса!
Здоров із мункача))
Орнув коли учув за Закарпаття😂😂😂
Здоров! ))
замечательный стрим! спасибо! подскажите в чем сейчас работают с макетами?
Очень ФОССО!!!
Ахах, супер!
Крутяк!
Привіт! Дякую за відео! Є питання: чи доречно замість негативного відступу поставити gap між колонками?
Зашол лайкнуть)
Спасибо! 👍🤟
Vasil Khlud зашёл*
Изучаю avocode и верстку по твоим видео - может ты знаешь, что вместо квадратика для измерения расстояния можно выделить элемент нажать alt и указать на другой элемент и все расстояния avocode показывает автоматом - мне так показалось намного удобнее чем ловить пиксели
у меня вопрос. не будет ли функция ibg заставлять картинку загружаться второй лишний раз? не будет ли это плохо для оптимизации?
Привет Женя, подскажи плз, почему для отображения блока на весь экран ты не использовал height: 100vh ?
Просто нет такой привычки, будет урок по единицам там все расскажу
Почему проходжу курс по плейлисту - все понятно, отдельно делаю вроде получается, а как только перехожу на стрим - офигеваю от того что ничего не понятно, какие-то преднастройки, о которых не говорилось на курсе, как-то не понятно верстаются элементы (по другому). Где я что упустил?
Женя, есть идея, ты говорил что не самое оптимальное решение можешь выбрать во время стрима 1:14:31 , так вот просьба, сделай видео где ты верстаешь макет и комментируешь свои действия и при этом думаешь над задачами как при боевом проекте (делаешь самые лучшие решения). Это было бы намного полезней стрима, так как будет больше знаний передано, да и плюс тебе меньше нервничать.
И конечно спасибо за это видео!
Пожалуйста! Такой формат конечно хорош, но смотреть как я сижу и думаю не очень интересно))
@@FreelancerLifeStyle Ну можно и не добавлять кадры мыслительного процесса, главное решить задачу идеально и понятно объяснить зачем это надо.
Добрый день. Есть ли у Вас в свободном доступе, все элементы (исходные данные по этому макету), что бы таким как я попробовать проделать всё то же и самое самим?!
Привет! Спасибо за видео и за то, что не лохматишь бабушку!
Подскажи, пожалуйста, а куда девается серая часть изображения на главном экране? Если выгружаю из шаблона изображение, сверху серая полоса, которая потом не хочет прятаться.(
Оооочень сложно на даном этапе обучения и с нынешними знаниями, но все равно круто, сразу видишь что впереди еще "лес гремучий")
Женя, скажи пожалуйста, почему блок .mainblock__content у тебя не внутри блока .container?
Спасибо за мастер класс! Ещё смотрю и второй раз за занятие возникает вопрос: зачем для псевдоэлемента :after ты делаешь отрицательный margin слева если можно отцентрировать left 46% например? в чем разница?
тем что проценты нужно долго подбирать и это не удобно
гараздо легче сделать left: 50%; и просто margin-left: -(width блока/2);
Дядь Жень, а где снипеты найти, как у тебя? Очень удобные они.
28:50 я бы еще по max-height ограничил все же, чтобы на большом разрешении контент не разлетелся слишком уж далеко друг от друга
А есть какая то разница при верстке меню ставить отступы для li{} или для a.menu__link? Просто ты во многих видео ставишь отступы между пунктами меню не для , а для
Я привык ставить отстпы для конструкций а не для контента (содержимого). Это делает верстку гибче и надежнее.
Женя, большое спасибо за этот стрим. Смотрел и пошагово сам набирал код, разбираясь в нем. Так лучше откладывается в голове. И в конце решил проверить верстку во многих браузерах. В IE11 mainblock не на всю ширину и картинка в этом блоке не отображается. Плюс табы не работают в блоке портфолио. Что в данном случае можно что бы заработало в IE11? P.S. Проверял еще в мозиле, опере, едже. Там просто загляденье. В сафари толком не могу проверить, т.к. для винды есть версия 5.17, где флексы плохо работают
Женя, вначале видео ты пытался сделать на первом экране отступы в процентах, но это не срабатывало. И собственно вопрос почему не использовал vh? Допустим отступ от кнопки не 10%, а 10vh? Просто из головы вылетело на тот момент или при использовании vh есть какие-то минусы хитрые?
На тот момент я не был уверен в достаточной кроссбраузерности vh. Может по этому он и не прижился у меня в прошлом. Но я буду делать выпуск по единицам все изучу и расскажу)
Видео как всегда на высоте. Стартовый шаблон - просто огонь (ни разу не пожалел что стал патроном). Жека, скажи пож про фантомные отступы. Спс.
Спасибо. Отступы которые ты не задавал, а они есть)
🔥
👍👍👍)
Спасибо!
Лайк как всегда! Есть один вопрос по поводу картинок, может было об этом в видео про изображения, но я не заметил. Что скажешь про object-fit? Это вроде-бы что-то похожее на background, но для img. Используешь такое? или ibg все- таки надежнее? Спасибо за ответ!
Все тут th-cam.com/video/nTtuiBXKp88/w-d-xo.html
@@FreelancerLifeStyle Спасибо, пересмотрю. Просто вопросы возникают после того, когда уже пересмотрел и не всё в голове висит :)
По звуку. Сам микрофон отличный. Охватывает весь диапазон. Но есть но: шум от клавиатуры ну очень хорошо слышно. Периодически слышны низкие частоты от стола (то ли кисть по столу, то ли нажатие на пробел).
Ясно, спасибо! Буду исправлять!
я подвесил animation top 0 -> 20 (3 повтора) на стрелочку + при наведении на кнопку срелочка так же получает top: 20 (transition: top .1s ease)
если ничего не добавлять, то top 20 при наведении на кнопку игнорируется, покуда не закончится animation
если добавить, чтобы при наведении на кнопку стрелочка получала animation: none; то при наведении происходит резкий дерг на top: 20 и далее все работает плавно (при отведении/наведении курсора)
и как такие ситуации обрабатывать? как из animation перейти в transition без рывков?
Подскажите пожалуйста, а почему вы не используете автопрефиксер в галпе? Зачем усложнять до написания миксина для префиксов?
Миксины не только для префиксов но и для передачи значений, а так же для вывода других параметров. Плюс атоматом не всегда выводятся нужные префиксы, для флекса например. Хотя уже, наверное, поддержка браузеров позволяет упустить этот момент
Все прекрасно, но при масштабировании окна браузера содержимое фуллскринового блока не скроллится. Ни min-height, ни overflow не спасли, не могу понять, в чем проблема :(
это не лень когда мало движений,просто хорошая логика сократить количество действий
Спасибо за урок, когда JS? Когда back-end?)
вам удалось найти макет?
подскажите пожалуйста, в чем может быть проблема если в фильтре при нажатии на ALL (1) все картинки не возвращаются, при этом 2,3,4 меняются, а вернуть все нельзя, код написан верно, в консоль 1 тоже выводит. Галерею делала через fancybox, может это как то влияет?
Zer fosso mister jeka
Блин вообще запутался ... до этого момента смотря видео с курсом и используя VS code еще как то справлялся сейчас пробую повторить со стартовым шаблоном и началась каша .
есть ли смысл пытаться повторить что то на VS code
или вообще не заморачиваться и просто смотреть дальше видео в уроках ?
👍👍👍
Пришел из урока по БЭМ , делал все уроки по порядку.
Оттуда решил верстку этого макета посмотреть.
Делал все в точности как Жэка.
В итоге потратив 2часа и убившись, почему у меня фулскрин не получается, понял, что все дело в ibg, который здесь подгружается импортом из другого scss, но не объясняется ни здесь, ни в уроке по БЭМ.
Мда... рассинхрон конечно получился.
Хоть бы комментах написал и закрепил, что вот так вот, не теряйтесь!
Привет Жека. Извиняюсь за беспокойство хотел спросить. При фиксировании фулскриновой картинки она накрывает всю оболочку .wrapper, в чем ошибка? Почему она не фиксируется относительно родителя хотя я установил position: relative?
position: fixed; фиксируется относительно body всегда
привет, такой вопрос по поводу картинок, sass и prepros). Смотри если с такой иерархией папок где в SCSS и в основном CSS не совпадают пути к папке img в SCSS ("../../img/.."), a в CSS("../img/...") и вопрос как грамотно эт устаканить? или я где-то лоханулся? спасбо) контент топ)
После подключения картинки нужно изменить путь
Жека подскажи пожалуйста где взять твой стартовый шаблон?
Только подписка на патреон...
Просто жесть, какой дикий уровень профессионализма, неужели кто-то это понимает ещё...
Очень грустно все для свитчеров, в какой-то мере недосягаемо поменять профессию на что-то из IT
Говорили, что фронт в вебе самый легкий путь познать эту сферу, но теперь понимаю, что лукавили. Смотрится очень сложно
Смотреть и слюнками обтекать...
все не так как кажется))) посмотри курс у жени и все будет ок ) дальше больше
Здравствуйте, Евгений, подскажите пожалуйста, как вы настроили перенос классов в scss? Через плагин Tag? Или через плагин ecsstractor?
ecsstractor
@@FreelancerLifeStyle не подскажите, как можно его настроить, чтобы скопированные стили не открывались в новой вкладке ?
Фоссо!!
Хех, 200 лайков, да там уже 13 тысяч! 😃
Ага)
без сомнения этот урок так же отличный как и все остальные. на для начинающих можно ли просить перечислить используемые программы к которых смотрится как сам макет со всеми отступами и размерами, так и верстается код. на видео не могу по заголовкам понять.
Для макетов th-cam.com/video/Mo8m8SW_8H0/w-d-xo.html
Для кода th-cam.com/video/Mo8m8SW_8H0/w-d-xo.html
Или th-cam.com/video/Mo8m8SW_8H0/w-d-xo.html
@@FreelancerLifeStyle спасибо. я так и видел, но думал, что ошибаюсь.
Где можно этот макет скачать? На патреоне?
А как сделать блок который будет занимать всю высоту экрана внутри блока занимающего всю высоту экрана?)) Звучит странно понимаю, попытаюсь объяснить...Допустим у нас есть один блок который занимает всю высоту экрана и внутри него есть к примеру несколько строк, так как сделать так чтобы одна из этих строк заполнила всю оставшуюся высоту?
Евгений привет поддерживаю все те коменты что говорят о тебе только хорошее так как ты и впрвду круто все обьясняешь
в данном стриме в самом начале ты светишь файл в котором у тебя всякие плюшки обнуляющий там же и многое другое как можно и где можно взять данный файл плизззз прохожу твой бесплатный курс по вёрстке я ввосторге все круто так держать.
Спасибо! Результат верстки можно скачать став подписчиком на патреоне, ссылка в описании
@@FreelancerLifeStyle Жень ок попробую эт сделать)) надеялся что так прокатит))) на вахте в тундре сейчас прохожу курс твой найду инет получше жайду посмотрю как там канал поддержать и скачать тот архив)))
Женя, а обязательно использовать uppercase если твой текст всё-равно написан с большой буквы?
Да, так как потом текст может смениться.
@@FreelancerLifeStyle кстати да, не подумал об этом, спасибо;)
Жека, скажи будь ласка, є відео де докладно розповідається як працювати з Чертогами Фрілансера V 3.0?
Є текстова документація
Добрый день, а в чем фишка помещать текст в блок div, а не в параграф к примеру можете объяснить?
смотри видео про БЭМ
Здравствуйте. А есть такая программа для верстки HTML-кода чтоб результат его работы можно было видеть сразу без предварительного сохранения файла?
Brackets, например
Блин вставляю функцию ibg из моего стартового шаблона и она сделает чудеса. А есть видео про стартовый шаблон?
Подписку на патреоне оформи за два доллара или доллар и тебе будет доступно
Мож просто прописать стили в HTML, не понимаю зачем такие костели)
Привет у меня вопрос как в VS code настроить такой же синтаксис выгрузки scsss?просты ты сказал что у тебя это настроено или оно само так выгружает??
Посмотрите его уроки по настройке vs code. Там есть расширение ecsstraktor.
Здравствуйте, ролик очень полезный, но как можно найти сам макет, верстаемый в видео?
Под этим видео
th-cam.com/video/HihYQVuH64U/w-d-xo.html
@@FreelancerLifeStyle Большое спасибо
Как можно сохранить объект (arrow) без фона?