Home Page
Mix.install([
{:jason, "~> 1.4"},
{:kino, "~> 0.8.0", override: true},
{:youtube, github: "brooklinjazz/youtube"},
{:hidden_cell, github: "brooklinjazz/hidden_cell"}
])Navigation
Home Page
You’re going to build the home page of an HTML portfolio site similar to the following.
Create a home.html file in your projects folder.
Try to match the document above as best you can, however you may exercise your creativity and do not have to follow the example so long as you have:
-
navigation with a link to your github. Ideally use a
tag for navigation. * a heading saying your name. * a paragraph with bold and italic text that describes who you are and what you do. * An image (it can be any image if you would prefer to not use a personal photo) * an ordered or unordered list with 3+ list items. ## (Bonus) Skills Table Include a table of your skills with an associated score. For example:  ### (Bonus) Icons Include icons in your project. For example, you can include [Lineicons](https://lineicons.com/docs/) by placing the following inside of thesection inhome.html.
Then you could the use the tag and Lineicons icons to create a GitHub icon instead of text.
Mark As Completed
file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")
save_name =
case Path.basename(__DIR__) do
"reading" -> "home_page_reading"
"exercises" -> "home_page_exercise"
end
progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()
default = Map.get(existing_progress, save_name, false)
form =
Kino.Control.form(
[
completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
],
report_changes: true
)
Task.async(fn ->
for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
File.write!(
progress_path,
Jason.encode!(Map.put(existing_progress, save_name, completed), pretty: true)
)
end
end)
formCommit Your Progress
Run the following in your command line from the curriculum folder to track and save your progress in a Git commit.
Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.
$ git checkout -b home-page-exercise
$ git add .
$ git commit -m "finish home page exercise"
$ git push origin home-page-exercise
Create a pull request from your home-page-exercise branch to your solutions branch.
Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.
DockYard Academy Students Only:
Notify your teacher by including @BrooklinJazz in your PR description to get feedback.
You (or your teacher) may merge your PR into your solutions branch after review.
If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.
Up Next
| Previous | Next |
|---|---|
| Common Components | APIs |
