Learn Vue, CSS Grid and Flexbox [10-part beginner tutorial]

2 min readApr 15, 2018

What we will build together

Build an iOS-styled calculator using HTML, CSS Grid and Flexbox, and VueJS

Code in your browser with Codepen

Your new ‘pen’ is Untitled. Click the ‘pencil’ icon to give it a more descriptive name, like ‘iOS Calculator with VueJS’.

You should see four sections:

HTML
CSS
JS [Click the small white gear icon]
Giant white area

After clicking the gear icon in the JS panel, you’ll see a pop-up box for ‘Pen Settings’ with the ‘JS’ tab active.

Look in the bottom left corner for a ‘Quick add’ dropdown list. One of the options should be ‘Vue’. Select that.

If Vue is not in the list, you can copy and paste the full URL below into the top-most of two boxes directly above ‘Quick add’ to accomplish the same goal:
https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js

Click the big green ‘Save and Close’ button.

And with that, you’re ready to start building your first Vue application.

This is a 10-part series

Each part is broken into bite-sized steps
Each step has you write or edit a single line (or very few lines) of HTML, JavaScript or CSS
This tutorial is written in a way that discourages copy-pasting code*

*I learn faster and retain more knowledge when forced to re-write the code I see. I also think it is important to understand and be able to speak aloud the technical details of what you’re doing as you write code. For this reason, the instructions will require you to understand what you’re reading, but as long as you follow them, you will write the code exactly as intended.

Ready? Let’s begin!

Continue to Part 1: Perform simple addition