Formatting
I don’t think I really need to say how important it is to organize and format your code. Imagine if you never organized again, you would have almost no idea where to find anything and it would be completely random if you actually found the thing you wanted to find. Therefore it’s extremely important to organize your coding. Another thing I can cover is naming your files and coding as well, for it’s also extremely important to name your files as it links into formatting; being easier to find information in your coding. I will give an example of formatted code against code that is jumbled around.
It isn’t that much of a difference due to code being a mockup and not very big, but in a real project stuff like this adds up and makes the code nearly unreadable. Trust me with this as sometimes projects can get so convoluted that you just lose interest in working on them because of how cluttered the coding is. This applies for every single coding language as well, if you don’t organize anything you will not have a fun time trying to understand anything ESPECIALLY if you leave the project and come back.
How to use Id’s
Ids and classes are an extremely important part of frontend development as they allow coding languages to communicate with each other for example CSS changing the way an html element looks. But what is an Id in coding? An Id is a tag applied to an element that gives it a unique property which allows it to be singled out and identified. This then singled out element can be altered by changing the content of the text, changing the way it looks, and so much more. Some tips and tricks for using Ids is to name the Id something similar to the actual thing you want to change, for example if there’s a button that changes the color of something you want to change, then name the Id “colorButton” It’s also a good practice in general that if an Id or a variable has two words just link them together but capitalize every word after the 1st one.
How to use classes
Similar to Ids, classes instead categorize multiple elements. It’s a little harder to code with classes though, but it helps save on resources and it helps with organizing since you aren’t allowed to have multiple elements with the same Id tag. I don’t personally have a lot of advice for classes as I don’t really use them that much, but I hope the information I do have can help you out a little bit.
How to use functions
These are also extremely useful and very important for formatting. Functions let you repeat lines of code. You can write a single function or you can rewrite the same code multiple times. From personal experience functions are very very very VERY useful. I can write a single function and use that same function to turn multiple lines of code into a single line of code that covers so many bases. Functions can also be cluttered however, so make sure you name your functions correctly based on what they do and make sure you actually indent your lines of code in the function to display hierarchy in the function. If a function doesn’t work for whatever reason a good tip is to put a console.log in between each line of code inside the function to find out which line is causing the error. Overall functions are a very important part of coding and you are severely missing out if you are not using them.
