#3 Верстка сайта с нуля для начинающих | HTML, CSS

[@BrainsCloud]

*Верстка сайта транспортной компании:* brainscloud.ru/landing/logistic-html *Хостинг Timeweb* - bit.ly/2Kms8Lf *Бонусы* доступны после оплаты тарифа Optimo+ на год. Для активации нужно открыть раздел "Бонусы и промокоды" в Панели управления и ввести промокод. *brainscloud* - плюс 1 месяц бесплатного хостинга *brainscoud2* - услуга "Ускоритель сайтов"

[@АбдуллахЕвлоев-х4е]

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

[@never6891]

Очень обидно что такая работа не получает должной аудитории. Призываю всех кому данный видео-урок принес пользу, поставить лайк, автор реально заслуживает этого!

[@BrainsCloud]

Спасибо, приятно )

[@d.s.korochkin9238]

Однозначно лайк)

[@Юрій-ч1о]

Поставил на всех 4 уроках. Респект. Ждем еще

[@khalikpeacekeeper8283]

Уже бл ай ау тять

[@InukaiTakerunoMikoto924]

@@BrainsCloud я преобразовал в фотошопе картинку в смарт объект и сделал как в прошлом уроке. просто кликнул на картинку инструментом перемещение, он сам нашел в слоях и там правой кнопкой мыши преобразовал в смарт объект, а дальше вы уже знаете как

[@RAFO.]

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

[@ValdisONchik]

По поводу уменьшения картинки, сам точно не знаю, но вероятно причина в том, что в правом нижнем углу, где указывается Image Size при сохранении (на 31:00), есть параметр Percent и он как раз установлен почти на 82%, возможно из-за этого) Кстати, да, автору спасибо!!! Всё очень наглядно и понятно, ну, кроме некоторых нюансов, но ведь обо всём сразу и не расскажешь, иначе уроки будут на много дольше. Но и за то, что есть - огромное человеческое спасибо!

[@Shaurma95]

Картинка уменьшается из-за параметра Percent: 81,92% в разделе Image size при экспорте. У меня так же, слетает после переключения между PNG и JPEG. UPD: Для тех кто не понял как экспортировать картинки со 100% размером: Фотошоп не позволяет экспортировать "для веба" изображения, которые больше чем 8192px. Это касается и вырезанных частей, они считаются одним целым с 8192px+ изображением, поэтому ФШ автоматически сжимает их. Чтобы экспортировать вырезанное изображение в 100% размере, нужно просто обрезать холст (ненужную часть конечно) с помощью Crop до размера меньше чем 8192px, тогда ФШ экспортирует всё в 100% размере. Ctrl + Z или F12 чтобы вернуть обрезанные части :)

[@dinir1000]

Зачем иконки вырезать? Это же PSD слои, как обычно через экспорт.

[@BrainsCloud]

"00:30" - Начинаем верстать блок сервисов "16:30" - Верстаем блок девайсов "26:30" - Проблема с изображениями

[@FIJEKCFUK]

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

[@RatKurumbus]

когда вырезает, открыта вкладка optimized. попробуй переключить на original. Может тогда и уменьшать не будет.

[@innanewrave]

А я объединяю нужные слои, преобразую в смарт-объект, открываю его и сохраняю в png. Так проще всего и размеры сразу нужные получаются- как в макете)

[@ikadill5921]

Большое человеческое СПАСИБО! Всё по делу, без "воды" и лишнего разглагольствования.

[@АлександраЛитвинова-х9ь]

Все очень круто и по делу! Однозначно до конца дойду) продолжайте снимать подобное, у вас прекрасно это получается) удачи вам в будущем!

[@flab3rt]

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

[@pepega_blue]

Дмитрий, спасибо. Я вам безмерно благодарен за эту серию видеоуроков. Вы прекрасный специалист и мы (зрители-новички в вёрстке) мечтаем быть похожими на вас. Ваш труд характеризуется русской поговоркой "дело мастера боится". Удачи вам во всех начинаниях и побольше отдыха от работы 🔥

[@grom11414]

Спасибо автору данного видео за такой полезный и понятный контент, лайк за старание ! :)

[@АлександрХмельницкий-м8е]

30:33 Я просто нажал правой кнопкой по смарт объекту там где слои (на само название слоя) и нажал кнопку "Быстрый экспорт в png"

[@brykolia]

Очень хорошие видео, учусь по ним верстке, спасибо) Один момент могу подсказать по Фотошопу, может кому будет полезно - как упростить вырезание картинок: нажимаете на нужное изображение, сбоку на панели слоев оно выделится, нажимаете на правую кнопку мыши и выбираете в открывшемся меню "Создать дубликат слоя", выбираете "Новый файл"; в новом файле зажимаете ctrl и жмете на слой в панели слоя - изображение обводится пунктиром - кадрируете его и сохраняете в формате PNG, таким образом сохраняется все изображение вместе с тенями, не нужно играться и подбирать размеры по пикселям.

[@Tvori_dobrobro19]

привет, подскажи где то устроился работать в этой сфере ?

[@DaniilLusyk]

Очень годно и понятно, автору респект. За день уже 3-ий урок смотрю и практикую... не выдержал, решил написать комментарий). Все по полочкам и без лишней воды как на некоторых каналах, спасибо большое еще раз, а я возвращаюсь к верстке =)

[@ДанилаМатюшев-ч6р]

Про уменьшение картинки: В окне экспорта картинки, в блоке параметров справа, в самом низу есть группа "Image Size". Когда окно экспорта только открывается, у тебя фокус стоит в поле "W:" Судя по "Percent: 81.92%" значение "W" по-умолчанию подставляется меньше фактического, но т.к. фокус остается в поле "W", изменения не применяются, изображение остается в оригинальном масштабе. Но как только ты нажимаешь в любое другое место, значение в поле "W:" сохраняется и картинка уменьшается до состояния 81.92% от оригинального размера. Искажения не возникает т.к. включено сохранение пропорции Надеюсь мой коммент будет полезен

[@nataliyamuntyan6165]

да, похоже на правду!

[@mediafile9995]

Немогу понять, почему в фотошопе вы вырезаете картинки, когда можно выбрать нужную в слоях, сделать пкм, выбрать: экспортировать как... Проще и быстрее. Или есть какая-то разница?

[@ДимонДимонов-г6т]

Занимаюсь этим третий день за правильность действий не уверен. Айпад до конца серого фона не вставал на 7 пикселей пришлось дописать devices--ipad, а CSS дописал.devices--ipad { position: relative; bottom: -7px; }

[@darwinsterritory]

Подскажите у меня шапка секции прилипла к статистике хотя паддинги проставлены ,как исправить это?)

[@rufatbilalov3268]

На прошлом уроке у меня с этими тремя картинками лсд глюки начались. Хотя делал всё как на видео.

[@nok5ukao779]

Огромное спасибо! Погрузился в вёрстку! жирный лайк!

[@ИринаСимакова-д8е]

Был уже комментарий, что ipad не прилегает к нижнему краю, остается отступ внизу. та же проблема. Решила только тем, что в класс section--device добавила height: 670px и все выровнялось.

[@dieselpower1252]

В Фотошопе чтобы скопировать какой-либо объект из макета, нужно кликнуть по нему мышкой, выбрать его в правом меню Фотошопа кликнув на "глазик", там же где "глазик" кликаем на него правой кнопкой мыши, в появившемся меню выбираем "Экспортировать как..." или "Быстрый экспорт в png". Если выбрали "Экспортировать как...", то выбираем в каком виде экспортировать(jpeg,png и др.), качество изображения(0-100%) и нажимаем кнопку "Экспорт". Всё копируется в том же размере, что и в макете.

[@verdere5679]

очень дельно и интересно, подписку оформил. Первый сайт который до конца делаю)) Блин на картинках засада. подогнал толькот так: .devices{ width: 100%; max-width: 650px; margin: 0px 320px; position: relative; } .deveces-item{ display: block; } .devices-item--iphone{ position: absolute; bottom: -70px; right: -150px; z-index: 1; } иначе никак на место не вставали. Нормально? или как))

[@MsGodfather71]

Не хотите заморочек, перейдите на Avocode. И не надо мучиться. А просто берёшь иконку, картинку, и сохраняешь. Тем более, иконки нужно в svg использовать. Или я не прав? А то вроде не в блокноте верстаешь, т.е. пользуешься профессиональным софтом для программиста, а юзаешь фотошоп. Оставте его для дизайнера.

[@BahtiyarBasharov]

Avocode платный. Фотошоп хоть спиратить можно. Возможно гораздо удобнее, но лично я пока не готов платить то чем возможно даже пользоваться не буду. Мы пока пытаемся в целом разобраться что такое верстка. Кто-то останется, кто-то уйдет. Но спасибо за совет.

[@zhenya_bazarov]

@@BahtiyarBasharov а ты то тут при чём?

[@peiiiajikuh]

@@zhenya_bazarov А ты?

[@АртурБеленченко]

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

[@Mykhailo_Vdovychenko]

полностью поддерживаю! настолько интересно и доходчиво, что от уроков реально одно удовольствие! спасибо Автору!

[@timurasylchan6634]

Редко оставляю комменты и ставлю лайки, спасибо автору, это огромнейший труд! Респект!!!

[@alexfleur]

Огромное вам спасибо! Верстаю вместе с вами) Лайк, подписка, колокольчик))

[@BrainsCloud]

Alex Fleur 💪

[@AlanKamilov]

Спасибо! Отличная практика step-to-step!

[@swendlmusic]

Автору спасибо! Начинаю изучать эту тему, по вашим видео понятно, что верстка дизайна это одно и то же просто надо знать основы, а там уже js и другие!

[@Кирилл-п9ц9л]

у меня иконки там где PHOTOGRAPHY, SEO, WEB DESIGN в один ряд получились ... как сделать чтоб в блоке были друг под другом ?

[@antonryabikin9088]

такая же херня,никак не могу ошибку найти

[@anton1775]

Который раз пишу спасибо:). Очень интересно.

[@knowledge2595]

У меня есть вопрос, возможно он супер глупый, вообщем, почему когда вы вырезали картинки айфона и айпада вы не вырезали одну картинку (общую айфона и айпада когда оны наложены друг на друга) и не сделали её пнг, тогда бы пришлось сделать только фон и вставить одну картинку? P.s. Я не умничаю просто хочу узнать можно ли так делать как я сказал и если нет, то почему нельзя)

[@alexeykovalevich7305]

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

[@blackmulthumor]

Если бы такие учителя и занятия были в универах, школах и колледжах...

[@КрасавчикИкиса]

Автор очень порадовал советами про структуризацию кода и комментариями

[@tayku808]

15:28 бедный margin (((

[@LetsPlayOverGame]

"Ай под - Ай - пад - Ай пед!!! "Ай пед" и "Эйпл"!_)_ Спасибо за уроки! Просто -- СУПЕР!!!!

[@huirazdwa]

Дима, а не проще сделать врэпами сервисы?

[@mushviggyltsov4469]

Спасибо, что делаешь такие видео по верстке многому учусь у тебя)

[@tanyamarushka7251]

Благодарю за продолжение, очень нравятся Ваши уроки!

[@Ployka_789]

Спасибо за интересные уроки! Все понятно и удобно! По поводу уменьшения картинок. Когда я их вырезал после нажатия Ctrl+Shift+Alt+S выбирал вкладку Original и размеры, посл сохранения остались те же, а у Вас остается Optimized. Возможно в этом, но это не точно)))))

[@ПодопытныйИрландец]

Спасибо огромное автору! (Ставлю лайк под каждым уроком :D) Вроде хорошо знаю CSS и HTML, но практики никакой - открыла PSD шаблон и хз, что дальше-то делать х))) Благодаря вам наверстываю нехватку практических умений ;)) Одни из лучших уроков по практической верстке, что я видела.

[@marinaorda6175]

Очень классные уроки!!! Спасибо большое!!! Все понятно и без лишней болтовни.

[@urdia9716]

Что-б не сжимало нужно сохранять через пункт "Исходное"

[@VictorPP]

у меня иконки там где PHOTOGRAPHY, SEO, WEB DESIGN в один ряд получились ... как сделать чтоб в блоке были друг под другом ?

[@Кирилл-п9ц9л]

вот таже самая проблема,решил?

[@VictorPP]

Неа...)

[@ЕкатеринаБерезовская-ч9с]

Почему нельзя из макета доставать изображения с помощью "экспортировать как..." ?

[@bulvlerbumer1912]

Как решить вопрос с intro__inner при увеличении текст все перекрывает

[@Y__MaX]

Видео бомба. Начинаю знакомство с Front End разработкой, с Вашей помощю это лучше получается. Многое взял в личное пользование. Присматриваю уже курс. Продолжайте.

[@hannelimpressions2308]

Невероятно шикарно! Уже 3-й урок посмотрел и никак не могу оторваться, хотя где-то что-то непонятно, но Гугл мне в помощь (так возможно даже лучше запоминается). Посоветую всем знакомым обязательно. Да, кстати, я видел, что есть еще один видео курс, где более подробно всё рассказано. Буду смотреть его сразу после этого. Если есть возможность, то хотелось бы еще что-то подобное по React увидеть... Возможно у Вас есть возможность записать видео курс по реакту или возможно есть ссылка на канал партнера, друга, товарища и т.д. где просто и доступно будут объяснять про технологию React

[@Sun2rw]

Привет. Спасибо за курс. Просмотрел и всё повторил. Всё было очень круто. Лайк, подписка, однозначно.

[@chestbo2438]

У меня Айпад спускается слишком вниз не на ровне с надписью unique design помогите пожалуйста

[@TheSWIFT51]

Здравствуйте, подскажите пожалуйста, как после написание команды сразу продублировать ее несколько раз снизу?

[@lizardmemes9554]

Поч забросил канал? Видео то очень прям хороши

[@ВалерияПотребина-э9й]

Лучшее объяснение!! Спасибо, смотрю и делаю сайт по вашим видео!)

[@fanwot5320]

Ребят помогите. У меня на 9:50 текст не такой как у автора, он как-то не выравнивается как у автора.Также иконки у меня левее, и заголовок у меня не справа , как у автора, а посередине , не знаю как исправить. Всё просмотрел , все вроде бы написано так же как и у автора

[@fanwot5320]

все пацаны, разобрался . Там оказывается просто text-align:left надо было указать

[@amachevmaga2233]

@@fanwot5320 Ты в родителе айтема указывал text-align: center? Потому что по умолчанию свойство text align имеет значение - left.

[@ПростоБро]

Подскажите пожалуйста , .sevices__icon и .devices__item--iphone для чего задан парметр z-index? Знатоки подскажите пожалуйста. Я просто пытаюсь вникать в суть всего что пишу за автором. P.S. Дмитрий, огромное спасибо за работу!!!

[@Wechat_Chanel]

когда решил сэкономить 5к на сайт и теперь ты тут)))

[@ArtGomer]

Привет всем! Всё делаю по видео но почему то у меня "creativity,web design,seo,html,css" и так далее получается не встрочку а в столбик. что не так? как исправить?

[@Reset-k7w]

1) Почему мы не экспортируем а вырезаем? 2) у меня айфон не получилось вставить правильно. Так и висит внизу планшета вообщем не получилось с Айфоном. 3) Фотошоп жутко не удобный и не понятный замучился

[@АделинаИсанаманова-х7ж]

Кто-нибудь знает почему в Photoshope в "Размер печатного оттиска" нет значения пиксели?? Все время размер измеряет в см и никак не получается изменить

[@ТимурПодборонов]

Не получилось ipad после pading-bottom опустить на уровень конца фона, есть маленький отступ, пытался исправить (добавлял в devices_item padding: 0, но не получилось), *МОЖНО ли ipad сделать таким же автономным по перемещению как iphone, а то у меня ipad привязан к фону и любые манипуляции с ним меняют размеры фона.

[@undefined422]

Что значит flex: 1 1 0; ? Подскажите пожалуйста

[@maxkalashnyk3378]

А скажите пожалуйсто почему у меня не роботает padding-bottom: 0;?

[@asco_d]

какой у вас приложение размеряет и читает данного сайта ? У меня иконки слишком большие и я не могу их размерять. Подскажите пожалуйста 🙏

[@xpkpwn]

1 урок в день )) спасибо

[@forandrej]

У меня тег hr в сафари не хочет работать. Когда устанавливаю бордер: 0 он просто исчезает. Пробовал цвет другой ставить не помогает. Хотя на хроме всё норм работает. В интернете нигде ничего такого не нашёл. Установил пока значение .1 . Но выглядит не очень. Да и хотелось бы узнать причину почему так.

[@эмилкадырбаев-ъ4д]

спасибо тебе за видео! Процветание твоему каналу

[@imperialday987]

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

[@milkiway6754]

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

[@AmidDima-j2u]

на 25:08 подскажите не выходит прижать картинку к низу, в чем пожет быть проблема?

[@anakin2389]

Найкращі уроки по верстці сайту.Слава Україні!

[@annoyingGnome]

А разве не проще делать экспорт того или иного слоя с картинкой через пкм по слою и экспорт? Просто как по мне мороки больше с выделением и долгим экспортом. Какие в этом плюсы?

[@BrainsCloud]

Возможно, но я так привык

[@annoyingGnome]

BrainsCloud ок спасибо за ответ

[@dawrantajetdinov3843]

Спс большое благодаря вашему видео я повторяю то что проходил и более понятно спс еще раз

[@weyzerrr]

Помогите пожалуйста. Всё повторил по видео и у меня не так

[@Ruslan-rumi]

Это же не ок, что я на 3 полика потратил неделю? Где то по 4ч каждый день... Мне очень стыдно если честно.

[@MrZorg23]

Спасибо! Очень полезные уроки!!!

[@BrainsCloud]

Пожалуйста!

[@grow_down676]

Черт подери как же это выматывает, но тем не менее ты крут чувак ))

[@followmagnus9775]

Спасибо за урок. Как всегда полезно и на высоком уровне!

[@technic_and_programming]

17:15 Я с iPad смотрю)

[@ОбычныйПользователь-и5ю]

Всем интересно. Всем интересно.

[@miller4250]

Это самые лучшие уроки что я видел в ютубе!

[@khalikpeacekeeper8283]

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

[@Molox777]

А сколько примерно по стоимости будет стоить такой сайт?

[@danielgaleyev137]

Я это могу смотреть вечно ) успокаивает)

[@technic_and_programming]

3 день)

[@nazakazonline7978]

Servises не ровнялось, наверно, потому что last-child(у) нужно было padding-right обнулить

[@Matishinets]

Не проще изображения Экспортировать как..., нежели вырезать? Есть разница?

[@viktoriavatuleva5517]

Все получилось :)

[@d.s.korochkin9238]

Все подробно, очень нравится ваш подход к делу!!!

[@BrainsCloud]

D.S. Korochkin спасибо!

[@maxivanov5845]

Спасибо большое, очень интересно!

[@ElinaForost]

Потому что когда вы сохраняете Save for web автоматически едем оптимизация изображения путем уменьшения изображения.

[@blackmulthumor]

Как всегда, стоит связаться с position absolute, все идет не по плану. никак не реагируют иконки на position absolute

[@СтаниславТес]

Лайк и подписка! Уважение Вам

[@Burovasofia]

спасибо за урок!!!!

[@d1imager821]

#2 Верстка сайта с нуля для начинающих | HTML, CSS: "Новичку в плюс писать код самостоятельно." #3 Верстка сайта с нуля для начинающих | HTML, CSS: (IPod, IPhone) ctrl + x, ctrl + v.

[@sergeyermolaev270]

margin-ы постоянно перекрывают друг с друга по вертикали хорошо ли это? Как вы определяете padding использовать или margin?

[@reeltwodialogtracktwo7666]

С каждым туториалом доживают все меньше и меньше :) Сужу по количеству просмотров! Автор - ТОП! Спасибо!

[@KynomiFn]

отличный урок, я только начал верстать сайты, очень много заметил фишек для себя, я раньше делал по другому, например делал div first и через него уже доставал все элементы теперь буду использовать твой способ [NAME]__[ARTICLE]; [NAME]__[ARTICLE]--[MODIFICATION]

[@Rayzervs]

Скорее всего при сохранении для веб,фотошоп обрезает лишнее пустое пространство.Поэтому сужается картинка

[@barden363]

Всё супер. Продолжай в том же духе. Кстати в какой программе ты пишешь код?

[@hyperkub]

Блок сервисы, при 6 item'ах всё идёт в линию, а не в две, как должно, + нет разделительной полосы Подскажите, что может быть не так? Вроде отступы все правильно настроены