Technical Documentation Page - Python

Hello. Is it okay to copy from here https://guide.freecodecamp.org/python for my technical documentation page? I would like to hear your thoughts for my project: https://codepen.io/shaddao/full/BaNpKXz

Hello, shaddao.

Seeing as you have not simply copy-pasted the HTML, CSS, or JavaScript, I would say this is perfectly acceptable.

That being said, for any resource you take any sort of intellectual property from (even if it is as little as inspiration), it would be ethical for you to add that to your material. E.g.

Inspiration/Material has been taken from [src] on [date]

I like your take on the styling. Run it through the tests.

1 Like

Your page looks good @shaddao. Some things to revisit;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Some minor issues you should clean up.
  • Don’t use the <br> element to force line breaks. Nest multi-line <code> snippets in<pre> </pre> tags to preserve whitespace and line breaks.
    Or, you could also do code { white-space: pre; } in your CSS and skip the <pre> tag.
  • Revisit responsiveness. I start seeing a horizontal scrollbar as the screen width diminishes.
  • As mentioned, it’s always good practice to mention where you got your information from. Look at the sample page and it has a Reference section at the end with a link to where the info was garnered from.
1 Like

On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for ’ box.

Thanks for this. I wrote it in VS Code and just copy-pasted everything there on codepen. :sweat_smile:

Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.

I never knew about this. Thanks again :slight_smile: :smile:

Don’t use the <br> element to force line breaks. Nest multi-line <code> snippets in <pre> </pre> tags to preserve whitespace and line breaks.
Or, you could also do code { white-space: pre; } in your CSS and skip the <pre> tag.

I don’t understand why <br> tag shouldn’t be used. Please enlighten me :sweat_smile:

1 Like

Because, it’s bad practise to do so. Your code will look sloppy and it doesn’t help onto mobile responsiviness either.
Or Google say’s it best:

The main reason for not using < br > is that it’s not semantic. If you want two items in different visual blocks, you probably want them in different logical blocks. In most cases this means just using different elements , for example

Stuff

Other stuff

, and then using CSS to space the blocks out properly
1 Like

@shaddao,

I use Brackets. And when I copy/paste into codepen I just copy what’s in between the body tags.

About the W3C validator. Codepen has validators for HTML, CSS and JS but I’ve noticed recently that codepen’s HTML validator gives a lot of false positives and it misses some important code infractions so I prefer something that’s reliable.

Here’s a good read on when / why you’d use <br>

And it’s easier to use the pre tag and the code tag over adding all those breaks. Your code is simpler, it’s easier to read and easier to maintain.

1 Like