Slide 1 ----------- Part 1: In this section, we explore how this course interacts with GitHub Classroom. But of course, let's hear a joke first! "What did the hacker’s out-of-office reply say? … “Gone phishing.” Slide 2 ----------- Part 1: GitHub Classroom is a powerful tool designed to streamline the way coding assignments are distributed and reviewed in educational settings. It uses GitHub to provide a space where instructors can easily create, distribute, and grade programming assignments. Part 2: With Github Classroom, you can work either in isolation or in groups, depending on the needs of assignment. Using code reviews or early commits, you can get early feedback on your work, get help or discuss possible options. Slide 3 ----------- Part 1: Let's start on our first Github Classroom assignment. First, make sure you have an existing Github account and that you are logged in. Part 2: Accept your assignment by clicking on the following link. Part 3: This will take you to the assignment acceptance page displayed. Part 4: Please click on: Accept this Assignment. Slide 4 ----------- Part 1: Once you accept your assignment, you are greeted with this page. You now have two options. Part 2: You can use the provided online editor, saving you some hassle setting up the software. While this may seem convenient, it is affected by the strength and reliability of your internet connection. Part 3: The second and recommended options is to clone your files to your computer from the provided url and use your local development environment to work on your assignment. We will now explore both options. Slide 5 ----------- Part 1: If you do not want to install applications and tools on your local computer, you are welcome to use Github Codespaces, an online editor that allows you to work remotely on your files. Part 2: To start the online editor, click on “Open in GitHub Codespaces”. Part 3: After initialisation, it will open a new instance of your codespace. The user interface looks exactly the same as your local Visual Studio Code, and there is no need to learn a new development environment. Slide 6 ----------- Part 1: To work on your assignment on your computer, you must download the files from the repository. Make sure that git is installed. Part 2: First, mark the name of the repository that was created for you for this assignment. It is displayed under you're ready to go after you accept your assignment. If you no longer see this page. you have two options. Part 3: You can click on the following link to accept the invitation again and see the repository link. Part 4: Alternatively, login to your Github account. Part 5: You should see the created repository with your code in the list of your repositories. Slide 7 ----------- Part 1: To download this assignment to your computer, please create a new folder where you will be storing all your assessments from this course, typing the first three commands in our example in your terminal or command console. Part 2: Then clone the files into this new folder. Make sure you use the url of the repository that you obtained in the previous slide. Slide 8 ----------- Part 1: You have one more option and that is to clone your files directly in Visual Studio Code. First, navigate to Github.com and open your repository with this assignment. Part 2: Click on the green "Code" button. Part 3: Copy the URL of this repository. Part 4: Please watch this short tutorial and make sure you use the url of your repository not the demo url. Please pause this presentation to watch the video. Slide 9 ----------- Part 1: Once you download your files, please use "Open Folder" menu to open the downloaded folder. When you open page.tsx file, you should see the following result. Part 2: But what about all those red squiggly lines? Yup, those are all errors! But do not despair, these are easy to fix. The reason for so many errors is that we did not install the libraries that power this exercise. Let's fix that. Slide 10 ----------- Part 1: Again, you have two options. First, you can open a command line or terminal and in the project directory run command pnpm i. Part 2: The second option is to do this in Visual Studio Code. You can open the terminal by clicking on "View" in the top menu and then clicking "Terminal". You can also use a handy keyboard shortcut, ctrl + tilde. Then, in the VSCode terminal type pnpm i and hit enter. Slide 11 ----------- Part 1: If all went well, the red squiggly lines should have disappeared. Sometimes, it is worth re-starting Visual Studio Code after package install. Before going to the next section, make sure that all errors disappeared.