Урок 8. Делаем красивый дизайн сайта

Учимся делать веб-сайты с нуля до трудоустройства. Сегодня будем делать красивый дизайн сайта

Напомню, что на прошлых занятиях мы познакомились с вами с HTML, CSS, серверами Linux, DNS, почтой, доменами, создали веб-страницу и опубликовали ее в интернете на своем сервере. Мы большие молодцы. Продолжим.

Что было на прошлом уроке?

На прошлом уроке мы настроили почту для домена и сделали почтовые ящики.

Что будет на этом уроке?

На этом уроке мы создадим красивый дизайн нашего сайта в специальном конструкторе.

Если в процессе изучения что-то не понятно - не стесняйтесь спрашивать нас и других учеников в нашей открытой группе в телеграм:

Для тех, кто только к нам присоединился, ссылка на все уроки:

И ссылка на самый первый урок:

Какими должны быть сайты?

Красивыми

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

Простыми

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

Полезными

Следуйте простому принципу: человек приходит на ваш сайт за конкретной информацией (например, в наш блог и наш клуб человек приходит, чтобы научиться делать сайты).

Блок о компании - как делать?

Поэтому не нужно его с порога грузить самой популярной ошибкой "О компании" в виде полотна текста с историей развития компании, особенно, если эта история не богата вековым наследием, как Coca-Cola. Тут поймите правильно: если есть чем похвастаться - обязательно акцентируйте на этом внимание, но в сухом остатке и фактах, например "уже более 1000 наших учеников работают веб-программистами", "Мы в 10 раз дешевле наших конкурентов", "За этот месяц мы трудоустроили 100 человек со средней зарплатой в 150 000 рублей", "Работаем в программировании с 2006 года", "Компания впервые зарегистрирована в 2009 году". А о том, что ваша компания открыта тремя друзьями-одноклассниками пусть лучше расскажет снятый Голливудом фильм о ваших успехах.

Делайте сайт для людей

Что это значит? Не делайте сайт для поисковой машины. В интернете полно сайтов, которые сделаны для того, чтобы поисковая машина (гугл, яндекс) привела на этот сайт много пользователей. Но посетители, попав на такой сайт, сбегают с него в ужасе.

Не делайте сайт для максимально быстрого и простого заработка денег (если вам дороги посетители, конечно). А именно не нужно пичкать сайт рекламой в надежде с нее много заработать. Результатом будет то, что вы оттолкнете своих посетителей и некому будет смотреть вашу рекламу.

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

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

В чем делать дизайн сайта?

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

Оговорюсь: графический редактор может понадобиться для обработки изображений (если нужных готовых не найдете и решите заморочиться обрабатывать свои фото или сами рисовать).

Итак, в интернете гора "конструкторов сайтов" и сервисов, где можно получить вообще готовый дизайн или за пару часов сверстать сайт из шаблонов и получить готовый код (код отвратительный, поэтому нас интересует только дизайн). Я попробовал разные и мне больше всего понравился Nicepage.

Nicepage - конструктор сайтов

Бесплатно, понятно, красиво, просто, быстро. Вот ссылка:

Заходим, регистрируемся, качаем приложение на компьютер (можно и в браузере, но как правило работает хуже), устанавливаем, запускаем.

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

Структура современного сайта

Давайте определимся в структуре сайта.

Он состоит из страниц. Основная и первая - это главная страница, она же homepage, она же домашняя, она же home, frontpage.

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

Что такое лендинг?

Лендинг - это посадочная страница. От английского слова Landing - садиться (самолет садится на взлетную полосу, происходит посадка - landing). Это та страница, на которую приходит посетитель с поисковика, с рекламы, с QR-кода на вашем грузовике или самолете, со ссылки на другом сайте. На одностраничном сайте кроме landing-страницы больше ничего нет, главная страница у него и есть landing, но сам сайт - одностраничник.

Концепция минимализма

Придерживайтесь этой идеи всегда! Не городите кучу ненужной информации. Еще раз: на сайте размещайте то, что интересно посетителю.

Запускайте быстрый лучше сырой продукт, чем разоритесь, пока будете делать идеал

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

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

Сколько страниц делать?

Поэтому не придумывайте 50 страниц для вашего сайта. Делайте ОДНУ!

Именно одну. Сначала сделайте свою посадочную страницу, на которую будет попадать ваш посетитель. Там разместите всю самую важную информацию, возможность выйти на заказ или связаться с вами.

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

С количеством страниц определились.

Резюмирую: начинаем всегда с одной страницы, тип этой страницы - посадочная. То есть на ней должна быть вся информация, которая нужна, чтобы вы "продали" то, ради чего делался сайт, эта страница должна заинтересовать и призвать посетителя к действию. Например, у нас человек должен оставить свои контакты, чтобы вступить в клуб.

Делаем одностраничник и лендинг

Теперь давайте разберемся со структурой страницы.

На любой странице есть 4 вещи: шапка, контент, подвал, меню.

Шапка

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

Контент

Контент - это содержимое вашей страницы. Сами тексты, изображения, видео, аудио - что угодно. В контенте находится основная смысловая нагрузка страницы.

Подвал

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

Меню

В меню размещаются ссылки на страницы сайта. Например, страница обратной связи, о компании, страница услуг, предлагаемых компанией. Или же ссылки на разделы интернет-магазина.

На одностраничном сайте меню не нужно.

Делаем красивый дизайн сайта без каких-либо навыков веб-дизайнера

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

Оговорка: на этом занятии мы сделаем с вами дизайн по образцу сайта нашего клуба Sarmatia 22, а в домашнем задании вы сделаете свой сайт. У меня он будет красивым и выглядеть профессионально, потому что я уже за 15 лет набил шишек и знаю, как сделать просто, быстро и красиво. Вам нужно будет в комментариях прислать скрины дизайна своего сайта. Мы их будем обсуждать. Я укажу на недочеты. И вы их будете исправлять. А вы мне в комментариях напишете, что вам кажется не так в дизайне сайта, который предложу я.

Итак, Nicepage у нас уже установлен - в нем и будем делать наш супер-сайт.

На выходе у нас получится что-то подобное.

Создаем новый сайт в Nicepage

Закройте все лишнее в Nicepage и на главном экране приложения нажмите "Новый сайт"

NicePage бесплатен, если вы делаете в нем не более 1 сайта. Если сайт уже есть, то для целей курса, рекомендую его удалить и сделать новый с нуля вместе с этим обучением.

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

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

В открывшемся окне нажмите "Начать с пустой страницы"

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

Но на этом занятии мы сделаем сайт с нуля и поймем, как это все строится.

Откроется главная страница.

Делаем дизайн главной страницы сайта

Давайте сразу отключим шапку на ней. У нас главная несет роль лендинга - на ней шапка будет своя.

Делаем шапку главной страницы

Далее жмем "Новый блок"

Откроется меню выбора блока. Их там десятки. На любой вкус и цвет. Рекомендую после прохождения этого занятия поиграться со всеми.

Нам нужна шапка лендинга. Для этого подойдет "текст на картинке"

Результат будет таким:

Теперь нужно поменять текст и изображение.

Напомню, мы делаем сейчас страницу по образцу главной страницы Sarmatia 22

Поиск изображение для шапки

Начнем с изображения. Для начала найдем подходящую картинку в интернете. Сразу оговорюсь, по-черному брать картинки с гугла или яндекса не совсем можно. Это интеллектуальная собственность. У изображений есть авторы, которые вам могут предъявить. Есть множество бесплатных или условно-бесплатных фотостоков, откуда можно взять много красивых изображений.

Воспользуемся фотостоком freepik.

Я сразу рекомендую зарегистрироваться, чтобы у вас не было ограничение в 10 изображений в день.

На главной странице фотостока вводи поисковой запрос Programmer и жмем Enter.

В результатах выдаче в фильтре сразу отметьте "Free", чтобы вам отображались только бесплатные изображения.

У нас выдача изображений явно будет разная. Поэтому выбирайте любую темную картинку, которая вам понравится.

В окошке с картинкой жмите Download

Далее сразу качайте во всех доступных размерах.

Укажем автора изображения

На этом сайте есть условие: если вы качаете изображение бесплатно, вы должны указать авторство где-то рядом с изображением. Я считаю, что это делать нужно. Человек работал, потратил время, мы используем бесплатно. Поэтому стоит указать, откуда мы взяли это изображение. С другой стороны, вы делаете учебный проект и сомнительно, что будут какие-то проблемы. Поэтому тут на ваше усмотрение. Но я буду везде указывать авторство.

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

Давайте сразу добавим небольшой текстовый блок для указания авторства

Нажмите "Добавить элемент" в нашем блоке

Выбираем тип "Маленький текст"

После этого вставляем текст об авторе с сайта Freepik к в наш новый текстовый элемент

У меня получилась фигня, честно говоря. Вставился код. Давайте это исправим:

1. Скопируйте содержимое атрибута href тега a - это ссылка на страницу изображения.
2. Удалите все, кроме текста "Image by pressfoto on Freepik" (у вас текст может отличаться)
3. Выделите текст и нажмите "Добавить ссылку" появившейся панели редактора

4. Откроется окно редактора ссылки. В нем уже будет заполнен "Текст меню". Нам нужно заполнить адрес (мы его как раз копировали из атрибута href выше) и отметить "Открывать в новом окне".

Проверьте. Должно быть примерно как на изображении. Далее жмите "Готово"

Замена изображения в шапке на свое

Нажмите на кнопку "Заменить изображение"

Мы качали изображения во всех доступных размерах. Нам бы идеально использовать то, которое 2000px шириной, но у меня размер файла этого изображения аж 2МБ - это очень много. Если мы будем использовать такие изображения на странице, то она будет грузиться очень медленно. На большое изображение шапки не больше 1МБ нужно взять и то это много. В идеале изображение нужно взять в оригинальном большом размере и сжать где-нибудь в PhotoShop, но сейчас мы этим заниматься не будем. Берем то, которое меньше 1МБ и используем его.

Размер изображения можно в проводнике или в Finder посмотреть

Жмем кнопку "Загрузить"

Находим наш файл на диске и жмем открыть

Изображение вставится на страницу

Теперь меняем текст основного заголовка. Я также добавлю под основной заголовок еще один элемент типа подзаголовок H2.

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

Контент страницы

Жмем кнопку "Новый блок"

Выбираем нужный блок. У нас в этом блоке будут этапы обучения.

На примере первого блока разберем - остальные по примеру сами заполните.

Меняем заголовок на нужный:

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

Весь курс ориентирован исключительно на практику.

Сразу работаете в команде других обучаемых разработчиков с реальным общением и реальным руководителем

Далее нужно добавить заголовок к этапам обучения

Тип заголовка "H2"

Укажите сразу размер текста заголовка 24

Обратите внимание, заголовки вставились в каждый блок ниже

Заполняем текст:

ИНДИВИДУАЛЬНОЕ ОБУЧЕНИЕ ВЕБ-ПРОГРАММИРОВАНИЮ

Нам нужно добавить еще один блок типа "Текст" под основной текст в каждом этапе.

Туда добавим следующий текст:

Длительность: от 2 месяцев
Расход: 5 000
Первая неделя на пробу бесплатно!

Последнюю строку "Первая неделя на пробу бесплатно!" сделайте жирным.

Давайте теперь последний текстовый блок сделаем так, чтобы текст отбивался по правой стороне.

Для этого справа на экране есть панель настроек текста.

Отлично. В нашем блоке всего 3 элемента с текстом, а нам нужно 5. Давайте это настроим.

Нажмите на левый верхний угол элемента (рядом с галочкой на картинке) - справа на панели появится настройка с количеством строк. Поставьте 5.

Давайте теперь оставшиеся 4 блока заполним текстом. Можете взять мой, можете свой использовать.

ПРАКТИКА И ВЫПОЛНЕНИЕ РЕАЛЬНЫХ ЗАДАЧ НА РЕАЛЬНЫХ ПРОЕКТАХ

Проходите практику на реальном проекте.

Вам выдаются индивидуальные задачи с реальных проектов - вы их выполняете, а профессиональный ментор-программист помогает

Длительность: от 1 месяца
Расход: 5 000

ТРУДОУСТРОЙСТВО

Составляем резюме вместе
Подбираем для вас вакансии
Готовим к прохождению собеседования, помогаем пройти собеседование и устроиться на работу

Длительность: от 2 недель
Расход: 5 000
Доход: 50 000 - 120 000

РАБОТА С ПОДДЕРЖКОЙ КЛУБА

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

Длительность: 6-12 месяцев
Расход: 5 000
Доход: 50 000 - 120 000

КАРЬЕРНЫЙ РОСТ

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

Расход: 7 000
Доход: 120 000 - 450 000

Получится примерно так:

Давайте теперь поменяем галочки на другие иконки.

Жмем на галочку - появится панель редактора. Там жмем на "Иконка"

Откроется окно со списком иконок. Ищем более подходяшую и жмем на нее.

Иконка обновится. Но стиль сменится на другой. Справа на панели нужно выбрать нужный стиль.

Поменяйте иконки для остальных пяти блоков.

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

Создаем блок с призывом к действию

Теперь представим: посетитель посмотрел шапку, посмотрел основную информацию. Предположим, что он заинтересован. Что дальше?

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

Результат должен получиться примерно такой:

Создаем новый блок внизу.

Выбираем тип "Текст на картинке" - почти такой же, как в шапке. Просто сделаем его поуже и немного изменим расположение элементов.

Меняем заголовок на "Начните обучение сегодня".

Тип заголовка меняем на "Заголовок 2"

Текст на "Консультация, подбор направления и первая неделя обучения бесплатно!"

Теперь под заголовок нужно вставить новый элемент. Давайте сделаем это

Нужно вставить 2 колонки.

Сделайте, как на скриншоте ниже:

Получится вот так:

Текст перетягиваем в левую колонку, а кнопку - в правую. Располагаем элементы строго по центру.

Далее давайте сделаем, чтобы текст отображался на всю ширину своей колонки.

Давайте теперь заголовок тоже перетянем в левую колнку.

После этого сделайте высоту колонок минимальной.

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

Сделайте блок максимально узким, но чтобы содержимое было примерно по центру.

Поменяйте текст на кнопке на "Подробнее"

Теперь найдите подходящее изображение и поставьте его на фон этого блока.

Готово.

Блок с дополнительной информацией

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

Результат будет примерно таким:

Добавляем новый блок. Тип - 2 колонки.

Сразу удаляем иконку со звездочкой.

Заголовок меняем на "Что изучаем"

Текст меняем на маркированный список:

Программирование

Дизайн

Веб-программирование

Создание сайтов

Администрирование серверов

Разработка мобильных приложений

Разработка десктопных приложение

Робототехника

Программирование Arduino

3D моделирование

Разработка десктопных приложение

Разработка под Android

Разработка под IOS

Agile

PHP

CI-CD

CSS

Docker

Git

GoLang

HTML

Javascript

Kotlin

Laravel

MongoDB

MySQL

NodeJS

Python

ReactJS

Ruby

Symfony

TypeScript

VueJS

Yii2

Архитектура приложений

Микросервисы

ООП

Тестирование

PostgreSQL

Redis

ClickHouse

C

C++

Меняем картинку на свою

Получится так:

Если у вас просто текст, а не список с маркерами, то нажмите на текст и в появившейся панели редактора измените "текст" на "Маркированный список"

Теперь нужно наш список технологий привести к нормальному виду.

Для этого мы воспользуемся CSS

Выберите текст со списком и на правой панели нажмите на "Редактировать CSS"

Впишите следующий код в редактор css (позже расшифрую по пунктам)

.tech_list li {

border: solid #333 1px;

border-radius: 20px;

width: auto;

display: block;

float: left;

margin: 5px 2px;

padding: 5px 10px;

}

Теперь на правой панели над кнопкой "Редактировать CSS" есть поле ввода "CSS класс" - туда впишите tech_list.

Обратите внимание, что приложение nicepage не отображает корректно некоторые стили. Поэтому, чтобы посмотреть на результат, нужно воспользоваться предпросмотром в браузере.

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

Теперь давайте подробнее обсудим, что мы сделали с CSS.

В целом, ранее в занятиях мы уже работали с CSS, поэтому кратко.

У нас есть маркированный список технологий: в коде это будет выглядеть как <ul><li>тех 1</li><li>тех2</li></ul>

Мы этому блоку, то есть к <ul> сделали имя класса tech_list

В редакторе css мы описали стиль для элементов li внутри класса tech_list., то есть так: .tech_list li {}

border: solid #333 1px; - рамка solid - сплошная, цвет серый, ширина 1px

border-radius: 20px; - радиус скругления рамки 20px

width: auto; - ширина автоматическая

display: block; - отображать, как блок

float: left; - обтекать все элементы слева (чтобы не каждый на новой строке, а слева друг от друга)

margin: 5px 2px; - внешний отступ сверху/снизу 5px, справа/слева - 2px

padding: 5px 10px; внутренний сверху/снизу 5px, справа/слева - 2px

Этот блок готов.

Второй блок с призывом к действию

Итак, посетитель просмотрел много информации, на первый блок с призывом к действию не отреагировал. Цель нашей страницы - получить еще одного ученика в нашем клубе. Давайте добавим еще один блок с призывом к действию, чтобы пользователь не искал предыдущий.

Сделайте сами блок, как на изображении ниже. Я подробно про кнопки только расскажу. Остальное уже делали выше.

Пару слов о фоне.

Фон бывает слишком ярким и текст на нем теряется. Это просто решается: нужно затемнить фон. Есть специальная настройка. Нажмите на блок с изображением - на правой панели появится соответствующая настройка.

Кнопки.

Теперь разберемся с тем, как сделать 2 кнопки разного цвета.

Для этого нужно вставить уже знакомый нам элемент 2 колонки. Как добавите 2 колонки - кнопку перетащите в левую.

В правую колонку добавьте элемент типа "Кнопка"

Теперь нужно изменить фон кнопки. На правой панели выберите стиль без фона с рамкой.

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

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

Теперь нужно высоту колонок, в которых находятся кнопки, уменьшить до минимума. А также у колонок отступ сверху уменьшить до минимума.

Сам блок с текстом и кнопками также нужно уменьшить по высоте. Подберите оптимальный размер.

На черной кнопке напишите текст "Мне нужно подумать"

Получится вот так:

Добавляем блок со списком постов блога

На нашем сайте будут уроки курсов. Добавим блок слайдера типа "Карусель", в котором будут заголовки уроков.

Добавляем блок "Карусель постов блога"

Добавился вот такой элемент

Давайте добавим теперь над ним блок с заголовком H2 и напишем текст "Уроки программирования"

Подгоните высоту блока заголовка, чтобы отступы были приемлемы

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

Создаем подвал

Промотайте в самый низ.

Увидите заготовку подвала.

Мы будем делать вот такой подвал:

Что будем делать:

1. Удалим элемент, который есть в подвале

2. Добавим 3 колонки в качестве элемента

3. В левую колонку добавим текст, как на картинке

4. В среднюю колонку добавим заголовок, как на картинке

5. В правую колонку добавим элемент "Иконки соцсетей"

6. После этого расположите элементы по центру каждой колонки и отрегулируйте высоту колонок и высоту/отступы блока подвала

Результат такой:

Подвал готов.

Подгоняем отступы, шрифты и положения элементов на странице

Осталось "причесать" нашу страницу.

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

Сначала подгоните внешний вид до приемлемого состояния в первом режиме, потом во втором и т.д. - в итоге у вас страница должна отображаться приемлемо и на компьютере, и на телефоне, и на планшете.

Экспорт страницы в код

Теперь нужно экспортировать наш дизайн в реальный код.

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

Жмем на кнопку экспорта на верхней панели

Заполняем окно экспорта.

Выберите HTML.

Выберите "относительно" в блоке "Формат ссылки для папки"

Нажимаем "Экспорт".

Возможно появится предупреждение о том, что экспорт не доступен в бесплатной версии. Все равно жмем "Экспорт"

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

Попробуйте в Chrome открыть файл главной страницы (у меня это Главная.html)

Должна открыться наша страница, но у же реализованная в коде.

Попробуйте этот проект открыть в phpStorm, чтобы посмотреть, что получилось.

Откройте папку, в которой лежит проект и нажмите Open/Открыть.

Собственно с тем, как сделать красивый дизайн без дизайнера, мы разобрались.

Поздравляю.

Самостоятельное задание

1. Создайте свой сайт в nicepage.
2. В комментах к статье пришлите скрины на свой сайт

Что делать дальше и как нам помочь?

• 1. Поставить лайк
• 2. Написать в комментарии, за сколько времени удалось сделать урок, с чем возникли сложности, что бы хотелось разобрать более детально
• 3. Подписаться на этот канал
• 4. Добавиться к нам в группу в наш открытый клуб веб-разработки в телеграм: https://t.me/srmt22_webclub
• 5. Подписаться на наш канал курсов в телеграм: https://t.me/srmt22class
• 6. Сделать репост этого урока себе в соцсети.
• 7. Скрин результата своей работы прислать в комментарии к этой статье.

Что будет на следующем занятии?

Будем учиться верстать наш дизайн. Сделаем нормальный код.