Don’t Just Visit Websites: Build Them

By Matt Murray, Tech Integrator

Non-profit TechGirlz and TPS teamed up once again for its annual TechShop, a free workshop for middle school girls involving a trending, teachable concept in technology. This year’s edition focused on building a website using HTML/CSS. Led by Emily Supil, Business Intelligence Analyst at IBM and Girls Who Code Club Facilitator at TPS, the 16 girls in attendance fearlessly jumped into a rigorous study of the concept (short for Hypertext Markup Language and Cascading Style Sheets), considered the backbone of most websites.

Thirteen TPS fifth and sixth graders, along with a few students from Girard Academic Music Program, came together to work first in CodePen, a web-based, front-end developer playground that allows students instant access to editing pre-existing template webpages - a social environment that makes it fun and easy to make mistakes without feeling like one has broken the internet. The girls learned to edit headers, change font styles, create page breaks, and enumerate ordered and unordered lists. They also figured out how to use a source image as the banner picture for their proxy website. Additionally, the attendees utilized a color variation tool, called 0to255, to find their favorite color on the color spectrum to code the border and padding of their webpages within CSS.

Once the girls finished working in the virtual sandbox, they jumped into the Atom desktop app on their MacBooks, a text editor for compiling all the unique HTML and CSS lines of code the girls can now write from scratch for their first websites. In opening a .html file within Atom, the attendees were able to interact with this previously unfamiliar extension by testing themselves to find mistakes (or “bugs”) in another person’s .html file. Once the girls were able to complete the challenges - such as ensuring that alternate text displays when an image source is broken - they got their feet wet making their own sites with a helpful template. Bouncing back and forth between Atom and their web browser of choice (mostly, Google Chrome), the girls saw their webpages come to life with each new addition.

Many of the girls who attended were surprised by how quickly they learned how to change the traits of a webpage and found it fun to make webpages with their own fingerprints on them - neon blue fonts and funny cat photos included.