Creating A Simple Landing Page From PSD Mock-Up To XHTML & CSS

Creating A Simple Landing Page From PSD For New Sites

So you have registered a new site and it’s no where near developed yet, however you want to promote the new site to your current blog readers or friends. What you need is a temporary landing page for visitors to go. These typically display a logo, some kind of design and some useful links. This tutorial will take you step by step from creating your PSD landing page to a XHTML & CSS web page You will also learn some basic jQuery effects.

View Live Demo

View How To Create The Logo

The Tutorial

The PSD

Create yourself a mock-up in Photoshop of how you want you landing page to be. As you can see I have added some contact links and a section to display my latest tweet. This will be later cutomized via jQuery. Learn how to create the logo Click Here

Start By Cropping The PSD

Firstly you want to crop the appropriate images from your PSD and save them for the web (SHIFT+ALT+CMD+S). Tweak the settings of your selected file type (.jpg) to reduce the size of the images, this will result in the images loading faster in the browser.

Index, CSS, & jQuery

Export the images into an images folder, also create youself two new folders – CSS in here create a blank style sheets. JS in here put the latest version of jQuery. Finally create a new blank index.html file, open this and the style.css file you created.

<html>

	<head>

		<title>The Designers Yard - Coming Soon</title>

		<META name="keywords" content="design, web design, design tutorial, graphic design, tutorials, design round-ups, design, freebies">

		<link rel="stylesheet" href="css/style.css" type="text/css">
		<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

	</head>

	<body>
	</body>

</html>

With your index.html file open make the DOCTYPE XHTML 1.0 Strict and throw in some basic html code, be sure to link to your Style.css and jQuery.js files.

	Resets
*/

*		{
		margin: 0;
		padding: 0;
}

img a	{
		border: none;
}

p		{
		font-family: Georgia;
		font-size: 14px;
		color: #0074AE;
}

Open up your Style.css file and set yourself some basic resets, make sure you set your margin and padding to 0.

	<div id="topsoil"></div>
	<div id="content">
		<div id="logo"></div>
	</div>

Back in your index.html file start to fill out your body tags with the topsoil, content and logo divs.

/*
	Top Section
*/

#topsoil	{
			height: 152px;
			width: auto;
			background: url(/images/topsoil.jpg) repeat-x;
}
#content	{
			width: auto;
			height: auto;
			background: white;
}
#logo 		{
			width: 592px;
			height: 191px;
			background: url(/images/TheDesignersYard.jpg) no-repeat;
			margin: 0 auto;
}

Now go back to your style sheet and start to style the divs we just put in. Setting the width and height to auto will let the div expand depending on what content is in the div – this is just what we need as we will be using some jQuery slide effects later on. Set the background images with appropriate repeats. Then Set the logo margin to 0 auto; this will keep it centered in the browser.

CSS Outcome

Check that your code is how we want it in your default browser – this is exactly what it should be.

<div id="logo"></div>
	 		<div id="social">
				<a href="#" class="click"><div id="twitter"></div></a>
				<a href="mailto:henrydurdan@thedesignersyard.com"><div id="mail"></div></a>
			</div>

Inside the content div under the logo div set yourself up a div with an ID of social, inside of this add yourself two HTML links, one with a dummy link (#) with a class of click – this will be used when we throw in some jQuery later, the other with a mailto: link. Inside of these links add two divs with the ID’s of twitter & mail.

/*
	SOCIAL
*/

#social		{
			width: 170px;
			height: 60px;
			background: transparent;
			margin: -10px auto 0;
}
#twitter	{
			width: 77px;
			height: 60px;
			background: url(/images/twitter.jpg) no-repeat;
			float: left;
}
#mail		{
			width: 74px;
			height: 60px;
			background: url(/images/mail.jpg) no-repeat;
			float: left;
}

Next, head back to the style sheet to add some CSS to the new DIV’s. The social div will be the wrapper for the twitter and mail icons. Set the margin for this to -10px auto 0; this will ensure the div stays central at all times, the -10px is just to move the div more towards the logo. Give the twitter and social icons their dimensions and background images – remember to float them to the left so they stay in the social div side by side.

Social CSS outcome

Now check that the code we’ve just done is behaving as we want it to.

<div id="tweet">
	<div id="twitterfeed">
		<div id="twitterul"
			<ul id="twitter_update_list"></ul>
			<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
			<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/HenryDurdan.json?callback=twitterCallback2&amp;amp;count=1"></script>
	</div>
</div>

Now to add the latest twitter feed. This looks like a lot of code, however its really not in fact most of it you can get through your twitter admin area. Add a tweet div this will wrap the entire area where the latest tweet will sit and the follow me link. Next, add another div with the ID of twitterfeed, this is where the latest tweet will sin inside of.

twittercode

To get the Twitter HTML Code login to your Twitter Profile and head over to “Settings” and click the link that says “You can also add Twitter to your site here” Grab the HTML code and paste it in between the twitterfeed div.

/*
	TWEET
*/

#tweet					{
						width: 960px;
						height: 90px;
						margin: 0 auto;
}
#twitterfeed			{
						height: 90px;
						width: 682px;
						background: url(/images/twitterfeed.jpg) no-repeat;
						float: left;
}
#twitterul ul li        {
						list-style: none;
						width: 470px;
						float:right;
						height: 60px;
						margin-top:
						25px;
						font-family: georgia;
						font-size: 14px;
						padding: 5px 15px 0px 0px;
						color: #0074AE;
}
#twitterul ul a         {
						list-style: none;
						color: #784829;
}
#twitterul ul a:hover	{
						border-bottom: dotted 1px;
}

Back in the style sheet lets start to style all those ‘tweet’ divs we just put in. The CSS is really just basic stuff such as remove text decorations, list-styles, styling fonts and muscling it into shape with margins and paddings.

Latest Tweet CSS Outcome

Again lets check to make sure all the code and CSS has worked as we want it to. Which it has so it’s all good.

	</div>
	<a href="http://twitter.com/henrydurdan"><div id="followme"></div></a>
	</div>

Next to add the followme div, outside of this add a HTML Link to your twitter profile. My Twitter.

#followme			    {
						height: 90px;
						width: 126px;
						background: url(/images/followme.jpg) no-repeat;
						float: left;
}

To finish off the latest tweet section style the followme div, set the height, width, background image and remember to float to the left.

followme css outcome

Now the latest tweet section should look like this, my latest tweet in the bubble and the follow me bird to the right.

<div id="bottomsoil">
	<div id="comingsoonwrap">
		<div id="comingsoon"></div>
	</div>
</div>

Finally set yourself up three new divs at the bottom underneath our previous code, bottomsoil, comingsoonwrap and comingsoon.

/*
	BOTTOM SOIL
*/

#bottomsoil				{
						width: auto;
						height: 247px;
						background: url(/images/bottomsoil.jpg) repeat-x;
}
#comingsoonwrap			{
						width: 960px;
						height: 247px;
                                                margin: 0 auto;
                                                padding-top: 80px;
}
#comingsoon				{
						background: url(/images/comingsoon.jpg) no-repeat;
						width: 312px;
						height: 69px;
						margin: 0 auto;
}

Style the bottomsoil div with some basic background repeats, dimensions, margins and paddings.

final-result

Check that what we’ve done works and all the CSS styling has behaved exactly how we want it.

Add Some jQuery

Now to throw in some jQuery to make it more dynamic, what we want to achieve is simple javascript – when the page loads the latest tweet is hidden and when the twitter bird is toggled the latest tweet will slide down and up.

		<script type="text/javascript">
			$(document).ready(function() {
 			 $('#tweet').hide();

  			 $('.click').click(function() {
    		 $('#tweet').slideToggle('slow');
   			 return false;
 			 });
 			 });
		</script>

In the head tag add yourself some jQuery. When the document is ready we want to hide the tweet div, then when the twitter bird (with the class “click“) is clicked we want it to preform the function of slideToggle which will hide and show the tweet section at a slow speed.

With this javascript in place when the page loads now the tweet div will be hidden and the coming soon section will be at a higher position. When the twitter bird is toggled the coming soon section will slide to reveal or hide the latest tweet. This is just a really nice and easy feature that makes the page feel more dynamic than a static html page.

There you have it, a very simple step by step tutorial with some easy CSS and jQuery to create a nice looking landing page for new websites. What do you think of this tutorial? Don’t hesitate to tell me, any feedback or sharing of this post will be appreciated.

View Live Demo

View How To Create The Logo