Personal Blog
Learn javascript and simple animation building a background with flying object.
1. Setting Up Tools ⚙️
In the beginning of the course, we focused on preparing our environment.
- We created a GitHub account so we could manage and store code online.
- We installed Homebrew, which is a package manager that makes it easy to install and update tools on macOS.
- We set up a Python virtual environment (venv) to keep our projects organized and avoid conflicts between libraries.
- We installed and learned how to use Visual Studio Code (VS Code) as our main code editor.
This setup step was important because it gave us the foundation to code, save our work, and collaborate.
2. GitHub and Repositories 🐙
Once our tools were ready, we started working with GitHub.
- We pulled (
git pull
) the student repository, which is where we keep our personal work. - We also pulled the pages repository, which is used to publish and display web content.
- We practiced basic Git commands like
git pull
,git add
,git commit
, andgit push
.
This introduced us to version control — the ability to track changes, collaborate with others, and keep backups of our work.
3. Creating Our About Page 📝
One of our first customization tasks was making an About page in our student repository.
- We structured it with sections such as:
- 🌍 As a Conversation Starter (places we have lived)
- 🧑🦱 Journey through Life (schools and experiences)
- 👨👩👧 Family (introducing family members)
- We used emoji, icons, and cards to make the page more fun and visually appealing.
- The content wasn’t just plain text — it was organized into categories, with images (like flags) and labels.
- At the bottom, we even had a comment box powered by GitHub, which showed how our About page could be interactive.
This project showed us how personal websites can mix information, design, and interactivity to express who we are. It was more than just text — it felt like our first step toward real web development.
4. Learning Jupyter Notebooks 📒
We learned how to use Jupyter Notebooks for coding and documentation.
- Jupyter combines Markdown (text) and Python code in one document.
- This is perfect for making blog posts, tutorials, and reports.
- We tested it by writing small Python programs and mixing them with explanations.
Notebooks are a powerful way to share both code and ideas in a clean format.
5. DOM Jokes 😆
We also played with the idea of the Document Object Model (DOM) using jokes.
- The DOM represents how websites are structured with elements like paragraphs, images, and headings.
- By experimenting with jokes, we got a fun introduction to how code interacts with a webpage.
- This made the concept of the DOM less abstract and more interactive.
It showed us that programming can be both useful and entertaining.
6. Customizing Themes 🎨
We explored how to customize our GitHub Pages websites.
- We switched to the Cayman theme, which made our site look professional.
- Then, we learned how to change backgrounds, giving us creative control over the look and feel.
This part connected coding to design and showed us how technical work can overlap with creativity.