Разработка сайта для мобильного приложения. Часть 1

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

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

Весь процесс верстки я разделю на 2-3 части (статьи).

Пожалуй начнем!

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

<!DOCTYPE html> <html> <head> <title>Шаблон сайта мобильного приложения</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> </body> </html>

Прописываем meta данные будущего сайта, создаем файл style.css (файл стилей) и подключаем его в <head>, а также подключаем библиотеку JQuery также в <head>. В дальнейшем на сайте я будем использовать эффекты стандартной анимации JQuery.

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

- первый экран с основным заголовком, описанием и кнопкой действия;

- второй блок будет с изображением, описанием приложения и кнопками App Story и Google Play для скачивания;

- третий блок используем для описания возможностей приложения в виде иконок с описанием;

- четвертый блок будет рассказывать о создателях;

- пятый блок будет с контактами.

А теперь реализуем всё это в html структуре:

<div class="box_1"> <div class="col_box_1"> <h1>Основной заголовок</h1> <p>Текст с первичным описанием</p> <a href="#" class="button1">кнопка</a> </div> <div class="col_box_1"> </div> </div> <div class="box_2"> <div class="col_box_2"> <img src="image/667fe088008c3dd2ab49.png" alt=""> </div> <div class="col_box_2"> <h2>Новое мобильное приложение </h2> <p class="callout">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <div class="button_group"> <a href="#" class="button2">App Store</a> <a href="#" class="button3">Google Play</a> </div> </div> </div>

Есть два основных контейнера - это box_1 и box_2, в которых располагаются колонки col_box, в которых в свою очередь находится сам контент сайта в виде заголовков h1 и h2, а также описание p и ссылок, которые я, с помощью css, превращу в кнопки. Также я уже подобрал изображения для сайта.

Сейчас без стилей сайт выглядит вот так:

Пришло время открывать файл style.css и внести первые стили на наш сайт

Сайту зададим общий черный фон, для этого прописываем в body background-color: black;, а также прописываем нулевые внешний отступы с помощью margin: 0;.

body { background-color: rgb(27, 27, 27); margin: 0; }

Что поменялось на сайте, давайте посмотрим:

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

Думаю пора предать сайту настоящий вид, начнем с первого блока:

/******block-1******/ .box_1::after { content: ""; display: table; clear: both; } .box_1 { padding: 4%; background-image: url(image/fff.png); background-size: cover; } .col_box_1 { float: left; width: 50%; color: white; text-shadow: 1px 1px 1px rgb(100, 97, 97); font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; padding-bottom: 8%; } .col_box_1 h1 { padding-top: 22%; font-size: 50px; padding-left: 15%; } .col_box_1 p { padding-left: 15%; font-size: 20px; } a.button1 { display: inline-block; color: white; font-weight: 500; text-decoration: none; user-select: none; padding: .5em 2em; outline: none; border: 2px solid; border-radius: 1px; margin-left: 15%; transition: 0.2s; } a.button1:hover { background: rgba(255,255,255,.2); } @media screen and (max-width: 600px) { .col_box_1 { width: 100%; text-align: center; } .col_box_1 h1 { padding-top: 0; font-size: 30px; padding-left: 0; } .col_box_1 p { padding-left: 0; font-size: 17px; } a.button1 { margin-left: 0; } }

Делаем макет из двух колонок в .box_1::after;, можно было конечно использовать flex или grid, но я обошелся старым float методом, он меня вполне устраивает.

Дальше задаем внутренние отступы, указываем путь к фоновому изображению, задаем стили тексту и стили нашей кнопки a.button1. Также я сразу добавил медиа-запросы для адаптивности нашего макета.

Посмотрим что получилось на этот раз:

Получился вполне симпатичный, в стиле минимализма, блок.

Займемся блоком с описанием приложения и кнопками App Story и Google Play. Вернемся в файл style.css:

/*****block-2*****/ .box_2 { padding: 4%; } .box_2::after { content: ""; display: table; clear: both; } .col_box_2 { float: left; width: 50%; color: white; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; text-align: left; } .col_box_2 h2 { font-size: 25px; padding-top: 20%; } .col_box_2 img { width: 42%; margin-left: 20%; } .callout { border-left: 4px solid rgb(74, 108, 201); padding: 10px; } a.button2 { display: inline-block; color: white; background-color: #FF1493; font-weight: 500; text-decoration: none; user-select: none; padding: .5em 2em; outline: none; border: 2px solid; border-radius: 1px; margin: 1%; transition: 0.5s; } a.button2:hover { background: #a73170; } a.button3 { display: inline-block; color: white; background-color: #1E90FF; font-weight: 500; text-decoration: none; user-select: none; padding: .5em 2em; outline: none; border: 2px solid; border-radius: 1px; margin: 1%; transition: 0.5s; } a.button3:hover { background: #3070b1; } @media screen and (max-width: 600px) { .col_box_2 { width: 100%; text-align: center; } .col_box_2 h2 { padding-top: 10%; } .col_box_2 img { margin-left: 0; } }

Здесь история практически такая же, как и с первым блоком: делаем две колонки, задаем стили изображению, стили текста и кнопок, а также прописываем медиа-запросы.

Получилось вот что:

Я считаю, что этот блок отражает всё, что было запланировано и выглядит он вполне современно.

Что не мало важно, этот шаблон адаптивный:

На этом моя статья заканчивается, оставляйте свои комментарии и советы, не судите строго, я только начинающий разработчик!

В следующей статье мы разберем третий и четвертый блок. До встречи.

Разработка сайта для мобильного приложения. Часть 1

Верстка костей (структуры) сайта

Верстка стилей