Напомню, что на прошлых занятиях мы познакомились с вами с HTML, CSS, серверами Linux, DNS, почтой, доменами, создали веб-страницу и опубликовали ее в интернете на своем сервере. Мы большие молодцы. Продолжим.
Что было на прошлом уроке?
На прошлом уроке мы настроили почту для домена и сделали почтовые ящики.
Что будет на этом уроке?
На этом уроке мы создадим красивый дизайн нашего сайта в специальном конструкторе.
Если в процессе изучения что-то не понятно — не стесняйтесь спрашивать нас и других учеников в нашей открытой группе в телеграм:
SRMT22 Открытый клуб веб-разработки
Для тех, кто только к нам присоединился, ссылка на все уроки:
Обучение веб-программированию с нуля бесплатно
zen.yandex.ru
И ссылка на самый первый урок:
Вводный курс в веб-программирование. Урок 1.
Обучение веб-программированию с нуля бесплатно 18 июля 2022
Какими должны быть сайты?
Красивыми
Концептуально о дизайне: первое впечатление о вашем сайте у людей создается на основе дизайна. Поэтому старайтесь делать красиво. Есть масса примеров, где красивая обложка и никакой сервис и функционал вызывают большее доверие, чем проверенный надежный ресурс, который выглядит старо и криво.
Распаковка и обзор фурнитуры и бусин для создания украшений с сайта АлиЭкспресс.
Простыми
Также есть принцип разработки, который говорит о том, что должно быть максимально просто: то есть делайте сайт простым, понятным для пользователя. Не делайте нагромождений текстов, кнопок, форм и функций. Пользователь не будет разбираться, если у ваших конкурентов проще.
Полезными
Следуйте простому принципу: человек приходит на ваш сайт за конкретной информацией (например, в наш блог и наш клуб человек приходит, чтобы научиться делать сайты).
Блок о компании — как делать?
Поэтому не нужно его с порога грузить самой популярной ошибкой «О компании» в виде полотна текста с историей развития компании, особенно, если эта история не богата вековым наследием, как Coca-Cola. Тут поймите правильно: если есть чем похвастаться — обязательно акцентируйте на этом внимание, но в сухом остатке и фактах, например «уже более 1000 наших учеников работают веб-программистами», «Мы в 10 раз дешевле наших конкурентов», «За этот месяц мы трудоустроили 100 человек со средней зарплатой в 150 000 рублей», «Работаем в программировании с 2006 года», «Компания впервые зарегистрирована в 2009 году». А о том, что ваша компания открыта тремя друзьями-одноклассниками пусть лучше расскажет снятый Голливудом фильм о ваших успехах.
Делайте сайт для людей
Что это значит? Не делайте сайт для поисковой машины. В интернете полно сайтов, которые сделаны для того, чтобы поисковая машина (гугл, яндекс) привела на этот сайт много пользователей. Но посетители, попав на такой сайт, сбегают с него в ужасе.
Не делайте сайт для максимально быстрого и простого заработка денег (если вам дороги посетители, конечно). А именно не нужно пичкать сайт рекламой в надежде с нее много заработать. Результатом будет то, что вы оттолкнете своих посетителей и некому будет смотреть вашу рекламу.
ОБЗОР фурнитуры для создания украшений с сайта АлиЭкспресс
В рекламе, в заголовках, в названиях страниц и ссылках на них описывайте в точности то, что на этой странице будет. Например, я в заголовке точно описал, что мы сегодня будем делать дизайн красивого сайта, а сам гружу ваш теорией на тему того, какой контент у сайта должен быть.
На этой веселой ноте перейдем, к практике. По ходу практики все и расскажу. В нашем деле пальцы не отпилишь, глаза в кислоте не обожжешь. Поэтому я считаю, что лучше всего теория в голове засядет, если делать практику.
В чем делать дизайн сайта?
Надеюсь, шока у вас не случится, если я скажу, что для этого нам НЕ потребуется фотошоп и вообще не потребуется никакой графический редактор.
Оговорюсь: графический редактор может понадобиться для обработки изображений (если нужных готовых не найдете и решите заморочиться обрабатывать свои фото или сами рисовать).
Итак, в интернете гора «конструкторов сайтов» и сервисов, где можно получить вообще готовый дизайн или за пару часов сверстать сайт из шаблонов и получить готовый код (код отвратительный, поэтому нас интересует только дизайн). Я попробовал разные и мне больше всего понравился Nicepage.
Nicepage — конструктор сайтов
Бесплатно, понятно, красиво, просто, быстро. Вот ссылка:
Free Website Builder Software | 10,000+ Free Templates
nicepage.com
Заходим, регистрируемся, качаем приложение на компьютер (можно и в браузере, но как правило работает хуже), устанавливаем, запускаем.
Откроется такое приложение, которое сразу предложит вам экспресс-демонстрацию возможностей приложения. Еще и на русском языке. Обязательно внимательно и вдумчиво пройдите его.
Структура современного сайта
Давайте определимся в структуре сайта.
Он состоит из страниц. Основная и первая — это главная страница, она же homepage, она же домашняя, она же home, frontpage.
Кстати, на этом сайт может и закончиться — многим достаточно всего одной страницы. Так называемый одностраничный сайт. Не путать с лендингом, а тому, кто говорит, что есть тип сайта лендинг — вбить гвоздь в голову.
Что такое лендинг?
Лендинг — это посадочная страница. От английского слова Landing — садиться (самолет садится на взлетную полосу, происходит посадка — landing). Это та страница, на которую приходит посетитель с поисковика, с рекламы, с QR-кода на вашем грузовике или самолете, со ссылки на другом сайте. На одностраничном сайте кроме landing-страницы больше ничего нет, главная страница у него и есть landing, но сам сайт — одностраничник.
Концепция минимализма
Придерживайтесь этой идеи всегда! Не городите кучу ненужной информации. Еще раз: на сайте размещайте то, что интересно посетителю.
Запускайте быстрый лучше сырой продукт, чем разоритесь, пока будете делать идеал
Запустите что-то более-менее работающее и полезное для вашей аудитории, а потом уже доводите это до идеала. Вы удивитесь тому, насколько изменится ваша идея в процессе из-за того, что аудитория вас направит несколько в других направлениях, чем вы предполагали. Ну и как минимум, если у вас есть конкуренты — запустите продукт на рынок раньше них.
Минутка честности: сколько бы вы не делали: день, месяц, год. Как бы вы не вылизывали свой проект, каким бы он крутым не был, первые посетителя, извиняюсь за прямоту, закидают вашу работу ссаными тряпками. Поэтому пусть лучше эта критика будет о сыром недоделанном проекте и по существу (тем более потратили-то пару часов), чем над тем, что вам кажется безупречным и потратили вы на это год.
Сколько страниц делать?
Поэтому не придумывайте 50 страниц для вашего сайта. Делайте ОДНУ!
Именно одну. Сначала сделайте свою посадочную страницу, на которую будет попадать ваш посетитель. Там разместите всю самую важную информацию, возможность выйти на заказ или связаться с вами.
Опубликуйте эту страницу — пусть она появится в интернете. А потом уже к ней можете хоть 100 добавить. Но только они не будут уже мешать запуску проекта. Проект будет развиваться по ходу его жизни, а не будет удален, потому что вы на него плюнете так и не доделав.
С количеством страниц определились.
Резюмирую : начинаем всегда с одной страницы, тип этой страницы — посадочная. То есть на ней должна быть вся информация, которая нужна, чтобы вы «продали» то, ради чего делался сайт, эта страница должна заинтересовать и призвать посетителя к действию. Например, у нас человек должен оставить свои контакты, чтобы вступить в клуб.
Делаем одностраничник и лендинг
Теперь давайте разберемся со структурой страницы.
На любой странице есть 4 вещи: шапка, контент, подвал, меню.
Шапка
Контент
Контент — это содержимое вашей страницы. Сами тексты, изображения, видео, аудио — что угодно. В контенте находится основная смысловая нагрузка страницы.
Подвал
Подвал — это нижняя и завершающая часть любой страницы. В нем, как правило, дублируются контактные данные, основные пункты меню, присутствуют ссылки на социальные сети, размещается адрес и юридическая информация.
Меню
В меню размещаются ссылки на страницы сайта. Например, страница обратной связи, о компании, страница услуг, предлагаемых компанией. Или же ссылки на разделы интернет-магазина.
На одностраничном сайте меню не нужно.
Делаем красивый дизайн сайта без каких-либо навыков веб-дизайнера
Сейчас технологии шагнули настолько далеко, что можно сделать красивый правильный сайт не привлекая веб-дизайнера.
Оговорка: на этом занятии мы сделаем с вами дизайн по образцу сайта нашего клуба Sarmatia 22, а в домашнем задании вы сделаете свой сайт. У меня он будет красивым и выглядеть профессионально, потому что я уже за 15 лет набил шишек и знаю, как сделать просто, быстро и красиво. Вам нужно будет в комментариях прислать скрины дизайна своего сайта. Мы их будем обсуждать.
Я укажу на недочеты. И вы их будете исправлять. А вы мне в комментариях напишете, что вам кажется не так в дизайне сайта, который предложу я.
Итак, Nicepage у нас уже установлен — в нем и будем делать наш супер-сайт.
На выходе у нас получится что-то подобное.
Источник: dzen.ru
Как создать украшения для сайта
Комментарии
Популярные По порядку
Не удалось загрузить комментарии.
ВАКАНСИИ
Программист Java
Новосибирск, от 50000 RUB
Data Scientist
Москва, по итогам собеседования
Production manager
Москва, от 140000 RUB до 150000 RUB
ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ
Подборка материалов по HTML и CSS
В этой подборке представлены актуальные книги и видеоматериалы по HTML, CSS и верстке в целом для начинающих и продвинутых веб-разработчиков.
15 прекрасных плагинов для Sublime Text
Встречайте список первой необходимости – 15 самых нужных плагинов для Sublime, которые сильно упростят жизнь разработчику.
Изучение JavaScript с нуля
Рассказ программиста о том, как добиться успехов в изучении JavaScript.
Источник: proglib.io
Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт
Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.
3D-анимация на JS
Первый трюк — замечательный трёхмерный эффект на JS.
Как видите, когда указатель мыши проходит по этой «карточке», элементы внутри нее обретают трёхмерность.
Как это делается
Сначала создаётся HTML div:
Hackerone
Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25
Здесь у нас есть основной класс (card) и два других класса внутри card (header and info). Header будет классом, содержащим изображение (в нашем примере — логотип Medium), а info будет содержать текст в карточке. Теперь давайте добавим CSS, чтобы карта выглядела лучше.
.card
Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг — добиться 3D-эффекта при наведении курсора мыши на карту. Для этого я воспользовался JS:
// declaring variables const card = document.querySelector(«.card»); const title = document.querySelector(«.title»); const header = document.querySelector(«.header img»); const description = document.querySelector(«.info h3»); // Animate In card.addEventListener(«mouseenter», (e) => < card.style.transition = «none»; title.style.transform = «translateZ(3px)»; header.style.transform = «translateZ(3px) rotateZ(0deg)»; description.style.transform = «translateZ(3px)»; >); // Animate Out card.addEventListener(«mouseleave», (e) => < card.style.transition = «all 0.5s ease»; card.style.transform = `rotateY(0deg) rotateX(0deg)`; title.style.transform = «translateZ(0px)»; header.style.transform = «translateZ(0px) rotateZ(0deg)»; description.style.transform = «translateZ(0px)»; >);
- Объявите переменные.
- Создайте два прослушивателя событий для card.
- В mouseenter переведите Z на 3 пикселя для title, header и description. Вы также можете решить, вращать эти элементы или нет (rotateZ).
- По событию mouseleave верните всё в нормальное состояние.
Откройте для себя Vanta.js для анимации фона
Устали от статичных цветов и изображений на фоне веб-страницы? VantaJs разработана, чтобы оживить фон:
Как это делается
Это довольно просто. Добавьте в HTML такой код:
Это установит фон Vanta.js Globe для идентификатора htmlid.
В Vanta.js есть 13 готовых фонов
ScrollReveal
Для тех, кто не знал об этой фантастической библиотеке JS, ScrollReveal может отображать элементы при прокрутке веб-страницы:
Как это делается
- Добавьте в заголовок вашего HTML.
- В файле JS напишите:
ScrollReveal().reveal(‘.htmlclass’,< delay: 400 >)
Код отобразит элемент с классом .htmlclass с задержкой 400мс при прокрутке страницы.
Изменение размера и цвета букв
Этот небольшой трюк с CSS действительно впечатляет при правильном использовании:
Как это делается
Создайте несколько новых HTML-элементов span и укажите их класс:
Test
3. Применяя CSS :hover, мы изменяем размер букв и их цвет:
.blast:hover
Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет. Чтобы добиться еще более динамичного эффекта, я предлагаю создать отдельный класс для каждой буквы с разными размерами и цветами. Кроме того, вы можете применить CSS :hover к каждому типу элемента в HTML. Например, я тоже применил его к своей контактной форме:
Свойство animation
Дополнили материал описанием свойства из статьи Криса Койера.
Подсвойства
Вот полный список значений, которые может принимать каждое из этих вложенных свойств:
| animation-timing-function | ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
| animation-duration | Xs или Xms |
| animation-delay | Xs или Xms |
| animation-iteration-count | X |
| animation-fill-mode | forwards, backwards, both, none |
| animation-direction | normal, alternate |
| animation-play-state | paused, running, running |
Несколько шагов
Несколько анимаций
.element
Производительность
Анимация большинства свойств является проблемой производительности, поэтому мы должны соблюдать осторожность перед анимацией любого свойства. Однако есть определённые комбинации, которые можно безопасно анимировать:
- transform: translate()
- transform: scale()
- transform: rotate()
- opacity
Какие свойства можно анимировать?
На MDN есть список свойств CSS, которые могут быть анимированы. Они имеют тенденцию быть цветами и числами. Пример неанимируемого свойства — background-image.
Больше информации
- Анимация на MDN.
- Использование анимации CSS.
- Анимация на W3C.
- Jank busting для повышения производительности рендеринга.
- Веб-анимация в действии.
- Пять способов анимировать отзывчиво.
- Скачки состояния, отрицательные задержки, анимация источника и многое другое.
- Запуск анимации CSS на полпути.
Поддержка браузерами
Эти данные о поддержке браузера взяты с сайта Caniuse, где имеется более подробная информация. Число означает, что браузер поддерживает функцию в этой версии и выше.
Настольные
| Chrome | Firefox | IE | Edge | Safari |
| 4* | 5* | 10 | 12 | 5.1* |
Мобильные
| Android Chrome | Android Firefox | Android | iOS Safari |
| 87 | 83 | 4* | 6.0-6.1* |
Префиксы
Хотя поддержка этого свойства в современных браузерах достаточно хороша, мы, возможно, захотим поддерживать как можно больше старых браузеров. В этом случае нужно использовать префиксы поставщиков:
Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт пет-проекта, над которым вы работаете. Если у вас есть какие-то свои трюки — призываю делиться ими в комментах. И не забывайте о промокоде HABR, который дает дополнительную скидку 10% к той, что указана на баннере.
- Профессия Веб-разработчик
- Курс по JavaScript
Другие профессии и курсы
ПРОФЕССИИ
- Обучение профессии Data Science
- Обучение профессии Data Analyst
- Профессия Java-разработчик
- Профессия Frontend-разработчик
- Профессия Этичный хакер
- Профессия C++ разработчик
- Профессия Разработчик игр на Unity
- Профессия iOS-разработчик с нуля
- Профессия Android-разработчик с нуля
- Курс «Python для веб-разработки»
- Продвинутый курс «Machine Learning Pro + Deep Learning»
- Курс по Machine Learning
- Курс «Математика и Machine Learning для Data Science»
- Курс по аналитике данных
- Курс по DevOps
Источник: habr.com