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
- 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
- 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 .