Начинающий веб-разработчик: пишу сайт со сменой экранов на JQuery. Часть 1

Введение

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

Сегодня я начинаю серию постов по разработке сайта со сменой экранов на JQuery, которая затянется на 3-4 статьи. Вся разработка будет проходить немного раньше того, как я опубликую статью, практически live - трансляция! Профессионалов своего дела прошу комментировать работу не строго, но по факту, а начинающим разработчика советую вникать и учитывать замечания старших.

Я буду делать нестандартный сайт. На этом сайте будет одна страница, которая будет разделена на несколько экранов, которые будут переключаться нажатием на определенные элементы посредствам сил JS с библиотекой JQuery. На сайте будет всего 4 экрана, постараюсь вместить на них всю нужную информацию.

Приступим к началу моего проекта - сайт мобильного приложения со меной экранов на JQuery.

Подготовка html разметки и создание первого контейнера

Начнем конечно же со стандартной html разметки, ну знаете там, теги head, body, title и так далее.

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

Вот такую html разметку я написал:

<!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>

title прописал,meta для адаптивности прописал, файл стилей и библиотеку JQuery подключил, пришло время писать структуру сайта. Не для кого не секрет, что структура html прописывается внутри тега body.

  <div class="box_1">
    <div class="col_box_1">
      <h1>Основной заголовок</h1>
      <p>Текст с первичным описанием</p>
      <a href="#" class="button1">кнопка</a>
    </div>
    <div class="col_box_1">
      <img src="image/1278ab5be10755a58d45bbe641e350fd.png" alt="">
    </div>   
  </div>

Вот так я сделал структуру первого блока, поясню:

  1. Создаём контейнер box_1;

  2. Помещаем в контейнер две колонки col_box_1;

  3. В первую колонку помещаем заголовок h1 и параграф p с будущим описанием, а также ссылку a с классом button для создания кнопки, с помощью которой осуществляется действие;

  4. Во вторую колонку помещаем изображение img, которое будет как-то презентовать продукт, изображение я уже вставил.

Задаем стили первого контейнера и его элементов

Настала пора задать стили первому контейнеру и всем его элементам. Как все знают, данные манипуляции я буду проводить в файле style.css, который я подключил в разделе head.

body {
    background-color: rgb(27, 27, 27);
    margin: 0;
}
/******container-1******/
.box_1::after {
    content: "";
    display: table;
    clear: both;
}
.box_1 {
    padding: 4%;
}
.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', 'sans-serif';  
}
.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); 
}
.col_box_1 img {
    object-fit: contain;
    width: 60%;
    height: 35%;
    padding-left: 15%;
} 
  1. Задаем общий фон сайта, сайт будет в темных тонах. Также указываем внешние отступы margin: 0;

  2. Выравниваем col_box_1 по левой стороне с помощью методаfloat, тем самым создаем две колонки размером 50% на 50%. Можно использовать более новые методы для построения колонок, типа grid и flexbox;

  3. Задаем общие стили для всех элементов и задаем стили для нашей кнопки button1;

  4. Задаем стили изображению, указываем заполнение object-fit: contain;, размеры width height и внутренние отступы слева padding-left;

Посмотрим на результат:

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

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

Я вставлю этот элемент в виде иконки плюса посередине в нижней части экрана.

<div class="box_1">
    <div class="col_box_1">
      <h1>Основной заголовок</h1>
      <p>Текст с первичным описанием</p>
      <a href="#" class="button1">кнопка</a>
    </div>
    <div class="col_box_1">
      <img src="image/1278ab5be10755a58d45bbe641e350fd.png" alt="">
    </div> 
  <!--Иконка плюсика-->
    <img id="center_img" src="image/add_plus_interface_icon_181584.png" alt="" width="80" height="80">
  </div>

И задаем иконке стили:

#center_img {
  display: block;
  margin: 0 auto;
  transition: 0.5s;
}
#center_img:hover {
  transition: 0.5s;
  width: 70px;
  height: 70px;
}

Тут в принципе всё должно быть ясно, вставляем иконку с помощью тега img, задаем ей размеры, в стилях указываем её расположение и эффекты при наведение :hover.

Результат:

Вот такой симпатичный плюс получился.

На этом статья заканчивается. В следующей статье я сделаю второй экран сайта и реализую переход между экранами.

Спасибо за внимание, до скорого!

Tags:
верстка сайта, jquery, веб-дизайн, необычные решения

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.