A collection of projects to improve JavaScript skills and practice HTML and CSS concepts. Each project covers different web development aspects, from basic to advanced.
No build step required. Open any project's index.html directly in a browser, or use a local server (e.g. VS Code Live Server).
Each project lives in its own folder:
project-name/
├── index.html
├── style.css
└── index.js
| # | Project |
|---|---|
| 01 | Tinder Swipe |
| 02 | Arkanoid Game |
| 03 | Monkeytype Clone |
| 04 | Geo IP |
Each project is developed on its own branch and merged into main via pull request. Direct commits to main are not allowed.
git checkout -b feat/04-project-name
# ... develop the project ...
git push origin feat/04-project-name
# open a PR → merge into main-
Create the folder following the naming convention
NN-Project-Name/withindex.html,style.cssandindex.js. -
Add the site nav inside
<body>and linkshared.cssin<head>:
<link rel="stylesheet" href="../shared.css" /><nav class="site-nav">
<a class="site-nav__logo" href="../">
<span class="site-nav__number">100</span>
<span class="site-nav__badge">JS</span>
<span class="site-nav__label">days</span>
</a>
<a class="site-nav__back" href="../">← Back</a>
</nav>-
Generate the thumbnail:
- Capture the project with shots.so — 16:9, choose a background color
- Optimize with squoosh.app → WebP, 400×225px, uncheck "Maintain aspect ratio"
- Save as
assets/thumbnails/NN.webp
-
Register the project in
projects.js:
{
id: 'NN',
title: 'Project Name',
description: 'Short description.',
tags: ['Tag1', 'Tag2'],
thumbnail: './assets/thumbnails/NN.webp',
demo: './NN-Project-Name/',
code: 'https://github.com/javierOrtega95/javascript-100-days/tree/main/NN-Project-Name',
}