<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Флекс контейнер и элементы флекса (верстальщику)

Флекс контейнер и элементы флекса (верстальщику)

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

Почему так получается? Вы читаете учебные статьи по HTML/CSS, смотрите видео на ютуб, на тему верстки. С воодушевлением следите за тем, как ведущий канала, легко и быстро набирает код в sublime редакторе. Однако, когда дело доходит до верстки макета, в голове полный "фарш". Сложности, совсем не в описании цвета или размера шрифта у элементов. А в нужном позиционировании элементов, на странице. В верстке, появляется много лишних дивов, иначе все развалится.

Визуализация контейнера и элементов

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

Флекс контейнер и элементы флекса.

Сделайте HTML разметку, опираясь на схему.

<section class="expert">
    <div class="expert__icon"></div>
    <h2 class="expert__title">Расскажите о своём опыте</h2>
    <div class="expert__form-container">
        ...содержимое пока пропускаем..
    </div>
</section>

CSS стили

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

.expert {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

Последний элемент expert__form-container - контейнер и элемент одновременно.

Флекс контейнер и элементы флекса.

Делаем разметку, на месте многоточий, в коде выше.

<div class="expert__form-container">
    <div class="expert__form-wrap">
        ..пропускаем пока..
    </div>
    <div class="expert__form-wrap">
        ..пропускаем пока..
    </div>
    <div class="expert__form-wrap">
        ..пропускаем пока..
    </div>
</div>

CSS код

.expert__form-container {
    display: flex;
    justify-content: space-between;
}

Все флекс элементы expert__form-wrap - также являются и контейнерами.

Флекс контейнер и элементы флекса.

Вставляем HTML код, на месте многоточий, в предыдущем блоке.

<div class="expert__form-wrap">
    <form>
    <label class="expert__label">БЭМ/OOCSS
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">Styles/LESS/SASS         <input class="expert__checkbox" type="checkbox">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">Работаю с SVG
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    </form>
    </div>
<div class="expert__form-wrap">
    <form>
    <label class="expert__label">Верстаю семантично
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">ES2015/ES2016
        <input class="expert__checkbox" type="checkbox">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">Gulp/GRUNT
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    </form>
</div>
<div class="expert__form-wrap">
    <form>
    <label class="expert__label">Webpack
        <input class="expert__checkbox" type="checkbox">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">jQuery
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    <label class="expert__label">Использую Git
        <input class="expert__checkbox" type="checkbox" checked="checked">
        <span class="expert__checkmark"></span>
    </label>
    </form>
</div>

CSS код

Здесь, мы скрываем дефолтные чекбоксы и описываем новые, согласно макету. Есть хорошая статья по кастомным чекбоксам.

.expert__form-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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