[feat, fix] positioning, font size, and flex-items link

content/blog/css-fundamentals/css_box_model.svg

@@ -1,14 +0,0 @@
-<svg width="332" height="304" viewBox="0 0 332 304" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0.5" y="0.5" width="331" height="303" fill="#FFC68B" />
-  <path d="M156.061 23H154.678V17.5625C154.678 17.1172 154.705 16.5723 154.76 15.9277H154.736C154.65 16.2949 154.574 16.5586 154.508 16.7188L152 23H151.039L148.525 16.7656C148.455 16.582 148.381 16.3027 148.303 15.9277H148.279C148.311 16.2637 148.326 16.8125 148.326 17.5742V23H147.037V14.5977H149L151.209 20.1934C151.377 20.623 151.486 20.9434 151.537 21.1543H151.566C151.711 20.7129 151.828 20.3848 151.918 20.1699L154.168 14.5977H156.061V23ZM162.588 23H161.27V22.0625H161.246C160.832 22.7812 160.225 23.1406 159.424 23.1406C158.834 23.1406 158.371 22.9805 158.035 22.6602C157.703 22.3398 157.537 21.916 157.537 21.3887C157.537 20.2559 158.189 19.5957 159.494 19.4082L161.275 19.1562C161.275 18.3008 160.869 17.873 160.057 17.873C159.342 17.873 158.697 18.1191 158.123 18.6113V17.4219C158.756 17.0469 159.486 16.8594 160.314 16.8594C161.83 16.8594 162.588 17.6055 162.588 19.0977V23ZM161.275 20.0527L160.016 20.2285C159.625 20.2793 159.33 20.375 159.131 20.5156C158.936 20.6523 158.838 20.8945 158.838 21.2422C158.838 21.4961 158.928 21.7051 159.107 21.8691C159.291 22.0293 159.535 22.1094 159.84 22.1094C160.254 22.1094 160.596 21.9648 160.865 21.6758C161.139 21.3828 161.275 21.0156 161.275 20.5742V20.0527ZM167.732 18.2949C167.568 18.166 167.332 18.1016 167.023 18.1016C166.621 18.1016 166.285 18.2832 166.016 18.6465C165.746 19.0098 165.611 19.5039 165.611 20.1289V23H164.252V17H165.611V18.2363H165.635C165.768 17.8145 165.971 17.4863 166.244 17.252C166.521 17.0137 166.83 16.8945 167.17 16.8945C167.416 16.8945 167.604 16.9316 167.732 17.0059V18.2949ZM174.049 22.5195C174.049 24.7227 172.941 25.8242 170.727 25.8242C169.945 25.8242 169.264 25.6934 168.682 25.4316V24.1895C169.338 24.5645 169.961 24.752 170.551 24.752C171.977 24.752 172.689 24.0508 172.689 22.6484V21.9922H172.666C172.217 22.7578 171.541 23.1406 170.639 23.1406C169.908 23.1406 169.318 22.875 168.869 22.3438C168.424 21.8086 168.201 21.0918 168.201 20.1934C168.201 19.1738 168.441 18.3633 168.922 17.7617C169.402 17.1602 170.062 16.8594 170.902 16.8594C171.695 16.8594 172.283 17.1836 172.666 17.832H172.689V17H174.049V22.5195ZM172.701 20.252V19.4727C172.701 19.0508 172.561 18.6914 172.279 18.3945C172.002 18.0938 171.654 17.9434 171.236 17.9434C170.721 17.9434 170.316 18.1348 170.023 18.5176C169.734 18.8965 169.59 19.4277 169.59 20.1113C169.59 20.7012 169.729 21.1738 170.006 21.5293C170.287 21.8809 170.658 22.0566 171.119 22.0566C171.588 22.0566 171.969 21.8887 172.262 21.5527C172.555 21.2129 172.701 20.7793 172.701 20.252ZM176.504 15.7402C176.281 15.7402 176.09 15.668 175.93 15.5234C175.773 15.3789 175.695 15.1953 175.695 14.9727C175.695 14.75 175.773 14.5645 175.93 14.416C176.09 14.2676 176.281 14.1934 176.504 14.1934C176.734 14.1934 176.93 14.2676 177.09 14.416C177.25 14.5645 177.33 14.75 177.33 14.9727C177.33 15.1836 177.25 15.3652 177.09 15.5176C176.93 15.666 176.734 15.7402 176.504 15.7402ZM177.178 23H175.818V17H177.178V23ZM184.303 23H182.943V19.6191C182.943 18.498 182.547 17.9375 181.754 17.9375C181.34 17.9375 180.998 18.0938 180.729 18.4062C180.459 18.7148 180.324 19.1055 180.324 19.5781V23H178.959V17H180.324V17.9961H180.348C180.797 17.2383 181.445 16.8594 182.293 16.8594C182.945 16.8594 183.443 17.0723 183.787 17.498C184.131 17.9199 184.303 18.5312 184.303 19.332V23Z" fill="black" />
-  <rect x="36.5" y="36.5" width="259" height="231" fill="#FDFFB2" />
-  <path d="M148.537 59V50.5977H151.203C152.016 50.5977 152.658 50.7754 153.131 51.1309C153.607 51.4863 153.846 51.9492 153.846 52.5195C153.846 52.9961 153.711 53.4102 153.441 53.7617C153.172 54.1133 152.799 54.3633 152.322 54.5117V54.5352C152.9 54.6016 153.361 54.8164 153.705 55.1797C154.053 55.5391 154.227 56.0078 154.227 56.5859C154.227 57.3047 153.943 57.8867 153.377 58.332C152.811 58.7773 152.096 59 151.232 59H148.537ZM149.926 51.7168V54.1074H150.828C151.312 54.1074 151.691 53.9941 151.965 53.7676C152.242 53.5371 152.381 53.2129 152.381 52.7949C152.381 52.0762 151.9 51.7168 150.939 51.7168H149.926ZM149.926 55.2266V57.8867H151.115C151.635 57.8867 152.035 57.7676 152.316 57.5293C152.602 57.2871 152.744 56.9551 152.744 56.5332C152.744 55.6621 152.141 55.2266 150.934 55.2266H149.926ZM158.299 59.1406C157.373 59.1406 156.633 58.8613 156.078 58.3027C155.527 57.7402 155.252 56.9961 155.252 56.0703C155.252 55.0625 155.539 54.2754 156.113 53.709C156.691 53.1426 157.469 52.8594 158.445 52.8594C159.383 52.8594 160.113 53.1348 160.637 53.6855C161.16 54.2363 161.422 55 161.422 55.9766C161.422 56.9336 161.139 57.7012 160.572 58.2793C160.01 58.8535 159.252 59.1406 158.299 59.1406ZM158.363 53.9434C157.832 53.9434 157.412 54.1289 157.104 54.5C156.795 54.8711 156.641 55.3828 156.641 56.0352C156.641 56.6641 156.797 57.1602 157.109 57.5234C157.422 57.8828 157.84 58.0625 158.363 58.0625C158.898 58.0625 159.309 57.8848 159.594 57.5293C159.883 57.1738 160.027 56.668 160.027 56.0117C160.027 55.3516 159.883 54.8418 159.594 54.4824C159.309 54.123 158.898 53.9434 158.363 53.9434ZM166.291 54.2949C166.127 54.166 165.891 54.1016 165.582 54.1016C165.18 54.1016 164.844 54.2832 164.574 54.6465C164.305 55.0098 164.17 55.5039 164.17 56.1289V59H162.811V53H164.17V54.2363H164.193C164.326 53.8145 164.529 53.4863 164.803 53.252C165.08 53.0137 165.389 52.8945 165.729 52.8945C165.975 52.8945 166.162 52.9316 166.291 53.0059V54.2949ZM172.602 59H171.242V57.9805H171.219C170.781 58.7539 170.107 59.1406 169.197 59.1406C168.459 59.1406 167.867 58.873 167.422 58.3379C166.98 57.7988 166.76 57.0664 166.76 56.1406C166.76 55.1484 167.004 54.3535 167.492 53.7559C167.984 53.1582 168.639 52.8594 169.455 52.8594C170.264 52.8594 170.852 53.1836 171.219 53.832H171.242V50.1172H172.602V59ZM171.26 56.2578V55.4727C171.26 55.0469 171.121 54.6855 170.844 54.3887C170.566 54.0918 170.213 53.9434 169.783 53.9434C169.275 53.9434 168.875 54.1328 168.582 54.5117C168.293 54.8906 168.148 55.416 168.148 56.0879C168.148 56.6973 168.287 57.1797 168.564 57.5352C168.846 57.8867 169.223 58.0625 169.695 58.0625C170.16 58.0625 170.537 57.8926 170.826 57.5527C171.115 57.209 171.26 56.7773 171.26 56.2578ZM179.457 56.3691H175.367C175.383 56.9238 175.553 57.3516 175.877 57.6523C176.205 57.9531 176.654 58.1035 177.225 58.1035C177.865 58.1035 178.453 57.9121 178.988 57.5293V58.625C178.441 58.9688 177.719 59.1406 176.82 59.1406C175.938 59.1406 175.244 58.8691 174.74 58.3262C174.24 57.7793 173.99 57.0117 173.99 56.0234C173.99 55.0898 174.266 54.3301 174.816 53.7441C175.371 53.1543 176.059 52.8594 176.879 52.8594C177.699 52.8594 178.334 53.123 178.783 53.6504C179.232 54.1777 179.457 54.9102 179.457 55.8477V56.3691ZM178.145 55.4082C178.141 54.9199 178.025 54.541 177.799 54.2715C177.572 53.998 177.26 53.8613 176.861 53.8613C176.471 53.8613 176.139 54.0039 175.865 54.2891C175.596 54.5742 175.43 54.9473 175.367 55.4082H178.145ZM184.232 54.2949C184.068 54.166 183.832 54.1016 183.523 54.1016C183.121 54.1016 182.785 54.2832 182.516 54.6465C182.246 55.0098 182.111 55.5039 182.111 56.1289V59H180.752V53H182.111V54.2363H182.135C182.268 53.8145 182.471 53.4863 182.744 53.252C183.021 53.0137 183.33 52.8945 183.67 52.8945C183.916 52.8945 184.104 52.9316 184.232 53.0059V54.2949Z" fill="black" />
-  <rect x="72.5" y="72.5" width="187" height="159" fill="#A3F0B7" />
-  <path d="M145.926 91.9531V95H144.537V86.5977H147.086C148.051 86.5977 148.799 86.8223 149.33 87.2715C149.861 87.7207 150.127 88.3535 150.127 89.1699C150.127 89.9863 149.85 90.6543 149.295 91.1738C148.74 91.6934 147.99 91.9531 147.045 91.9531H145.926ZM145.926 87.7461V90.8164H146.828C147.426 90.8164 147.881 90.6777 148.193 90.4004C148.506 90.123 148.662 89.7324 148.662 89.2285C148.662 88.2402 148.088 87.7461 146.939 87.7461H145.926ZM155.658 95H154.34V94.0625H154.316C153.902 94.7812 153.295 95.1406 152.494 95.1406C151.904 95.1406 151.441 94.9805 151.105 94.6602C150.773 94.3398 150.607 93.916 150.607 93.3887C150.607 92.2559 151.26 91.5957 152.564 91.4082L154.346 91.1562C154.346 90.3008 153.939 89.873 153.127 89.873C152.412 89.873 151.768 90.1191 151.193 90.6113V89.4219C151.826 89.0469 152.557 88.8594 153.385 88.8594C154.9 88.8594 155.658 89.6055 155.658 91.0977V95ZM154.346 92.0527L153.086 92.2285C152.695 92.2793 152.4 92.375 152.201 92.5156C152.006 92.6523 151.908 92.8945 151.908 93.2422C151.908 93.4961 151.998 93.7051 152.178 93.8691C152.361 94.0293 152.605 94.1094 152.91 94.1094C153.324 94.1094 153.666 93.9648 153.936 93.6758C154.209 93.3828 154.346 93.0156 154.346 92.5742V92.0527ZM162.777 95H161.418V93.9805H161.395C160.957 94.7539 160.283 95.1406 159.373 95.1406C158.635 95.1406 158.043 94.873 157.598 94.3379C157.156 93.7988 156.936 93.0664 156.936 92.1406C156.936 91.1484 157.18 90.3535 157.668 89.7559C158.16 89.1582 158.814 88.8594 159.631 88.8594C160.439 88.8594 161.027 89.1836 161.395 89.832H161.418V86.1172H162.777V95ZM161.436 92.2578V91.4727C161.436 91.0469 161.297 90.6855 161.02 90.3887C160.742 90.0918 160.389 89.9434 159.959 89.9434C159.451 89.9434 159.051 90.1328 158.758 90.5117C158.469 90.8906 158.324 91.416 158.324 92.0879C158.324 92.6973 158.463 93.1797 158.74 93.5352C159.021 93.8867 159.398 94.0625 159.871 94.0625C160.336 94.0625 160.713 93.8926 161.002 93.5527C161.291 93.209 161.436 92.7773 161.436 92.2578ZM170.008 95H168.648V93.9805H168.625C168.188 94.7539 167.514 95.1406 166.604 95.1406C165.865 95.1406 165.273 94.873 164.828 94.3379C164.387 93.7988 164.166 93.0664 164.166 92.1406C164.166 91.1484 164.41 90.3535 164.898 89.7559C165.391 89.1582 166.045 88.8594 166.861 88.8594C167.67 88.8594 168.258 89.1836 168.625 89.832H168.648V86.1172H170.008V95ZM168.666 92.2578V91.4727C168.666 91.0469 168.527 90.6855 168.25 90.3887C167.973 90.0918 167.619 89.9434 167.189 89.9434C166.682 89.9434 166.281 90.1328 165.988 90.5117C165.699 90.8906 165.555 91.416 165.555 92.0879C165.555 92.6973 165.693 93.1797 165.971 93.5352C166.252 93.8867 166.629 94.0625 167.102 94.0625C167.566 94.0625 167.943 93.8926 168.232 93.5527C168.521 93.209 168.666 92.7773 168.666 92.2578ZM172.469 87.7402C172.246 87.7402 172.055 87.668 171.895 87.5234C171.738 87.3789 171.66 87.1953 171.66 86.9727C171.66 86.75 171.738 86.5645 171.895 86.416C172.055 86.2676 172.246 86.1934 172.469 86.1934C172.699 86.1934 172.895 86.2676 173.055 86.416C173.215 86.5645 173.295 86.75 173.295 86.9727C173.295 87.1836 173.215 87.3652 173.055 87.5176C172.895 87.666 172.699 87.7402 172.469 87.7402ZM173.143 95H171.783V89H173.143V95ZM180.268 95H178.908V91.6191C178.908 90.498 178.512 89.9375 177.719 89.9375C177.305 89.9375 176.963 90.0938 176.693 90.4062C176.424 90.7148 176.289 91.1055 176.289 91.5781V95H174.924V89H176.289V89.9961H176.312C176.762 89.2383 177.41 88.8594 178.258 88.8594C178.91 88.8594 179.408 89.0723 179.752 89.498C180.096 89.9199 180.268 90.5312 180.268 91.332V95ZM187.393 94.5195C187.393 96.7227 186.285 97.8242 184.07 97.8242C183.289 97.8242 182.607 97.6934 182.025 97.4316V96.1895C182.682 96.5645 183.305 96.752 183.895 96.752C185.32 96.752 186.033 96.0508 186.033 94.6484V93.9922H186.01C185.561 94.7578 184.885 95.1406 183.982 95.1406C183.252 95.1406 182.662 94.875 182.213 94.3438C181.768 93.8086 181.545 93.0918 181.545 92.1934C181.545 91.1738 181.785 90.3633 182.266 89.7617C182.746 89.1602 183.406 88.8594 184.246 88.8594C185.039 88.8594 185.627 89.1836 186.01 89.832H186.033V89H187.393V94.5195ZM186.045 92.252V91.4727C186.045 91.0508 185.904 90.6914 185.623 90.3945C185.346 90.0938 184.998 89.9434 184.58 89.9434C184.064 89.9434 183.66 90.1348 183.367 90.5176C183.078 90.8965 182.934 91.4277 182.934 92.1113C182.934 92.7012 183.072 93.1738 183.35 93.5293C183.631 93.8809 184.002 94.0566 184.463 94.0566C184.932 94.0566 185.312 93.8887 185.605 93.5527C185.898 93.2129 186.045 92.7793 186.045 92.252Z" fill="black" />
-  <rect x="108.5" y="108.5" width="115" height="87" fill="#8FBBEB" />
-  <path d="M150.896 156.648C150.264 156.977 149.477 157.141 148.535 157.141C147.316 157.141 146.34 156.756 145.605 155.986C144.871 155.217 144.504 154.207 144.504 152.957C144.504 151.613 144.916 150.527 145.74 149.699C146.568 148.871 147.613 148.457 148.875 148.457C149.688 148.457 150.361 148.572 150.896 148.803V150.186C150.33 149.85 149.705 149.682 149.021 149.682C148.111 149.682 147.373 149.973 146.807 150.555C146.244 151.137 145.963 151.914 145.963 152.887C145.963 153.812 146.227 154.551 146.754 155.102C147.281 155.648 147.975 155.922 148.834 155.922C149.627 155.922 150.314 155.734 150.896 155.359V156.648ZM154.998 157.141C154.072 157.141 153.332 156.861 152.777 156.303C152.227 155.74 151.951 154.996 151.951 154.07C151.951 153.062 152.238 152.275 152.812 151.709C153.391 151.143 154.168 150.859 155.145 150.859C156.082 150.859 156.812 151.135 157.336 151.686C157.859 152.236 158.121 153 158.121 153.977C158.121 154.934 157.838 155.701 157.271 156.279C156.709 156.854 155.951 157.141 154.998 157.141ZM155.062 151.943C154.531 151.943 154.111 152.129 153.803 152.5C153.494 152.871 153.34 153.383 153.34 154.035C153.34 154.664 153.496 155.16 153.809 155.523C154.121 155.883 154.539 156.062 155.062 156.062C155.598 156.062 156.008 155.885 156.293 155.529C156.582 155.174 156.727 154.668 156.727 154.012C156.727 153.352 156.582 152.842 156.293 152.482C156.008 152.123 155.598 151.943 155.062 151.943ZM164.854 157H163.494V153.619C163.494 152.498 163.098 151.938 162.305 151.938C161.891 151.938 161.549 152.094 161.279 152.406C161.01 152.715 160.875 153.105 160.875 153.578V157H159.51V151H160.875V151.996H160.898C161.348 151.238 161.996 150.859 162.844 150.859C163.496 150.859 163.994 151.072 164.338 151.498C164.682 151.92 164.854 152.531 164.854 153.332V157ZM169.682 156.936C169.416 157.068 169.066 157.135 168.633 157.135C167.469 157.135 166.887 156.576 166.887 155.459V152.066H165.885V151H166.887V149.611L168.246 149.225V151H169.682V152.066H168.246V155.066C168.246 155.422 168.311 155.676 168.439 155.828C168.568 155.98 168.783 156.057 169.084 156.057C169.314 156.057 169.514 155.99 169.682 155.857V156.936ZM175.863 154.369H171.773C171.789 154.924 171.959 155.352 172.283 155.652C172.611 155.953 173.061 156.104 173.631 156.104C174.271 156.104 174.859 155.912 175.395 155.529V156.625C174.848 156.969 174.125 157.141 173.227 157.141C172.344 157.141 171.65 156.869 171.146 156.326C170.646 155.779 170.396 155.012 170.396 154.023C170.396 153.09 170.672 152.33 171.223 151.744C171.777 151.154 172.465 150.859 173.285 150.859C174.105 150.859 174.74 151.123 175.189 151.65C175.639 152.178 175.863 152.91 175.863 153.848V154.369ZM174.551 153.408C174.547 152.92 174.432 152.541 174.205 152.271C173.979 151.998 173.666 151.861 173.268 151.861C172.877 151.861 172.545 152.004 172.271 152.289C172.002 152.574 171.836 152.947 171.773 153.408H174.551ZM182.502 157H181.143V153.619C181.143 152.498 180.746 151.938 179.953 151.938C179.539 151.938 179.197 152.094 178.928 152.406C178.658 152.715 178.523 153.105 178.523 153.578V157H177.158V151H178.523V151.996H178.547C178.996 151.238 179.645 150.859 180.492 150.859C181.145 150.859 181.643 151.072 181.986 151.498C182.33 151.92 182.502 152.531 182.502 153.332V157ZM187.33 156.936C187.064 157.068 186.715 157.135 186.281 157.135C185.117 157.135 184.535 156.576 184.535 155.459V152.066H183.533V151H184.535V149.611L185.895 149.225V151H187.33V152.066H185.895V155.066C185.895 155.422 185.959 155.676 186.088 155.828C186.217 155.98 186.432 156.057 186.732 156.057C186.963 156.057 187.162 155.99 187.33 155.857V156.936Z" fill="black" />
-  <rect x="108.5" y="108.5" width="115" height="87" stroke="black" />
-  <rect x="72.5" y="72.5" width="187" height="159" stroke="black" stroke-dasharray="6 6" />
-  <rect x="36.5" y="36.5" width="259" height="231" stroke="black" />
-  <rect x="0.5" y="0.5" width="331" height="303" stroke="black" stroke-dasharray="6 6" />
-</svg>

content/blog/css-fundamentals/index.md

@@ -1,7 +1,7 @@
 ---
 {
   title: "CSS Fundamentals",
-  description: "A beginners course for CSS box model, HTML defaults, flex box layout, grid box layout, responsive design, selectors, units, and variables.",
+  description: "A beginners course for CSS box model, HTML defaults, flexbox layout, gridbox layout, responsive design, selectors, units, and variables.",
   published: "2022-01-18T20:08:26.988Z",
   authors: ["ljtech"],
   tags: ["css", "design"],
@@ -135,7 +135,7 @@ These placement methods are used to distribute both flex and gridbox items:
 
 - [`place-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content) - shorthand property for [`align-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) and [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
 - [`place-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items) - shorthand property for [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) and [`justify-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)
-- [`place-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) - shorthand property for [`align-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) and [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)
+- [`place-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/place-self) - shorthand property for [`align-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) and [`justify-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self)
 
 > 🤓 These are some godly CSS properties that everyone should know about
 
@@ -283,28 +283,55 @@ Here is a list of CSS properties used to control gridbox properties:
 
 ## Positioning
 
-The CSS property `position` determines an elements flow inside a document. You can add the CSS properties `top`, `right`, `bottom`, `left`  to create an offset on a positioned element or control its order using `z-index`, allowing for elements to overlap one another.
+The CSS property `position` determines an elements flow inside a document.
+
+The CSS properties `top`, `bottom`, `left`, `right` are used on positioned elements to control an offset while `z-index` controls the elements order (bringing it to the front or back).
 
 ![positioning.svg](./positioning.svg)
 
+```css
+.root {
+	position: relative;
+	width: 768px;
+    height: 272px;
+}
+
+.container {
+	position: absolute;
+	left: 224px;
+    top: 100px;
+    width: 320px;
+    height: 145px;
+    z-index: 90;
+}
+
+.item {
+	position: absolute;
+    bottom: 50px;
+    right: 90px;
+	width: 213px;
+	height: 65px;
+    z-index: 100;
+}
+```
+
+ 
+
 There are five types of element positions:
 
 - **Absolute** - The element is removed from document flow and positioned relative to the nearest `position: relative` parent
   - Can be offset relative to the parent container and ordered
 - **Fixed** - The element is removed from document flow and positioned relative to the initial container
   - Can be offset relative to the initial container and ordered
-  
 - **Relative** - The element flows normally and provides relative positioning for children elements
   - Can be offset relative to itself and ordered
-  
 - **Static** - The default position
   - Unaffected by offset and order
-
 - **Sticky** - The element flows normally and "sticks" to the nearest container
   - A mixture between relative and fixed positions depending on the scroll mechanism
   - Can be offset relative to the parent container and ordered
 
-> ⚡ Live Code Example: **COMING SOON!**
+> ⚡ Live Code Example: [Positioning](https://codesandbox.io/s/positioning-gzzv3?file=/styles.css)
 
 ---
 
@@ -320,7 +347,7 @@ For example, YouTube uses a flexbox to space out their headers children elements
 
 ![youtube.png](./youtube.png)
 
-> 🤓 Mastering the flexbox will take you very far in CSS
+> 🤓 Mastering the flexbox will take you very far in CSS as it is used everywhere
 
 #### Gridbox: