Challenge #1: Create a 12-card grid that moves from 4 cards, to 3 cards, to 2 cards, to one card wide

Requirements

  1. Center content on page using container class for main element.
  2. Create a minimum of twelve cards to use for your layout exploration.
  3. Organize your content into logical rows.
  4. Use only Bootstrap defaults to achieve your goals.
  5. Document your process as you go using the structure illustrated on this page.
  6. When you break something, try to fix it. If it is broken beyond repair, save the file as a fail and move on to a fresh attempt.

The Attempt

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Process

  1. I went to the Bootstrap site to acquire the HTML for a basic card layout:
    • Fail: The image doesn't show up!
    • The image src attribute is currently empty, and I have yet to link to a real image from my hosting space.
    • I am using a path from Lorem Picsum for now. That worked!
  2. I copy and pasted the code for my working card eleven more times.
    • I used a different number for each random image so that a different image appears for each card, and used HTML comments to mark where each card begins and ends. This helps me to tell each card apart.
    • Fail: The cards are all in a single column. I need three rows of four on large screens.
    • I remember that with Skeleton, I needed to use some of its CSS to communicate to the browser how many columns of the grid each element should span. I have not done that here, so I'm going to try that next.
    • I'm going to try to use Grid Cards to lay out all my cards.
    • Success! They are lining up in different layouts depending on screen size, but they are left-aligned and too narrow, and there is now space between the rows, so the page looks a bit cluttered. I am now ready to move onto challenge #2.

Every page's content should end with a call-to-action that tells the user what to do next. A good call-to-action will have link the user can click to go to the next resource we want them to see.