Question about web page design (built a tribute page)

Hello, I had a question. I can reasonably code in html and css where I can kind of make a page. However, I run into a wall very quickly when I try to build something from scratch. I cannot think of what I should start with and it alls feels jumbled in my head. Sometimes I also don’t really know what I want to make. I just know what the functionality should more or less be, but I can’t think of how it should look and what kind of html and css should be applied for it. Furthermore, I feel like I don’t understand certain capacities of html and css to know what I can’t and can’t do with my basic skillset. The problem is I do not even feel confident with my basic skillset, and I’d like to do minor projects such as the build a tribute page challenge to train those before I proceed to more difficult things.

Therefore I have a couple of questions:
First of all, where do I begin? What kind of thought process do you guys have? Do you first think of what html tags to use? Do you sketch a whole page on paper to know what it should look like before you begin coding?
Second, how do you know what fonts and spacing to use between elements? My main problem with css is that I can sort of make it look like something but I can’t make it look good. Therefore it doesn’t really even look like something. Also I don’t know when to use percentages for boxes, margins, padding, etc. When do you know when you should use margins? Do you just not use margins if you use grid and flexbox?

I should point out that this is what I’d do if I’m recreating an existing design/layout. I can hardly come up with my own. But when making one from scratch, making a sketch helps. Move all those thoughts out of your head and move them somewhere else, so you’re free to think of other things.

When I make a page, I start with writing the core HTML code (e.g., using semantic elements wherever appropriate). I wouldn’t worry yet about adding divs for layout purposes. That will come later.

When writing styles, I typically write the base styles first (like page fonts, base colors and the like). Then I’d start writing styles for each section.

As a rule of thumb, regular text has a line-height of 1.4 (or a bit higher than that). Then for larger text, use smaller line-height. Usually 1.2 for headings.

I use margins to increase the space between regular elements. if I have to, I add margins to flex/grid items. I don’t recall using padding for spacing between elements, since the element’s background also affects the padding area. The margin is always transparent.

You don’t have to know everything outright. You can first try to make something with what you know. If that doesn’t cut it, start looking up new functionality. Skim MDN/w3schools/whatever reference of your choice, just to see if you can find something that does what you want.

1 Like

For margins, you want to understand the CSS Box Model to understand when they’re appropriate for spacing elements, and when padding is better. The thing to remember is that like @kevcomedia said, margins are always transparent, i.e. they don’t take the background-color of their element.

The other important thing about margins is that they (usually) overlap between elements: a margin of, say, 2em on one element and a margin of 1em on an adacent element will result in a spacing of 2em between the two, not 3em. This is explained in more detail under its technical term of “margin collapsing”