<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Показ сайта на различных девайсах

Показ сайта на различных девайсах

Как веб-разработчику продемонстрировать потенциальному клиенту адаптивность сделанных сайтов из портфолио? И зачем вообще, что-то демонстрировать, если можно просто написать: "Разрабатываю адаптивные сайты".

Разумеется, что большинство так и пишут, на страницах своей веб-студии. Только вот не посвященному заказчику в мир сайтостроения, эта фраза ни о чем не говорит. Максимум, что видит посетитель, это ссылки на готовые сайты из портфолио, по которым он может перейти (например с ноутбука) и оценить ваш уровень профессионализма.

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

На самом деле, то о чем вы узнаете из этой статьи – просто супер тема, применив которую на своем сайте веб-студии, вы будете выгодно отличаться от конкурентов. Ведь заказчику уже не нужно будет вам объяснять, что его сайт должен хорошо смотреться на мобильных устройствах и планшетах. Он сам все увидит и даже вживую сможет оценить, как это работает.

Что мы получим?

В итоге, мы должны получить шаблон смартфона на чистом CSS, куда во фрейме вставим адрес демонстрационного сайта. Посетитель увидит не просто какой-то скриншот, а реальный сайт, который можно прокручивать, нажимать на ссылки, смотреть картинки и видео.

Демонстрация примера

Как это сделать?

Нам надо нарисовать сам смартфон, только на чистом CSS, без малейшего применения графики. Для этого создадим div с классом smartphone (изображающий сам смартфон), внутри которого поместим другой div с классом content (изображающий экран браузера). Во втором блоке div, вставим фрейм c URL сайта.

HTML-код

<div class="smartphone">
<div class="content">
<iframe src="https://your_site.ru">
</div>
</div>

Демонстрационный сайт, внутри фрейма загрузился, но без написания стилей никакого смартфона, мы пока не видим.

Показ сайта на различных девайсах.

Рисуем смартфон на CSS

1) Изображаем контур смартфона в виде обычной, плюс верхней и нижней утолщенной рамки с закругленными углами.

.smartphone {
  position: relative; /* позиция блока относительно браузера */
  width: 320px;
  height: 569px;
  margin: auto;
  border: 16px #000 solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

Показ сайта на различных девайсах.

2) Добавляем горизонтальную серую линию линию наверх устройства. Здесь мы применим трюк с псевдоэлементом before, когда до блока с классом smartphone, средствами CSS, задается элемент, которого нет в HTML разметке.

.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute; /* позиция линии относительно .smartphone */
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%); /* выравнивание по центру */
  background: #333;
  border-radius: 10px;
}

Показ сайта на различных девайсах.

3) Рисуем фигуру круга внизу смартфона. На этот раз, используем псевдоэлемент after (после).

.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;   left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

Показ сайта на различных девайсах.

4) Размеры и цвет экрана браузера для загружаемого контента.

.smartphone .content {
  width: 320px;
  height: 569px;
  background: #fff;
}

5) Стили для фрейма

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

Показ сайта на различных девайсах.

Планшет

Для презентации сайта на планшете, в CSS коде, задаются подходящие размеры для планшета.

width: 768px; height: 1024px;

Заключение

Тем, кому понравилось, как презентовать свою портфолио на сайте веб-студии, возможно будет интересно, как открыть свою Web-студию и зарабатывать 100 000 рублей в месяц.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

samvel29 samvel29 02.03.2019 19:45:53

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

Ответить

porsake porsake 04.03.2019 14:17:19

не в курсе, но даже если и есть такой сервис, то эта услуга может быть платной. Иметь независимую систему на своем сайте надежнее.

Ответить

samvel29 samvel29 04.03.2019 14:27:29

Я за независимость, все что могу, делаю сам и сплю спокойно.

Ответить

master284 master284 09.03.2019 23:14:55

Я и не подумал о такой возможности супер представления своего портфолио, если мои сайты все адаптированы под любой малогабаритный экран. Я старый клиент Михаила, да и сам старый. Но уже несколько лет увлечён созданием сайтов визиток и накопил более 20 сайтов в портфолио. Они все рабочие на 100% со всей функциональностью. Расположены на без движковом хостинге с мизерной оплатой 20 руб в месяц. Всего на диске 500 Мб можно разместить до 450 отдельных сайтов со своими картинками, стилями. И это за 20 руб. в месяц. Вот моё портфолио в живую: https://servis.kharkov.ua/mi/pf.html А теперь с помощью технологии Михаила я смогу на одной странице разместить много изображений смартфонов с демонстрацией на каждом аппарате своего сайта из портфолио. Потому, что Михаил на 100% прав - люди не понимают как проверить адаптацию вашего сайта и не делают заказы. Я до этого предлагал клиентам смотреть мои сайты, отсылая им на телефон URL моих сайтов.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.