diveintoht.ml - a beginner's resource for HTML, CSS, and more!

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 :)