<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Верстка портфолио на flexbox (часть 1)

Верстка портфолио на flexbox (часть 1)

Можно бесконечно долго изучать HTML теги и CSS свойства, но эти знания сами по себе ничего не дают. Нужно брать PSD макет и начинать верстать, закрепляя знания на практике.

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

Фрагмент макета - секция портфолио:

Верстка портфолио на flexbox.

Анализ макета

Все цвета, размеры, названия шрифтов, отступы, берутся из макета. Мы видим, что макет состоит из двух секций:

  • секция с описанием
  • секция с фотографиями

У макета есть контейнер с шириной 1200 пикселей между крайними направляющими, это значит, что ширина первой секции будет жестко ограничена этим размером, независимо от размера экрана. На больших экранах (например 1900 пикселей), по краям браузера останется пустое пространство, по 350 пикселей, с обеих сторон.

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

Таким образом, анализируя макет, мы намечаем структуру разметки и делаем вывод, что эти секции будут находиться в разных контейнерах.

И все таки у обеих секций есть общие стили – это верхний и нижний отступ. Создадим для них общий контейнер section и пропишем в нем отступы.

<section class="section"></section>

/* секция портфолио */
.section {
  padding: 80px 0;/* отступы сверху и снизу */
}

У всей секции имеются общие стили.

/* общие свойства для всей страницы */
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
/* обнуление полей и отступов для всех */
* {
  margin: 0;
  padding: 0;
}

Секция с описанием

HTML код

<div class="container">
  <div class="section_header">
    <h3>What we do</h3>
    <h2>some of our work</h2>
    <div class="section_text">
      <p>text text<p>
    </div>
  </div>
</div>

CSS код

Обратите внимание, что у класса container, помимо максимальной ширины, задана ещё ширина в процентах. Это нужно для адаптивности под разные разрешения.

/* контейнер для первой секции */
.container {
  width: 100%;/* ширина относительно родителя */
  max-width: 1200px; /* ограничение максимальной ширины */
  margin: 0 auto;/* выравнивание по центру */
}
/* шапка секции */
.section_header {
  width: 100%; /* ширина относительно родителя */
  max-width: 950px;/* ограничение максимальной ширины */
  margin: 0 auto 50px;/* отступы */
  text-align: center; /* выравнивание по центру */
}
/* подзаголовок */
h3 {
  font-family: 'Kaushan Script', cursive;
  font-size: 24px;
  color: #333;
}
/* заголовок */
h2 {
  font-size: 30px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
}
/* черта под заголовком */
h2:after {
  content: "";
  display: block;
  width: 60px;/* длина черты */
  height: 3px;/* толщина черты */
  margin: 30px auto; /* отступы относительно родителя */
  background-color: #f38181;/* цвет черты */
}
/* параграф с текстом */
.section_text {
  font-size: 15px;
  color: #999;
  font-family: 'Roboto', sans-serif;
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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