Technical Documentation Page for Divine Beasts

Code Feedback
1

I enjoyed this project a lot (as a complete newbie) as I finally figured out how to import fonts, and make a static side nav bar. I know it’s a little light, and the code blocking is meant for actual technical documentation, but for fun I wanted to write a bit about the Zelda: Breath of the Wild game I’ve been loving lately.

https://codepen.io/afminick/pen/pmRzGy

Any thoughts are appreciated, and if anyone knows how to get rid of the small white gap between the bottom of the main section and the bottom of the window I would greatly appreciate it.

Thank you in advance!

2

@afminick Nice job!
Here are some improvements you can make (opinion).

  • Have the menu stack on top of the main-doc in mobile view. You will need to create a media query.
  • The text color and the background color are too close in tone. I suggest increasing the contrast so it will be more readable.
  • The headers need padding because they are too close to the edges.
  • I believe that the text inside of the headers I think should be inside of h1 and h2 tags, not header tags.
  • Use this to get rid of the space at the bottom:
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

OR you can just set background color to dodger blue:

body {
  background-color: dodgerblue;
}
3

I’m a big Zelda franchise fan, so I had to check this out!

I’m still on training wheels- so take anything I say with a grain of salt.

The code looks good. Somewhere I thought I was advised to always stuck with lowercase letters when naming ID’s and Classes… but I can’t cite where I got that idea.

The color scheme was a little rough on my eyes, as was the font. I like that you imported a custom font, but it might be more readable if used only for headers and titles, and using a more mainstream font for blocks of text.

I’d love to see some images of these Divine Beasts!

Good job getting it completed! Keep on coding!

4

I have nothing to add to the technical side of your project.

I hit a creative Mind Block on this challenge. In frustration I ended up pulling out the troubleshooting guide for my car and re-writing it in the described format. I hated this challenge.:tired_face:

Seeing yours just made me very happy. :smiley:

Thank you for sharing.

5

Yea it’s a beautiful game, and so fun! I, too, was under the impression I shouldn’t use caps when making ids, but the test, and the example they gave both used caps and underscores, so I changed it to match.

You’re not alone on the color scheme. I’ll play around with it a bit more. I’m trying to stay true to the colors of the game, but maybe light-blue and yellow aren’t the way to go =)

Cheers!

6

Thank you for the work and suggestions in your comment. I’ll put the menu on the top for mobile, and change the headers to h1 and h2 tags, as well as put in some padding.

Happy coding!