Category Archives: Personal Developement

Creating My Own WordPress Theme: #1

I’ve set out on the path of making my own WordPress theme. I’ve quickly realised that it’s really going to test my skills. It involves HTML, CSS and PHP. I’d say I’m at beginner level for all of these, particularly PHP which I don’t know any of.

To help me with this task I’ve been reading and watching a number of different articles and videos on CSS-Tricks.com by Chris Coyier. If you don’t know who he is then I suggest you start by looking at some of his articles on CCS-Tricks. He use really up-to-date and clever techniques for developing websites. His tutorials and techniques are also very well explained, so it’s great for a novice like me. The videos I’ve been watching is are a 3 part series where Chris takes you through the design and implementation of a custom WordPress powered blog. You can see the first video by clicking here, the rest of the videos are linked on that page. One of the first things I noticed about his work is just how well presented his CSS is. Everything is commented in an easy and understandable way so you always know exactly what section of the page you’re working on. He also has the clever idea of commenting in his colour scheme at the top of his CSS document so he can refer to it whenever he needs it. These are definitely things I’m going to be doing going forward. I’ve also been following a very good tutorial over at ThemeShaper by Michelle Langston and Ian Stewart.

I’ve constructed a little mock up of my purposed theme using Adobe Fireworks. The reason for using Fireworks is because it provides great tools for aligning your objects and it allows you to cut you page into sections easily using its guide feature.  I’ve included a picture of my mock up at the bottom of this page (fig.1) as well as an image where I have left the guides visible (fig.2) so you can see how I cut up my page and align everything nicely. It’s really simple at the minute and I welcome any feedback on it, good or bad.

With my mock design done, I’ve stared to code it out in Dreamweaver. At this moment in time I’m just concentrating on building the page using only HTML and CSS because once I know how to do that comfortably then I know I’ll be ready to tackle a more complex design and move on to incorporating some PHP. Like I said before, I’m certainly no HTML or CSS master so sometimes I become confused about how to do different things. For instance, I knew didn’t know how to get my head section colour to run the full way across the page. When I first coded out the section it was just a big lump in the middle of the page, which is not what I wanted (fig.3). I want it to run smoothly across the full length of the browser. I fixed this by doing this:

#header {
padding: 0 1000px;
margin: 0 -1000px;
}

Although that did make the header run the complete way across the page it also gave me a sideways scroll bar which wasn’t ideal. I found a little trick to fix that though:

html body {
overflow-x:hidden;
}

By doing that it hid the sideways bar leaving my head section running the full length of the page. Just what I wanted (fig.4)! I’m sure there is probably a better way of doing that but it worked for me and hasn’t disrupted the rest of my page so that’s a winner in my eyes.

That’s really all I’ve done so far. Even at this early stage I’ve come up against a few challenges but I’m learning how to get around them which is the important thing. Hopefully testing myself in this way will pay off in the end. In my next post I’ll be describing how I coded out the main section which is already causing me some problems.  Oh and just before I go, I should mention that you can click to enlarge any of the images. Until next time!

WordPress Mock Up

Fig.1

Mock Up With Guides

Fig.2

Page With Wrong Header

Fig.3

Page With Right Header

Fig.4

 

 

 

Help Sheet

Below is a pair of links to “cheat sheets” or as like like to call them, “help sheets”. These sheets offer useful information regarding a ton of web tech, such as keyboard short cuts and code tags.

The top link is for an HTML5 cheat sheet which shows you new tags and tells you ones that are not in use any more.  The second link is to a whole host of different help sheets, ranging from Photoshop keyboard short cuts to CSS3 tags.

These help sheets are pretty useful if you’re new to this stuff. Although I will say that I think these should be used as a resource as and when you need it rather then a constant help. If you are reading from a sheet all the time its unlikely you will improve, so use in moderation.
I hope these help you and let me know in the comment section if you have found any worth sharing.

http://www.html5in24hours.com/2012/04/html5-cheat-sheet/

http://guider.com/blog/dont-miss-this-fantastic-collection-of-developer-designer-cheatcheats/

My First Photoshop CS6 Creation

That is the first thing I’ve made using Photoshop CS6. Its a cool denim text effect. I started off as a simple bit of text on a blue background and evolved into what you see there. I did this by following the tutorial found here. I’ve discussed the tutorials on that site in a past post, this one to be precise. The image I made may have limited use at the moment but its taught me some fundamentals and shown me ways of creating dynamic effects.

I’m working on other things too which I will post when I’ve finished them. Let me know what think in the comment section!

Me, Dreamweaver and a whole bunch of code

I started using Dreamweaver today for the first time. I like it! It’s got some nice little features, such as being able to have a split view with your code on the left and web page on the right.

W3Schools.com – A great resource for learning HTML and other web based languages.

I used w3shcool for help with learning some of the code. It’s a great resource! I encourage you to use it if you haven’t before and would like the learn HTML. I’ve used it briefly in the past and it’s always helped me. It doesn’t use jargon to confuse you or waffle on, its right to the point and informative. Another reason to use it is it lets you experiment and actually put the code into practice. I found its also very up to date with lessons in HTML5. HTML isn’t the only language it has lessons in, it also has them in CSS, JavaScript and other. Check it out by following the link here to the page www.w3schools.com

Codecademy.com – An interactive set of free lessons teaching you to code

Another site I used is Codecademy. This site has only been introduced to me today. Its an interactive tutorial website that’s free to sign up to and will track you progress. The signup process involved interacting with a online console which immediately taught me some very basic JavaScript. So needless to say, I was pretty impressed. It will even let you compare your learning to your friends. Now I cant see that really being a feature I will fully utilize but its interesting never the less. I haven’t really got much further with Codecademy just yet but I’m excited to see what it has to offer.

I tried looking for Dreamweaver tutorials online. Most of the things I come across were not based on CS6. The video I found at this link did show me how to insert images into my web page thought, http://youtu.be/Q6rRLw5ggOg. That was the first video that shown up on Google, so you could argue that I need to delve a little bit deeper to find a really good resource. To be honest Dreamweaver itself does seem fairly straight forward in most areas, its the actual coding languages that I need to learn.

I’m going to get to Dreamweaver and see what stuff I can make it do. Let me know what you think of Dreamweaver and any of the resources mentioned in the comment box!

Getting to grips with CS6

Well I’ve gone and downloaded CS6 Web and Design Premium. I’m familiar with vector programs and image manipulation software but not so much with the Adobe stuff. I used to work for a leisure company in sales and marketing, long story short but I started designing all there leaflets one day. I just messed about at first and I got kinda good at it. Basically I was getting paid to play around and draw things all day. I always used the freeware stuff because I could never afford the pricey industry standard software and the company wouldn’t fork out for the good stuff, or allow me to use an illegitimate versions either. Inkscape, a vector program and GIMP (GNU Image Manipulation Program) a poor mans Photoshop were the programs I would use.

If you find that you can’t afford CS6 either here is a link to both Inkscape and GIMP. Give them a try! They may not be the greatest but they’re free!

Inkscape: http://inkscape.org/
GIMP: http://www.gimp.org/

Now back to CS6. I’ve been aware of some tutorial websites for a long time because I used to try and replicate them in the freeware stuff. I’ve been using two sites psd.tutsplus.com and abduzeedo.com.

PSD Tuts+ – Tutorial Website

PSD tuts+ is basically what it says on the tin, a tutorial website. It offers basic to expert tutorials on a lot of the Adobe programs, mainly Photoshop and Illustrator but it does do others like Dreamweaver too. I’ve actually started doing and intermediate tutorial on there and I plan to post the results once I finish, so keep your eyes peeled for that! The only downside to the site is the you do have to pay for some of the tutorials and its pretty advert intensive, not necessarily popups, but tons of annoying moving image often making the pages look cluttered. Not particularly great if your trying to concentrate.

Abduzeedo – Inspirational Blog

Abduzeedo is a slightly different site. It is a blog that was set up in December 2006 by a Brazilian designer called Fabio Sasso, the Senior Designer at Google. He hasn’t always worked at Google but good things can actually come from a good blog. What I like about it is that its not just full of tutorials but it also has interviews, case studies and inspirational work. Be warned though, the stuff they do on the blog, although highly impressive and often amazing, is expert stuff. If you a novice you may just want to take ideas for here rather then try to fully replicate things.

Thought I’d share these with you because they could help you if your looking for inspiration for a piece of work or may be struggling to use the software. Give them a look and let me know what you think in the comments section! And if you know of any other sites that would help please feel free to share those too.

Tagged