Skip to content

Instantly share code, notes, and snippets.

@acidtone

acidtone/README.md

Last active August 23, 2023 06:26
Show Gist options
  • Save acidtone/bb688eb6e16c861422b865bf0e9abf4a to your computer and use it in GitHub Desktop.
Save acidtone/bb688eb6e16c861422b865bf0e9abf4a to your computer and use it in GitHub Desktop.
Download ZIP
Challenges: Hello Vanilla
Raw
README.md

Hello Vanilla Challenges

Challenges by spiciness

Mild

  • Move css, javascript and image files to dedicated directories.
  • Move "count is" text from counter.js to index.html.
  • Replace <img> logos with inline svg.
  • Refactor colour hex codes to hsl().
  • Change the dark mode setting of the page by changing your OS system preference.
  • Move the <script> element to the <head> of index.html
  • Make this a page about your favourite animal!

Medium

  • Deploy this project to the web using GH Pages.
  • Increase the contrast of the html and css wordmarks when in dark mode.
  • Add a Dark Mode toggle to the page that overrides the user's system preference.
  • Add a chart to this page using ChartJS.
  • Make this a multi-page website by adding another page!
  • DRY out style.css using CSS Variables.
  • Display the current time using a date library.

Spicy

  • Convert counter.js to Typescript without breaking the page.
  • Create a new colour scheme for both light and dark modes. Add it as another option,selectable by drop down menu.

Ghost Pepper

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment