html validator : https://validator.w3.org/nu

---

start it with a server, like : alive-server

• https://www.npmjs.com/package/alive-server
• install : npm install -g alive-server

---

difficulties :

• accessibility with ascii art titles
  • I finally decided to go with a structure like this :

    <h1 aria-label="hugo lamy">
    	<span aria-hidden="true" class="pre">
    		hugo (ascii)
    	</span>
    	<span aria-hidden="true" class="pre">
    		lamy (ascii)
    	</span>
    </h1>
    

• links accessibility
• accessibility gone wild
• don't use title attribute
• I thought title text improved accessibility. I was wrong.
• Things I learned by pretending to be blind for a week
• create the full screen hero section with the navbar under the title

---

projects :

• [/] ljdp
• tchat transcendance
  • setup docker without sudo on server
  • remove authentification from project
• cube3d
• minishell

---

direction | width | child | child | child | | position | main axis | second axis ................................................................ horizontal | content | left |-pack |-fit vertical |-parent | right | grow | stretch | | top | space | | | bottom | spread | | |-center | |

.<direction>-<width>-<position-[position]>-<main-axis>-<second-axis>

position : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . left-top . . top . . right-top . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . left . .-center . . right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . left-bottom . . bottom . . right-bottom. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

width : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . parent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

main axis : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . spread. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .-pack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . grow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

second axis : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .-fit . . . . . .stretch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

---

v2 :

direction | width | child | child | child | | position | main axis | second axis ................................................................ horizontal | fit | left |-pack | begin vertical | large | right | grow | end | | top | space |-middle | | bottom | spread | equal | |-center | | stretch

.<direction>-<width>-<position-[position]>-<main-axis>-<second-axis>

position : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . left-top . . top . . right-top . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . left . .-center . . right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . left-bottom . . bottom . . right-bottom. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

main axis : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . space . . . . . . justify-content . . . . . . . . . . . . . . . . . : space-around . . . . . . . . . . . . . . . . . . . . . spread. . . . . . justify-content . . . . . . . . . . . . . . . . . : space-between . . . . . . . . . . . . . . . . . . . . .-pack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . grow . . . . . . child : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . grow: 1; . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

second axis : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . begin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .-middle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . equal . . . . . . . . . . . . . . . . . . . . . . . . . . . end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .stretch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .