Showcase website for the UTS Animal Logic Academy 2023 cohort.
- Install Jekyll. Use this guide for Windows.
- Open a terminal and navigate to the base of this repository.
- Type
bundle install. - Type
bundle exec jekyll serve. - Open the URL in your browser, usually http://127.0.0.1:4000.
This website uses a couple of libraries to make things easier. Try to use them where you can:
Bootstrap has a bunch of CSS classes which adjust for mobile and make styling easier.
For example it's good for margins and padding:
<!-- Bootstrap version -->
<div class="mb-3">Hello</div>
<!-- Regular version -->
<div style="margin-bottom: 1rem">Hello</div>A large pack of icons used for the navigation bar.
A map library used on the studio map page.
A couple of global variables like pages for the navigation bar are in _config.yml
Try to use Bootstrap classes to avoid manual styling when possible.
I mainly used inline CSS for custom styling, with a few general styles in style.scss.
The base style for fonts and colours is base.scss.
Most pages use inline JavaScript, so check the _pages folder.
Pages are located in the _pages folder.
Pages use Liquid syntax, which adds helpers like for loops and variables on top of HTML.
Jekyll doesn't have React-style components, but it lets you reuse HTML with includes.
Includes are located in the _includes folder.
This is good for elements shared between pages, like the navigation bar.
Images are located in the assets folder, organized by page.
To make the website load faster on mobile, make sure to compress images. I recommend .webp, which can be exported from Photopea.
Keep the original images in hires subfolders in case they're needed later.