General Layout Question

Thank you for the kind words, Chris. I am glad you found the feedback useful.

It’s really cool that you are learning design/development! I am looking forward to seeing how your project turns out. Please reach out if you get stuck on something down the line—I’d be happy to take a look. Being exposed to new problems and solving them together is a great source of learning.


HTML & CSS basics, semantics are the best place to start?

Level 0
In my understanding, the “source of truth” of any website is its content: text and media. So this is the ultimate starting point.

Level 1
The content is then “wrapped” in HTML to give it meaning. This gives data some structure which allows browsers, screen readers, and search engines to interpret it. It’s kind of like an architectural blueprint that explains what is what and how it fits into the surrounding context (for example, parent-child-sibling relationships between elements allow us to understand the hierarchy of the content).

Level 2
CSS is used to lay out and style the underlying HTML elements. This is where good design comes into play. But CSS does not have semantic meaning, and it does not alter the original HTML structure! You could write your entire article inside of an <h1> element and you could style this <h1> to look like paragraph text, but at HTML level it would still be an <h1>. As you can imagine, this would be really wrong from an architectural standpoint, even though visually your text would look like a normal paragraph. It’s kind of like using a door to make a window.

Level 3
I guess level 3 would be all the “icing on the cake” stuff like animations and interactions.


Here is a link to a post by @vincent where he talks extensively about how he starts his design process by properly structuring all his content and data. This makes a lot of sense to me since it helps avoid the trap of creating a bunch of disjointed and partially-styled parts of a website only to realize that your content would benefit from being completely reorganized.

Reorganizing content and modifying/reassigning classes is a huge amount of work and usually it’s just easier to start over. That’s why the process is super important. (In reality, the temptation to build something quickly or to make something pretty with CSS right away is so strong that it requires real discipline to stay on track! :laughing:)

Take care,
Artem

1 Like