Homepage

Building out the homepage was a bit of a process. I tried a bunch of different things before finally landing on using a grid. This included inline display flex boxes and tables. Ultimately neither of those options looked exactly what I had in mind. I struggled to get rid of gaps between boxes or the borders in the right places.

Using the grid html tag itself had a bit of a learning curve. Much of the information about examples online were conflicting each other or outdated in the way they defined columns and rows and their spans. Boxes were scattered all over the screen, never in the places I wanted them to. be. After playing around for a bit, I was able to get the boxes right, but not the black borders as I had originally wanted. At the suggestion of Laurel, I nixed the black borders all together and implemented a grid-gap that was the color of the background instead. I've grown to like the look of the plain border more, but it was definitely a compromise to my original vision.

Profiles

Getting the audios to work on the profiles page was a struggle. To the point where I almost abandoned the idea completely and just typed out what each of them said. Even once I had gotten the .m4a files converted into .mp3, I had to do a lot of trial and error with the controls and other settings to get them to finally work. I am glad that it worked out as I. think the audios really add to the personality pics on the page and give a greater understanding of who everyone is and what their vibes are.

Rooms

Constructing the rooms pages wasn't too much of a hassle as the design was intentionally pretty basic. The biggest hurdle was aligning all the content in the center and arranging the arrows. Laurel suggested that I use a table to help align the picture and the arrows appropriately on all the pages and that worked out great (much better than the assortment of inline display flex boxes I had).

For these pages, I had to decide whether I liked the text to be black, which would make it more readable, or a darker version of the background color. While the black was easier, it just seemed a bit harsh on the eyes and didn't really fit the aesthetic anymore once I had abandoned the black border around the floor plan map. I briefly tried out using an off white-text instead to match the new border color, but it wasn't really readable. So I landed on using a slightly darker version of the color of each box. I think it's just much more in tune with the vibe of the site.