I love Tuts !

I’ve started working though a great PSD to Wordpress tutorial. It’s 6 Hours long ! It’s  helping me to bring together all the  learning I’ve been doing .  The really impressive thing is the scope of the subjects covered,  from  designing a Photoshop mock-up to creating  a basic WordPress theme. Here are some notes:

Creating the PSD mock-up

  • Deciding on a colour scheme
  • Establishing a structure for the Basic layout
  • Typography
  • Using a Grid based system to align components on the page

Creating Basic HTML markup

  • Exporting images from web ( slicing, saving for web etc)
  • Using Twitter bootstrap components ( boilerplate )
  • Coding the HTML using Emmet 
  • adding classes to various components to enable styling with CSS

Styling the HTML to match the PSD with some good-ol’ CSS

  • Using LESS to create variables and Mixins to modularise the CSS 
  • Setting margins, paddings and other dimensions referring to PSD
  • Including code from Google fonts to enable @fontface Web fonts
  • styling the various colours, background patterns, drop shadows
  • Using Less to help cater for cross browser CSS3 gradients and transitions .

Making the buttons do stuff

  • The web page we are making is actually a portfolio page, there are buttons that enable the user to filter the portfolio thumbnails. All the buttons share a single Javascript event handler that does some  Jquery magic to show/hide the portfolio entries.
  • select the buttons, use .each to add/ remove a ‘hidden’ css class

WordPress it !

Wow, that’s a lot of ground but the course now launches straight into transferring the working, finished HTML site into WordPress. Using WP as a CMS rather than a blogging system. It starts of with installing WP, adding a MySQL DB and then creating and enabling a custom theme.

All good Fun 🙂

That’s actually as far as I’ve got for today. I think I’m going to watch the lessons  through,  maybe twice in fact .  I can actually use this as a bases for a  portfolio site for my projects which is cool.

All the courses I’ve done on Tuts.com are pretty good and they are taking my learning to the next dimension. It’s time to put theory into practice!

I’ve attended a fair few Instructor led training  courses ‘on the company’, but in all honesty it’s really hard to justify the cost, when Web based training  is this  good. Consider the advantages of being able to pause and replay the videos as many times as you want as well. Considering the scope of the coverage  here, this  could easily be hammered  out to make a week long classroom based course IMHO , allowing for practical sessions ( and all those coffee breaks LOL )

The main thing is to be able to see the complete workflow process and the way the instructor ( who is a very confident sounding Web designer ) talks along and explains what he is doing is really first rate.

I’ve also done the lessons on styling Forms as  well as the ‘Less-Is-More’ courses   which are both very rewarding .

facebooktwitterlinkedinrssfacebooktwitterlinkedinrss

Leave a Reply

Your email address will not be published. Required fields are marked *