Common Components

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.9", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Home Report An Issue HTML & CSSAPIs

Common Components

You’re going to use HTML and CSS to replicate some styled components.

Create an .html document or use CodePen to create these components.

Hoverable Outline Button

Replicate the following outlined button as closely as you can.

On hover, the button should change the background-color.

Rainbow Boxes

Create a series of rainbow colored boxes like the following.

Hint

Research padding, margin, background-color, and border and consider using nested elements.

Card Component

Components like the following are often called Card Components. Create a card component matching the following with an image, heading, subtitle, body, and bottom bar decoration.

You can use https://picsum.photos/200/100 to retrieve a fake image:

Hint

You can create a rounded border using the border-radius and border declarations.

You can create a horizontal bar using either the

---

element, or an empty div element.

Commit Your Progress

DockYard Academy now recommends you use the latest Release rather than forking or cloning our repository.

Run git status to ensure there are no undesirable changes. Then run the following in your command line from the curriculum folder to commit your progress.

$ git add .
$ git commit -m "finish Common Components exercise"
$ git push

We’re proud to offer our open-source curriculum free of charge for anyone to learn from at their own pace.

We also offer a paid course where you can learn from an instructor alongside a cohort of your peers. We will accept applications for the June-August 2023 cohort soon.

Navigation

Home Report An Issue HTML & CSSAPIs