How do I make my code look better?

Question

I do web development things and when I’m in a team I struggle to make my code look clean and accessible for other people to look at, any ideas?

https://code.sololearn.com/W8M2nws40NFx/?ref=app

Answer 1

Your code is not terrible, but a few suggestions.
In terms of formatting, use an IDE to edit your code, these typically have autoformatter utilities that adjust the indentation of nested elements, and linters that can highlight syntax problems, for example if you forget a closing tag. Browsers are usually quite tolerant with these, but readability is improved if you use correct syntax.
You can also find plenty of free utilities online to autoformat your code, like:
https://beautifytools.com/html-beautifier.php

Using a lot of nested DIVs, will make your html structure difficult to understand, no matter how you format it. Prefer semantic containers like article, section, nav, footer, and even p for paragraph. These are also better for SEO.

Put your scripts and styles in separate file.
Avoid direct formatting in html, such as specifying width of the image, you should keep these in CSS.

Answer 2

Another suggestion, putting sensitive information like passwords or API keys, into the frontend component of the code, is VERY bad. These can be harvested by anyone, even by malicious scripts, and you can get into trouble if someone else tries to use them (and you potentially get a high bill from a cloud provider). These credentials must strictly stay in the backend, hidden from clients.

Answer 3

But most importantly, coding often involves using ideas from other people, and we should give credit to the original authors
https://code.sololearn.com/WKXTYu5M1v53/?ref=app

If you copy someone else's code, even if you modify it, please mention your sources. Sololearn automatically puts the original creator in code comments. Removing or overwriting it is considered plagiarism.

Please read the guidelines of Bunny to understand why this is important.
https://code.sololearn.com/WjKS36hKsCoE/?ref=app

Answer 4

One suggestion I would make is that you can make it more stylish, by adding style sheets on them.