Feedback for Technical Documentation Page

Code Feedback
1

Hello everyone,
I just finished building the “Technical Documentation Page” project and would love to get your feedback.

Note: Since I had to add at least five code elements to officially end this project, I nested them between my list elements - even though I would not have included them otherwise… (Quote from objective:“The .main-section elements should contain at least five code elements total (not each)”)

Thank you in advance and have a nice sunday : )

1 Like
2

Hey there,
You’ve done a great job. Well done! Just a couple of things I suggest. First you can try adding the title of each Harry potter book in the navbar, so when a user clicks one of the links, they know which book they’re going to. Right now it’s all “Harry Potter”. Doing that will allow you to rename the title in each of your header elements as well and you won’t need a separate p element to name the title of each book.

And another thing I suggest is try to add a padding (specially top and bottom) to your main-section elements so that there is a little space between each section. This will help the reader to sort of not get disturbed by all the text and titles coming at the top of each other. At least there could be a little space between each book’s section.

I can’t check the mobile view right now so I can’t say anything about that.
Overall, your code looks great and It shows how much effort you’ve put into it.
Great job and good luck with your next projects!

1 Like
3

Thank you for your constructive critisism. I actually made the changes you adviced (and had a bit more fun, playing around with the p elements on the way): Technical Documentation Page #2

I do have two problems with the new version though, when running the test on the freecodecamp-website the following points are not getting validated:

  1. Each .main-section should have an id that matches the text of its first child, having any spaces in the child’s text replaced with underscores (_ ) for the id’s.

  2. Each .nav-link should have text that corresponds to the header text of its related section (e.g. if you have a “Hello world” section/header, your #navbar should have a .nav-link which has the text “Hello world”).

and I am honestly not sure why. I have tried different versions for the href and id elements (e.g. “sorcerers stone”), but nothing gets validated. If you have any idea, why it does not work, it would be a great help : )

4

Hi again!
It looks a little better now. Yes for the errors, I would love to help you out.
Error 8: The id of .main-section elements should be the same as the text of their first child ( in this case the header element). It has to be the same text. But if you take a look at your first .main-section, it has id="harry_potter_and_the_sorcerer's_stone" but the text inside the header element is Harry Potter and the Sorcerer's Stone (1997). You can notice the difference right? The capital letters and also the year is missing in the id and that’s for all of your .main section elements. So you have to make sure both are the same, for all of your .main-section elements. Also, since you have numbers included in your header elements, don’t forget to add them in the id as well with the correct spacing.

And Error 9 is probably the same case, and you just have to make sure your .nav-link elements have the exact same text as the header they are related to, including the year and numbers and capital letters.

Take note that when you try changing these ids, you should update the href attribute of your .nav-links so they link to the correct part of the page.

Since you’ve done a little playing with your elements and made your page look better, allow me to make it more fun for you with extra suggestions :grinning:

  1. I noticed your .text-block element has a background-color, which is good. But what if you also try to give the element a little padding? See if it looks good with or without it. Because right now, it looks like the block is filled with text hitting the edge. But if you give a little padding (at least 10px), it might make it better.
  2. This one isn’t necessary but what if you don’t add the numbering on each of your titles? If you’re numbering them to show the order of the book, then it’s already obvious by the year they were published right? Or the fact that you put the first book at the top and then the second book of the series… I think you don’t need to number them. Try to remove them and see if it looks better that way. Again, it’s just a suggestion and my opinion only, other than that, it’s your project :slightly_smiling_face:

One last point, have you checked the page on smaller screen sizes? Do the elements not overflow? Or are you gonna work on that later?

Good luck with solving the errors and again, wonderful job! Keep it up!

1 Like