Devlog #1: Starting the build + adding elements!

Heyy there! This took a little more time that it should’ve, cause I’m new to web development. So, I started working on a new project, which basically is a Harry Potter Reading Companion website! I am a HUGEEE Harry Potter fan (have read the books AND seen the movies multiple times each)!!! However, I often find myself scrolling on my phone when I could be reading one of the books. That’s why I decided to build something that makes reading more fun, with a really magical Hogwarts/Harry-Potter aesthetic.

First, I built the house selection page using HTML. It was pretty basic at first, having just a title, the four houses, their descriptions, and an OK button to confirm your choice. Then I started working on the CSS, adding the Harry Potter font, Cinzel font for the headings, house colors, gradients (made with the help of Claude), rounded cards and shadows. What really changed the whole aesthetic was adding an Hogwarts(-inspired) background I made with Nano Banana, which imho made everything come together and turned out so great!

After that, I started building the main website/home screen. First of all, I created a side menu with “Home”, “Books”, “Stats”, “Achievements” and “Settings”. I also worked on little details like the borders, hover effects, and a decorative divider, which took a bit of tweaking to get right. Finally, I started adding actual features, beginning with a reading timer using javascript. It has start, pause and reset controls, styled with the selected house’s colours.

I also wanted to add “Hedwig’s Theme” as background music, but I’m a little intimidated to do it because of copyright, so I’m trying to find other ways to include it, without getting sued. If anyone has any ideas, I’d really appreciate it.

There’s still a lot to do, including the actual reading features, stats and achievements, but I’m happy with how the design is coming together. That’s it for now, see you in the next devlog!