Dumb beginner question!

Dumb beginner question!
0

#1

Maybe it’s not dumb, but I’m very new to all of this and am not sure what questions are okay to ask.

So, I’m doing my first website challenge for the front-end developer certification. Things are progressing the way I want them, but as I’m piecing things together, I’m looking at the code like …? Am I typing this correctly? Is there some magical way web developers are supposed to structure their code? I haven’t read anything about that so far, so… halp, please??


#2

There are somethings that might help you, or others, better understand your code, but as a beginner you’re first task is to just figure it out so it works.

You can use white space to your advantage - for example you can use indentations to more easily see how elements are nested within others. See these two examples:

<div>
<form>
<input type='text'>
<input type='submit'>
</form>
</div>

<div>
    <form>
        <input type='text'>
        <input type='submit'>
    </form>
</div>

You can see in the second example that it’s a bit easier to figure out that the form is in the div and the inputs are in the form.

Other helpful practices include using nice descriptive class names for your CSS to target. For a really specific CSS naming methodology, you might like to look up the BEM method. This helps you structure your code.

When you get to JavaScript, naming conventions and white space consistency are still important. You also want to aim for smaller, manageable chunks of code (modules). So you might have 6 files of fewer than 50 lines, with each file responsible for one thing, rather than one massive file that does all six things but spans a few hundred lines. The sizes of your codebases will increase as you attempt more complex things - so while a 300 line file might just be manageable, a 5 or 10k line file obviously is less so!

But as I said at the top - your first job is to just get something working!


#3

There are best practices and various competing methodologies for structuring code, but as a beginner writing simple apps/pages (say under 200 lines of code in total), you don’t need to worry too much about most of them. But some very general things:

JS

  • Each function should do one “thing”; if you have a function doing multiple things, try splitting it up into multiple functions
  • Give your functions and variables descriptive names
  • Keep your code DRY (Don’t Repeat Yourself)

HTML

With HTML, the main thing is to keep it semantic. Use elements for their meaning, not just for their appearance. However, this doesn’t matter so much with spans and divs, which are often used as hooks for styling.

CSS

Anything goes! CSS is always a huge mess, so just throw your hands up in the air and resign yourself to the fact that it’s terrible.

…just kidding. The main thing you want is to keep it DRY were possible (using a preprocessor like Sass helps), continually “prune” the rules for each selector based on which ones aren’t actually affecting the appearance, and aim for some semblance of overarching structure (ordering on the page based on first instance of a selector, or maybe general to specific).


#4

Sorry @lionel-rowe did spell it out (DRY) in the JS description.
Missed it.
-WWC