Skip to content

Latest commit

 

History

History
147 lines (106 loc) · 4.96 KB

common_components.livemd

File metadata and controls

147 lines (106 loc) · 4.96 KB
Raw

Common Components

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

Navigation

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.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    </style>
  </head>
  <body>
    <!-- Component goes here -->
  </body>
</html>

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:

<img src="https://picsum.photos/200/100"></img>
Hint

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

You can create a horizontal bar using either the <hr></hr> 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