slug: creative-at-home
date: 07-Nov-2020
summary: A website that provides a roadmap for various fields in Programming and helps people learn to code for free.
techStack: Javascript, Sass
githubLink: https://github.com/varcode-project/creative-at-home
deployLink: https://varcode-project.github.io/creative-at-home
category: Team of 3
image: https://github.com/abdulrcs/abdulrahman.id/assets/54136956/eea40aea-06f4-4735-a7c0-b1caf10355b2

Overview

creative@home is a website that provides a free learning roadmap during the pandemic for 6 different specialized fields in tech, including:

• 🖥️ Computer Science
• ☁️ Web Development
• 📈 Data Scientist
• 📱 Mobile Development
• 👨‍💻 Competitive Programming
• 🎮 Game Development

Project Goals

As a self-taught programmer, I know there are tons of free resources for learning tech. However, not everyone stumbles upon this goldmine. A lot of people get scared off by the high cost of those fancy coding bootcamps.

Plus, with everyone stuck at home during the pandemic, it felt like the perfect time to help people use that extra time for something cool like picking up a new programming skill that can change someone's future!

Tech Stack

We used HTML, Javascript, and Sass to add another layer of efficiency to the styling process by enabling features like variables and mixins.

The main Javascript library we're using here is the Slide.js library to achieve a smooth presentation-like scrolling effect.

Features ✨

It grabs the attention right from the start with its typewriter effect animation that sets the tone for the interactive experience, the wording itself also plays a powerful role by asking "What if you could become a Software Engineer, Web Developer, Mobile Developer, etc" that aims to motivate the user to learn more about the free learning resources inside.

One of the standout features of creative@home is the optional voice narration. This accessibility feature provides the users who prefer learning by listening or just find it helpful to follow along with the audio.

To activate the voice narration, users can click on a charming SVG illustration of a person wearing headphones (I was so proud of this because I transformed the SVG file myself :D)

The homepage has an organized menu, that shows the different programming paths. It has 6 specialized fields. Each section of the menu has interesting visuals to complement the cards, we customized the SVG illustrations here by combining different SVGS into one.

The 6 different topics are :

Computer Science

Web Development

Data Science

Mobile Development

Competitive Programming

Game Development

Challenges

First up, this site has a whooping 50 pages in total.

Designing the entire content from scratch on Figma was a challenge, we made sure everything looked sharp and worked smoothly together. Those SVG Illustrations are also key in this website, without them, the site wouldn't have the personality it has, so we customized every single one of those by combining different SVG resources while also making sure the art style is consistent.

Sticking with HTML and no fancy JavaScript frameworks was another challenge. We have no way of making a component for the pages even though the structure is the same. We finalized everything in Figma first so we don't have to deal with different HTML structures between pages.

Learning and Takeaways

Because it's very design-heavy, I learned a lot about design principles here, most of the work done in this project is done within Figma.

I learned how colors interact with each other by applying Color Theory, this Color Calculator helped me a lot to achieve harmony between the color and illustrations.

Another thing I learned is the process of manipulating SVGS, using the available resources online, by combining and customizing them into something new without breaking the overall vibe.

Acknowledgements

• Alfian Dwi: Voice Narration & UI/UX
• M Rizqi Ardiansyah: UI/UX