Welcome to NUS SOC Freshman starter kit codebase for managing nuscomputingfreshmankit.surge.sh which is coded in HTML, CSS, Jquery and Javascript.
-
To start off this project, first download the zip file of the entire repo into your computer (by clicking the green download code icon shown below). Store the folder in a desired location where you'll access it often.
-
Extract the zip and open the folder using your preferred editor. I personally use Visual Code. Any editor works fine as long as it supports HTML, CSS and Javascript.
-
Next, ensure your computer has git built into your computer. If not visit this link and download it, https://git-scm.com/downloads
Learn more ahout Git in this link for beginners.
This ensure you can use git and perform pull, push and commit changes to the Github Repository
-
Connect the entire downloaded folder to the Github Repo. Inside your preferred editor, open Git Bash Terminal (e.g. shown below) You should not have any (main) blue colour wording yet
-
Type in
git init. Ensure your bash terminal is in the right folder, it should be in the main directory. Eg. for mine is /code/nuscomputingfreshman folder where the index.html, 404.html, favicon.ico files and images and css folder can be found.
- this is to intialize the git command into the folder.
- initialising in the wrong folder can lead to the git not working properly :)
-
Next, enter
git remote add origin https://github.com/jeremycte/nuscomputingfreshmankit.git -
Next, enter
git branch -M main -
This time, you should have the (main) blue colour logo shown
-
You have completed linking the repo to your code editor.
-
Some commands you can try include
git status,git branchwhich allows you to view the status of unsynced files from the repo and the branch allows you to view all the branches that exists in the repo.git pullallows you to pull the latest code from the repo to your computer everytime someone edits and publishes his/her code to the repository.
Below is an example after typing git branch
Each folder is organised to keep the workspace clean and simple to use. Every file is organised into folders accordingly and only the html, favicon and readme files are located in the root (main directory).
js - Javascript
- Where all the javascript file are located
css - Cascading Style Sheet
- umm, I think the word is quite straightforward LMAO
images
- where all image assests can be found
favicon
- where all the favicon images can be found
If you ever need to create a new html page (I think it's unlikely), please ensure you duplicate the skeleton-file.html code to start off coding :)
Ask @jeremycte for more infomation on this :)
For publishing the updated changes, please ask help from Jeremy to upload the changes.
Jeremy will have to download your changes from Github via Git and review it before manually publishing the updated changes live on site :D
The site is hosted on Surge.sh a free front-end dev platform :)
Please open styles.html to see what are the available styles that you can use for coding the website 😃 This ensure consistency and also utilise the existing code that can help you code this site to be even better!
There's an error page dedicated to ensure that any incorrect link or subdirectory that do not exists will immediately direct the user to this error page shown below.
I've used the following resources as listed.
Fonts:
- Lora Font (https://fonts.google.com/specimen/Lora)
- Gothic A1 Font (https://fonts.google.com/specimen/Gothic+A1)
- Marcellus Font (https://fonts.google.com/specimen/Marcellus)
Icons:
- Boxicons (https://boxicons.com/)
- TeenyIcons (https://teenyicons.com/)
Stock Photos and Graphics:
- Unsplash.com (https://unsplash.com/)
Javascript Files:
- Swiper (https://swiperjs.com/)
- MoveTo.js (https://github.com/hsnaydd/moveTo)
- Prism.js (https://prismjs.com/)