#14 - Адаптивная верстка. Финал. Верстка сайта портфолио

Видеокурс по верстке сайта-портфолио с нуля используя HTML, препроцессор LESS и Adobe XD или Photoshop.

// Ссылки =================

Промокод: youtube (-500 руб.)
-------

// О проекте =================

Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разрабокте - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.

// Соц. сети =================

#верстка #версткасайта #html #less

[BrainsCloud]

*Бонусы* доступны после оплаты тарифа Optimo+ на год. Для активации нужно открыть раздел "Бонусы и промокоды" в Панели управления и ввести промокод.

*brainscloud* - плюс 1 месяц бесплатного хостинга
*brainscoud2* - услуга "Ускоритель сайтов"

[ВикторКашин-ер]

Дим, вот у тебя талант объяснять всё простым языком ))Запиши пожалуйста видео курс по js, я думаю многие хотели б этого.

[akhmad_goytinski]

Спасибо Дмитрий! Вы показали адаптивную вёрстку, хорошие уроки всё четко и понятно. С уважением к Вам Ахмад Гапурович

[Mykhailo_Vdovychenko]

Это был крутейший курс! 14 уроков суперского материала - все просто и доступно, без лишней тягомотины.
Спасибо, Дмитрий, за твои труды, на данный момент, без угрызения совести, можно смело заявлять, что твои уроки лучшие в рунете.
СПАСИБО еще раз и успехов в твоих трудах, всех благ! Будем ждать новинок! =)

[DeIgado]

Вот и закончил ещё одну серию уроков от вас. Это были супер-познавательные часы (десятки часов вместе с Mogo и Active Box). Очень импонирует ваш стиль вёрстки и очень многое узнал благодаря вам. Действительно, без преувеличений могу сказать, что благодаря вашим видео укрепился в знаниях и освоил базовую вёрстку. Проходил курс в онлайн-школе по вёрстке для начинающих, но там абсолютно не было глубины, которая есть в ваших мастер-классах\гайдах\курсах, не знаю как максимально точно описать эти серии видео). Только после ваших видео начало получаться что-то адекватное в самостоятельных вёрстках с макетов. Может через пару месяцев смогу достаточно углубиться в вёрстку и можно будет приступать к изучению ДЖСа. Если ещё найду такой же познавательный контент, как ваши серии) По классике понимаю, что спасибо карман не греет, но всё же не могу не сказать, что премного благодарен вам, Дмитрий, за ваши труды. Знаю, что весьма демотивирует ситуация, когда лайфхаки для зоны набирают миллионы просмотров, а сверх-годный контент не получает и десятой доли заслуженного внимания. Но поверьте, ваши труды были не напрасны. Если где-то есть парадайз для айти-шников, то вы уже заслужили там одно из почётных мест)

[pandashu]

Спасибо за труд! Очень хорошие уроки, если не сказать лучшие! Понравился подход к верстке и написанию стилей. Все четко и понятно. Успехов в твоем деле! Огромный плюс тебе в карму за такие труды )

[романахметзянов-лу]

Курс суперовый. Спасибо за подробное объяснение.

[DeIgado]

Так как в комментах видел, что у некоторых возникли трудности с адаптацией модальных окон, вот пара "наводок" для будущих поколений, кто будет по этим видосам учиться:
1. По окну Hire me. Как по мне, наилучшим и самым простым решением будет убрать изображение. Оно там особой смысловой нагрузки не несёт и можно им пожертвовать для лёгкого адаптива, т.к. после скрывания картинки нужно просто задать контенту с левой части ширину на всё окно и далее подогнать под свой вкус размеры составляющих (поуменьшать margin-ы, padding-и, поиграться с шириной и высотой инпутов).
2. Окно с резюме. На самом деле тоже всё просто. Две кнопки ставим в столбец, как в интро. Уменьшаем в первую очередь центральный padding у двух колонок и дальше постепенно на каждом брейкпоинте уменьшаем всё те же margin-ы, padding-и. Разделу с уровнем скиллов (где прогресс бар) убираем флекс, чтобы бар расположился снизу наименования скилла(ну или flex-direction:column), небольшой марджин между ними и самому бару уменьшаем ширину, чтобы он помещался при 320px.
3. Окно с работой. Здесь не уверен, что нашёл лучшее решение, но как вариант изложу. Для начала задал стандартные свойства для картинки в превьюхе(левая часть) в 100% ширины и высоты, т.к. при уменьшении разрешения возникали белые области, а так картинка будет растягиваться и сжиматься по размерам своего контейнера. Сам адаптив начинается с брейпоинта tablet. Так как здесь нужно сохранить картинку и слайдер в ней, наилучшим выходом вижу изменение ориентации окна на вертикальную. То есть, разделение сделать на верхнюю и нижнюю часть, а не правую и левую. Делается это через flex-direction:column, я сделал reverse, т.к. вроде лучше выглядит, когда слайдер выше, а описание проекта ниже. Далее задаём контенту и картинке(слайдеру) 100% ширину. Важный момент, блоку .modal-work__preview нужно задать высоту, т.к. он схлопывается при добавлении flex-direction (честно говоря, не понимаю почему). Я задавал фиксированную в пискелях, конкретное значение подбирайте сами, я сначала задал 500px и для мобилок уменьшил его. Ну и собственно дальше снова пэддинги, марджины и шрифты. Уменьшаем их при уменьшении разрешения, всё просто.
На этом всё. На самом деле адаптив модальных окон делается даже проще, чем основная страница, просто нужно воспринимать окно, как отдельную страницу, которая по своему изначальному оформлению крайне проста. В общем, надеюсь, это кому-то поможет в будущем. Всех успехов.

[makarov]

Закончили =) Отличная работа Дмитрий . Вы проффесионал . Спасибо за курс ! =)

[НискемкромеСовести]

Благодарю за бесплатные курсы. Благодаря тебе я стал немного разбератся в верстке.

[Mr.basirov]

спасибо огромное за качественный курс это лучшее что я смотрел в ютубе

[baier]

Думаю что ты продолжишь делать годноту. Урок топ спасибо))

[codedesign]

я думал не доживу уже до конца вёрстки, но всё супер получилось)
Интересно посмотреть урок как это всё на хостинг залить или на CMS + подключение баз данных и создание админки.

[andryushque]

очень крутой курс!
верстал параллельно с тобой, кое-что повторял, многое делал совсем по-другому
адаптив так вообще почти все по-своему сделал
ссылки в навигации и модальные окна можно смело делать самому, особенно после active box и mogo
очень нравится твой подход - все четко, ничего лишнего
так что огромное спасибо тебе за этот курс!
надеюсь, что дальше нас ждет побольше JS=)
в принципе, как то так

[doomwalker]

Прекрасные видео, по ним я научился многому и повысил свой уровень знаний, побольше бы js)
Объясняете очень интересно и подробно, обычно не пишу комменты но на ваших видео не устоял

[maxim]

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

[dastanmaratov]

Спасибо огромное за все! Лучший канал по верстке!

[KuKu_RuKu]

Супер урок, спасибо. Ждем с нетерпением новый проект :-)

[ЕкатеринаКутовая]

You are the best of the best! Спасибо за курс! Очень многому научилась.

[timofey]

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