Can anyone give me a review on my Technical Documentation page please, and also give me advice on where I can improve and how to improve. Thank you very much.
1 Like
Looks good @miriam098. But, some suggestions:
- Add
html { scroll-behavior: smooth; }to your CSS code and click on the nav links. Notice the cool smooth scrolling effect. - The text looks too much stuffed. Consider adding a little bit of line height and also add some top margin for headings.
- There is a lot of bottom margin for the header and footer, but no top margin:
- The heading ES6 JavaScript is more bigger than other headings
- Experiment with other fonts and colors!
- The code element looks a lot like text. Consider giving it a separate background color and let it stand out.
- This is how your project looks like in mobile:
- No need of adding
head,bodyandhtmltags in CodePen.
Anyway, great work and best wishes!
1 Like
Thank you so much for the great feedback @paulsonstech , I’m working on it as we speak. Question though, do you know how I can fix the space between the nav and main header, main doc & footer please?
1 Like
For that you need to reduce the margin-left for the header, footer and main.
I did a little bit of improving. Still working on the rest. 
1 Like
Your page looks good @miriam098. Some things to revisit;
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in HTML. (No need to include thebodytags). For anything you want to add to the<head>element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.- As an aside, the test script is JavaScript and should be placed right before the closing
bodytag.
- As an aside, the test script is JavaScript and should be placed right before the closing
- Run your HTML code through the W3C validator.
- There are HTML coding errors you should be aware of and address.
- You can ignore the warnings about section lacking heading.
- Do not use the
<br>element to force line breaks or spacing. That’s what CSS is for.