The internet blew my mind as a kid. At the touch of my fingers, I had access to any game, concept, or video that I wanted. I could spend hours sending messages to friends, or play chess against a CPU, or read free short stories. Being bored was no longer an option, because there’d always be another website to check out.

Even more exciting than just browsing the internet was learning how to build my own websites from scratch and design webpages. Learning how to develop websites was a tough learning process for me and is one that has come to define my interests and passions. Today, I teach website development through courses at Berkeley and work Software Engineering jobs, where I get to use technology that I have been exposed to for the past 10 years.

It didn’t all come at once though. It took years of slowly progressing through skills in order to reach the point I have today: from absolute beginner to now teaching others.

Learning

It started off in the summer before 6th grade (entering middle school) when I was browsing the internet to look for tutorials on Photoshop. I stumbled upon one for website design and spent several hours giving it a try.

A friend of mine, named Matthew, had been telling me about an idea he wanted to build: a website for our friends to upload their schedules and share it with one another. Hence, I decided I’d try designing what the website would look like and created the image below.

Beautiful, right? I was just waiting for Google to hire me.

My approach to learning website development over time strongly associates with the concept of the zone of proximal development. At first, I knew how to create website mockups, but not write the code to make a website look like a mockup. Even past that, I didn’t understand how to take code and actually host it on the internet. Some of these concepts laid within my ZPD, but others were outside of it altogether.

This is the same idea as if a student is having a hard time working on a math problem, watching the teacher finish it might enable the child to “grasp the solution in an instant.” However, if the teacher were then to move on to “solve a problem in higher mathematics, the child would not be able to understand the solution no matter how many times she imitated it”. (11, Vygotsky).

In my case, after understanding how to design a web page, the next logical progression would be to learn how to code my designs together (just the visual look of the page, without any functionality). However, if I tried to then grasp how the file would exist on the internet, how data would be passed around the website, and how to acquire a domain for the website, it would have been impossible for me.

The little steps were absolutely necessary in being able to approach the learning one step at a time. As I matured and learned more about internet technologies, my mind could learn and wrap around how to write code and extend my capabilities.

How the app looked 2 years later

Teaching

Fast forward to my 2nd year of high school, I was working with both front-end (how information is displayed) and back-end (functionality, storing data) website development. I was fascinated by how interactive websites could be. It forced me to pick up bits and pieces from the internet while also learning with my friends building example projects. In every website or app I built, I was introduced to new challenges that forced me to process best design practices and think about the end user. Take for example, this color picker below (it’s interactive!).


In order to develop it, first I have to think about the design: how will the user interact with it? What’s the most intuitive way to show the current color? Once the design is more clear, how do I build sliders? How should the color values be stored and updated in real time? Learning web dev forced me to not just think about questions like this, but also develop communication skills when working with others on projects.

That year, I decided to start a website development club at my high school.

As someone who learned in a scrappy way off internet tutorials, I had a hard time crafting my own lesson plans. It forced me to re-evaluate what I actually understood vs didn’t, and overall challenged me to grow more than ever with my website development skills. When building the club website, I put in cool interactive elements like this:

You can try this out yourself at this website.

Ultimately, my high school club was mildly successful. We operated for 3 years and taught over 100 students the basics of website development.

I didn’t want my teaching journey to end there, and decided that I’d start a summer camp to teach unique skills like website development and graphic design to low-income students. We focused on spreading love for topics not taught under “traditional” education.

We didn’t just teach static, one-size-fits-all courses at this camp though - each one ended with a personal project that served as a takeaway from the content that also tied to the student’s interests.

This ties back to the concept that we read about from author Ladson-Billing, who talked about how tying in culture to education is crucial towards getting students to accept their schooling and further their development. She emphasizes this in talking about teacher Ann Lewis, who when teaching her male-dominant classroom, “challenged the boys to demonstrate academic power by drawing on issues and ideas they found meaningful” (160, Ladson-Billing). Rather than antagonizing students who were causing disruptions, she empowered them to modify the education to their interests.

Like the boys in the school Ladson-Billing studied, we used similar techniques with our students in order to get them interested in what they were learning. The personal projects were our way to empower students to make use of the knowledge they were learning. We “[valued] their skills and abilities and [channeled] them in academically important ways” (160, Ladson-Billing).

So what did the students at the camp create?

In Graphic Design, a boy with no art background who played basketball rebranded his favorite team’s logo. In WebDev, a girl obsessed with musicals made a thorough Hamilton fan website. Another in Public Speaking presented poetry she had written in the Writing course.

My personal favorite was a student from our CompSci course. We always caught him playing video games during presentations, so we struck a deal: “build your own game and play it as much as you want”.

No joke, he built a semi-functioning version of Hangman in two days. Best part is after the camp, his mom reached out thanking us: he was begging her to sign him up for game design courses.

Play

At the end of the day, website development has always felt like more fun than work. That’s been important for me: it never felt tiring to continue expanding my skill set or build a new website. The thrill of seeing designs and elements come together is what kept me going for so many years and is why I’m still passionate about it.

One project that took me over a month to build was my own personal portfolio website! I started off with sketches, moved back and forth between design and development several times, and finally purchased a domain. Figuring out the animations was hard, and required me to not only learn about animation in Javascript, but also use my knowledge of math to calculate frame rates for moving objects.

My personal website is linked here.

This connects to the concept of play in learning and education by Franco. As written in the paper, “Play-based activities enable children both to learn and demonstrate their knowledge and understandings of the world around them” (5, Franco). By engaging through activities that stimulate students, research has shown that the act playing “[brings] their literacy and numeracy [understanding] to solve problems of interest to them.” (22, Franco)

As Franco suggested, using knowledge from my own schooling, I was able to apply relevant math skills I’ve developed over years and apply them in a way that I see best fit for my website.

In order to build what I had envisioned, I had to use very basic concepts of calculus to figure out how to animate the background of shapes. If you slowed down the gif above, you would see that it’s several images of shapes that are stitched together. I designed functions that would move each shape based on the speed it was going. This meant I had to represent not just the x and y positions, but also the change in their positions.

Despite looking painful, it was amazingly fun and gratifying to see this animation work at the end of the day. I never thought I’d have fun thinking about how to apply math to my code, yet once I got started it made a lot of sense to apply this knowledge from school into play. It didn’t feel like work at all and I learned a lot from the experience.



All things considered, website development has been a major part of my life. From my major, to side hobbies, to future career, it’s shaped me in ways I could have never imagined. I’m excited to continue growing and applying new ideas to the websites and apps I build. In the early days it forced me to take learnings from all over the internet, and now it’s letting me learn in an interdisciplinary way.

Sources

Ladson-Billings, Gloria. “But That’s Just Good Teaching! The Case for Culturally Relevant Pedagogy.” Theory Into Practice, vol. 34, no. 3, 1995, pp. 159–165. JSTOR, www.jstor.org/stable/1476635. Accessed 29 Mar. 2020.

Franco, Janelle, et al. “‘Castillo Blueprint’: How Young Children in Multilingual Contexts Demonstrate and Extend Literacy and Numeracy Practices in Play.” Journal of Early Childhood Literacy, Apr. 2019, doi:10.1177/1468798419841430.

Vygotsky, Lev S. “Mind and Society.” Harvard University Press (1930): 1–15. Print.