4
8 Comments

Best practice for web dev?

Hey everybody, I am trying to teach myself web dev (HTML, CSS & Javascript). I am currently working through the Odin Project and Free Code Camp. I think I understand the concepts while going through the courses, the problem is when I try to complete a project on my own.

In most tutorials, they have the base code already written and then they just add a few lines of code that's relevant to the lesson. But when I get to a project I am left staring at a blank text editor.

So my question, what is the best practice for the order you start to create a web page. Do you write out all the HTML elements, (Div containers, Div items etc) that you can and then go to CSS and style everything. Or is it done in sections, e.g. Write the HTML header section, style the header section, write the HTML main content, style the main content etc?

Any advice would be greatly appreciated.

  1. 3

    I can't speak to "best practices" because I too am self-taught. What I generally do, and did with a recent UI update, is I create an HTML page with every regular element I'll likely use in my code (inputs, buttons, divs, paragraphs, etc) and style them all to confirm they all work well together. Then I build my project using that template. I like to do it that way because then later on if I need to make a change to the CSS I can go back to the master template and confirm there are no unintended side effects.

    1. 1

      Interesting. Thanks for the suggestion!

  2. 2

    How to eat an elephant?
    Piece by piece...
    Yes, I would always start from the html tag and then continuously add more and more tags and styles. But the exact order is slightly different and depends on the project itself.
    But it's a good practice to see the whole picture first than separate parts. Therefore, my order is usually something like that:

    1. Basic tags
    2. Basic style to see the pieces placements
    3. Add basic color
    4. Add fonts
    5. Add more precise styles, colors, etc.
    1. 1

      Thanks Zencentric! I appreciate the insight, sounds like a logical approach.

  3. 3

    This comment was deleted 2 years ago.

    1. 1

      Thank you Jtfinlay!

      This is super helpful and I will try and use this method for my next FreeCodeCamp project. Don't worry, I haven't even touched any frameworks yet. Trying to lock in the basics first.

      Can you link something explaining how to style with browser tools? I'm not familiar with that.

      1. 3

        I've also been doing web development professionally and have a similar workflow to Jtfinlay's. I start off with the major structure of a page, and then flesh out individual parts. One thing that can help with that initial 'blank canvas' problem is to do a quick sketch of what you want your page to look like and how you want it to function before you get started. Even paper and pencil would do.

        1. 1

          Thanks, I'll try and sketch out the next one!

      2. 2

        This comment was deleted 2 years ago.

        1. 1

          Gotcha! I'll check it out 👍

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments