Y10.11 Updating the website

Step 1 - Sign into Github Desktop

Step 2 - Open Visual Studio Code

Step 3 - How to see your offline Webpage

Step 4 - Editing your Website

Changing Images and GIFs

Adding Video

Adding you Games

Step 5 - Adding New Sections

Step 6 – Commit and Sync to GitHub

Your live website can take up to 10 minutes to update. Check it after finishing each new section to make sure everything looks right.

How to find your Github Website

Step 1 - Sign into Github Desktop

Open GitHub Desktop from the Start menu or taskbar.

If you're already signed in, you're good to go — skip to Step 2.

If you're not signed in, click Sign in to GitHub.com and use your GitHub username and password. This might be your school email, personal email, or both might work.

⚠️ Two-factor authentication (2FA): If you're asked for a code, check your email or authenticator app: it'll be a 6-digit number. Enter it when prompted.

Step 2 - Open Visual Studio Code

Open Visual Studio Code from the Start menu (search for "VS Code" if you can't find it).

Then open your website folder:

Click File > Open Folder
Navigate to your H: Drive
Find and open your MyYear10Website folder

Step 3 - How to see your offline Webpage

Before you start editing, open your site so you can see your changes as you go.

Press Windows + E to open File Explorer
Navigate to your H: Drive and open your MyYear10Website folder
Double-click index.html it will open in your browser

Every time you make a change in VS Code, save with Ctrl+S then press F5 in the browser to refresh and see your update.

Step 4 - Editing your Website

Changing Images and GIFs

Make sure you have an export as a JPG or PNG

use PNG if you have a transparent background

Press Windows + E and drag your image into the images folder inside your MyYear10Website folder
Change the link from "images/placeholder.png" to the file name of your image eg. "images/cool_dog.jpg"
Modify the alt tag to a brief description of image
Update the <h2> text to describe what you made

Before

<h2 class="topic-card-text">Placeholder image</h2>

</div>

After

<h2 class="topic-card-text">Cool Dog Picture</h2>

</div>

GIFs work exactly the same way! Just make sure your file ends in .gif — e.g. images/my_dance.gif

Adding Video

Make sure you have an export as a MP4

Press Windows + E and drag your video into the images folder inside your MyYear10Website folder
Find the card you want to update and replace the placeholder code with the video code below

</video>

<h2 class="topic-card-text">Your video description</h2>

</div>

only keep the mp4 or ogg line depending on what type of file your video is

Before

<h2 class="topic-card-text">Placeholder image</h2>

</div>

After

</video>

<h2 class="topic-card-text">Your video description</h2>

</div>

Adding you Games

Get your embed code from the Video Game Development page
Find the card you want to update and replace the placeholder code with your iframe code
Update the <h2> text to describe your game

Before

<h1>Image Editing</h1>

</div>

<h2 class="topic-card-text">Placeholder image</h2>

</div>

<h2 class="topic-card-text">Placeholder image</h2>

</div>

<h2 class="topic-card-text">Placeholder image</h2>

</div>

</section>

After

<h1>Video Game Design</h1>

</div>

<a href="https://wild-jackalope.itch.io/space-packages-and-mail-final">Space Packages and Mail (Final) by Wild Jackalope</a>

</iframe>

<h2> My game where you work as an intergalactic postoffice worker</h2>

</div>

</section>

Step 5 - Adding New Sections

When you want to add a new topic section, copy the template code below and paste it after the last </section> tag in your file.

You need to update two things:

The comments — change these to describe your new topic
The <h1> tag — change "Image Editing" to the name of your new topic

Everything else can stay the same until you're ready to add your content.

(template code with yellow highlighting as currently shown)

<h1>Image Editing</h1>

</div>

<h2 class="topic-card-text">Placeholder image</h2>

</div>

<h2 class="topic-card-text">Placeholder image</h2>

</div>

<h2 class="topic-card-text">Placeholder image</h2>

</div>

</section>

Step 6 – Commit and Sync to GitHub

This is how you save your work to the internet.

Click the Source Control icon in the left sidebar (it looks like a branch)
If you see a "Manage Unsafe Repositories" warning: click it and select your MyYear10Website from the list
If you see a "Staged Changes" prompt: click Stage All Changes (the + icon)
Type a meaningful message in the Message box describing what you changed — e.g. "Added my GIMP photo edit and pixel art"
Click Commit
Click Sync Changes
If a popup appears click OK

Your live website can take up to 10 minutes to update. Check it after finishing each new section to make sure everything looks right.

How to find your Github Website

Option 1:

Check Fortnightly Grades for Link

Option 2

Go to Github Settings > Pages and look for the link at the top of the page