http line25 com tutorials coding up a web design concept into html css

Articles Inspiration Tutorials About Archives Contact

Search

Coding Up a Web Design Concept into HTML &CSS

Do you need professional PDFs? Try PDFmyURL!

Ive recently been working on a design concept for a WordPress theme aspart of a personal project. In this walkthrough well go through the processof converting the design concept from PSD document right through tocompleted HTML and CSS mockup, complete with clean and valid code, afew touches of CSS3 and some quick fixes to help out old IE6.

Subscribe for email updatesDon't miss a post! Sign up for emailnotifications of new content on Line25. Everysubscriber gets a free handy pack of webshadows.

The design concept


The design well be coding up is this WordPress theme concept Imcurrently working on as part of a personal project. The design features aclean grey background, but with splashes of vibrant colour in the header,and throughout the page with links and buttons taking bright colourswatches from the main illustration. Overall the design has plenty of cleanlines, and uses subtle shadows and inset text effects to add that touch ofstyle.

View the demo

Enter your email address

Subscribe and Download

Slice the PSD


The job is started by slicing up the various images that make up thedesign. The first being the bright header graphic. With this image beingheavy 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 toallow access to background images, such as the date area and the buttongraphics.

Once every graphic has been exported, were left with a collection ofimage files, some large, some small, some JPEG and some PNG. Certainimages will be used as repeating background images, while others arecombined as sprite graphics.


A new HTML page is created and the basic structure of the documentwritten out, including Doctype, links to stylesheets and a container div tohold the following markup.

Particle

The headerThe first portion of design at the top of the page outlines a simple header.The logo can be recreated as a , seeing as theres no other title onthe page, while the categories list can be formed with a good oldunordered list.

Build the HTML structure


Articles Design Graphics Inspiration Retro

The contentNext we add a with an ID of content to contain the main areas ofthe layout. This particular design uses two columns, one main contentarea and a sidebar. These are written out as individual tags withcorresponding IDs.

Inside the main div sits the list of blog posts, each one contained within a with a class of post. A class is used here rather than an ID becausethere 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 holds the number that will be generated for the date and a used to provide a target for the later CSS that will allow themonth to appear at a different size. The next heading element available isa , so this is used along with an anchor to generate the post title.A is then given a special class as post-meta, which then includes theinformation about the post in list format. The containing the readmore link is given an extra class to allow this particular list item to befloated over the right, just like in the PSD concept.

26 Apr 10 Fantastic Photography Tips Weve put together our favourite photo tips and tricks to help you become a better photographer. Forget about relying on lady luck, or wasting your precious time wading through and deleting disappointing pictures, well help you get it right first time. Making it easier to print your favourite photos and share the highlights of your life online. So whether youre going to be out & about photographing weddings, your kids and pets, enjoying family days out, or you latest holiday, follow our advice for fantastic photos to be proud of. Posted in Articles 12 Comments Read more Older articles Newer articles


Once the main div has been completely marked up, the next section of thedesign is the sidebar. The first item to appear in the div titled side, is thesubscription option. This is written out as a plain old anchor, containedwithin a paragraph tag. A unique ID will allow us to target this exactanchor with CSS to add the relevant styling and RSS icon later.The three links in the concept that look like buttons can simply be markedup as a and CSS can be used to give the button-like appearance.

Subscribe About me My portfolio Get in touch Follow me Twitter Facebook Flickr YouTube Vimeo Search


The footerThe simple footer can then be finished off with a couple of links housedwithin the footer . Each of the two credits are given a separateclass, so each link can be transformed into the relevant logo image laterwith the CSS. Finally the back to top link is placed as an anchor targetingthe header. You can target an anchor to any internal ID by using the #symbol.

Powered by WordPress Theme by SpoonGraphics Back to top

Write the CSS styling


The first couple of lines in the CSS are used to reset any default browserstyling, giving us a clean slate to start with, without the risk ofinconsistencies between each browser. Next, the body is styled up withthe basic font-family, and background. The colour #eee is specified,followed by the bright background image, which is positioned centrally onthe page and told not to repeat. The container div provides the basiclayout, allowing the design to appear centralised with the margin: 0auto; declaration, and pushes the content down with a little padding sothat 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 necessaryCSS styling as we go. The header is the first section on the page, so this isgiven a background image forming the tip of the content area, and givensome padding to match the PSD concept. The categories list is thenfloated off to the right, and each anchor given the various font sizing, anduppercase transformation to match the original design. A spot of CSS3comes into play in the form of the text-shadow property to enable us torecreate the inset text effect. This extra styling will be visible to those withmodern browsers, such as Safari, Firefox and Chrome, while IE will justshow the flat version.Colours are then sampled from the PSD and the hex codes pasted in placeas 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 {Do you need professional PDFs? Try PDFmyURL!

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 afaux 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 needclearing. The easiest way to do this is to add overflow: hidden; .The global anchor styling for the anchors are then added, so anythingwithin the content div will be given this treatment, unless otherwise statedaccording 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 thedividing lines between each entry. Some padding and margin helpsrecreate the same amount of white space as the concept, and theoverflow: hidden; declaration is added to clear the post div after thefloating the date and content side by side.The date tab itself can be quickly styled up by specifying the exactdimensions and adding the blue background image. The tag can thenbe given some typographic treatment to replicate the large white text inthe concept, and the used to specifically target the month,making it smaller in size and block format so that it appears underneaththe 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 floatedalongside it. Then the styling can move on to fleshing out the metainformation list with background image, and text styling. Its important toremember to add a background colour along with background images, justin case the user is viewing without images being displayed. Otherwise thewhite text will become unreadable on the light grey background.The tags inside the meta list are floated to the left, with theexception of the read-more link, which is floated off to the right instead.


That extra class allows this 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. Itswidth is firstly calculated by taking away the width of the main div from theoverall width of the container, taking into consideration any extra paddingand margins. If this is calculated exactly, theyll both float side by side. Amiscalculation 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 istargeted directly through the unique ID, and is given the backgroundimage to generate the RSS icon. Some text-shadow soon styles up the textto replicate that of the original concept.The button links in the sidebar are also styled up from basic anchors. Firstthey need converting from inline to block elements, this then allowsspecific widths and heights to be added, along with the background imageand necessary padding to push the text into place centrally. The actualcolour and styling of the anchor text will be inherited from the previousstyling 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 ofKomodo Media). The basic markup is made up as a simple list andanchors, but they can be manipulated with CSS to give the desiredappearance. First the list bullet points are removed with the list-style:none; declaration, and because the icons are floated, the will need


clearing with overflow: hidden; . Each anchor is given specificdimensions, then each individual anchor can be targeted with the relevantclass 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 tothe concept. The basic structure is there from the HTML elements, but wecan quickly spruce them up with the relevant background images. Thesearch bar is given exact dimensions so the background image appears asexpected. Some padding and font styling also tweaks how the input textwill display. The search button itself appears as a small icon within thesearch bar. This is replicated with CSS by adding the appropriatebackground image, then moving it into place with floats and negativemargins. Extra padding on the right side of the search bar then ensuresthe 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. Thefooter background image includes the bottom portion of the contentpanel, giving the rounded corners and soft shadow, so this is positioned tothe top. Inside the footer are two credit links, which are styled up using theimage replacement technique just like the social icons. Finally theres theback to top link which is sent over to the right, and given the same linkstyling 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 thedesign looking identical between the CSS3 supporting browsers of Safari,Firefox and Chrome, and just slightly less visually appealing in IE7. IE6however, throws its usual panic attack at the CSS code and struggles tointerpret it correctly.

At first impressions the site looks a complete mess, but under closeinspection theres not too much to fix. Just a couple of extra CSS valuessoon brings everything into place. The two declarations of overflow:hidden; and height: 100%; were all that were needed on the problemelements. 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%;}


With IE6 neatly tidied up, the site design is complete. Next week well betaking the design from this HTML/CSS mockup and transform it into a fullyloaded WordPress theme. Stay tuned!

The final design


TweetTweet 151

60

LikeLike

14 50

Enter your email address Subscribe

Written by Chris SpoonerChris Spooner is a designer who loves experimenting with new

View the demo

Join the mailing list to have new content delivered straight to youremail inbox. Every subscriber gets a free pack of realistic webshadows.

1ShareShare


web design techniques collating creative website designs.Check out Chris' design tutorials and articles atBlog.SpoonGraphics or follow his daily findings on Twitter.

April 5, 2010 at 9:21 am

April 5, 2010 at 6:01 pm

Thanks Nick. Practice makes perfect! Creating these kind

Great post. Bookmarked for future use. I really need toget more coding practice inthanks

More posts like thisCreate a Stylish Contact Form with HTML5 & CSS3CSS Basics: How to Design & Code a Stylish ButtonHow To Create a Cool Animated Menu with jQueryCreate a Typography Based Blog Layout in HTML5How To Code a Blog Theme Concept in HTML & CSSHow to Code up a Web Design from PSD to HTML

63 CommentsNick

Chris Spooner


of tutorials is excellent practice for me, too.

April 5, 2010 at 11:17 am

Another great psd2html tutorial, don't have time to readthrough now but I'm 110% sure it's gonna be good!

Need to get some coding practice in like Nick above, sowill give this a good look over when I get the time! :)Thanks!

April 5, 2010 at 11:43 am

April 5, 2010 at 6:03 pm

A sprite would definitely be handy to speed things up

I think it might be a good idea to make a 'Sprite image'for all the most used Pictures/icons

but after all great tutorial :D

Callum Chapman

black-light-studio

Chris Spooner


slightly.

April 5, 2010 at 11:54 am

April 5, 2010 at 6:14 pm

This particular design is due to be included as part of theAccess All Areas section of Blog.SpoonGraphics, wherethe source file will be available, so this unfortunatelymeans it's not available publicly.Maybe check it out when the whole theme is complete?:-)

Nice tutorialI love the explanationsvery helpful! PSDfile would be nice, so I could start from the slicing.

April 5, 2010 at 11:54 am

good practice

Purse17

Chris Spooner

Shitic


April 5, 2010 at 12:00 pm

Great tutorial! I may have to have a go at this, I hatecoding but its something I need to get on with and do!

Thanks Chris! :)

April 5, 2010 at 12:36 pm

Hey Chris, thank a lot for tutorial.

How much time does it usually take to code a designconcept into HTML/CSS?

April 5, 2010 at 12:55 pm

Nice! I like the header a lot. Thanks for this nice tutorial.

Liam Maskell

RL Creative

CSSReX


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.

I wanna make a request, if possible Can you post someof the jquery codes what you like or use ?

Thanks again about the article.

April 5, 2010 at 4:10 pm

Ah, beautiful code. So clean, so nice. I can't wait to seethe next post when it gets converted to a WordPresstheme. I've been meaning to get into WordPress themes.

Abdullah Al Mamun

Carlos Carvalho

David


April 5, 2010 at 4:17 pm

Another great PSD to HTML tutorial. Thanks again Chris!

April 5, 2010 at 4:53 pm

I cannot wait until the next installment! Your PSD toHTML walk-throughs are fantastic, but being able to seehow it's skinned and made to work on a CMS WordPress will be invaluable and a value-add to anyself-taught web designer. Thank you so much for this!

April 5, 2010 at 5:01 pm

This is a great PSD tutorial! Thanks!

April 5, 2010 at 6:00 pm

Thanks for the kind comments everyone!

Ed Baxter

Rochelle Dancel

Michael Sears

Chris Spooner


April 5, 2010 at 6:22 pm

Just Fabulous!!!!

April 5, 2010 at 6:29 pm

Nice Tutorial!

April 5, 2010 at 6:38 pm

I am a print designer, but these days most of my time isfilled with web concepts. I can make sites look beautifulin photoshop, but that is as far as I go. I have read acouple of xhtml/css books, but I always find myselffighting robots, if you know what I mean.

Great article, thanks.

Jose Gonzalez

Mobile360

Martin


April 5, 2010 at 7:06 pm

Hey Chris,Great tut! I've been looking into how to do the side tabswith the post date (can't wait to see it converted toWordPress).

One thing I think might be a neat addition is a rolloverfor the RSS Feed, giving it a bit of color.

Keep it upDevon

April 5, 2010 at 7:07 pm

Nice tutorial i like

April 5, 2010 at 7:08 pm

Chris,

Devon

Sbuster

Devon


Thanks for a great tutorial! I can't wait to see thisconverted to WordPress.

One thing I think would be a neat addition is a rolloverfor the RSS feed, giving it that extra bit would make itpop in my mind.

Keep it up!

April 5, 2010 at 7:29 pm

This is symply awesome!Congratz!

April 5, 2010 at 8:12 pm

What kind of resources you often look for when you seedifferences in your website when generate by Firefoxand by IE? You haven't talked about it in this article

BSide Graphics

Mike Nguyen


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 ofhtml color codes, maybe you find it useful: Online ColorPicker.

Bye! Primoz

April 5, 2010 at 11:33 pm

This is a very well written tutorial, along with a veryclean, subtle design. Crisp.

April 6, 2010 at 12:11 am

great! this is what i am looking for^^ gonna try this. thxchris

CyMaN

Jae Xavier

rabid


April 6, 2010 at 3:30 am

really cool! awesome tutorial yet again! =) *bookmarksand shares*

April 6, 2010 at 3:30 am

What an nice tutorial, thanks so much for sharing withus. Especially the psd part.

April 6, 2010 at 12:20 pm

Thanks you may also want to look at some of the CSSgrid systems/frame works such as Blue Print and960.gs they make life even easier grid systems are abit like art it's all about personal preference so it'sworth taking a look at a few they make website designwith CSS quicker and more flexible you won't lookback.

rjene

taobao

morganiseit


April 10, 2010 at 4:13 am

I m really interested in 960.gs do you have any links tosome tuts.i m a as new to web site design as as ConanO Brian is to unemployment.

April 6, 2010 at 1:00 pm

wow, great tut, i wish i had found this before i build myown side step by step they are not so many good articles in german, but thishere is easy to understand and i can follow every step

thanks V.

April 6, 2010 at 2:21 pm

thanks!!! This TUT is really helpful :)

rob

zauberer

Leia Vieira


April 6, 2010 at 2:52 pm

Really a great and thorough tutorial.

April 6, 2010 at 2:55 pm

Chris, this is awesome. I love how clean and simple yourdesign and at the same time how powerful the color andplacement of every object is great job.

April 6, 2010 at 3:26 pm

Great tutorial. Just had a read through myself. Quickquestion would it not be better to use two separateimages one for the sidebar, and one for the content oris the technique you used just as effective?

April 6, 2010 at 5:13 pm

Jordan Walker

Louis Gubitosi

Rachel

Pawe P.Do you need professional PDFs? Try PDFmyURL!

Hmmm.. Good work, but Layout isn't very good. Forbeginners is perfect! Best regards!

April 6, 2010 at 9:46 pm

Thanks, Chris for great tutorial.

April 7, 2010 at 2:50 am

Amazing tutorial, and a very nice design.

April 7, 2010 at 5:50 am

Great tutorial and nice design as always but I have a fewslightly related questions.

First, do you have some kind of awesome WordPresstheme design checklist when you create your yourdesign and mark up?

George

inspirationfeed

Paul


Second, has it ever happened to you that the theme youdesigned, once integrated into WordPress, doesn't havethe same feel after the HTML markup & CSS styling hasbeen 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 toophilosophical!

Thanks in advance!

April 7, 2010 at 6:25 am

So beautiful and vibrant.Excellent job done

April 7, 2010 at 6:32 am

Nice explanation on HTML and CSS design conceptsLooking for more of the same kind with differentexamples from you :)

Gaurav Mishra

Web Risorsa


April 7, 2010 at 10:01 am

Hey Chris,

When you are designing websites, using ps. What are thedimensions that you use? Cheers

April 7, 2010 at 10:22 am

Good article. I like to know how code another people forimprove my skills.

April 7, 2010 at 3:03 pm

Nice one, although we use do ofter quality psd to htmlservice for our client. but have to say that this one ispretty well written.

Mits

Psd xhtml y css

XTHMWeaver


April 7, 2010 at 5:14 pm

you explain it very well. thanks for this great tutorial

April 7, 2010 at 7:26 pm

Excellent tutorial. If I'd seen this a few years ago it'dsaved an awful lot of heartache!

Thanks

April 8, 2010 at 6:05 am

Hey,

Great tutorial, I use drupal to integrate my designs. I'mcurious if it will work out!

Thanks,Jonas

lava360blog

Jason Rudland

Webdesigner Jonas


April 8, 2010 at 8:06 am

Good and very helpful! Thanks!

Sigurfreyr

April 8, 2010 at 1:42 pm

Really nice blog layout! I've never really quiteunderstood how to make wordpress layouts until now,thanks!

April 12, 2010 at 11:12 am

Nice article, a lot of people don't know how to do this.

Sigurfreyr

Auckland Web Design

Website Design Surrey


April 12, 2010 at 11:40 am

Awesome tut! Really clear and easy to follow with thestagnated, sectioned coding elements.

A nice crisp layout & design too. Looks simple (and not ina bad way) and clean. Will be eager to read on about theWP implementation now.

Thanks again Chris for your hard work in posting this.

April 12, 2010 at 12:17 pm

Good tutorial, as always! )

April 12, 2010 at 1:18 pm

Great post ! thanks

Brussells

YoYurec

Elijah


April 13, 2010 at 1:54 am

Again, Great information!

April 13, 2010 at 1:31 pm

Would you mind if I took the CSS/HTML file and I convertit to a Blogger-Blogspot Template ???

Of course I'll give you credits (both on my post and in thexml file) as the Template designer,something like Designed by line25

April 13, 2010 at 3:41 pm

Brilliant as always Chrisyou give people who want to learn up to date stuff, thesolutions it in clear terminology.Just one question though I'm now ditching dreamweaverwhat text editor would you recommend ( ideally free)

Cheers

Mankato PC Solutions - Mankato Website Design

LeBlogger

G_Unit


April 14, 2010 at 6:56 pm

Great tutorial. I find it's always interesting to check outother people's thought processes when designing/coding.

It's interesting how you indent child selectors in your CSScode.

I won't be adopting that, but I will be adopting how yougroup related properties together ('box properties',graphic/styling properties, etc) on the same line. Makessense to me

April 16, 2010 at 10:24 am

After having a website created, it's important to do theproper steps for search engine optimization. Withoutdoing marketing for a website, it would be pretty muchuseless unless you have some form of marketing to drivethe traffic there.

john

Robert T.


We do Direct Marketing, which is a direct unique visitorthat would be searching for your specific product orservice. These type of leads are much more beneficialthan indirect flyers or emailing.

April 17, 2010 at 5:36 pm

really good tuts ever.Nicely done!reezluv

Comments are now closed

About Line25 Most popular postsDo you need professional PDFs? Try PDFmyURL!

Copyright Chris Spooner. All rights reserved Privacy policy Advertise on Line25 Subscribers Page loaded in 0.577 seconds

Line25 was built in March 2009 by Chris Spooner as aplace to share his web design ideas and inspirationthrough articles, tutorials and examples of stunning sitedesigns. Be the first to see new posts by subscribing byRSS, have new content delivered by Email, or joinLine25 on Twitter.

How To Design a Custom YouTube BackgroundRounding Up the Top 10 jQuery Lightbox ScriptsHow To Create a Pure CSS Dropdown Menu15 Tutorials To Help You Build WordPress ThemesCreate a Stylish Contact Form with HTML5 & CSS3


http line25 com tutorials coding up a web design concept into html css

Documents