Hello there!
For the past few months, I've been working on a school project for my social justice class.
Project - to share my passion for programming and web development with others, hopefully teaching them as well!
The site - diveintoht.ml
It's a webapp built in Vue with Firebase authentication, and it hosts a bunch of slides that guide a beginner to build their own resume website.
I started with the idea to host a IRL meetup with Canada Learning Code, but evidently, that's not feasible now, so I switched to a digital approach. This site covers most of what I was planning to teach in my meetup anyhow.
I started by reading Vue docs, and this course on Scotch.io really helped me understand how Vue works. Once I'd figured out how to use Vue through a <script> tag, I tried investigating how to use Vue's CLI and its SFC system. Here, the Vue docs were the most helpful. I highly recommend going through the introduction and most of the guide.
Props and events were next. Because I was intimidated by Vue's Router system, I tried to just use v-ifs in an attempt to switch between the landing, login, and slide pages. This was probably a structural mistake, but hey, it was my first Vue attempt. Passing props and events were a little difficult to understand, but StackOverflow was super helpful.
Initially, the slides ran off a sketchy SFC prop with an array with tonnes of objects inside. In my SFC, every array object was a v-for, and each possible object in a v-if. For example, there would be a check for a link or list object, which would then contain their own lists. Very annoying to write, and very spaghetti-coded.
So recently, I integrated Vue Showdown for my slides, and only included an array to make sure my timers would display properly, as Showdown didn't manage to include the custom SFCs properly. I don't really know why I decided to use Showdown, but I liked their ability to add default classes in output in an extension.
Throughout building this, I learned a lot:
- How to use Vue SFCs
- How to integrate Vue animations
- How Firebase and its Authentication worked
- How to create beginner content
- How to respond to feedback, and ask for feedback
- and kind of how to promote my products
I think this website is the exact objectification (? personification? I don't know how to put it) of the:
meme. I feel like it's not a big project either, but I guess it's my attempt to share with others. It's not a very good guide either, and I probably should have added more content
[ignore the deletes, I'm trying to avoid imposter syndrome 👀]
I realize that sharing this on a Dev website isn't likely to find much of my target demographic (youngish developers), but if you guys could provide feedback or share this site with anyone who wants to get started with HTML, CSS, and deployment or who's interested in coding - it would mean a lot!
Again, the link is diveintoht.ml - thank you for reading :)
Latest comments (8)
Well done! ❤️ It is an amazing project.
Thank you ❤️
This is great!
I teach web development at a Canadian high school, I could see myself using this as a start of semester refresher/crash course for my grade 11 students before we dive into intermediate JS topics and eventually Vue. Saving this so I remember in the Fall!
Thanks for considering!
I wish I had your course this last year - I'd definitely have signed up this year!
Hey there! I'm building a web app that helps people learn graph theory, as a school project, and my teammates struggled with learning HTML/CSS and the web in general. We tried to teach them in the short amount of time we had, but I feel like your website could be a nice place to renew their knowledge, so I'll definitely share it with them! Ps: I'll go through it myself too, and will come back when I have the time! Nice link btw 😄
Edit: so I've gone through your website and looks really nice! I've had a problem with going through the slides, was not working on my phone as of writing this, also I'd suggest using a library like prism.js for code highlighting 😄
Super cool class - thanks for considering sharing!
What seems to be the problem on mobile? Were the slides not rendering? [Also, are you on Android or iOS?]
I was on Android from Chrome, and the problem was that the slide numbers weren't showing, I think there was just not enough horizontal space. Weirdly enough typing any number didn't work, I could show you some more info if you want, just message me in here
Interesting, I tried it out and it seems to have been just a sizing thing.
Thanks for bringing it up!