HTML/CSS define ONE STATE, JavaScript defines the NEXT state.

Next time someone asks you about the HTML body, just show them this visual structure! I swear, for beginners, once they see this visual map, they’ll understand 90% of it. The remaining 10% is just syntax and a few techniques. I realized why HTML and CSS are not programming languages now! They're essentially like a made-up language that describes to the browser how a particular state should look. JavaScript determines the next state, which is why it's a programming language. Yesterday, I was pondering how HTML and CSS can define one state, but how do we present multiple states? Today, I think I have an answer: Markov chains! It's the Markov chain. Because a Markov chain assumes that the future state is only relevant to the current state and does not consider past states, it proves why JavaScript is a programming language. So, once HTML and CSS display one state, JavaScript uses this state as the current state to predict the next state. The next state could have many possibilities! For websites, it could be all the path possibilities with certain hidden possibilities. There you go, I'm now guessing JavaScript is a program that can figure out all the possible paths excluding those hidden due to restrictions. Now, for non-programming languages like HTML and CSS, the visual board shows sections, basically. Like elements, we can rearrange and recombine them; these are the possibilities. Each element must have a weighted percentage value. For different programs, the combinations differ, and the outcomes vary. That's why websites all look different because of different features and functions!

[BIG PAGE]

|

├───[HEADER]

|

├───[HERO BLOCK]

| ├───(Left Column: Text)

| └───(Right Column: Image)

|

├───[RECIPE CATEGORIES BLOCK]

| ├───[Card]

| ├───[Card]

| ├───[Card]

| └───[Card]

|

├───[POPULAR BLOCK]

| ├───[Card]

| ├───[Card]

| ├───[Card]

| └───[Card]

|

├───[NEWSLETTER BLOCK]

|

└───[FOOTER]

[BOX] - CSS

width → how wide

height → how tall

padding → inside spacing

margin → outside spacing

border → edge style

background → color

display → how boxes sit together (flex, grid, block)

position → exact placement

┌───────────────────────────────┐

│ margin │

│ ┌───────────────────────┐ │

│ │ border │ │

│ │ ┌───────────────┐ │ │

│ │ │ padding │ │ │

│ │ │ CONTENT │ │ │

│ │ │ │ │ │

│ │ └───────────────┘ │ │

│ └───────────────────────┘ │

└───────────────────────────────┘