{
    "path": "/home/krm/dev/mimer-privatum/Courses/webbutveckling-1/Planning/layout.sv.json",
    "s": "Ignor",
    "invert": true,
    "level": 1,
    "title": [
        "Om layout"
    ],
    "author": [
        "krm"
    ],
    "created": {
        "year": 2021,
        "month": 1,
        "day": 20
    },
    "image": "/image/courses/bricks.png",
    "icon": "🧱",
    "description": [
        "Om att använda CSS och få en layoute."
    ],
    "statments": [],
    "comment": [],
    "cards": [
        {
            "level": 1,
            "index": 1,
            "title": [
                "Mer om Boxmodelen"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "Läs igenom föregånde lektion om detta."
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 2,
            "title": [
                "Display model"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "block"
                    ]
                },
                {
                    "description": [
                        "inline"
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 3,
            "title": [
                "Flöde av element"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/float/examples.sv.html"
                            },
                            "Om flöde"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/simpel-float/exercise.sv.html"
                            },
                            "W-N18"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/float/exercise.sv.html"
                            },
                            "W-N12"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://developer.mozilla.org/en-US/docs/Web/CSS/float"
                            },
                            "Beskrivning av flöde"
                        ]
                    ]
                },
                {
                    "description": [
                        "Instessanta värden är nu: none, left, right"
                    ]
                },
                {
                    "description": [
                        "Upp till ned"
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 4,
            "title": [
                "Positioner"
            ],
            "description": [],
            "statments": [
                {
                    "links": "lession",
                    "link": "https://htsit.se/e/css/position/examples.sv.html",
                    "description": [
                        "Om position"
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/simpel-positions/exercise.sv.html"
                            },
                            "W-N22"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/positions/exercise.sv.html"
                            },
                            "W-N32"
                        ]
                    ]
                },
                {
                    "description": [
                        "relativa"
                    ]
                },
                {
                    "description": [
                        "absolut"
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 5,
            "title": [
                "Auto"
            ],
            "description": [
                "\"The value of said property is adjusted automatically according to the contentor the context of the element.\""
            ],
            "statments": [
                {
                    "links": "lession",
                    "link": "https://htsit.se/e/css/auto/examples.sv.html",
                    "description": [
                        "Om auto"
                    ]
                },
                {
                    "description": [
                        "🖋 ",
                        [
                            {
                                "link": "https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcAfAB1qAAlkAJCACsZQgPSjJMrpBgJifciADMqAAwgAvnhoMm6DMtwFe-CIPRde9AA6kIACdmACNaEOhrWxA6RmYsHG8+AXhmLVlgGXleKB5A1FlA5ABuLNlEAA94AFpaKGIAc2oC2A9EQNK5WTDYAGsGwJ4AV2okapy8gpCoIYhO+RYIRrYCgEZzc18K+dkAd2IkeBY1ja2d+lpAhuJqavgeXwKAdgBWM5krGRl0zK6Lq5u1RghHgBVoQ3u50u11ugWWoNk4MhHy+1F00Dg8EM1GMACZULjVtYALpWIA"
                            },
                            "Om att centrera en div"
                        ]
                    ]
                },
                {
                    "description": [
                        "🖋 ",
                        [
                            {
                                "link": "https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcAfAB1qQgPSjJMrpBgJifciAAMqAKwgAvnhoMm6DACtcBXvwiD0XXvQAOpCACdmAI1o-oIxMQOkZmLBxnPgF4ZkUAAmAZePi-WABrAHNPHgBXaiQAWl4oHk9UVKhciABuZPiWCGJMtgqARm1tVwAPOuoUgHdiJHgWds6evpT6Wk9M4mpC+B5XCoB2PUmZQxkZBKT++Jm5hcKYQngK2lzlqaPZ+cXPZtb469v648ellaubnjuX1OPh48GW9D+H2oO2oygIqjg8A01C0bQATKg2kYALqGIA"
                            },
                            "Exempel på höjd egenskapen"
                        ]
                    ]
                },
                {
                    "link": "https://www.youtube.com/watch?v=1vl3LrEwqpE",
                    "description": [
                        "The CSS Value of Auto"
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://ishadeed.com/article/auto-css/"
                            },
                            "Allt om Auto"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/three-boxes-with-auto/exercise.sv.html"
                            },
                            "W-N42"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 6,
            "title": [
                "Flexbox"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "Enkel layoute"
                    ]
                },
                {
                    "links": "lession",
                    "link": "https://htsit.se/e/css/flexbox/examples.sv.html",
                    "description": [
                        "Om flexbox"
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/"
                            },
                            "En guide to flexbox"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/start-with-flexbox/exercise.sv.html"
                            },
                            "W-N13"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/four-small-dishes-with-flexbox/exercise.sv.html"
                            },
                            "W-N23"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔷 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/five-yellow-circles/exercise.sv.html"
                            },
                            "W-H5"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/five-red-square/exercise.sv.html"
                            },
                            "W-H15"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 7,
            "title": [
                "Grid"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "Svårare layoute"
                    ]
                },
                {
                    "link": "https://www.youtube.com/watch?v=EiNiSFIPIQE",
                    "description": [
                        "Genom gång av alla grid egenskaper"
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://css-tricks.com/snippets/css/complete-guide-grid/"
                            },
                            "En guide to grid"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 8,
            "title": [
                "Media frågor"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "Mediafrågor"
                    ]
                },
                {
                    "links": "lession",
                    "link": "https://htsit.se/e/css/media-query/examples.sv.html",
                    "description": [
                        "Om Mediafrågor"
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://www.w3schools.com/Css/css3_mediaqueries_ex.asp"
                            },
                            "En förklaring med exempel"
                        ]
                    ]
                },
                {
                    "description": [
                        "Mobilt"
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/big-and-small-screen/exercise.sv.html"
                            },
                            "W-N24"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔷 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/seven-yellow-circles/exercise.sv.html"
                            },
                            "W-H4"
                        ]
                    ]
                }
            ],
            "comment": []
        }
    ],
    "kind": "planning"
}