Building my first site from scratch certainly had its challenges. Many of them I was able to fix with the magic of Google and by looking at previous coding examples, but some of them I was not able to find a solution to.
One issue I encountered was spacing. As you can see in the image below, the vertical space between the top navigation and the page title should be bigger, but after playing around with padding and margins I was unable to shift down the title without also shifting down the top navigation.
I also encountered some issues with horizontal spacing and widths. As you can see in the image below, the black background behind the memory spans the same width as the text above it. My hope was for it to be wider, matching the width of the photos, but I was unable to find a solution.
Another issue I encountered was the floating of text over an image or a div. I did a lot of Googling on this one and was able to figure out how to center the text horizontally, but was unable to also center it vertically. When adding in a second line of text and a larger drop cap it became even harder. My solution was to imbed the text in the original image.
One final unsolved issue I encountered was the rendering of my site on mobile. It appears consistently across browsers, but on Android phones the text appears as sans serif rather than serif. My font family includes all serif fonts so I am unsure as to why this is.
For every issue I was unable to solve there were many more that I was able to find a solution to. One of them was including a large drop cap at the beginning of each chapter. I found this by using the inspect element feature on a website with similar styling. Another issue was displaying my to top and bottom navigation in a way that almost blends with the rest of the text on the site. I was able to figure this out from previous coding examples.
After a lot of trial and error I am happy with how my site turned out. It is far from perfect, but I think it is a good first shot at coding!