webguide/github.html at main · Sethyla/webguide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="sv">
    <head>
        <title>Github Guide</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <a href="index.html" class="Github">Tillbaka</a>
        <div class="Heading">
            <h1 style="text-align: center; color: #f5f5f5;">Github Guide</h1>
        </div>
        <div class="Inner">
            <div class="Intro">
                <p>
                    Denna kategorin kommer handla om hur du laddar upp en uppgift till Github.
                    Några saker att nämna är att denna guiden är för inne i Visual Studio Code.
                    Viktiga punkter är att det tar några minuter innan det uppdateras på Github.
                    Samt måste du spara (antingen uppe i hörnet och sen "save") Eller Ctrl + S.
                </p>
            </div>
            <div class="Step0">
                <div class="Stycke0">
                    <p>
                        Till vänster sida har du en "bar" som har lite olika knappar, Hoverar du din mus
                        över alla knappar kommer en säga "Explorer", en "Search", en "Source Control".
                        Det är Source control vi vill gå in i.
                    </p>
                    <p>
                        När du är i Source control så om det inte redan finns på Github så kommer det se ut
                        som bilden. Vi vill trycka på "Initialize Repository".
                    </p>
                </div>
                <div class="ImageSquares0">
                    <img src="images/Help0.png" alt="Bild 0" style="max-width:100%;">
                </div>
            </div>
            <div class="Step1">
                <div class="Stycke1">
                    <p>
                        När du har tryckt på knappen så kommer detta hända, detta är som innan när man vill
                        uppdatera hemsidan på github, där man skriver in något i rutan, spelar ingen roll vad,
                        så länge den inte står tom för då så måste man starta om Visual Studio Code. <br> <br>
                        Efter du har skrivit in något så tryck på "Commit". Om den ber dig att spara så klicka
                        ja.
                    </p>
                </div>
                <div class="ImageSquares1">
                    <img src="images/Help1.png" alt="Bild 1" style="max-width:100%;">
                </div>
            </div>
            <div class="Step2">
                <div class="Stycke2">
                    <p>
                        Sedan kommer det stå "Publish Branch", som är sista steget, här behöver du inte skriva in något i rutan.
                    </p>
                </div>
                <div class="ImageSquares2">
                    <img src="images/Help2.png" alt="Bild 2" style="max-width:100%;">
                </div>
            </div>
            <div class="Step3">
                <div class="Stycke3">
                    <p>
                        Du kommer sedan få 2 förslag högst uppe på skärmen.
                        Skillnaden här är om du vill att andra ska kunna se
                        vad du har gjort eller om du vill ha det privat för dig själv.
                        En sak att notera är att om du vill att läraren ska kunna se så
                        MÅSTE den vara Public. <br> <br>
                        Tryck på den du vill skapa.
                    </p>
                </div>
                <div class="ImageSquares3">
                    <img src="images/Help3.png" alt="Bild 3" style="max-width:100%;">
                </div>
            </div>
            <div class="Step4">
                <div class="Stycke4">
                    <p>
                        När den har laddat klart så kommer denna rutan i högra hörnet komma upp.
                        Det du vill gör är att trycka på den blåa knappen "Open on Github".
                    </p>
                </div>
                <div class="ImageSquares4">
                    <img src="images/Help4.png" alt="Bild 4" style="max-width:100%;">
                </div>
            </div>
            <div class="Step5">
                <div class="Stycke5">
                    <p>
                        Högst uppe på din webbläsare kommer du se ditt användare namn
                        och mappens namn som du har valt, detta är för att dubbel checka
                        så du är på rätt plats. <br> <br>
                        Det du vill göra är att trycka på "Settings".
                    </p>
                </div>
                <div class="ImageSquares5">
                    <img src="images/Help5.png" alt="Bild 5" style="max-width: 100%;">
                </div>
            </div>
            <div class="Step6">
                <div class="Stycke6">
                    <p>
                        Du kommer få en lista av olika kategorier, den vi vill fokusera på
                        är "Pages".
                    </p>
                </div>
                <div class="ImageSquares6">
                    <img src="images/Help6.png" alt="Bild 6" style="max-width: 50%;">
                </div>
            </div>
            <div class="Step7">
                <div class="Stycke7">
                    <p>
                        Här vill du klicka på "None", sedan välja "main". Sedan kommer "Save" knappen
                        Lyssas up och du kan klicka på den för att spara dina ändringar. <br> <br>
                        Nu vill du veta mellan 20 sekunder och 2 minuter, tidskillnaden är beroende
                        på när du gör detta och hur stor din hemsida är. Efter du har väntat denna tiden
                        så trycker du ctrl + r eller refresh på hemsidan. Du kan göra detta några gånger
                        tills du ser bilden som visas i nästa steg.
                    </p>
                </div>
                <div class="ImageSquares7">
                    <img src="images/Help7.png" alt="Bild 7" style="max-width: 100%;">
                </div>
            </div>
            <div class="Step8">
                <div class="Stycke8">
                    <p>
                        Detta är här du sedan kan antingen klicka och kopiera länken för att se din hemsida,
                        eller trycker du bara på "Visit site" och så kommer du till din hemsida, om inget syns
                        på hemsidan så är det på grund av att din fil antingen inte har .html efter sig eller
                        att den inte heter specifikt "index.html" som den måste för att Github ska kunna hitta
                        filen.
                    </p>
                </div>
                <div class="ImageSquares8">
                    <img src="images/Help8.png" alt="Bild 8" style="max-width: 100%;">
                </div>
            </div>
        </div>
        <script>
            setTimeout(() => location.reload(), 10000)
        </script>
    </body>
</html>