What design choices did you make and why?
The first design choice I made was using Gryffindor colors because it is one of the most prevalent houses in the series. The fonts came next, the header font is a whimsical, but also legible, display font. The body font is EB Garamond, which is the actual font they used in the Harry Potter books (which I thought was a fun way to tie in authenticity and it is familiar for fans.)
Finally, there are many instances in the series where someone is jotting something down on paper quickly. This is where my inspiration for the icons comes from. Finally, my most minor design choice, but possibly most effective is the use of gold as my accent color. The official harry potter website showcases a lot of gold, which is why I chose to include the color.
What was difficult to code? How did you solve it?
Since there were some resources provided for us such as "flexbox-tutorial" so I was able to understand the layout, and getting the initial structure down was easy, the hard part was the little tweaks I had to make to each individual section.
Along with the navigation bar and images. I solved these problems by using developer tools to check and un-check each elements styles, until I found the one that was causing the problem. A lot of the time, I had duplicate rules which caused my colors to not show how I intended, which was a struggle.
How did you adapt your design for mobile?
When adapting my design for mobile, the most difficult part was getting the images to behave properly and be responsive. I solved this by using flexbox and adjusting the size of the images with percentages instead of fixed pixel sizes. This allowed the images to scale better on different screen sizes.
Additionally, I would go back and forth between desktop and mobile to see how each change was effecting the mobile view. I also took out all of the icons for mobile to simplify the design.
What did you learn about Flexbox or CSS positioning?
I learned the importance of flexbox for responsive design. When I was doing the initial layout, nothing would “condense” on mobile, and everything was positioned using padding and margin values. After introducing the flexbox element, my design became flexible. It added distributed spacing, and overall helped with document flow.
I also learned how CSS and flexboxes rely on the parent container for how you position things, this realization was crucial for positioning my buttons.
What would you add or change with more time?
With more time I would figure out how to implement more color. I would figure out how to have the box-border cover the “scooped” edges. Minor tweaks like those, that stick out to me as the designer, I would refine.
I would also add more interactive elements like hover effects and maybe images/icons that move. Something I also wanted to include was like a disappearing icon, that would not be visible after clicking it. I feel like that would have been a good way to have more "magic" in reference to the topic.