Better way to write code and style?

This is my first time posting to the forums and it is a very general question.

When you are writing your code do you write your css at the same time as the html or do you write all of your html first then go back and write the css to style and organize it? I wind up getting myself confused as to what elements, classes, and id’s I need to reference in order to style the correct piece of the puzzle.

Thank you for the advice

G

Hello @gcuoco37. I generally tend to write my HTML first, then CSS. For me, it helps when I can see my website’s skeleton (i.e. the HTML), and from there I can think ‘Yes, that should be orange. It is here, so i’ll put a class/id here.’ The best way, i find, is to plan what you want it to look like on paper, and then write the HTML, then the CSS. It also helps me keep my train of thought. If I write bits of HTML and CSS over a few days, I’ll end up forgetting my motive of the first day.
I hope this helps!

Definitely helpful! Thank you.

I wanted to write it out on paper first just to visualize it as well.

Thanks for the help.

2 Likes

Mocking up the design beforehand is a good way of getting to grips with what you want where, and how you want things to look. That would, in turn, influence the CSS rulesets you need to write.

There’s absolutely nothing wrong with doing this on paper, by hand. However, there are numerous tools for creating wireframes and prototyping designs available these days. You could easily mock up the design for your site using such a tool, before setting about creating the actual site in code. :slight_smile:

After a mock up, as I’m building a site, I will do HTML and CSS for each section at the same time. It’s just easier for me to keep track of each section of the website plus it gives me some inspiration to see parts of the site realized.

As I’m building each section, I also make sure to add comments for the HTML and CSS sections. I do this while building rather than after building it.

<!-- Banner -->
some HTML
/* Banner */
some CSS for that HTML
1 Like