How to Convert a Slick PSD Design to XHTML/CSS

Developing the #featured Section.

Now we are going to create the #featured section. This will be broken down into two separate parts. one for the welcome text and one for the slider.

The Welcome Area

The welcome area is very simple to code up. We are going to use a heading to display the welcome title that we will later replace with a image and then just a simple <p> to wrap the following text. All this will be wrapped in a div with an id of #welcome.

<div id="welcome">
	<h2>Welcome</h2>
	<p>Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p>
	<p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!</p>
</div>

Working the Slider

For now the slider will be very basic mainly because it won’t be functional. We will have two separate div‘s, a #frame to make that transparent white inset border visible on top of the slides and an unordered list with a id of #slides. The slider will eventually slide through the images inside the #slides list.

<div id="slider">
	<div id="frame">&nbsp;</div>
	<ul class="slides">
		<li><img src="style/images/slider-placeholder.png" /></li>
		<li><img src="style/images/slider-placeholder2.png" /></li>
		<li><img src="style/images/slider-placeholder.png" /></li>
		<li><img src="style/images/slider-placeholder2.png" /></li>
	</ul>
</div>

The Final #featured Section Code

Your final #featured section code should look like the one below. If it didn’t turn out like this you will want to go back and see what you did wrong.

<div id="featured">
	<div class="container">
		<!-- Welcome Text/Site Welcome -->
		<div id="welcome">
			<h2>Welcome</h2>
			<p>Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p>
			<p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!</p>
		</div>

		<!-- Nivo-Slider -->
		<div id="slider">
			<div id="frame">&nbsp;</div>
			<ul class="slides">
				<li><img src="style/images/slider-placeholder.png" /></li>
				<li><img src="style/images/slider-placeholder2.png" /></li>
				<li><img src="style/images/slider-placeholder.png" /></li>
				<li><img src="style/images/slider-placeholder2.png" /></li>
			</ul>
		</div>
	</div>
</div>

The #status Section

This is a real easy section, there are only two elements in the entire thing. There will be a paragraph tag wrapping the status text and a button saying “hire me”.

<div id="status">
	<div class="container">
		<span>I am currently accepting new projects/appointments at this time.</span>
		<button>Hire Me</button>
	</div>
</div>

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Live demo View it online Download Take the source files

This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cody Robertson is a 19 year old freelancer. He is currently attending university, but loves to write and create beautiful websites whenever he can. He ranges with a large spectrum of coding languages, all the way from Objective-C to HTML. Follow Cody on Twitter

About the author Published by Cody Robertson
« « Emerging New Design Trends
Showcase of 62 Superb Game Websites » »

10 Responses »

  2. Bryan Abad
    September 16, 2010 • 11:29

    Brilliant tutorial I will have to try it out asap.
    Thanks alot ^^

    Reply to this comment
  3. Designbyarm
    September 16, 2010 • 15:07

    Awesome Tutorial.

    Thanks you for share.

    Reply to this comment
  4. Wing Loon
    September 17, 2010 • 12:10

    Good tutorial for beginner like me, thank you 🙂

    Reply to this comment
  5. Amr ElGarhy
    September 18, 2010 • 15:32

    Very good tutorial, It covered a lot of things, thanks

    Reply to this comment
  7. Tumbleweed
    September 21, 2010 • 02:42

    Dude, charset before title. 🙂

    Reply to this comment
  8. pitso
    October 11, 2010 • 11:49

    i’m going to have to take time on this one.thanks for sharing

    Reply to this comment