awesome_scrimba.md

Notes For The Scrimba HTML&CSS Challenge "Creating Columns"

The Frontend Developer Career Path, module 2, challenge 9

Rationale

As for me, structuring elements on a page is the most difficult part of learning frontend.
Kevin Powell gives a wonderful explanation in the video tutorial how to split page content into columns.
To better understand this topic for myself I created this gist. It is a kind of article based on Kevin video.
Hope it will be useful.

Schema — initial page structure

<main>
  <div class='container'>

    <section class='main-content'>
      h2
      img
      p
      ul
      p
    </section>

    <aside class='sidebar'>
      h2
      ol
      p
    </aside>

  </div>
</main>

Task 1 — split content into two columns

At the moment section and aside blocks are located under each other. We want to locate them at the same level — first on the right, second on the left.

So we wrap these blocks into a block div class='columns'.

  <div class='container'>
    <div class='columns'>
      <section class='main-content'>
        ...
      </section>

      <aside class='sidebar'>
        ...
      </aside>
    </div>
  </div>

Then we describe css-class columns with the property display: flex.

.columns {
  display: flex;
}

Since the div class=columns block has 2 direct descendants (section and aside), this block due to flex will be separated into two parts vertically.

Task 2 — continue splitting

The current task — divide into 2 columns the section block:

• the first column for image (img tag);
• the second column for text (p, ul, p tags);
• the header (h2) has to be out of columns.

Let's wrap image and text into the <div class=columns> block:

    <section class='main-content'>
      h2
      <div class='columns'>
        img
        p
        ul
        p
      </div>
    </section>

We got an issue — 4 columns instead 2. The reason is that every tag (img, p, ul, p) is the direct descendant of <div class='content'> block and forms a separate column.

The solution — put tags p, ul, p into the same box. Then div class='content'> will have 2 direct descendants — img and the box with text content. We will call this box div class='col-right'. The class col-right does not exist right now, but it is not a big deal. The main thing is that three tags (p, ul, p) are placed in one column.

    <section class='main-content'>
      h2
      <div class='columns'>
        img
        <div class='col-right'>
          p
          ul
          p
        </div>
      </div>
    </section>

Task 3 — fix column proportions

At the moment the right part of the page is too narrow.

Back to html-markup

  <div class='container'>
    <div class='columns'>
      <section class='main-content'>
        ...
      </section>

      <aside class='sidebar'>
        ...
      </aside>
    </div>
  </div>

The left part has class main-content, the right part — sidebar.

Let's set the width of these parts on the following proportions:

• 65% — main-content
• 30% — sidebar

Add these values to the width property:

.main-content {
    width: 65%;
}

.sidebar {
    width: 30%;
}

Task 4 — add some empty space

We do not have enough space between the left and the right part. To fix it let's add to the left part the property margin-right: 5%:

.main-content {
    margin-right: 5%;
    width: 65%;
}

There is a one more place, where we need an empty space. We need such space between the text and the image in the left part of our page.

The property margin helps us again. We add it to the col-right class (in this class we set style for the text column).
Since the image is located to the left of the text, we use the property margin-left.

.col-right {
    margin-left: 25px;
}

And here is the whole view!