Learn Vue, CSS Grid and Flexbox [10-part beginner tutorial]
What we will build together
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:
- 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:
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
- 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!
Table of contents
- Part 1: Perform simple addition
- Part 2: Choose from multiple operators
- Part 3: Refactor select menu to buttons
- Part 4: Add digits
- Part 5: Refactor unneeded input fields
- Part 6: Fix broken operators
- Part 7: Add remaining calculator buttons and functions
- Part 8: Fix bugs related to number-to-string coercion
- Part 9: Clean-up HTML and improve clarity of interface
- Part 10: Style calculator app with CSS Grid and Flexbox