{
    "path": "/home/krm/dev/mimer-privatum/Courses/webbutveckling-1/Tutorial/create-a-post.sv.json",
    "s": "Ignor",
    "invert": true,
    "level": 1,
    "title": [
        "🦉 Skapa en post"
    ],
    "author": [
        "krm"
    ],
    "created": {
        "year": 2025,
        "month": 4,
        "day": 22
    },
    "status": "alpha",
    "description": [],
    "statments": [],
    "comment": [],
    "cards": [
        {
            "level": 1,
            "title": [
                "# 👁️‍🗨️ Om detta avsnitt"
            ],
            "description": [
                "Du ska göra en bra post för instagram eller liknade."
            ],
            "statments": [],
            "comment": []
        },
        {
            "0": "t",
            "1": "a",
            "2": "g",
            "3": "s",
            "level": 1,
            "title": [
                "Namn som används"
            ],
            "description": [],
            "statments": [
                {
                    "0": "t",
                    "1": "a",
                    "2": "g",
                    "3": "s",
                    "description": [
                        "NAME",
                        " Namnet på posten som du vill skapa"
                    ]
                },
                {
                    "0": "t",
                    "1": "a",
                    "2": "g",
                    "3": "s",
                    "description": [
                        "X",
                        " Formatet på bild filen."
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 1,
            "title": [
                "Ladda ned exempel projektet."
            ],
            "description": [
                "Ladda ned denna fil:"
            ],
            "statments": [
                {
                    "link": "https://htsit.se/f/post.zip",
                    "description": [
                        "https://htsit.se/f/post.zip"
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 2,
            "title": [
                "Packa upp alla filer!"
            ],
            "description": [
                "Detta kallas ibland för att extrahera."
            ],
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 3,
            "title": [
                "Titta igenom de exemplena som redan finns."
            ],
            "description": [
                "Titta på all kod och alla filer. Du måste inte förstå allt, men försäk få en överblick."
            ],
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 4,
            "title": [
                "Fundera igenom något du skulle vilja lägga upp på Instagram eller liknande."
            ],
            "description": [
                "Du kan gärna göra en skissa."
            ],
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 5,
            "title": [
                "Kom på ett namn, gärna ett ord för du ska döpa filer till detta namn sedan."
            ],
            "description": [
                "Detta namn kommer du använda på flera ställen."
            ],
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 6,
            "title": [
                "Kom på en text som du vill ha på bilden"
            ],
            "description": [
                "Tänk på att den inte får vara för lång."
            ],
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 7,
            "title": [
                "Hitta en bild som du har rätt att använda."
            ],
            "description": [
                "Ska du lägga ut en bild behöver du ha rätt att använda den. Du kah hitta bilder som du har rätt att anvädna här:"
            ],
            "statments": [
                {
                    "description": [
                        "+ ",
                        [
                            {
                                "link": "https://commons.wikimedia.org/wiki/Main_Page"
                            },
                            "Wikimedia common"
                        ]
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 8,
            "title": [
                "Ladda ned den till \"image\" mappen"
            ],
            "description": [
                "Döp om bilden så den hetter NAME."
            ],
            "statments": [],
            "comment": [
                "Det gör att den är lätt att skapa en sökväg till."
            ]
        },
        {
            "level": 1,
            "index": 9,
            "title": [
                "Om du inte själv har copyright på den så måste du lägga till en länk till \"COPYRIGTHS.md\" filen."
            ],
            "description": [
                "Du behöver inte skriva exapt på samma sätt som de andra bilderna som finns i dokumentet. Men det räcker med att du lägger till en llänk till \nden."
            ],
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 10,
            "title": [
                "Kopiera filen \"cat.html\" till \"NAME.html\""
            ],
            "description": [
                "Du ska nu skapa din egen variant av filen."
            ],
            "lang": "",
            "code": "cp cat.html NAME.html",
            "statments": [],
            "comment": [
                "Kommandot ovan fungera på ",
                "UNIX system sås som linux och finns med här som en referens."
            ]
        },
        {
            "level": 1,
            "index": 11,
            "title": [
                "Gå in i din html fil och ändra texten till det du har tänkt."
            ],
            "description": [
                "Du hittar tyexten i ett h1-element."
            ],
            "lang": "html",
            "code": "<h1> Välkommen till IT! </h1>",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 12,
            "title": [
                "Ändra länken till den externa css filen."
            ],
            "description": [
                "Du ska anävnda en extern css fil. Ändra sökvägen i fillen till \"./css/NAME.css\"."
            ],
            "lang": "html",
            "code": "<link rel="stylesheet" href="./css/cat.css" />",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 13,
            "title": [
                "Gå in i \"css\" mappen och kopier filen \"cat.css\" till \"NAME.css\""
            ],
            "description": [
                "Se till att vi har en egen css fil för din poster."
            ],
            "lang": "",
            "code": "cp cat.css NAME.css",
            "statments": [],
            "comment": [
                "Vi bör alltid använda en extern css fil."
            ]
        },
        {
            "level": 1,
            "index": 14,
            "title": [
                "Gå in i din css-fil och ändra bilden."
            ],
            "description": [
                "Ändra sökväg \"../image/NAME.X\""
            ],
            "lang": "css",
            "code": "background-image: url(\"../image/cat.jpg\");",
            "statments": [],
            "comment": []
        },
        {
            "level": 1,
            "index": 15,
            "title": [
                "Gå in i din css-fil och ändra texten så den blir som du vill ha den. Du kan:"
            ],
            "description": [],
            "statments": [
                {
                    "description": [
                        "Ändra text egenskaper"
                    ]
                },
                {
                    "description": [
                        "Ändra font, ta gärna en web font som i tidigare övning."
                    ]
                },
                {
                    "description": [
                        "Ändra font egenskaper såsom storlek och font vikt."
                    ]
                },
                {
                    "description": [
                        "Du får gärna ha en webbfont."
                    ]
                }
            ],
            "comment": []
        },
        {
            "level": 1,
            "index": 16,
            "title": [
                "✔️ Öppna html filen i en webbläsare."
            ],
            "description": [
                "Gör gärna ändringa enligt punkt 15 tills det blir bra."
            ],
            "statments": [],
            "comment": [
                "Du borde nu ha en bra poster som du kan använda på social medier."
            ]
        }
    ]
}