So far in this WordPress theme tutorial series we’ve put together a visual concept in Photoshop and coded up a working prototype in HTML and CSS. Now let’s take our static web page files and create a fully working WordPress theme by splitting up the code over the various template files and injecting the relevant WordPress PHP tags.
Tutorials
How To Code a Blog Theme Concept in HTML & CSS
Last week we went through the process of creating a clean blog theme layout in Photoshop. Now, let’s transform the visual concept into a working HTML/CSS prototype web page before finishing everything up as a complete theme next week. We’ll build the page structure with clean HTML, then style up as much as possible using CSS styling to create a lean website design that still replicates the original concept.
How To Create a Blog Theme Concept in Photoshop
In the next few tutorials posts we’re going to go through the process of building a WordPress theme, starting today with the initial design concept in Photoshop. Follow this step by step walkthrough of the creation of the design concept for my Ticket Stub theme, which is based on a movie review type blog. We’ll create a full page design ready for coding up into a fully working website.
How To Create a Slick Features Table in HTML & CSS
We’ve all grown up as web designers staying well away from table based layouts, but we don’t often brush up on our table building skills ready for when we will actually need them. Follow this step by step tutorial to create a slick looking data table to compare the features of various Harley Davidson motorcycles. We’ll build the table in clean HTML then polish it up with CSS to create a cool and easily readable HTML table.
Create a Grid Based Web Design in HTML5 & CSS3
Follow this step by step walkthrough of the making of a sleek, grid-based website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images.
How to Code a Stylish Portfolio Design in HTML/CSS
Over on my Blog.SpoonGraphics design blog this week, I posted a Photoshop design tutorial that takes you through the process of building a stylish portfolio design concept. Follow this second part of the tutorial here on Line25, where we’ll code up a stylish portfolio design into a fully working HTML and CSS website. Stick around for part three, when we’ll go a step further and convert the static website into a WordPress build.
Create a Stylish Contact Form with HTML5 & CSS3
Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We’ll be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code.
How To Create Your Own Custom WordPress Theme
Follow this overview of the build process to create your own custom WordPress theme. We’ll be taking my latest theme design from its basic HTML and CSS mockup and inserting the various WordPress template tags to build a fully working theme ready to install on your blog.
Design a Textured Outdoors Website in Photoshop
Learn how to design a textured outdoors website in Photoshop, by following this easy, step by step tutorial. Check it out and start learning!
In part one of this website build project, we’ll go through the process of creating a detailed concept for an outdoors site. The design is based on a range of textures and a mix of blue and greys to create a stylish and sophisticated website for ‘Pinewood Forest’.
Basic Beginners’ Guide to Installing a jQuery Lightbox
Learn how to install a jQuery lightbox, by following this easy, step by step tutorial. Check it out and start learning!
Have you always wanted to add those cool Javascript lightbox galleries to your website, but haven’t the first clue about how to do so? This guide is aimed at the Javascript coding noob and will take you through the step by step process of linking up the jQuery library, installing the lightbox script and getting everything working.
