DEV Community

loading...
Play Button Pause Button

Learning Vue JS and building a website in less than 3 hours

Michelle Mannering
Developer Relations | Hackathon Queen | Community Manager
・3 min read

I learned how to program Vue JS and build an entire website in less than 3 hours... and I did it all live on my Twitch Channel with not much prior knowledge.

Have you ever been thrown a project and asked to just go for it? This is what happened to me last week. I was given a bunch of code and asked to make all the changes for the website. I recognised some of the code. I'm a little familiar with JavaScript, HMTL, and CSS. But there was a lot I still had no idea about.

The great thing about code files is you can tell what the language is by their extensions, in this case .vue... ummm, what is Vue? Pronounced "view", Vue is a front end JavaScript framework for websites. Well that explains why we're using it for a website. I figured I could go and make most of the changes based on languages I already know. But I wanted to understand more context, in this case, understand more about Vue.

So I asked my colleague Bdougie what Vue training to do. I had a few different options already on hand for learning Vue programming online. There's Free Code Camp, Coderacademy, Vue Mastery, and Udemy among others. Brian said right away "go for Vue Mastery, it's the best". I did and he's not wrong!

Vue Mastery

This great series of mostly free courses is amazing. I picked out the beginner course and it's very insightful. The guy providing the tutorials teaches in a great manner. He shows you what to do, and then explains on a technical level what's actually happening. There's lots of examples to go through and I love being able to build something real.

Alt Text

I was able to program an entire website in just a couple of hours from scratch. I recognised where the JavaScript was coming into play and the whole experience was very enjoyable. I'll definitely be finishing the Vue beginners course.

You can find all the code I built for the website over in my GitHub repo.

Live coding on Twitch

I'm one of those people who like to learn with others around me. Instead of sitting silent in front of a computer, I fire up my Twitch Channel and live stream my experiences learning code. So far I've done JavaScript, Python, Ruby, PHP, and C#. People love to jump in and watch. Some follow the tutorial with me, and others provide tips and tricks... or simply call out my spelling errors!

Alt Text

If you missed my session on Vue JS, you can watch the full recording. If you'd like to jump in on the next live session head on over to my Twitch Channel. Drop me a follow and enable notifications to join live. We do these type of coding streams twice a week. You'll occasionally find me over on the GitHub Twitch Channel. Follow there for chats with maintainers, sessions on open source, upcoming events, and heaps more. See you live!

Oh and whilst we built a merch store for this challenge, I don't plan on making this one live. But you can go and check out all my official merchandise on my Stream Elements Store.

Discussion (2)

Collapse
miriamtocino profile image
👩🏻‍💻✏️ Miriam Tocino

Amazing, Michelle!

You woke up something in me to jump and do some coding. And... 3 hours!!

Are you going to continue your Vue.js journey? Do you see a huge potential?

Collapse
mishmanners profile image
Michelle Mannering Author

Oh thank you so much! Yeah I am loving it. I will definitely continue. I mainly learned this to program up a website I need to finish but it's got such huge potential. And it's super fun!!! Glad I could inspire you ❤️