Newbie to Web Ninja

Reading: HTML5 for Web Designers

HTML 5 for Web Designers

In my last post I told you I was going to work on my WordPress templates and CSS file to complete the setup of my dev environment. This will allow me to quickly demo what I learn. The co-requirement to me working on the templates and the CSS file is to read a couple of books I already have related to HTML5 and CSS3. The first book I’m starting with is HTML5 for Web Designers. This book is part of the A Book Apart series, and one of the great things about this series is that the books are concise and provide a great introduction to any web design or web development concept.

I think HTML5 for Web Designers by Jeremy Keith tells you what you need to know to get started with HTML5 and leaves the nice to know to the HTML5 spec. Keith provides a great overview of all the things that make HTML5 new and cool to use. Some of the things I highlighted and plan to demo to show that I have comprehended what I learned are:

  • wrapping multiple elements in a single a element
  • using the canvas element to draw on a page
  • embedding audio and video files without using a plugin like Flash
  • enhancing forms

Setting up Gitbox or Aptana and cloning to Dropbox

Gitbox

Gitbox asks whether I want to clone a repo or open a repo. I decided to clone. Cloning an existing repo will checkout a working copy of the repo into a designated directory and you will need the repo address. The repo address for me was the GitHub address to my repo and then I selected the directory for the working copy; my Dropbox account. Sweet, now I can access my working copy of my repo from any device; I guess it will work that way – we’ll see.

Completing the GitHub bootcamp

Readme file in GitHub

Ok getting started with the Github bootcamp so I can store my WordPress, HTML and CSS files.

Step 1 of the bootcamp walkthrough links to the github help page

This where you can download Git for your OS; in my case Mac OS X. The setup page also provides a useful link to the Pro Git book homepage, which provides a nice overview of Git. I have to admit I only read the Git Basics section, but I do plan on reading the rest as my use of Git progresses. It will be easier for me to retain what I read if I read it when I need to know it.

Getting organized

gravatar_profile

On my quest to become a web ninja I realized I need to become more organized. A lot of web design and development projects during the initial setup are the same. The basic HTML page structure is the same with a header, navigation, content, sidebar and footer. A basic WordPress theme only needs an index.php file and a style.css file. A basic CSS file will more than likely have the same browser reset and will be organized according to your basic HTML page structure. With that in mind there are some prerequisites I want to complete to become organized. My prereqs include finally using my Gravatar and Github accounts.

Using Typekit on my website

Typekit editor

I decided to try the Typekit free plan on my website. If you are not familiar with Typekit, it is “the easiest way to use real fonts on your website”. Real fonts in this case are non-web safe fonts that are not installed by default on most operating systems. By using a font delivery service like Typekit, I can use a typeface or typefaces that I feel enhance the design, feel and uniqueness of my website. I like the idea of the free plan because it’s free, but it also gives me a chance to explore the look of a particular typeface and learn how the Typekit service works without making a monetary investment. I do plan to invest in Typekit. I think the Personal plan or Portfolio plan will meet my future needs.

I chose Typekit for the following reasons:

  • easy to setup and use
  • selection of fonts
  • quality check in place