Lessons > Tutorial 8. Tutorial 8
Schedule
| Date | Session | Topic |
|---|---|---|
| Th, 5/28: 4-5PM | Tutorial with Anna | Setting up your own domain name |
| Fr, 5/29: 3-4PM | Tutorial with Sarah | Parallax & Animations |
| Fr, 5/29: 4-5PM | Tutorial with Sarah | Faking JSON Data w/Fetch |
Sessions
I. Custom Domain Names (Th, 4-5PM)
From Anna: Here’s a couple links to help you host your project on a custom domain! Again, it’s really easy to purchase a domain through GoDaddy or Google Domains, and it’s pretty cheap (usually around $12/year, automatically renewing until you cancel).
- https://medium.com/@hossainkhan/using-custom-domain-for-github-pages-86b303d3918a
- https://help.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site
I recommend following the first one since it’s a lot simpler/more straight forward, but the second one is more thorough incase you get stuck somewhere.
II. Animations (Fr, 3-4PM)
For the Animations tutorial, I was thinking of just showing you some options and talking through how you might approach incorporating some of these florishes into your website. First, let me show you a few links I found online:
Parallax
- https://github.com/dixonandmoe/rellax
- https://alexfox.dev/lax.js/
- https://github.com/electerious/basicScroll#demos
- https://bashooka.com/coding/parallax-animation-javascript-libraries-2019/
- https://chriscavs.github.io/rallax-demo/
- https://github.com/geosigno/simpleParallax.js
Other Animation Libraries and Tutorials
- AnimeJS
- Some interesting CSS Shorts on LinkedIn learning, which deconstruct various design techniques / florishes.
In order to access the LinkedIn content, please sign in with your NU account.
III. Custom Data + Templates (Fr, 4-5PM)
In order to “fake” a database interaction, you have to create one or more JSON files that your interact with using fetch. However, there is one security trick: when you’re testing on you local computer, you have to run a local server so that you don’t get a security error. To do this:
- Open your Terminal or commmand prompt
- Navigate to your project directory
- Run the built-in python server module (depending on whether Python 2 or 3 is installed on your machine):
- python2:
python -m SimpleHTTPServer 8000 - python3:
python -m http.server 8000
- python2:
After you’ve run this command, open your web browser and navigate to http://localhost:8000
When you’re done with this step, please download the exercise files.