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 & CSS APIsCommon 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>` 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 pushWe’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.
