Inspiring high school students with HTML and CSS

17 February 2020

Nearly a year ago I reached out to my high school across the state about coming in and giving a talk about careers in tech. Due to conflicting schedules I had to reschedule a few times and after a few crazy months of travel to end my 2019, I finally got the trip on the calendar and headed over in January.

Being visible as a woman in tech #

A few people wondered why I wanted to go talk to a bunch of high schoolers about what I do. For me, it is incredibly important to show up as a woman and talk about my path into tech, especially for any of the girls in the room. I felt it was important to let them know there isn't one singular path into tech and that a computer science degree isn't always necessary depending on what they want to do.

I was so lost as a high school student when it came to figuring out what I wanted to do. I stumbled into a graphic design career because it was clear I wasn't cut out for a fashion design career. I'm so incredibly thankful I didn't go down that fashion design path. Who knows what would have happened but I'm so happy I'm doing what I do today. Rejection is redirection.

I remember we had a few career fairs and I never saw anyone that I could relate to. It was one of the high school art teachers who was quirky but stylish who helped me figure out my way into a design degree and I'm so incredibly grateful for her.

I wanted to be that for the students, but especially for the girls. Boys have so many visible role models, especially in tech.

Rediscovering magic in HTML & CSS #

The talk I gave focused on 4 different career paths at Microsoft that I have experience with: Program Management, Software Engineer, UX Engineer and Developer Advocate, and then I showed a list of about 30 other titles for jobs at Microsoft to highlight just how diverse roles are. There's some cool stuff to work on at Microsoft!

I got ready to show some cool code examples of things I'd found on the internet, but the students asked to see some of my code. I was somewhat taken aback and decided to pull up my Codepen and showed this bit of HTML and CSS I had been working on to try and figure out how :nth-child(Xn+X) works:

I started changing the numbers around in real-time and the shapes started to readjust their rotation. There was excited murmuring from the class.

I decided to pull up my website and said out loud that I could show them my website and this is perhaps the highlight of the entire class for me.

"Your website? You have a website?" Someone said.

And I was somewhat baffled by the question, "Yes, it's my website." Not quite realizing they didn't know you could buy a URL and code up a website. I'd clearly forgotten what it was like to be their age.

So I pulled up my website and asked if any of them knew what the browser developer tools were and no one did. So I explained how on any website they visit, they could right click, find "Inspect" and click on that and view the code for a website.

I opened the DevTools on my site and there was an audible gasp from the class and excited murmuring.

"That's your code?" A student asked.
"Yes, that's all my code!"
"You wrote all of that?!"
"Yes, it's my website."

And the class kind of exploded and starting talking amongst themselves. I was floored and my perspective readjusted.

When I code, it's usually in HTML and CSS, and I suppose there's a part of me that feels like that isn't special because some tech bros decide to be vocal and loud about HTML and CSS not being special nearly everyday (it is special and tech bros can shut up.)

And the response from that class of high school students delighted me and grounded me in a way I haven't experienced before. What I view as a simple code was absolute magic to them. And for all of us who code, I think we forget it is magic. Computational magic but still magic. HTML and CSS are magic.

I wasn't expecting a class of high school students to be inspired or bedazzled by my portfolio website, which is nothing fancy. There's no JavaScript. There's a few CSS Animations. But it delivers information quickly and effectively. It serves its purpose.

There's a lesson about progressive enhancement and even performance in here somewhere but that's not the point of this post.

How do we inspire a new generation of builders for the web? #

There's an entirely new generation of teenagers out there starting to explore the possibility of working on the web. I was able to dabble in HTML and CSS on LiveJournal and MySpace to tweak layouts and colors and customize things to represent me. Today, I can't customize Facebook or Twitter or Instagram with code. Platforms are much more closed.

There are a million blogging platforms with customization options ranging from closed to complete control. Is there a middle ground? Is there somewhere on the web that offers an experience like I had with MySpace and LiveJournal, that others had with Neopets?

I'm not even sure. It's hard to put myself back in the shoes of a 14 or 15 year old.

What I do know is that I would be much more intimidated today if I were that age trying to get into the web. With the amount of knowledge and access at my fingertips, I would be discouraged if I saw all the negative comments about HTML and CSS not being useful.

HTML and CSS are the foundation for the web. Even in it's most plain form without CSS, HTML can deliver information to those with internet access across the planet. That is powerful and we in our tech bubble should try our best to not forget that.