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.
design
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.
Showcase of Impressive Design Process Explanations
A common feature amongst the top design portfolio and agency websites is a visually presented explanation of their design process. This simple idea of describing how a potential client’s project will be handled from start to finish is a great way of securing projects and giving the customer an insight into what their working relationship with the designer(s) will be like. This showcase rounds up a bunch of impressive examples of how various designers have explained their design process with the aid of clever graphical elements.
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.
10 Common Validation Errors and How To Fix Them
Designers spend hours carefully crafting every little detail in the design of their website, but the quality of their coding often comes up short. For proof, just look at the sites showcased in CSS galleries, 90% will have validation errors – Most of which are easy and simple fixes. Let’s look at some of the most common validation errors that appear time and time again, and how to correct them to really finish off your sites with high-quality code.
