Creating a website
I had a lot to learn and many steps to go through when creating this website. Even though Svavar Konráðsson and Þórarinn Bjartur Breiðfjörð guided me through the whole process, it was a lot to learn. I ran into quite a few problems but in the end all worked out.
Prior knowledge
A few years back I created a simple website using a template from Wix. Then, a few months ago, I participated in adding information to a website made by Þórarinn Bjartur Breiðfjörð and Svavar Konráðsson. I did this by using GitHub web editor, so I had gotten to know editing Markdown a little bit. This helped me a lot.
Compressing photos and videos
In the beginning of my documentation I used the Snipping Tool. Since the size of all images was around 15-50kb I thought that they would be conveniently small for my website, and I decided to load them all up at the same time. When I checked out the website I saw that they were too big. I opened each of these photos in the Photos program, clicked on the three points at the top and chose Resize image. This way I could adjust the quality of the image and also the width and height in pixels. Each time I saved a copy of a resized photo I added the pixel size to the name of the photo. The widht in pixels determined how wide the photo would appear on the screen, so I like using this way of resizing photos.
Svavar introduced me to another way of compressing photos, which is using the Greenshot program. He also explained how to use "FFMPEG to compress videos. He explaines all of this in icelandic in this video. I copied the commands from Svavar´s website and followed a link on his website to this site to learn how to make a textbox. I copied the code and adjusted it, as you can see here below:
Greenshot
With Greenshot you can take screenshots to document everything. You can download it here.
A quick screenshot
When you hold down the Shift key and the Windows key and click on the letter S a window pops up where you can choose quickly if you want to take a screenshot of the whole screen or just a part of the screen.
FFMPEG
You can use FFMPEG to compress videos. That is very helpful since videos tend to be very large files. You can download it here.
How to use these commands to compress photos or videos
The text in the text boxes can be edited, then copied and finally pasted in the adress bar at the top of our folder - but first you have to write cmd in the adress bar and hit enter. After that, you can paste the command there..
Not as easy as it seemed
This sounded easy and I wanted to follow these instructions on how to use FFmpeg to resize a video, but it didn´t work at all. The computer said that it didn´t recognize the FFmpeg as an internal or external command, operable program or batch file. Árni Björnsson sent me two links to help me understand how to solve this problem and set FFmpeg up the right way. The first link explaines what external variables are and how to edit them, see here. The second link is a guide to how FFmpeg is set up, see here. I had to ask a collegue of mine, Viðar Guðmundsson, to assist me. He is an administrator at my scool. He followed the instructions on this site to put FFmpeg to path. After that I tried to use it to resize a video but it didn't work.
Using FFmpeg to resize a video
I spoke to Svavar Konráðsson and he showed me that in the folder where the video is I could go to View and then Show. There I could choose Filename extensions. After that I could see the type of file in the end of the name of the file. Then I could write the whole name of the file/video that I wanted to resize. At last everything worked perfectly.
Setting up programs
To prepare the creation of this website and documentation of the assignments it was necessary to install a few programs:
Python
On Python´s website Python is explained as a language for programming that works fast and is effective in integrating systems. There you can find directions for beginners.
GitHub
In this video GitHub is explained in a fun way. You can use GitHub to code and store data, both on your own or in collaboration with others. I had signed up in GitHub a few months ago so I had an account but when I installed Visual Studio Code I had to connect VSC to my GitHub account. The link to GitHub is here
Visual Studio Code
According to their website, in VS Code you can code in different programming languages, f.ex. HTML, Python, Json, Javascript, YAML and create Markdown and that is exactly what I needed to do when creating my website. One more thing; it is necessary to close VS Code after installing programs or adding extensions and then open it again to begin working. Information here.
GitHub Graph
GitHub Graph can be used as an extension in Visual Studio Code. When you click on it you can see all commits in a pictorial tree/timeline. You can travel between changes in files and restore old commits if necessesary. I like the picturesque look of all the actions because it helps getting a good overview of what has been done. See here.
Material for MkDocs
Material for MkDocs is a site generator that can build HTML sites and it works well with GitHub and Visual Studio Code. You can choose between different themes and add plugins. I like the clear instructions that can be found on their website.
Understanding HTML+Javascript
The first assignment was to copy a code from here and paste it into a NotePad. By saving the NotePad file as a HTML file it opens up as a webpage when doubleclicked on. This helped me to understand how HTML and Javascript work.
Learning about CSS
The next step was to learn about CSS, or Cascade Style Sheet, and how we can use CSS to control the way our HTML code appears, f.ex. the colour of elements, where text is situated and which fonts to use. On this page here we could find explanations on CSS.
Learning about Basic syntax/Markdown
By reading about what to do and what not to do on here it helps when writing a Markdown. I took another look at this page after some coding and realized that I was not doing everything the right way. I should have put a blank line before writing a heading, instead of writing the heading at the top of the terminal. I also should have pressed the space button between the hashtag symbol and the text in the heading, instead of not leaving space inbetween.
Cloning a repository
In VS Code I cloned the repository from my GitHub account. Then I clicked on the three points in the top bar, chose Terminal and then to Open a new terminal.
Material for docs
To set up Material for docs I installed a Python package by copying and pasting this code:
I saw that Svavar Konráðsson added Admonition and SuperFences to be able to add notes, codeblocks and more to his website. I decided to do the same and add admonition to my mkdoks.yml file from here. Below is the code that I copied:
But I also saw that Svavar had more markdown extensions on his list, so I followed what he had done and added these:
I also copied codes from the same site here and adjusted the text to fit here on my page. The look and usage of admonitions can vary and you can learn more about it here:
Info
Have fun changing admonitions by reading about them here
Collapsable block
Toggle the arrow here on the right side
I think it´s absolutely brilliant to be able to make a collapsable block, like this one, with a small toggle to the right.
Inline block
Inline blocks
It is important to place content after the code for inline blocks. The photo here on the left side is a screenshot from here, and so is the code that was used to make this Inline block.
Note
The photo is 400 pixels wide, 500 pixels was to wide so that the inline box did not fit beside the photo.
Icons and emojis 
An icon or an emoji can say so much and I found information about how to set them up here. I copied this code to enable the use of icons and emojis and pasted it into my mkdocs.yml:
- attr_list
- pymdownx.emoji:
emoji_index: !!python/name:material.extensions.emoji.twemoji
emoji_generator: !!python/name:material.extensions.emoji.to_svg
Adjusting colors on the page
The colors on the page can be adjusted as explained here.
Info
I like being able to format text, f.ex. to higlight or underline words and to write keyboard keys, as described here, so I copied the code below and added it to mkdocs.yml:
Mistakes
One of the mistakes I made when creating this site was to make two yaml files in my Actions folder. Svavar pointed this out to me and I deleted one blank yaml file.
On Svavar´s site I saw that it was recommended to add a line to settings.json. I wrote the code myself after the code on his site, but something went wrong. After copying the code and pasting it in the right place it worked.
I knew that the number of hashtags in front of a sentence or a word controlled which type of heading was used and I thougt that if I used one hashtag in front of the headline I should use two hashtags in front of text that I wanted to be bigger than normal text. What I did not know was that the hashtags I was using also made the text appear in the Table of content. Svavar Konráðsson saw this and he let me know so that I could change the use of hashtags if I wanted.
There are a few more things I learned from Svavar´s website. I noticed that when I clicked on links on his page to see the origin of codes he used, the links led me to exactly the right place on the sites he had linked to. I did´nt have to search the pages to find the origin. Svavar used this code so that other´s, who would link something to his page would end up on the right spot on his page. I decided to copy the code from his page and do the same.
features: - navigation.tracking
I also copied this code from his page:
features: - navigation.tabs - navigation.tabs.sticky
It makes the navigation at the top of the page follow when scrolling down a page.
Useful tips
Autosave in VS Code
It is possible to turn on Autosave in VS Code and I find that helpful because when I am documenting my changes appear almost instantly on my website and I can check out regurlarly how things look.
Switching between programs
One helpful tip: When switching between programs in your computer you can press ALT + TAB