I am blessed and cursed with the “ordinary” syndrome.

I’m not extraordinarily skilled, nor am I extraordinarily dull.

I am rather quite average.

I can learn just enough beginner’s info to any language to converse with babies, and then at a certain point, I struggle a lot to progress.

This analogy spans to my physical health. I was never banned from drinking soda. I had a diet of daily rice white, which really isn’t great. There’s actually quite a lot of sugar in white rice, but I had decent metabolism.

As I started to age, this blessing turned into a curse. Around my late twenties, my knees started getting inflamed from everyday activity. While I wasn’t overly overweight, my doctor explained I didn’t have enough muscles to support my knees.

It became crucial for me to lose weight, build up muscle and figure a work out routine - to merely hold up my body and stop my knees from swelling up like balloons.

How does this relate to learning coding?

Doing things outside of our comfort zone can be uncomfortable, just like working out after many years of inactivity. Ultimately, you know it’ll be helpful, so you gotta push through it to see it’s rewards.

The Lazy Girl Gym Approach - a 5 step plan to get started:

Taking the first step into learning something outside of my comfort zone like coding, reminds me a lot about the journey of working out, and integrating this into my life.

1. The First Step - I started small at first - short yoga videos, doing them sporadically based on my schedule.

2. The Support Beam - I attended irregular community group workouts. I enjoyed working out with others, so I decided to kick it up a notch by joining Orange Theory.

3. Building Muscle - With this, I also introduced negative consequences for not sticking through with a plan. Orange Theory has a monthly membership and would fine you for missed classes. I had to push through my own laziness or be fined.

4. Tracking My Effort - Orange Theory required members to purchase a heart monitor to track our efforts. Being able to quantify my efforts helped me understand if I was making effort - and to what degree. The cherry on top - learning new exercise forms from a certified trainer helped me learn what I could do at a gym alone.

5. Maintaining Consistency - Finally as I built up enough skills and exercise routines, I started going to the gym more regularly. I discovered the “lazy girl gym” routine aka “12-3-30” workout. This consists of using the treadmill at 12% incline, walking at 3 miles per hour for 30 minutes. Coupled with my heart monitor, I could witness my heart rate incline and my time getting better at getting to 3 miles.

This was the turning point for me - with enough foundational skills and some assessment of progress, I was able to optimize and make my gym routines scale and challenge me.

Apply the Lazy Girl Gym Method to Learning Javascript

This newsletter was intended to lay a foundation of going from ordinary to extraordinary. Here’s how I applied this lazy girl gym method and ended up here:

1. The First Step - I started saving videos and resources related to coding. I am a professional procrastinator. I’m really good at collecting resources and “inspo” links. 🤣

2. The Support Beam - I started conversing with developers and interviewing design engineers. I asked for help in how to get started. I wanted to learn from real people with real experiences.

3. Building Muscle - I didn’t actively invoke some negative consequence, but I thought really hard about what I had to sacrifice to make time for learning. What was the trade-off in my personal and professional life?

4. Tracking My Effort - I began taking courses and would set mini weekly goals for myself.

5. Maintaining Consistency - I started setting daily goals with the Codedex 30 Nites of Code challenge. Finally, I started this newsletter to keep me motivated to share my learnings with you all!

Moving Beyond Consistency and Past the Plateau

Even though I gained some consistency, I was aware that it’s easy to get stuck here. I remember spending way too long in the Lazy Gym Girlie phase. This is like doing Duolingo for years and still not being able to order dinner in the language you’re trying to learn.

So how does one move past consistency? It requires knowing yourself, what your limits are, and pushing yourself just a bit past it each time. With working out, when you get to the point where you’re like “damn I can’t do any burpees, you do 5 more.”

Understanding different learning styles and finding your own

I spent a little bit of time studying different learning approaches and I decided to try out the Honey and Mumford Model.

Honey and Mumford identified four distinct learning styles people take when learning new information:

• Activist: Learners who learn by doing and prefer hands-on experiences.

• Reflector: Learners who learn by observing and reflecting on experiences.

• Theorist: Learners who prefer to understand the theory behind actions and ideas.

• Pragmatist: Learners who want to see how to put learning into practice in real-world situations.

These learning styles feed onto each other in a cycle, and there are strengths and drawbacks associated with each one. Honey and Mumford theorized all people go through these phases and the learner comes to prefer and rely on one or two learning styles most of the time.

I took the quiz and found I was primarily a reflector and subsequently a theorist, followed by a pragmatist and lastly an activist. I found this pretty funny as Sprintfolio’s main motto is to learn by doing – but it made sense for my coding journey.

Honey and Mumford said these learning styles exist on a continuum and that people move through this continuum over time. Interestingly enough, this matches’s with buildspace’s iterative loop framework that Farza discussed in wk3.

I believe the journey across the learning continuum will look like this for me:

• Reviewing: I go through practices, analyzing and evaluating my experiences, picking out key insights, and considering the implications.

• Concluding: I draw conclusions and extract principles from my learnings.

• Planning: I will use my knowledge and insights by building something.

• Experiencing: When I introduce real users to whatever I build, I will have to adapt and learn to support the users.

Like I said earlier, if you only focus on consistency, you could be stuck in one phase. Doing this exercise showed me that I could stick to being comfortable in the reviewing and concluding stages, but if I’m not building anything, I will be deprived of the lessons learned from seeing my creation in the real world.

Alright - enough reflecting and theorizing, it’s time for me to share some pragmatic and practical information about HTML/CSS/JS!!

Breaking It Down to the Basic Pixel

I’m going to compare these web technologies to the elements of an RPG character.

HTML: The Basic Character

HTML (HyperText Markup Language) was created by Tim Berners-Lee in 1990. It was the first and is still the core language of the World Wide Web, designed to structure content on the internet.

HTML is like the basic character in an RPG. It provides the structure and content of the web page, just like the character’s base stats and attributes define their core existence. Without HTML, there would be no foundation to build upon.

CSS: The Character's Accessories and Appearance

CSS (Cascading Style Sheets) was developed by Håkon Wium Lie and Bert Bos in 1996 to separate content from design, allowing web developers to style their pages without altering the HTML structure.

CSS is like the character's accessories and appearance. It defines how the character looks—what they're wearing, their hairstyle, the color of their armor, etc. CSS brings style and visual appeal to the basic structure provided by HTML. This improved the efficiency, consistency and capabilities of web development.

JavaScript: The Skills and Abilities the Character Acquires

JavaScript was created by Brendan Eich in just 10 days in 1995 while he was working at Netscape Communications Corporation. It was initially called Mocha, then LiveScript, and finally JavaScript.

JavaScript is like the skills and abilities the character acquires through playing the game. It adds interactivity and dynamic behavior to the character, enabling them to perform actions, cast spells, or react to the environment. JavaScript brings life and functionality to the static HTML structure and styled CSS appearance. It’s sort of like the skills and functionality your RPG character picks up and those cool sprites that happen when you’re chopping down the villains.

How They Work Together

Just like in an RPG, where a well-rounded character needs a solid foundation, some dope accessories drip, and useful skills, a well-rounded web page requires the combination of HTML, CSS, and JavaScript.

1. HTML provides the structure, just like the basic character.

2. CSS adds style and appearance, just like the character's accessories and outfit.

3. JavaScript introduces interactivity and functionality, just like the character's skills and abilities.

Voila! These technologies create a complete and engaging web experience, just like the different elements make a compelling RPG character.

🍬 Goodbye Goodies:

How to Learn Stuff Quickly - Josh Comeau explains the importance of balancing guided and unguided learning to avoid tutorial hell and become an effective learner. A good combo read with this newsletter!

100devs - 100% free training program to learn how to code with live instruction with a thriving community. I’ve never done this program, but I know someone who has and really enjoyed it. They also offer a way to earn while you learn by building for real clients.

Ui.land - The Digital Library for Designers and Engineers: a super cool collection of interviews of designers, engineers, founders and educators working at neat places like Vercel and Compound.

———
This article was originally published in Kai's Howdy World, my monthly newsletter where I share my journey as a product designer learning to code. If you're a designer who's coding-curious or looking to level up your technical skills, subscribe to the newsletter to join our growing community!