HTTP Line25 Com Tutorials Coding Up A Web Design Concept Into HTML Css

Articles
Inspiration
Tutorials
About
Archives
Contact
Coding Up a Web Design Concept into HTML & CSS

Search
Do you need professional PDFs? Try PDFmyURL!
Ive recently been working on a design concept for a WordPress theme as part of a personal project. In this walkthrough well go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.
The design concept
Subscribe for email updates

Don't miss a post! Sign up for email notifications of new content on Line25. Every subscriber gets a free handy pack of web shadows.
Enter your email address
The design well be coding up is this WordPress theme concept Im currently working on as part of a personal project. The design features a clean grey background, but with splashes of vibrant colour in the header, and throughout the page with links and buttons taking bright colour swatches from the main illustration. Overall the design has plenty of clean lines, and uses subtle shadows and inset text effects to add that touch of style.
Subscribe and Download
View the demo
Slice the PSD
The job is started by slicing up the various images that make up the design. The first being the bright header graphic. With this image being heavy on colours and gradients, the JPEG option would be the best fit.
Each subsequent element of the design is cut up. Layers are toggled off to allow access to background images, such as the date area and the button graphics.
Once every graphic has been exported, were left with a collection of image files, some large, some small, some JPEG and some PNG. Certain images will be used as repeating background images, while others are combined as sprite graphics.
Build the HTML structure

A new HTML page is created and the basic structure of the document written out, including Doctype, links to stylesheets and a container div to hold the following markup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Particle</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> </div>
</body> </html>
The header
The first portion of design at the top of the page outlines a simple header. The logo can be recreated as a <h1> , seeing as theres no other title on the page, while the categories list can be formed with a good old unordered list.
<div id="header"> <h1><a href="#"><img src="images/particle.jpg" alt="Return to the homepage" /></a></h1> <ul id="categories"> <li><a href="#">Articles</a></li> <li><a href="#">Design</a></li> <li><a href="#">Graphics</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Retro</a></li> </ul> </div>
The content
Next we add a <div> with an ID of content to contain the main areas of the layout. This particular design uses two columns, one main content area and a sidebar. These are written out as individual <div> tags with corresponding IDs.
<div id="content"> <div id="main"></div> <div id="side"></div> </div>
Inside the main div sits the list of blog posts, each one contained within a <div> with a class of post. A class is used here rather than an ID because there will be multiple posts, whereas IDs may only appear once. Inside the
post div the information is written out in the post relevant HTML elements, a <p> holds the number that will be generated for the date and a <span> used to provide a target for the later CSS that will allow the month to appear at a different size. The next heading element available is a <h2> , so this is used along with an anchor to generate the post title. A <ul> is then given a special class as post-meta, which then includes the information about the post in list format. The <li> containing the read more link is given an extra class to allow this particular list item to be floated over the right, just like in the PSD concept.
<div id="main"> <div class="post"> <div class="date"> <p>26 <span>Apr</span></p> </div>
<div class="post-content"> <h2><a href="#">10 Fantastic Photography Tips</a></h2> <p>Weve put together our favourite photo tips and tricks to help you become a better photographer. Forget about relying on lad <ul class="post-meta"> <li>Posted in <a href="#">Articles</a></li> <li><a href="#comments">12 Comments</a></li> <li class="read-more"><a href="#">Read more</a></li> </ul> </div> </div> <div class="pagination"> <p class="older"><a href="#">Older articles</a></p> <p class="newer"><a href="#">Newer articles</a></p> </div> </div>
Once the main div has been completely marked up, the next section of the design is the sidebar. The first item to appear in the div titled side, is the subscription option. This is written out as a plain old anchor, contained within a paragraph tag. A unique ID will allow us to target this exact anchor with CSS to add the relevant styling and RSS icon later. The three links in the concept that look like buttons can simply be marked up as a <ul> and CSS can be used to give the button-like appearance.
<div id="side"> <p id="subscribe"><a href="#">Subscribe</a></p> <ul id="pages"> <li><a href="#">About me</a></li> <li><a href="#">My portfolio</a></li> <li><a href="#">Get in touch</a></li> </ul> <h3>Follow me</h3> <ul id="follow-me"> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="facebook">Facebook</a></li> <li><a href="#" class="flickr">Flickr</a></li> <li><a href="#" class="youtube">YouTube</a></li> <li><a href="#" class="vimeo">Vimeo</a></li> </ul> <h3>Search</h3> <form id="search" method="get" action=""> <fieldset> <input type="text" class="search-bar" /> <input type="submit" value="Search" class="search-btn" /> </fieldset> </form> </div>
The footer
The simple footer can then be finished off with a couple of links housed within the footer <div> . Each of the two credits are given a separate class, so each link can be transformed into the relevant logo image later with the CSS. Finally the back to top link is placed as an anchor targeting the header. You can target an anchor to any internal ID by using the # symbol.
<div id="footer"> <ul id="credits"> <li><a href="http://wordpress.org" class="wordpress">Powered by WordPress</a></li> <li><a href="http://www.blog.spoongraphics.co.uk" class="spoongraphics">Theme by SpoonGraphics</a></li> </ul> <p id="back-top"><a href="#header">Back to top</a></p> </div>
Write the CSS styling
The first couple of lines in the CSS are used to reset any default browser styling, giving us a clean slate to start with, without the risk of inconsistencies between each browser. Next, the body is styled up with the basic font-family, and background. The colour #eee is specified, followed by the bright background image, which is positioned centrally on the page and told not to repeat. The container div provides the basic layout, allowing the design to appear centralised with the margin: 0 auto; declaration, and pushes the content down with a little padding so that it appears under the bright illustration at the top of the page.
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote { margin: 0; padding: 0; border: 0; } body { font-family: Helvetica, Arial, Sans-Serif; line-height: 24px; background: #eee url(images/body-bg.jpg) center top no-repeat; } #container { width: 925px; margin: 0 auto; padding: 143px 0 0 0; }
We can then work down the HTML markup in order, adding the necessary CSS styling as we go. The header is the first section on the page, so this is given a background image forming the tip of the content area, and given some padding to match the PSD concept. The categories list is then floated off to the right, and each anchor given the various font sizing, and uppercase transformation to match the original design. A spot of CSS3 comes into play in the form of the text-shadow property to enable us to recreate the inset text effect. This extra styling will be visible to those with modern browsers, such as Safari, Firefox and Chrome, while IE will just show the flat version. Colours are then sampled from the PSD and the hex codes pasted in place as the link and hover classes.
#header { background: url(images/header-bg.png) right bottom no-repeat; overflow: hidden; padding: 0 0 50px 0; } #header h1 {
float: left; } #header ul#categories { float: right; list-style: none; margin: 16px 0 0 0; } #header ul#categories li { float: left; margin: 0 0 0 40px; } #header ul#categories li a { display: block; font-size: 14px; font-weight: bold; text-transform: uppercase; color: #a42988; text-shadow: 0 2px 0px #fff; text-decoration: none; } #header ul#categories li a:hover { color: #006ab1; }
Next, the content div can be given a repeating background to create a faux column effect. This image will generate the the darker grey sidebar, and will continue on from the background image added to the header.
Because the main and side divs will be floated, the content div will need clearing. The easiest way to do this is to add overflow: hidden; . The global anchor styling for the anchors are then added, so anything within the content div will be given this treatment, unless otherwise stated according to the more specific styling within the main or side divs.
#content { background: url(images/content-bg.png) right top repeat-y; overflow: hidden; } #content a { font-weight: bold; text-transform: uppercase; color: #a42988; text-shadow: 0 2px 0px #fff; text-decoration: none; } #content a:hover { color: #006ab1; } #content #main { width: 685px; float: left; padding: 55px 0 0 0; } #content #main h2 { margin: 0 0 16px 0; } #content #main p { margin: 0 0 25px 0; color: #474747; font-size: 15px; }
Each individual post div is then given a background image to replicate the dividing lines between each entry. Some padding and margin helps recreate the same amount of white space as the concept, and the overflow: hidden; declaration is added to clear the post div after the floating the date and content side by side. The date tab itself can be quickly styled up by specifying the exact dimensions and adding the blue background image. The <p> tag can then be given some typographic treatment to replicate the large white text in the concept, and the <span> used to specifically target the month, making it smaller in size and block format so that it appears underneath the date number.
#content #main .post { background: url(images/post-divider.png) right bottom no-repeat; padding: 0 47px 55px 0; margin: 0 0 55px 0; overflow: hidden; } #content #main .post .date { width: 62px; height: 57px; float: left; padding: 15px 0 0 0; margin: 0 20px 0 0; background: #0085cc url(images/date-bg.jpg); text-align: center; } #content #main .post .date p {
font-size: 40px; font-weight: bold; color: #fff; text-shadow: 0 2px 3px #006ab1; } #content #main .post .date p span { margin: 5px 0 0 0; display: block; font-size: 17px; font-weight: normal; text-transform: uppercase; }
With the date tab in place, the main content panel can also be floated alongside it. Then the styling can move on to fleshing out the meta information list with background image, and text styling. Its important to remember to add a background colour along with background images, just in case the user is viewing without images being displayed. Otherwise the white text will become unreadable on the light grey background. The <li> tags inside the meta list are floated to the left, with the exception of the read-more link, which is floated off to the right instead.
That extra class allows this <li> to be targeted individually.
#content #main .post .post-content { width: 556px; float: left; } #content #main .post .post-content ul.post-meta { width: 515px; height: 21px; list-style: none; padding: 14px 20px; background: #d6d6d6 url(images/meta-bg.jpg); } #content #main .post .post-content ul.post-meta li { float: left; margin: 0 40px 0 0; font-size: 15px; font-weight: bold; text-transform: uppercase; color: #fff; text-shadow: 0px 2px 3px #b8b8b8; } #content #main .post .post-content ul.post-meta li.read-more { float: right; margin: 0 0 0 0; } #content #main .post .post-content ul.post-meta li a { color: #fff; text-shadow: 0px 2px 3px #b8b8b8; } #content #main .post .post-content ul.post-meta li a:hover { color: #eee; }
The main div is now all styled up, so the next section is the sidebar. Its width is firstly calculated by taking away the width of the main div from the overall width of the container, taking into consideration any extra padding and margins. If this is calculated exactly, theyll both float side by side. A miscalculation of just 1 pixel will send the sidebar underneath the content, so heres where that box model knowledge comes into play. The first element within the sidebar is the subscribe button. The anchor is targeted directly through the unique ID, and is given the background image to generate the RSS icon. Some text-shadow soon styles up the text to replicate that of the original concept. The button links in the sidebar are also styled up from basic anchors. First they need converting from inline to block elements, this then allows specific widths and heights to be added, along with the background image and necessary padding to push the text into place centrally. The actual colour and styling of the anchor text will be inherited from the previous styling to #content a {} .
#content #side { width: 200px; float: left; padding: 5px 20px; } #content #side p#subscribe a { display: block; height: 30px; font-size: 20px; color: #fff; padding: 7px 0 0 45px; margin: 0 0 15px 0; text-shadow: 0px 2px 3px #b8b8b8; background: url(images/rss-icon.png) left no-repeat; } #content #side p#subscribe a:hover { color: #eee;
} #content #side ul#pages { list-style: none; margin: 0 0 30px 0; } #content #side ul#pages li { margin: 0 0 5px 0; } #content #side ul#pages li a { display: block; width: 157px; height: 23px; padding: 12px 20px; text-align: center; background: #eee url(images/sidebar-btn.png); }
The next feature in the design is the list of social icons (courtesy of Komodo Media). The basic markup is made up as a simple list and anchors, but they can be manipulated with CSS to give the desired appearance. First the list bullet points are removed with the list-style: none; declaration, and because the icons are floated, the <ul> will need
clearing with overflow: hidden; . Each anchor is given specific dimensions, then each individual anchor can be targeted with the relevant class to add the correct icon as a background image.
#content #side h3 { font-size: 20px; text-transform: uppercase; color: #fff; margin: 0 0 5px 0; text-shadow: 0px 2px 3px #b8b8b8; } #content #side ul#follow-me { overflow: hidden; list-style: none; margin: 0 0 30px 0; } #content #side ul#follow-me li { float: left; margin: 0 8px 8px 0; } #content #side ul#follow-me li a { display: block; width: 32px; height: 32px; text-indent: -9999px; } #content #side ul#follow-me li a.twitter { background: url(images/social-icons/twitter_32.png); } #content #side ul#follow-me li a.facebook { background: url(images/social-icons/facebook_32.png); } #content #side ul#follow-me li a.flickr { background: url(images/social-icons/flickr_32.png); } #content #side ul#follow-me li a.youtube { background: url(images/social-icons/youtube_32.png); } #content #side ul#follow-me li a.vimeo { background: url(images/social-icons/vimeo_32.png); }
The search area then needs a couple of lines of styling to match it up to the concept. The basic structure is there from the HTML elements, but we can quickly spruce them up with the relevant background images. The search bar is given exact dimensions so the background image appears as expected. Some padding and font styling also tweaks how the input text will display. The search button itself appears as a small icon within the search bar. This is replicated with CSS by adding the appropriate background image, then moving it into place with floats and negative margins. Extra padding on the right side of the search bar then ensures the text wont overlap the button.
#content #side form#search { margin: 0 0 30px 0; } #content #side form#search input.search-bar { width: 135px; height: 43px; padding: 1px 45px 0 15px; float: left; background: #eee url(images/search-bar.png); font-size: 15px; color: #474747; } #content #side form#search input.search-btn { width: 27px; height: 27px; float: right; margin: -36px 15px 0 0; cursor: pointer;
width: 27px; height: 27px; float: right; margin: -36px 15px 0 0; cursor: pointer; background: url(images/search-btn.png); text-indent: -9999px; padding: 0 0 0 27px; }
Everything can then be finished off with some styling to the footer div. The footer background image includes the bottom portion of the content panel, giving the rounded corners and soft shadow, so this is positioned to the top. Inside the footer are two credit links, which are styled up using the image replacement technique just like the social icons. Finally theres the back to top link which is sent over to the right, and given the same link styling as the rest of the document.
#footer { background: url(images/footer-bg.png) center top no-repeat; overflow: hidden; min-height: 139px; }
#footer ul#credits { overflow: hidden; list-style: none; float: left; margin: 25px 0 0 20px; } #footer ul#credits li { float: left; margin: 0 10px 0 0; } #footer ul#credits li a { display: block; height: 21px; background: url(images/credits.png); text-indent: -9999px; } #footer ul#credits li a.wordpress { width: 21px; } #footer ul#credits li a.spoongraphics { width: 26px; background-position: 26px 0; } #footer p#back-top { float: right; margin: 25px 20px 0 0; } #footer p#back-top a { font-size: 12px; text-transform: uppercase; text-decoration: none; color: #a42988; text-shadow: 0 2px 0px #fff; } #footer p#back-top a:hover { color: #006ab1; }
Fixing IE6
A quick test in the popular browsers shows no problems at all, with the design looking identical between the CSS3 supporting browsers of Safari, Firefox and Chrome, and just slightly less visually appealing in IE7. IE6 however, throws its usual panic attack at the CSS code and struggles to interpret it correctly.
At first impressions the site looks a complete mess, but under close inspection theres not too much to fix. Just a couple of extra CSS values soon brings everything into place. The two declarations of overflow: hidden; and height: 100%; were all that were needed on the problem elements. These are added using an IE6 only stylesheet link in the HTML.
#content #side, #content #main .post .date, #content #main .post .post-content ul.post-meta { overflow: hidden; } #content, #footer, #header height: 100%; } {

The final design

With IE6 neatly tidied up, the site design is complete. Next week well be taking the design from this HTML/CSS mockup and transform it into a fully loaded WordPress theme. Stay tuned!
View the demo
60
Tweet 151 Like
14
1
Share
5 0
Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows. Enter your email address Subscribe
Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new
web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.
More posts like this

Create a Stylish Contact Form with HTML5 & CSS3 CSS Basics: How to Design & Code a Stylish Button How To Create a Cool Animated Menu with jQuery Create a Typography Based Blog Layout in HTML5 How To Code a Blog Theme Concept in HTML & CSS How to Code up a Web Design from PSD to HTML
63 Comments
Nick
get more coding practice inthanks
April 5, 2010 at 9:21 am
Great post. Bookmarked for future use. I really need to
Chris Spooner
April 5, 2010 at 6:01 pm
Thanks Nick. Practice makes perfect! Creating these kind

of tutorials is excellent practice for me, too.
Callum Chapman
April 5, 2010 at 11:17 am
Another great psd2html tutorial, don't have time to read through now but I'm 110% sure it's gonna be good!
Need to get some coding practice in like Nick above, so will give this a good look over when I get the time! :) Thanks!
black-light-studio
for all the most used Pictures/icons
April 5, 2010 at 11:43 am
I think it might be a good idea to make a 'Sprite image'
but after all great tutorial :D
Chris Spooner
April 5, 2010 at 6:03 pm
A sprite would definitely be handy to speed things up
slightly.
Purse17
April 5, 2010 at 11:54 am
Nice tutorialI love the explanationsvery helpful! PSD file would be nice, so I could start from the slicing.
Chris Spooner
April 5, 2010 at 6:14 pm
This particular design is due to be included as part of the Access All Areas section of Blog.SpoonGraphics, where the source file will be available, so this unfortunately means it's not available publicly. Maybe check it out when the whole theme is complete? :-)
Shitic
good practice
April 5, 2010 at 11:54 am
Liam Maskell
April 5, 2010 at 12:00 pm
Great tutorial! I may have to have a go at this, I hate coding but its something I need to get on with and do!
Thanks Chris! :)
RL Creative
Hey Chris, thank a lot for tutorial.
April 5, 2010 at 12:36 pm
How much time does it usually take to code a design concept into HTML/CSS?
CSSReX
April 5, 2010 at 12:55 pm
Nice! I like the header a lot. Thanks for this nice tutorial.
Abdullah Al Mamun
April 5, 2010 at 1:34 pm
Awesome demo.. gonna read it now.thanks a lot :-)
Carlos Carvalho
April 5, 2010 at 2:39 pm
Nice article, i will use for future code style reference.
I wanna make a request, if possible Can you post some of the jquery codes what you like or use ?
Thanks again about the article.
David
April 5, 2010 at 4:10 pm
Ah, beautiful code. So clean, so nice. I can't wait to see the next post when it gets converted to a WordPress theme. I've been meaning to get into WordPress themes.
Ed Baxter
April 5, 2010 at 4:17 pm
Another great PSD to HTML tutorial. Thanks again Chris!
Rochelle Dancel
April 5, 2010 at 4:53 pm
I cannot wait until the next installment! Your PSD to HTML walk-throughs are fantastic, but being able to see how it's skinned and made to work on a CMS WordPress will be invaluable and a value-add to any self-taught web designer. Thank you so much for this!
Michael Sears
This is a great PSD tutorial! Thanks!
April 5, 2010 at 5:01 pm
Chris Spooner
April 5, 2010 at 6:00 pm
Thanks for the kind comments everyone!

Jose Gonzalez
Just Fabulous!!!!
April 5, 2010 at 6:22 pm
Mobile360
Nice Tutorial!
April 5, 2010 at 6:29 pm
Martin
April 5, 2010 at 6:38 pm
I am a print designer, but these days most of my time is filled with web concepts. I can make sites look beautiful in photoshop, but that is as far as I go. I have read a couple of xhtml/css books, but I always find myself fighting robots, if you know what I mean.
Great article, thanks.
Devon
Hey Chris,
April 5, 2010 at 7:06 pm
Great tut! I've been looking into how to do the side tabs with the post date (can't wait to see it converted to WordPress).
One thing I think might be a neat addition is a rollover for the RSS Feed, giving it a bit of color.
Keep it up Devon
Sbuster
Nice tutorial i like
April 5, 2010 at 7:07 pm
Devon
Chris,
April 5, 2010 at 7:08 pm
Thanks for a great tutorial! I can't wait to see this converted to WordPress.
One thing I think would be a neat addition is a rollover for the RSS feed, giving it that extra bit would make it pop in my mind.
Keep it up!
BSide Graphics
This is symply awesome! Congratz!
April 5, 2010 at 7:29 pm
Mike Nguyen
April 5, 2010 at 8:12 pm
What kind of resources you often look for when you see differences in your website when generate by Firefox and by IE? You haven't talked about it in this article
CyMaN
April 5, 2010 at 10:17 pm
Great article! Thanks for taking your time and writing.
I have found very interesting tool on the net, picker of html color codes, maybe you find it useful: <a href="http://html-color-picker.com/">Online Color Picker</a>.
Bye! Primoz
Jae Xavier
clean, subtle design. Crisp.
April 5, 2010 at 11:33 pm
This is a very well written tutorial, along with a very
rabid
chris
April 6, 2010 at 12:11 am
great! this is what i am looking for^^ gonna try this. thx
rjene
and shares*
April 6, 2010 at 3:30 am
really cool! awesome tutorial yet again! =) *bookmarks
taobao
us. Especially the psd part.
April 6, 2010 at 3:30 am
What an nice tutorial, thanks so much for sharing with
morganiseit
April 6, 2010 at 12:20 pm
Thanks you may also want to look at some of the CSS grid systems/frame works such as Blue Print and 960.gs they make life even easier grid systems are a bit like art it's all about personal preference so it's worth taking a look at a few they make website design with CSS quicker and more flexible you won't look back.
rob
April 10, 2010 at 4:13 am
I m really interested in 960.gs do you have any links to some tuts.i m a as new to web site design as as Conan O Brian is to unemployment.
zauberer
own side step by step
April 6, 2010 at 1:00 pm
wow, great tut, i wish i had found this before i build my
they are not so many good articles in german, but this here is easy to understand and i can follow every step
thanks V.
Leia Vieira
thanks!!! This TUT is really helpful :)
April 6, 2010 at 2:21 pm
Jordan Walker
Really a great and thorough tutorial.
April 6, 2010 at 2:52 pm
Louis Gubitosi
April 6, 2010 at 2:55 pm
Chris, this is awesome. I love how clean and simple your design and at the same time how powerful the color and placement of every object is great job.
Rachel
April 6, 2010 at 3:26 pm
Great tutorial. Just had a read through myself. Quick question would it not be better to use two separate images one for the sidebar, and one for the content or is the technique you used just as effective?
Pawe P.
April 6, 2010 at 5:13 pm
Hmmm.. Good work, but Layout isn't very good. For beginners is perfect! Best regards!
George
Thanks, Chris for great tutorial.
April 6, 2010 at 9:46 pm
inspirationfeed
April 7, 2010 at 2:50 am
Amazing tutorial, and a very nice design.
Paul
slightly related questions.
April 7, 2010 at 5:50 am
Great tutorial and nice design as always but I have a few
First, do you have some kind of awesome WordPress theme design checklist when you create your your design and mark up?
Second, has it ever happened to you that the theme you designed, once integrated into WordPress, doesn't have the same feel after the HTML markup & CSS styling has been done regardless of the fact that both the original .psd and the theme are practically visually identical?
I hope the second question doesn't sound too philosophical!
Thanks in advance!
Gaurav Mishra
So beautiful and vibrant. Excellent job done
April 7, 2010 at 6:25 am
Web Risorsa
April 7, 2010 at 6:32 am
Nice explanation on HTML and CSS design concepts Looking for more of the same kind with different examples from you :)
Mits
Hey Chris,
April 7, 2010 at 10:01 am
When you are designing websites, using ps. What are the dimensions that you use? Cheers
Psd xhtml y css

improve my skills.
April 7, 2010 at 10:22 am
Good article. I like to know how code another people for
XTHMWeaver
April 7, 2010 at 3:03 pm
Nice one, although we use do ofter quality psd to html service for our client. but have to say that this one is pretty well written.
lava360blog
April 7, 2010 at 5:14 pm
you explain it very well. thanks for this great tutorial
Jason Rudland
saved an awful lot of heartache!
April 7, 2010 at 7:26 pm
Excellent tutorial. If I'd seen this a few years ago it'd
Thanks
Webdesigner Jonas
Hey,
April 8, 2010 at 6:05 am
Great tutorial, I use drupal to integrate my designs. I'm curious if it will work out!
Thanks, Jonas
Sigurfreyr
Good and very helpful! Thanks!
April 8, 2010 at 8:06 am
Sigurfreyr
Auckland Web Design
April 8, 2010 at 1:42 pm
Really nice blog layout! I've never really quite understood how to make wordpress layouts until now, thanks!
Website Design Surrey
April 12, 2010 at 11:12 am
Nice article, a lot of people don't know how to do this.
Brussells
stagnated, sectioned coding elements.
April 12, 2010 at 11:40 am
Awesome tut! Really clear and easy to follow with the
A nice crisp layout & design too. Looks simple (and not in a bad way) and clean. Will be eager to read on about the WP implementation now.
Thanks again Chris for your hard work in posting this.
YoYurec
Good tutorial, as always! )
April 12, 2010 at 12:17 pm
Elijah
Great post ! thanks
April 12, 2010 at 1:18 pm
April 13, 2010 at 1:54 am Mankato PC Solutions - Mankato Website Design
Again, Great information!
LeBlogger
it to a Blogger-Blogspot Template ???
April 13, 2010 at 1:31 pm
Would you mind if I took the CSS/HTML file and I convert
Of course I'll give you credits (both on my post and in the xml file) as the Template designer, something like <b>Designed by line25</b>
G_Unit
Brilliant as always Chris
April 13, 2010 at 3:41 pm
you give people who want to learn up to date stuff, the solutions it in clear terminology. Just one question though I'm now ditching dreamweaver what text editor would you recommend ( ideally free)
Cheers
john
April 14, 2010 at 6:56 pm
Great tutorial. I find it's always interesting to check out other people's thought processes when designing/coding.
It's interesting how you indent child selectors in your CSS code.
I won't be adopting that, but I will be adopting how you group related properties together ('box properties', graphic/styling properties, etc) on the same line. Makes sense to me
Robert T.
April 16, 2010 at 10:24 am
After having a website created, it's important to do the proper steps for search engine optimization. Without doing marketing for a website, it would be pretty much useless unless you have some form of marketing to drive the traffic there.
We do Direct Marketing, which is a direct unique visitor that would be searching for your specific product or service. These type of leads are much more beneficial than indirect flyers or emailing.
reezluv
really good tuts ever.Nicely done!
April 17, 2010 at 5:36 pm
Comments are now closed
About Line25
Most popular posts
Line25 was built in March 2009 by Chris Spooner as a place to share his web design ideas and inspiration through articles, tutorials and examples of stunning site designs. Be the first to see new posts by subscribing by RSS, have new content delivered by Email, or join Line25 on Twitter.
How To Design a Custom YouTube Background Rounding Up the Top 10 jQuery Lightbox Scripts How To Create a Pure CSS Dropdown Menu 15 Tutorials To Help You Build WordPress Themes Create a Stylish Contact Form with HTML5 & CSS3
Copyright Chris Spooner. All rights reserved
Privacy policy
Advertise on Line25
Subscribers
Page loaded in 0.577 seconds

HTTP Line25 Com Tutorials Coding Up A Web Design Concept Into HTML Css

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTTP Line25 Com Tutorials Coding Up A Web Design Concept Into HTML Css

Загружено:

Авторское право:

Доступные форматы

Articles

Coding Up a Web Design Concept into HTML & CSS

Do you need professional PDFs? Try PDFmyURL!

The design concept

Subscribe for email updates

Do you need professional PDFs? Try PDFmyURL!

Enter your email address

Subscribe and Download

View the demo

Slice the PSD

Do you need professional PDFs? Try PDFmyURL!

Do you need professional PDFs? Try PDFmyURL!

Do you need professional PDFs? Try PDFmyURL!

Build the HTML structure

<div id="content"> <div id="main"></div> <div id="side"></div> </div>

<div id="main"> <div class="post"> <div class="date"> <p>26 <span>Apr</span></p> </div>

Write the CSS styling

Do you need professional PDFs? Try PDFmyURL!

Do you need professional PDFs? Try PDFmyURL!

Do you need professional PDFs? Try PDFmyURL!

That extra class allows this <li> to be targeted individually.

Do you need professional PDFs? Try PDFmyURL!

Do you need professional PDFs? Try PDFmyURL!

Do you need professional PDFs? Try PDFmyURL!

Do you need professional PDFs? Try PDFmyURL!

Do you need professional PDFs? Try PDFmyURL!

The final design

Do you need professional PDFs? Try PDFmyURL!

View the demo

Written by Chris Spooner

More posts like this

Great post. Bookmarked for future use. I really need to

April 5, 2010 at 6:01 pm

Thanks Nick. Practice makes perfect! Creating these kind

of tutorials is excellent practice for me, too.

April 5, 2010 at 11:17 am

April 5, 2010 at 11:43 am

I think it might be a good idea to make a 'Sprite image'

but after all great tutorial :D

April 5, 2010 at 6:03 pm

A sprite would definitely be handy to speed things up

April 5, 2010 at 11:54 am

April 5, 2010 at 6:14 pm

April 5, 2010 at 11:54 am

April 5, 2010 at 12:00 pm

April 5, 2010 at 12:36 pm

April 5, 2010 at 12:55 pm

Do you need professional PDFs? Try PDFmyURL!

April 5, 2010 at 1:34 pm

Awesome demo.. gonna read it now.thanks a lot :-)

April 5, 2010 at 2:39 pm

Nice article, i will use for future code style reference.

Thanks again about the article.

April 5, 2010 at 4:10 pm

Do you need professional PDFs? Try PDFmyURL!

April 5, 2010 at 4:17 pm

Another great PSD to HTML tutorial. Thanks again Chris!

April 5, 2010 at 4:53 pm

April 5, 2010 at 5:01 pm

April 5, 2010 at 6:00 pm

Thanks for the kind comments everyone!

April 5, 2010 at 6:22 pm