This project came about when I was trying to apply for my driver's license, researching for college, exploring different types of checking accounts I could open as a teen, etc..., and I found all the resources in the internet to be overwhelming and exhausting. I also don't have a very long attention span. So I always wished there was a website for teenagers -- like a simplified guide on growing up. Where it tells you want you need to know without the fluff.

Then, after the opening ceremony, I thought of a problem that I could make a solution to, and the thought of making a "guide" website for teenagers/young adults popped up.

What it does

realWorld4Teens is aimed towards teens and young adult who are overwhelmed about the process of growing up. The website contains oversimplified, yet comprehensive guides on how to live in the real world as a adult. I, the creator, took into account the short attention span of countless teens across the globe (that includes me of course), and made sure the guides are oversimplified. We want you to get to the point, and that's what realWorld4Teens is.

How we built it

I used replit's IDE, and I powered through the 2 days with my Studio Ghibli playlists, 4 hours of sleep, a tub of chocolate ice cream, and of course, my saving grace, the discord server.

I worked independently. On the first day, I worked on my wireframes and creating all the necessary tags in the HTML file. On the second day, I focused on CSS and the design part of the website.

Challenges we ran into

One of the challenge that I ran into was my expectation versus time. When I was wireframing my website, I had elusive dreams of adding MagicScroll and cool animations, yet, when I actually started, I had realized I had to scrape off some of my plans because of time. I didn't have enough time integrate it.

Accomplishments that we're proud of

I'm particularly proud of my CSS. It's very messy, but it's pure vanilla CSS. I didn't use bootstrap or any libraries, and I'm excited to have written something from scratch. Though it might've been a wise decision to use a library for times sake, I just feel proud of being able create something.

What we learned

Now, that I've actually went underwent a pressure of a time limit. I now better understand how to efficiently use my time for projects. I'm not am expert at time management, but in the future (and future hackathons), I know how to take advantage of my time to produce code within the certain time frame.

Some technical things I learned: I learned how to add a search engine. I mean not a functioning one, but I still learnt it! I also learned a little bit of backend with PHP and mySQL for the comment section (I didn't implement it to this project maybe in the future). And a bit of MagicScroll. You can see in my script tags I added some MagicScroll cdn, along with GSAP. Unfortunately, I wasn't able to finish it in time and implement it.

What's next for realWorld4Teens [tecHacks]

I plan to build onto this project even after this hackathon. I'll probably use VS Code instead of replit because I prefer it better. Then, I'll get the search bar, the final animations/design, some backend code, and the website running on different screen sizes. Then, I can officially start adding content. There's many different ways I can build onto this! That's the most exciting part for me.

Built With

Share this project: