Codebase Docs

Welcome! If you are a new engineer, this guide will help you understand the code. We use simple words here. This is an A1-level guide.

1. What is this website?

This is a static website. That means it is very simple. We do not use big, heavy tools. We use three basic things:

HTML (The Bones)

HTML is the structure. It puts words and images on the screen. All our pages end in .html.

CSS (The Paint)

CSS is the style. It gives the website colors and makes it look good. We put our CSS inside the HTML file, at the very top, inside the <style> tags.

JavaScript (The Muscles)

JavaScript makes things move. For example, it helps change the language from English to Spanish. We put our JavaScript at the very bottom of the HTML file, inside the <script> tags.

2. The Folders (Where is the code?)

Here is a map of the folders. Look at the names to know what they do.

website/
├── index.html (The main home page. Start here!)
├── privacy.html (The privacy rules)
├── terms.html (The terms of use)
├── sources.html (Links to our research)
├── sitemap.xml (A map for Google to find us)
├── robots.txt (Rules for search engine robots)
└── articles/ (A folder holding all our extra posts)

3. How the Code Works (Deep Dive)

Let us look closer at how the code is written in index.html.

Colors and Variables

At the top of the file, you will see something like this:

:root {
  --ink: #0B0A1B;
  --green: #00E564;
}

These are variables. They are like buckets holding colors. If you want to change the green color everywhere, you only change it here once!

Languages

We have buttons to change the language (EN, DE, ES, FR). In the HTML, you will see:

<h1 data-i18n="stat_headline">Hello</h1>

The data-i18n tag tells the JavaScript to translate this text when a user clicks a language button.

Search Engine Optimization (SEO)

At the very top of index.html, inside the <head>, we have special tags. These tell Google what our site is about. For example:

<title>Hacked Before Breakfast</title>
<meta name="description" content="...">

Never delete these! They are very important for finding our website on the internet.

4. How to make changes

Do you want to change the text? Follow these steps:

Step 1: Open the file in your code editor. If you want to change the home page, open index.html.

Step 2: Use "Find" (Ctrl+F or Cmd+F) to search for the words you want to change.

Step 3: Type the new words. Be careful not to delete the < and > brackets!

Step 4: Save the file. Open index.html in your web browser (like Chrome or Safari) to see your changes.

5. How to add a new article

Step 1: Go to the articles/ folder.

Step 2: Copy an old article file and give it a new name.

Step 3: Open the new file and change the text inside.

Step 4: Go to index.html and add a link pointing to your new article.

Tip: Always test your changes in the browser before you finish. Ask a senior engineer if you are stuck. We are happy to help!