abdulrahman.id
abdulrahman.id copied to clipboard
abdulrcs
creative@home
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
