How to Contribute

Since Frontend School is an open-source repository, anyone can freely contribute towards improving the site! There are two key ways in which you can contribute:

  1. Puzzle Writer: Add new JavaScript/HTML/CSS puzzles to the repo in order to grow the site's content.
  2. Gardener: This involves maintaining the repo. Tasks include reviewing/improving existing puzzles, ensuring tag names and reference links are consistent, suggesting ideas to improve the user experience of the site etc.
I openly welcome any contributions you may have!

For all contributions, please add a new Pull Request via GitHub.

Adding Puzzles

This site is powered by Jekyll and all puzzles are written in Markdown. Each puzzle contains the following common elements:

File Name

Each puzzle should be saved within the /_posts/ directory and have a file name using the following convention: YYYY-MM-DD-title.markdown

Meta Data

Every puzzle's Markdown file begins with a few meta fields. These should be populated as follows: 

---
layout: puzzle (this never changes)
title:  "Puzzle Title" (a short title for the puzzle)
date:   YYYY-MM-DD (the date of the puzzle - used to sort new puzzles on the homepage)
categories: [JavaScript] (an array of the languages this puzzle relates to. Choices are JavaScript, CSS, or HTML)
tags: [tag 1, tag 2] (an array of tags)
difficulty: Intermediate (an arbitrary rating of how difficult this puzzle is. Choices are Easy, Intermediate or Hard)
short_description: Write a function that does x. (a short description of what the puzzle's challenge is)
github_contributors: [dhruvbhatia] (an array of the usernames of GitHub contributors)
---


Sections

The Markdown file then contains the following sections:
  • Puzzle: A description of what the puzzle's challenge is.
  • Examples (if applicable): Examples with the expected OUTPUT, given an INPUT. This section can be omitted if the puzzle only has one right answer (e.g. puzzles that are theoretical rather than practical).
  • Solution: Contains the best-practice accepted solution to the puzzle. For programmatic puzzles, please include a How It Works section before your actual Code section which breaks down the key steps. Note: If your solution is formatted using JavaScript, the function will automatically be added to the current window so the user can experiment with it in their browser's console.
  • Alternative Solutions (if applicable): If there is more than one way to tackle the puzzle at hand, you can list additional solutions here.
  • Libraries (if applicable): If there are any open-source libraries that tackle this puzzle, feel free to list them here.
  • References (if applicable): Any other useful links pertaining to the puzzle.

Contributors

The contributors section is automatically added to the bottom of each puzzle. Be sure to include your GitHub username in the github_contributers meta property of the puzzle so that you receive the due credit!