Blog Post

Coding with the Women's Coding Collective: Hello_World...and messy code

Coding with the Women's Coding Collective: Hello_World...and messy code

This is the third post in my summer project to blog my progress as I move through the online HTML course I am taking through the Women's Coding Collective (WCC). In my pre-course post, I mentioned my motives, my sponsors, my initial likes & dislikes, and, in the open spirit of HASTAC's collaboratory model, I issued a call for the community to join me. In my second post, I outlined the course model, my opinion of the course program as a student in the course, and my instructor-centric admiration of the method and model of the WCC.

In this post, I speak of messy code, misplaced spaces, tools I'm finding indispensable, and the art of learning to write basic code.

Our first full week of challenges ended this week and we coded our first pages. Our first major challenge was a poety page project. We were assigned to write a poetry-inspired page that included lists, images, text, and links. Here's mine:

Yes, my code is messy, but I know that now. See below.


Messy Code

Code can be messy. Likewise the learning of code can be (and perhaps should be) messy as the learning of code requires exploratory tweaking and tinkering and failure and flops. Our instructors encourage the latter (wholeheartedly!) but rightly discourage the former. When writing, sharing, and publishing code, our instructors remind us, there are rather important benefits to cleaning up the mess.

My code for this first poetry page coding challenge was technically perfect but visually messy.  This is roughly the equivalent of saying I had correct and careful grammar but very sloppy penmenship. After submitting my first assignment, my savvy and nurturing instructor Elizabeth told me my code was "spot on" but could benefit from more consistent element alignment. The incredible thing about Elizabeth's response was that in came to me in the form of an email with a personalized gif embedded. Elizabeth created a gif of her mouse-motions actively cleaning my messy code! I cannot imagine a more effective instructive technique for an online course. Indeed, this incredibly innovative but intuitively simple (i.e. brilliant) pedagogical technique could be beneficial in all types of learning environments from online to hybrid to in-person. Wow!

(gif posted with permission from its creator, WCC instructor Elizabeth Arby)


The Art of Learning Code

The art of learning code is practice. Learning code requires deliberate and regular practice (repetition). Learning code IS a practice in the sense that it is an artistic authorial intervention much like an art practice or a meditative practice. Practice. Try. Make. Fail. Remake. Practice. Learning code can remind us to be innovative and experimental and brave in all of our learning ventures.


Misplaced Spaces

Proof that practice is crucial: Though this is technically a refresher course for me, as I mentioned in my first post, I still forgot that URLs can contain no spaces. I am in the habit of saving my files - including documents, images, and pdfs - using spaces in the file names. With hundreds of files saved multiply in multiple spaces on hard drives and in clouds, I find myself using full sentences as file names. This cannot be done in HTML files. I had forgotten this. This is not to be forgotten. My refresher course is proving more refreshing than I anticipated.


Tools to Code With

  1. Sublime Text text editor
  2. W3Schools Tryit Editor
  3. CodePen
  4. Google
  5. W3Schools
  6. Courses from the Women's Coding Collective: Indispensible in so many ways.
  7. Generous classmates! Generous classmates can save the day in more way than one:
    1. having classmates holds me accountable for completing my weekly assignments;
    2. having classmates inspires me to do my best (in the WCC course, we can all see how many course points we have all earned); 
    3. having a course space for classmate collaboration faciliates generosity and shared learning. We are already helping each other by answering classmate questions, sharing assignment results, and posting useful resources.

Our week two set of challenges opens tomorrow. Hello_World, here I come!

Ready to take your own course? Go here for a Coupon Code for $17 off a Women's Coding Collective course!: . The WCC wants to make it easy for you jump in and join me!





Resource to add from the always savvy Adeline Koh who shared this note this morning.

"Great resources on learning how to code by Girl Develop It Philly founder Yasmine Mustafa. cc Amanda Starling Gould"

Re-posted here with permission from Adeline.


Ready to take your own course? Go here for a Coupon Code for $17 off a Women's Coding Collective course!: . The WCC wants to make it easy for you jump in and join me! Go. Start. Code!


The GIF above shows some HTML code being manually edited for indentation, but there are much easier ways of accomplishing that. If you use an advanced text editor like Vim, that can be achieved with syntax-aware auto-indentation, which is mapped to the "=" key by default. To auto-indent your entire file, simply place your cursor at the top of the file, and type "=G".


Thanks, Jonathan! Great point.