Learning to Code February 25, 2020

Best practice for web dev?

iStayGrizzly

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

    Hey iStayGrizzly!

    I've been doing web development professionally for close to 5 years now. I work in iterations. I usually start by creating a couple divs - one div for the top bar of the site, another for the main body, and then a footer. I'll throw a class on each, and add basic CSS to layout the way I would like (often with different background colors since it is nice to have that visual feedback).

    I often style using the browser web tools, it makes it easy to customize the styles and get immediate feedback. Once I like the style, I copy my styles to the .css file.

    After I have a basic layout, I can split my page into different tasks to complete. I can start by adding items to the header, and then split the the body into different sections (divs), begin adding text or images, and keep working on each piece individually.

    Once I have the layout and content how I like for most of the page, I'll often check mobile layout in the browser and run some accessibility tools.

    Javascript is often the last item I do. You can get a nice webpage rendered without touching JS at well.

    This path also describes how I work with frameworks such as React or Vue. Break things into large components, and then into smaller pieces. I highly recommend what you have started with however - HTML/CSS/JS are the important items to learn before any frameworks.

    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

        In your browser, you can open the developer tools and select the 'Elements' tab. If you look on the right (or bottom), you can see css styling for whatever item you have selected. You can see what styles your css files are applying, and directly set and modify styles yourself (though in-browser styling is reset when you refresh the page).

        Guides like this have more details: https://developers.google.com/web/tools/chrome-devtools/css/

        1. 1

          Gotcha! I'll check it out 👍

  2. 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!

  3. 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.