1 comment

Intro to HTML/CSS for Girl Develop It South Jersey

Girl Develop It South Jersey

Credit: Pamela Bey/Berly Laycox

A few weekends ago, I taught my first Girl Develop It class for the South Jersey chapter, over the bridge in Haddonfield, NJ. It was the 101 class — a basic intro to HTML & CSS. The class was small, with only 9 students, so it felt really low pressure and conversational.

Throughout the class, the students asked excellent questions about tutorials, resources, and where to go from here. I usually answered by listing off several links, with promises to compile a list of resources in the form of blog posts. For a long time, I’ve had grand plans to create a “Resources” section of this site, with sections on everything from my favorite books on writing to web development tutorials and freelancing resources. I quickly realized there’d be no way for me to churn out something so prolific by the time these women needed me to get them a list of resources, so I did my best to remember everything I’d mentioned during the weekend and sent out the list as a quick email.

So, I suppose the lesson in this is that it’s better to just do the thing, rather than sitting around planning for the day when you have time to make the grander version. I thought the list might be helpful for others who are just starting out and looking for learning resources, so here it is.


Helpful Articles/Content/Books:

  • CSS Tricks — Tons of CSS articles, blog posts, and tutorials
  • A List Apart — A blog “for people who make websites”
  • A Book Apart — Publishers of HTML5 for Web Designers, CSS3 for Web Designers, and lots of other books you’ll find useful down the road
  • Skillcrush — A lot of their content is advertising for their paid classes, but they have lots of good posts about breaking into the industry, finding work, and acing your first interview
  • HTML and CSS: Design and Build Websites by Jon Duckett — A well-designed and nicely laid out intro to the building blocks of the web
  • JavaScript and JQuery: Interactive Front-End Web Development by Jon Duckett — When you have a handle on HTML & CSS, this is the next step. Like his other book, this is really nicely designed and easy to understand.

Other Resources (stock photos, lorem ipsum, etc):

  • Death to the Stock Photo — They’ll email you excellent stock photos every month or so
  • Unsplash — More really beautiful free stock photos
  • Meet the Ipsums — All the filler text you could ever want
  • CodePen — A place to share your code, get feedback, and learn from others

If you have favorite learning resources you’d like to share, I’d love to hear about them in the comments!


A Girl’s Best Friend is Her Chrome Extensions

Chrome Extensions to make life easierIf you’re like me (and most people), you’re into ways to make life easier. These Chrome extensions have individually and collectively improved the quality of my life significantly, and I’ve been recommending them to people in Girl Develop It classes, so I thought it’d be good to compile them all here. Without further ado:

Pocket — I used to scroll through Twitter and email tweets to myself if I didn’t have time to read the fascinating content they linked to. This did not lead to a stress-free inbox. Enter Pocket. Now when I find something I want to read later, I just save it to my Pocket via the Chrome Extension or through Twitter. I like to save articles to read during flights or while waiting for appointments.

WhatFont — Ever fall in love with a font but not know what it is? No more! WhatFont tells you what font (duh) a site uses, along with font-size, line-height, color, and other such useful CSS values.

Eyedropper | Colorpicker — I used to wish that there was a Photoshop eyedropper tool for the browser. There is! Of the two, I prefer Eyedropper. Colorpicker is a little too robust for my needs. Both provide hex codes and rgb values for colors on a website.

Feedly — I recommended Feedly to everyone who was traumatized by the death of Google Reader. I never liked the Google Reader interface, so I’ve used Feedly instead since 2009. I enjoy categorizing all the feeds I read regularly, and I still like the interface better than anything else I’ve seen.

WebPage Screenshot — I’d been trying to figure out how to get full-page screenshots of projects I’ve worked on to use in my portfolio. I’m not sure how I found this one — I probably just got frustrated one day and started searching — but it is really handy. It’s also integrated with Google Drive and Dropbox, if that’s your jam.

Dayboard — I installed Dayboard literally yesterday, and its high level of awesome is what inspired this entire post. Credit goes to Roz Duffy for sharing this one. I routinely have multiple windows with multiple tabs open, and it is far too easy to get distracted and forget what I’m doing when I’m working online. Dayboard doesn’t let that happen. Every day, it asks you what five things you want to accomplish. Every time you open a new tab, you’re faced with that list of five things. It’s constantly bringing me back to what I should be focusing on.

Are there any I’ve missed? What are your favorites?