{
    "path": "/home/krm/dev/mimer-privatum/Courses/webbutveckling-1/Planning/css.sv.json",
    "s": "Ignor",
    "invert": true,
    "level": 1,
    "title": [
        "CSS"
    ],
    "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. Alla övningar nedan kan läman in på denna ",
        [
            {
                "link": "https://forms.gle/N3CkL15gzeEDxpHE8"
            },
            "länk"
        ],
        ". Välj uppgiften \"css\"."
    ],
    "statments": [
        {
            "link": "https://docs.google.com/document/d/1i6LCrbJWQ5DlIWUles6YuyP3mla64u7mPrWoiQu2Yp4/edit?usp=sharing",
            "description": [
                "Prov beskrivning"
            ]
        },
        {
            "link": "https://docs.google.com/document/d/1zqAh_HdHpntfPLGHHmNycJpZ79YTYGz-6Y4Sn2NPydU/edit?tab=t.0",
            "description": [
                "Exempel uppgifter"
            ]
        }
    ],
    "comment": [],
    "cards": [
        {
            "level": 1,
            "index": 1,
            "title": [
                "Introduktion till stil med CSS"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "Intro"
                    ]
                },
                {
                    "description": [
                        "CSS historia"
                    ]
                },
                {
                    "description": [
                        "CSS terminologi"
                    ]
                },
                {
                    "description": [
                        "CSS syntax"
                    ]
                },
                {
                    "description": [
                        "CSS framtid, är det SCSS?"
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 2,
            "title": [
                "Arbeta med våra CSS exempel och utveckla med webbläsaren"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "CSS exemplerna och övningarna."
                    ]
                },
                {
                    "description": [
                        "CSS i en webbläsare."
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 3,
            "title": [
                "Text"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/text/examples.sv.html"
                            },
                            "Om texter"
                        ]
                    ]
                },
                {
                    "description": [
                        "color"
                    ]
                },
                {
                    "description": [
                        "background-color"
                    ]
                },
                {
                    "description": [
                        "text-decoration"
                    ]
                },
                {
                    "description": [
                        "text-align"
                    ]
                },
                {
                    "description": [
                        "webkit-text-stroke"
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/underline-text/exercise.sv.html"
                            },
                            "W-E11"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/underline-paragraf/exercise.sv.html"
                            },
                            "W-E21"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/underline-headline/exercise.sv.html"
                            },
                            "W-E31"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 4,
            "title": [
                "Kantlinje"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/border/examples.sv.html"
                            },
                            "Om kantlinjer"
                        ]
                    ]
                },
                {
                    "description": [
                        "border-style"
                    ]
                },
                {
                    "description": [
                        "border-width"
                    ]
                },
                {
                    "description": [
                        "border-color"
                    ]
                },
                {
                    "description": [
                        "border-radius"
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/three-borders/exercise.sv.html"
                            },
                            "W-E12"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/all-borders-properties/exercise.sv.html"
                            },
                            "W-E22"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/all-borders-styles/exercise.sv.html"
                            },
                            "W-E32"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔷 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/three-yellow-circles/exercise.sv.html"
                            },
                            "W-N5"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 5,
            "title": [
                "Boxmodelen"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/boxmodel/examples.sv.html"
                            },
                            "Om kantlinjer"
                        ]
                    ]
                },
                {
                    "description": [
                        "padding"
                    ]
                },
                {
                    "description": [
                        "border"
                    ]
                },
                {
                    "description": [
                        "margin"
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://medium.com/hackernoon/the-box-model-44fc2c04a935"
                            },
                            "Bra Bild på boxmodelen"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "http://webbdesigna.se/boxmodellen.php"
                            },
                            "På svenska"
                        ]
                    ]
                },
                {
                    "description": [
                        "🖋 ",
                        [
                            {
                                "link": "https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABMSQBeADogAgsoUA+OdQkTlijUID0oseuojxU2QoBCNtRq02rew+NVdIMBMT7kQAFlQAVhAAXzwaBiZ0DAArXAJefghBdFDwkDpGZiwcLkSBeGYAYh0JYHsJACNaWABrAHMAJx4AV2okAFpeKB5G1AlG5ABuCoB3aXgWfsCABgAHAA8RzQkWCGJ6tmn5pYq52iRRanr+gCYd5a1K3qQIPokwHihpCQBGQMWqqBray6qbu4dcZISb9d6LP70WiNerEahnC4aEIaDRFRxlCrdXr9ACe0B6oz+1TqTVa7S6T2xEiaEGSf2BoIkswhFTWGy2TMRK32hzhJwk5xZK2ujVu90ezyQbw+Cy+LQgRIBjSBEym0qFWihMLh-QAzFyQu5oHB4N5qL5XgAOVCvU6hAC6ISAA"
                            },
                            "Exempel på detta"
                        ]
                    ]
                },
                {
                    "description": [
                        "🖋 ",
                        [
                            {
                                "link": "https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABMSQBeADogAgsoUA+OdQkTlijUID0oseuojxU2QoBCNtRq02rew+NVdIMBMT7kQAFlQAVhAAXzwaBiZ0DAArXAJefghBdFDwkDpGZiwcLkSBeGYAYh0JYHsJACNaWABrAHMAJx4AV2okAFpeKB5G1AlG5ABuCoB3aXgWfsCABgAHAA8RzQkWCGJ6tmn5pYq52iRRanrpxeWtSt6kCD6JMB4oaQkARkDFqqga2vOqq5uO8ZISb9Z47CQAJjBAGYwX4dj99odiMdTgsIfCKvRaI16sj+pCzhoQhoNEVHGUKt1ev0AJ7QHqjH7VOpNVrtLoPakSJoQZI-QHAiSzQkrNYbLZCjErRFHeodeA8Ob4qVaGXIuWNcXwfpwkWqg6yjqXeAK+j9ABsKokauOHRghG1Qr1v0a11u90eSBebzRlSgLQgTL+jQBEym3udl1d-wVSruDyeBN2Kyjbo6ms28A5PVuvVox0DFVT-2Npo6YHgNJg-SQPBNwyLwaNdbLAvDPoRBvV6a1OqtNrlpZ4ZokludA7tEAdqJ+WJxeIkMJFIXc0Dg8G81F85tQUKhoQAuiEgA"
                            },
                            "Ett mer komplext exempel på detta"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/three-boxes/exercise.sv.html"
                            },
                            "W-E14"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 6,
            "title": [
                "Förenklingar av CSS egenskaper"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Shorthand_properties"
                            },
                            "Förklaringar av förkorningar"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 7,
            "title": [
                "Färger"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/color/examples.sv.html"
                            },
                            "Om färjer"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/simpel-color/exercise.sv.html"
                            },
                            "W-VE1"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/color-on-boxes/exercise.sv.html"
                            },
                            "W-VE11"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/hex-color-on-boxes/exercise.sv.html"
                            },
                            "W-E1"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔷 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/hsl-color-on-boxes/exercise.sv.html"
                            },
                            "W-N1"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/hsl-color-on-boxes/exercise.sv.html"
                            },
                            "W-N11"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 8,
            "title": [
                "Storlekar"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/length/examples.sv.html"
                            },
                            "Om storlekar"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://www.w3schools.com/CSSref/css_units.asp"
                            },
                            "Om enheter"
                        ]
                    ]
                },
                {
                    "link": "https://www.youtube.com/watch?v=6eVp1TJcvuY",
                    "description": [
                        "Enheter i CSS"
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 9,
            "title": [
                "Fonter"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/fonts/examples.sv.html"
                            },
                            "Om fonter"
                        ]
                    ]
                },
                {
                    "description": [
                        "font-size"
                    ]
                },
                {
                    "description": [
                        "font-family"
                    ]
                },
                {
                    "description": [
                        "font-style: italic;"
                    ]
                },
                {
                    "description": [
                        "font-weight: bold;"
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/fonts-in-boxes/exercise.sv.html"
                            },
                            "W-N2"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 10,
            "title": [
                "Bilder som css type med url"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/url_function"
                            },
                            "css-funktionen url"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 11,
            "title": [
                "Base64"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://sv.wikipedia.org/wiki/Base64"
                            },
                            "Base 64"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://www.cssportal.com/image-to-data/"
                            },
                            "Omvandla från bild till base64 text"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 12,
            "title": [
                "Gradiant"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://cssgradient.io/"
                            },
                            "Generator av CSS gradienter"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://www.w3schools.com/css/css3_gradients.asp"
                            },
                            "Gradienter"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 13,
            "title": [
                "Listor med stil"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/list/examples.sv.html"
                            },
                            "Om listor"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/unordered-list/exercise.sv.html"
                            },
                            "W-N3"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/ordered-list/exercise.sv.html"
                            },
                            "W-N13"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔷 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/icon-list/exercise.sv.html"
                            },
                            "W-H3"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/list-of-it/exercise.sv.html"
                            },
                            "W-N23"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 14,
            "title": [
                "Bilder med stil"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/image/examples.sv.html"
                            },
                            "Om bilder"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://www.w3schools.com/html/html_images.asp"
                            },
                            "W3S om HTML attribute på bilder"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://www.w3schools.com/css/css3_images.asp"
                            },
                            "W3S om CSS egenskaper på bilder"
                        ]
                    ]
                },
                {
                    "link": "https://www.youtube.com/watch?v=pfb-SuZv_nc",
                    "description": [
                        "Om skuggor och CSS battels"
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/some-attributes-on-image/exercise.sv.html"
                            },
                            "W-N4"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/more-attributes-on-image/exercise.sv.html"
                            },
                            "W-N14"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/filters-on-image/exercise.sv.html"
                            },
                            "W-N5"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔷 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/shadow-on-image/exercise.sv.html"
                            },
                            "W-N15"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 15,
            "title": [
                "Bakgrundsbilder"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://www.w3schools.com/cssref/pr_background-image.php"
                            },
                            "Bakgrundsbilder"
                        ]
                    ]
                },
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/background/examples.sv.html"
                            },
                            "Om bakgrunder"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/background-color/exercise.sv.html"
                            },
                            "W-N6"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/background-image/exercise.sv.html"
                            },
                            "W-N7"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/more-background-image/exercise.sv.html"
                            },
                            "W-N17"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 16,
            "title": [
                "Pseudoklasser och pseudoelement"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/psedo/examples.sv.html"
                            },
                            "Om Pseudoklasser och pseudoelement"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/psedo-element/exercise.sv.html"
                            },
                            "W-N9"
                        ],
                        ", ",
                        [
                            {
                                "link": "/a/web/css/Exercises/psedo-class/exercise.sv.html"
                            },
                            "W-N19"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 17,
            "title": [
                "Selectorer"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "🖋 ",
                        [
                            {
                                "link": "https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABMSQBeADrc+8WsWoQATgoB8c6hIkjxE2FFo553WuqTbd+-UJYBGLRIAqEMPAlOhAemcdPXshAAcg+3sAEQh4ZQkAE-UJCD1EAA94DDsQv3Cchz9RMVcCg2LjU3MFWCsbEAiQwPdPbwAmf0CysMbImLjaROTUiVpqOjSITOzgwvzg-2LS6kXxLS5IGARiPnIQJzbUAE4QAF88GgYmdAwAK1wCXn5U+GYzi5A6RmYsHC4ngSvdAAYgBKjUyWAOQARrRYABrADm6h4AFdqEgALS8KA8dSoCTIiCpADcMLxSA0BLAPCg0gkAFZQukycFQrQkKJqIiCU4AAzM1mnXS6LB1CRQ4LQilUiQ0ulIRmCnLszmqHlKlk5ehWRGqTHwHihAlMrVSuFIlHorE4vEE9TIIUi6hi6wSZwS7W61QEvms-QZeCYym8dS0eA7agE60aOlqIUbaBwCO7ZhOABsqCcmL5qD5ZwAuqcgA"
                            },
                            "Exempel på hur använda selectorer på bästa sätt"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://www.w3schools.com/cssref/css_selectors.asp"
                            },
                            "Referens dokumentation"
                        ]
                    ]
                },
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/selector/examples.sv.html"
                            },
                            "Om selectorer"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/selectors/exercise.sv.html"
                            },
                            "W-N8"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 18,
            "title": [
                "Prioritering av selektorer"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "⚙️ ",
                        [
                            {
                                "link": "/a/web/css/Examples/prio/examples.sv.html"
                            },
                            "Om prioriteringar"
                        ]
                    ]
                },
                {
                    "description": [
                        "position - Senast inlästa regel har prioritet, kallas också\"cascading\"(\"överlappa\")."
                    ]
                },
                {
                    "description": [
                        "!imoprtent - Gör en CSS regel prioriterad. Bör undvikas."
                    ]
                },
                {
                    "description": [
                        "inline - Style attributet har prioritet."
                    ]
                },
                {
                    "description": [
                        "\"Specificity\" - Kan behövas beräknas."
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://www.w3schools.com/css/css_specificity.asp"
                            },
                            "Beräkna \"Specificity\""
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://en.wikipedia.org/wiki/CSS"
                            },
                            "Wikipedia om CSS"
                        ]
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://techrangers.cdl.ucf.edu/2018/09/10/css-specificity.html"
                            },
                            "Om prioritet och varför inte använda priority"
                        ]
                    ]
                },
                {
                    "description": [
                        "💚 ",
                        [
                            {
                                "link": "/a/web/css/Exercises/priotering-of-boxes/exercise.sv.html"
                            },
                            "W-N18"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 19,
            "title": [
                "Arv och liknande"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "inheritance"
                    ]
                },
                {
                    "description": [
                        "initial"
                    ]
                },
                {
                    "description": [
                        "unset"
                    ]
                },
                {
                    "description": [
                        "🔗 ",
                        [
                            {
                                "link": "https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance"
                            },
                            "Arvegenskapen och överlappning"
                        ]
                    ]
                }
            ],
            "comment": []
        }
    ],
    "kind": "planning"
}