This article is supposed to be your ultimate PSD to HTML learning resource. We have more than 5 unique text and video coding tutorials in this article as well as additional 30 3rd-party PSD to HTML conversion tutorials. You will learn how to create HTML websites and convert your Photoshop designs in no time!
At the end of article, we also included more tutorial sites you can use to deepen your coding knowledge.
We have lots of different coding tutorials here, but let me start with the most complete video tutorial series, that will teach you how to design a website in Photoshop. Then you will learn how to convert this Photoshop design into HTML.
And finally after we are done with HTML coding part, we’ll teach you how to convert into working Twitter Bootstrap website! As you can see everything you need is here.
Note: If you don’t want to spend all the time learning how to do PSD to HTML conversion, check out a service PSD2HTML, which does it for you! Great if you are in rush, or if you are designer and don’t really enjoy working with HTML/CSS.
How To Convert PSD To HTML To Twitter Bootstrap Video Tutorial Series
Hello everyone, welcome to Basic Web Design Video Course, where you will learn how to code a website.
In this course I will walk you through the very basic steps on what to do and what to learn before, and during, building a website.
You’ll learn all the steps including:
planning
wireframing
using basic tools and panels in Photoshop
basic HTML and CSS coding
and after learning these we will apply our knowledge and code our very first website from scratch in Twitter Bootstrap.
Resources in this tutorial:
Wireframe: Download!
Finished PSD: Download!
Part 1: Basic Web Design Video Course – Wireframing, Photoshop Tools & Panels, and Designing
Part 2: Basic Web Design Video Course – Basic HTML Tags, Structure & CSS Properties
Part 3: Basic Web Design Video Course – Complete HTML Markup & CSS Styles
For our valuable readers we will be pushing the basics here. So it’s your chance to learn and become a web designer for free. Are you excited? I hope that beginners can follow through and learn how to code a website, if anything is unclear just reach out to me in the comments section.
I will do my best to walk you through everything in these HTML tutorials slowly and clearly. So let’s get started!
Part 1: PSD to HTML Tutorial – Wireframing, Photoshop Tools & Panels, and Designing
Planning and Wireframing
What is a wireframe?
A wireframe is a visual presentation of how a website’s layout will look when it’s finished. It’s about structuring the overall layout without any graphics, placing the various elements where you believe they will look and work best. Wireframing is a great step to start before jumping on to Photoshop because it allows you to focus on the important components of the website without all the visual clutter of a finished design. Wireframing also saves you time when designing a website because wireframing acts as a sketch, and instead of having to do things more than once in Photoshop, you can just adjust your ‘sketch’ until you’re happy.
Your wireframe should include boxes that represents images, header, footer, sidebars, text blocks, navigation and other content aspects of your website.
You don’t have to worry about drawing them yourself, since there are many wireframing tools available on web.
Wireframing Tools:
18 Wireframing, Mockup and Prototyping Tools to use when Designing a Web Site
Tools Used: Go Mocking Bird
Photoshop Basic Tools and Panels
Some beginners know the functions of specific tools, take the Ruler Tool(I) as an example. The problem is they don’t know how to look for the distance when they measure and how to turn the guides on and off. Especially those who are using earlier versions of Photoshop. Like this question in Quora What is the shortcut to display the distance between two guides in Photoshop? So in this part I will walk you through the basic Tools and Panels in Photoshop, talk about how important they are and how each tool will help you create your website design in Photoshop.
Designing In Photoshop
Now that we have the general idea for our website’s layout, it’s time to tone this up and make it more presentable in Photoshop. Let’s make this design as simple as possible.
In the next part we will be talking about the basics of HTML and CSS and with this knowledge we will convert our simple design into a working website.
So, that’s it for this part. I hope you learned something and found the videos helpful. If you have any suggestion regarding the videos or how I presented it please leave a comment below. I’m really excited to hear your thoughts in the comment section, see you guys down there.
Peace!
Part 2: PSD To HTML Tutorial – Basic HTML Tags, Structure & CSS
Howdy, this is the second part of our “How To Convert PSD To HTML Course”. This time we will talk about the tools needed before starting out with HTML and CSS, then we will learn the most commonly used HTML tags.
For this tutorial, we will only cover the tags that are very useful to beginners, we will cover more tags at a later time. Then, we will style the tags using basic CSS properties. No worries guys, in the next videos we will go more in-depth and learn together.
Download: PSD Template
Final Product of this HTML Tutorial
Preparation
Which Text Editor To Use For Coding?
Windows
Atom
Notepad++
Aptana
Mac
Textwrangler
Textmate
Coda
HTML Basic Tags and Structure
We will talk about the most commonly used tags that you’ll see on a website. We will cover headings, paragraphs, links, images, list items and divisions. Also we will familiarize ourselves with the basic structure of HTML markup and how to open and close a tag.
Let’s code a website!
Basic CSS Properties
In this coding website tutorial video we will learn to style a certain element or tag using CSS properties by changing width, height, colors, floats, etc. Using these basic properties we can turn our HTML markup into a well presented website.
Now that we have finished positioning our layout structure we can now proceed to the next part, which is marking up the HTML of our very basic design template and completely style it using CSS.
So, that’s it for this part. I hope you learned something and found the videos helpful. If you have any suggestions regarding the videos, or how I presented them, please leave a comment below. I’m really excited to hear your thoughts in the comment section, see you guys down there.
Part 3: PSD To HTML Tutorial: How To Code a Website From Scratch
Hey guys, we’re really excited to release this resource for you. If you’re following my previous tutorials, I started with the basic one, which is boring for some of you and might be helpful for the beginners who just started learning.
In this web design video course, I will show you the processes involved on creating a landing page – from planning, searching for inspiration in the top design community, choosing fonts, colour scheme, wire framing and finally transferring the wire frame into Photoshop and rocking it out there. Once we have our PSD design ready, we will convert it into a working website using Twitter Bootstrap. We will be also covering how Bootstrap, scaffolding, base CSS, and JavaScripts work!
Get ready and let’s get started!
The Final Product
Download Source Files
View Demo
Resources you will need to complete this tutorial:
Background Image
Museo Font
Pixel Pattern
Time and Patience
The Designing Part
Finding Inspiration & Wire Framing
Let’s assume that we already know what is the goal of the website we’re going to make. The first step is to gather some inspiration that suits your taste for your website and start doing some rough sketches using your pen and paper.
DeviantArt.com
Dribble.com
Behance.net
The next thing you will need after finding inspiration is to create a wire frame based on your ideas.
MockFlow.com
Mockingbird.com
Wireframe.cc
Wireframe to Photoshop Tutorial
Basing on our wire frame, we will start transferring it into Photoshop to have a much clearer vision of what exactly the website layout will look like. What’s good about doing this is we can focus only in placing the elements like buttons, text headings, and paragraphs in the right position and the right size.
Applying Styles To Website
Here is the exciting part, and that is, applying styles to all of the elements, buttons, fonts and background. In here, we can play around with a lot of stuff, for example, applying filters to images, playing with curves, putting contrast, creating our own shadows to make the elements pop out more.
So that’s it, guys, for the designing part. It’s a matter of trying and playing to come up with a great outcome. Just remember to search for inspiration because designers of the 3 design communities I’ve mention are following the latest trends of web design. It’s not copying but learning from their works.
I think there is nothing wrong with that as long as we don’t copy their overall design. So if you’re planning to create yours, please take time to think and plan what’s best for you, gather some inspiration, create a wireframe, choose the right fonts and colour scheme for your brand and, lastly, rock the Photoshop until you have come up with great results.
Learn How To Go From PSD to HTML to CMS Using Twitter Bootstrap
In the first part of this coding tutorial, we are working mostly on the graphical part. We’ve also talked about where to find inspiration, colour schemes, grid and much more.
In this 2nd section of the Elegant Landing Page Design in Photoshop tutorial, we will be working on the coding part. In here, we will talk about how to use Twitter Bootstrap for transforming our PSD design into a working website.
I will divide this into 3 videos:
first one will be about marking up the HTML;
the second will be about applying CSS styles
and the last one will be taking care of the responsive part. This will take much of your time but if you’re a beginner and willing to learn to transform your own Photoshop design into a working HTML website, I know you will find time to learn this. Let’s get started!
Resources you will need to complete this HTML tutorial:
PSD File
Bootstrap
Time and Patience
HTML Markup
Here, I will walk you through on how easy it is to use Twitter Bootstrap by just linking the appropriate file path to make it work. Then I will guide you step-by-step on how to mark-up properly the HTML base on our design, starting from the header down to the footer.
Applying CSS Styles
Now that we’re done marking up our HTML, it is time to overwrite the styling that Twitter Bootstrap has provided. What’s good with this is we will not be worrying anymore on the layout structure because Bootstrap already has done it for us by just adding the right classes for each division that we’ve markup in HTML. All we need to do now is to style the elements to match to our PSD design.
Responsive Part
Alright, you’ve done a lot. Have a break; get some cup of coffee. Done? Finally, we reach the last part of this tutorial, which is to make every section responsive. And also, we will make the banner and testimonial section working as a carousel.
Conclusion
That’s it guys! Imagine how easy and powerful Bootstrap is by the pre-made classes provided for us to use. All we need to do is to properly adjust some padding and margins to make everything look good and balanced.
You’ve done a great job, guys! You just completed the tutorial. I hope you can apply this in your future projects. I wish you learn something from this. Make sure to share it with your friends. If you have comments or suggestions, feel free to drop them below. I’m excited to hear from you. See you guys on the comment section. Cheers!
How To Make a WordPress Website in 10 Minutes
This is another quick video showing how to quickly make your website live in less than 10 minutes. We’ll show how easy it is..and we are using the easiest starting option, hosting from Bluehost. Use this link to get 50% discount to your hosting plan.
Code a Responsive Website Using HTML5 and CSS3
Now if you were looking for video HTML tutorial and are ready to build responsive web design with HTML5 and CSS3 – you are in the right place. Just download source files, view demo and click play on the video – let’s make a responsive HTML website!
Looking for quick coding tutorial? – How to Make Website Responsive In About 15 Minutes
Download Source Files
View Demo
Build Flat Responsive WordPress Website From Scratch (High Quality Course)
If you are looking to take your web design career to whole new level in 2015 – we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site – 100% Responsive & Flat –
You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will convert website to fully responsive and functional WordPress website.
Yes, you will learn how to make website responsive, but this time you will be building high quality website design you can be really proud of!
We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well! Watch the video to see exactly what’s inside.
What you are waiting for? Take your skills to the next level right now.
Check Out The Course
Bonus Tutorial: Create Agency Landing Page In Adobe Photoshop
Hey Guys! Were you ever asked to design a Design Agency website and you’d run out of ideas? Well, this tutorial is just for you. I will show you how to create a stylish looking landing page using Adobe Photoshop. Don’t worry, this design will not take too long and don’t be afraid of doing this if you are a beginner I promise to guide you all the way through. So what are we waiting for? Let’s get started!
Here is what we will be making, click on the image for full preview:
PSD Download
Are you ready to learn how to code a website? Let’s get started then!
Resources for this tutorial
Home
Search
Map
RSS
Macbook Air
Twitter
Web Design
Vector Design
Step 1: Setting up the Document
Start by creating a 1400px x 1820px document in Photoshop.
Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
Rulers: Ctrl + R
Guides: Ctrl + ;
Also one thing important in using Ruler Tool is the Info(Information) Panel. The use of this is when you are measuring using the ruler, the information will be shown in the information panel. Make sure that this is shown in your panels to the right. If it is not shown you can access this by going to Windows – Info.
The total width of this site will be 960px. So, let’s create our first guide by going to View – New Guide, set the value to 220px. Create another guide but now change the value to 1180px, this will make a total of 960px in the center of our canvas.
Step 2: Working on Header
Our header will contain a logo, call to action, navigation, search.
Step 2.1
Using Rectangle Tool(U) with a fill color of #4d9543, create a 100px by 10px shape and place it on the very top of the canvas.
Step 2.2
This is a personal logo that I’ll be using in this tutorial. For the Burnstudio text I used Myriad Pro 30pt, color #4d9543 and #4a4a4a. Feel free to create your own brand name using these font settings. Once you have finished it, place the logo 40px below the green shape.
Step 2.3
On the other side let’s add the call to action. The font I used for this is Kozuka Gothic Pro, 24pt. If you don’t have this font try to use Helvetica Thin/Light. Color will be #333333 and #4d9543. Now, add your number and Call us now text using Text Tool(T). I also added a 1px #c8c8c8 solid line 20px from the right side of the text. You want to align it with the logo.
Step 2.4
Next we’ll create the navigation. Select Rounded Rectangle Tool(U) and set the Radius to 30px. Now, create a 960px by 50px shape with a fill color of #4d9543. Place it 40px below the logo.
Step 2.5
Apply these Blending Options
Stroke
Inner Shadow
Gradient Overlay
Step 2.6
First you will need to add the home icon, followed by the links. The font I used is Helvetica Light, 15pt. Using Text Tool(T) add the following links. Note that each link has a 30px distance from the divider, so measure it using Ruler Tool(I).
Step 2.7
Duplicate the divider and move it 1px from the right and apply this Blending Option.
Stroke
Result
Step 2.8
To create the search bar, create a 225px by 30px shape using Rounded Rectangle Tool(U) with a fill color of #4b9241, place it 55px to the left. Add the (search) text using Text Tool(T), font is Helvetica 14pt. Then, place the Search Icon 20px to the left.
Step 2.9
Apply this Blending Option to the search bar
Stroke
Drop Shadow
Last step in this part is to add Drop Shadow on the icons and text to make it more crisp.
Step 3: Working on Slider
Step 3.1
The slider part will be 300px high and 40px below the navigation, so go ahead and measure it with Ruler Tool(I).
Step 3.2
Once you’ve done it. Select Rounded Rectangle Tool(U) and create the same shape as shown in the screenshot below. All you need to do is first create a 550px by 250px shape and customize the bottom right corner the same in the screenshot below using Direction Tool(A).
Step 3.3
Next using Ellipse Tool(U) create a 160px by 160px shape. Fill color for this one doesn’t matter because we’ll be masking an image above it later. Place this shape at the center of the bottom right corner.
Apply these Blending Options
Stroke
Result
Step 3.4
Create another shape using the same tool. Make sure the fill color is #000000 and change the opacity to 80%. For the purpose of the presentation I made it a green so that you can see how the shape will look. The shape size is 575px by 88px.
Step 3.5
Next we will be adding the slider controls. Using Ellipse Tool(U) create a 3 13px by 13px shape. the normal state color will be #f5f5f5 and for the active is #4e9643. Place it as shown in the screen shot below.
Apply this Blending Option
Stroke (Normal)
Stroke (Active)
Result
Step 3.6
Next is the previous and next button. I created this using Pencil Tool(B). Normal state color will be #4f4c4d and for the Active the same green color. Place this as shown in the screenshot below.
Step 3.7
Now that we have all the shapes together let’s fill it with text and add an image. All you need to do is create a new layer above the shape and place your image there, then Right Click and click Create Clipping Mask. Do the same on the ellipse shape. I will leave it up to you what image you use.
Step 3.8
Next let’s add the text. For the heading title I used the same font as the call to action part, then for the paragraph I use Helvetica 13pt, #555555 and for the read more I made it Italic and used the same color green and added an arrow using Pencil Tool(B) beside it. And that’s it for this slider part.
Step 4: Working on Services Area
Step 4.1
The service area will be 240px high and 40px below the slider, so go ahead and measure it with Ruler Tool(I).
Step 4.2
Using Rounded Rectangle Tool(U) with a fill color of #f9f9f9 create a shape as shown in the screen shot below.
Apply the following Blending Option
Gradient Overlay
Step 4.3
We will be dividing the shape into two so that we can align our service blocks properly. 960/2 is 480px, so go ahead and measure it with the Ruler Tool(I). Add the following text and Icons as shown in the screen shot below. Note that text sizes and color are all the same so feel free to copy some elements as we did previously. Also the distance from the shape left and above is 30px.
Web Design
Vector Design
Step 4.4
Adding the shadow to the bottom part is very simple. All you need to do is duplicate the base shape and make the fill color #000000, place it below the original shape layer. Next, Go to Filter – Blur – Gaussian Blur to 7.0, create a mask on the layer and brush over the part that we don’t need.
Step 5: Working on Media Section
This part will be divided into 3 sections Video, Twitter & Facebook.
Step 5.1
We will work first on the Video section. The video will take up 305px by 220px and the same distance from above. Go ahead and measure it with Ruler Tool(I).
Step 5.2
Using Rounded Rectangle Tool(U) create a 300px by 145px shape as shown in the screen shot below with the same green color.
Apply this Blending Option
Gradient Overlay
Step 5.3
Next let’s create a play button. Using Ellipse Tool(U) create a 45px by 45px shape with a fill color of #f5f5f5.
Apply the following Blending Options
Drop Shadow
Inner Shadow
Gradient Overlay
I also added a play icon I created using the Pencil Tool(B) with the same green color.
Step 5.4
Add some text with the same font, the size will be 18pt and 14pt. Lastly add the macbook air icon and place it as shown in the screen shot below.
Step 5.5
Now let’s design the Twitter feed. Select Rounded Rectangle Tool(U) change the Radius now to 20px. Create a 105px shape of width, the height will not matter. Now customize the shape by using Pen Tool(P) and Direct Selection Tool(A) and make a shape as shown in the screen shot below.
Step 5.6
On the layers panel make the shape fill color to 0% and apply an inside stroke 1px solid #c8c8c8.
Step 5.7
Now let’s add text and the Twitter icon. Place it as shown in the screenshot below. Heading font size is 18pt, paragraph 13pt and for the link color and the hours color is #6767c9, #999999.
Step 5.8
For the Facebook widget there’s nothing special I just took a screen shot in the widget page.
Step 6: Working on Links, Blog, Location Section
Step 6.1
The footer will be 100px by 320px and 50px distance from top, so go ahead and measure it with Ruler Tool(I). Then, Fill the whole space using Rectangle Tool(U) with a fill color of #333333.
Apply this Blending Option
Drop Shadow
Step 6.2
Let’s create a dotted pattern to apply in the shape. Create a new 5px by 5px transparent document and create a dot on the bottom left part of the canvas as shown in the screen shot below. Go to Edit – Define Pattern and apply this to the shape with a 30% Opacity.
Result
Step 6.3
Now let’s work on the links section, the total width for this will be 225px. I used the same font style and size, the links have a distance of 25px from each other. The distance of the heading from the top is 50px and 30px below. Also, I create an arrow shape using Pencil Tool(U) and add it beside the links.
Step 6.4
Create a 225px by 29px shape with a fill color of #000000, lower down the fill color to 20%. Place it as shown in the screen shot below.
Apply this Blending Option
Drop Shadow
Inner Shadow
Step 6.5
Now let’s proceed to blog section. Using Rounded Rectangle Tool(U) create a 292px by 58px shape as shown in the screenshot below. Fill color will be #ffffff and lower down the opacity to 10%. Distance from the links section is 77px.
Step 6.6
Add the icon and fill it with text using Text Tool(T). For the date color #cccccc and for the link is #ffffff.
Step 6.7
For the location just duplicate the heading and change the text to (Our Location). Add the map Icon. I already customized the map to show where is my exact location so feel free to customize yours. For the text color will be #cccccc and for the line #484848.
Step 7: Working on Footer
Well, this part is very simple just take some sample Icons and desaturate it by going to Image – Adjustment – Desaturate or by pressing Ctrl + Shift + U. This section will take up 145px of height so, place the icons accordingly and make sure it is centered. Last thing is to add a 1px #c8c8c8 below and we’re done.
Step 7.1
Text size 12pt, paragraph color #666666, distance from top 30px, distance from text 15px.
Step 7.2
Text size 12pt, link color #666666, 2px #c8c8c8 bottom line border.
Step 7.3
For the back to top button. I create it using Ellipse Tool(U), 30px by 30px shape. I apply 1px #bdbdbd inside stroke and crate an arrow facing top using Pencil Tool(B).
We’re done with Photoshop part, now onto creating this PSD into working HTML website!
Learn How To Convert PSD Agency Landing Page to HTML Website
Howdy, folks! In this PSD to HTML tutorial you will learn how to code the agency landing into HTML website . I’m not really into coding, more of a design person and this is my first coding tutorial. I will try my best to guide you through the whole thing. We will be coding this from scratch and by the end you will have an awesome and fully functional agency layout.
Are you ready? Let’s get started!
Download Source Files
View Demo
Resources You Will Need To Code This Website:
PSD Download
SlidesJS
CSS Tools: Reset CSS
Time and Patience :)
Step 1: Preparation for the PSD to HTML Tutorial
We all know that in converting PSD to HTML/CSS we will need to go back and forth in Photoshop (or other image editing tool) to measure the sizes, distance, and colours. So make sure you open up the PSD file in Adobe Photoshop.
Of course you’ll need your favorite code editor and debugging tools. I used Intype as my text editor and for debugging tools I recommend Web Developer Toolbar and Firebug.
It is important to test our code using different browsers every step of the way so that we can keep on track of our code. I used CSS3 styles in this tutorial, which should work in Chrome and Firefox. For IE6 trust me, it still looks fine.
Step 2: Getting Files Ready
You will need to create a directory folder and inside of it you should have /images directory for images and /js directory for JavaScript. I placed the CSS file in the root folder including the HTML file.
Also we need to export the images to be used in the PSD file. For example the The Logo, you will need to select the layer from the layers panel, copy and paste it in a different document and CTRL + ALT + SHIFT + S in order to save for web and devices, the appropriate file type for the logo should be .png. But if you’re tired of doing this you can just download the files and use the images I already exported.
Step 3: Simple Starter Layout
To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique.
Background: you notice that the background is white.
Header: Notice that in this section the header has a green line on the top which covers the whole screen, so in order to do this we need to wrap the header with another container. The header contains logo, call to action, navigation and search.
Pay attention to the naming of id or class in every screenshot I made, these will be the names we will use when we markup the HTML.
Slides: for the slider we will be using SlideJS.
Service: this section contains 2 columns for web design and vector design.
Media: this section is divided into 3 columns for video, Twitter, and Facebook.
Notice the above section slides, services, and media are positioned in the center, so we will wrap them with a div and name it container.
Widget: this section is divided into 3 columns for links, blog, and location. Also you will notice it is covered with a gray dotted pattern that covers the whole screen.
Client: In this section you will notice there is a solid gray border on the bottom that covers the entire screen and a list of clients logo.
Footer: Finally, the footer which contain 2 columns for copyright, footer links, and back to top arrow.
Here is the image of the overall markup that we have done.
Now, Based on these notes we create the following HTML layout.
Notice that the naming of the divs in every section is based on the naming we did earlier when we analyzed the PSD layout. Note that this layout is a fixed width of 960px. I know it would be better if we used a CSS framework for this project. But like I have said, we will do it from scratch.
Step 4: Working on Header Section
Now lets focus more on the header section we will mark up the HTML elements that can be found in this section.
In the above HTML I just followed what I saw in Photoshop. First is the Logo, since the logo is clickable I added <a> tag inside the h2. Followed by the the call number which is wrapped in a div with an id of call. Lastly I created a <ul> list which contain links and the search.
Now let’s add the CSS as follows:
All CSS should be added in the style.css file. Also, make sure you just copy the CSS reset which I provided in the resources and place it in style.css file.
In the above CSS, since we have reset styles we need to style our text formats. I know that we used a different font for our headings and I don’t think Google fonts support Kozuka Gothic. But for now we will replace it with Helvetica. Notice also I added the classes green and white, this will be used when we style green or white text that can be seen in the design.
When you test it you will have something that looks like the screenshot below.
In the above CSS I styled header-wrap with a 10px green border, since a div by default is styled in a block display this will fill the whole width of the screen. Then I centered the header with margin: 0 auto. Next, I styled the Logo with a fixed width and height. I also floated it the left. For the Call I floated it right and apply a 1px gray border also a 25px padding from right. Note that to get this value you need to go back to Photoshop and use the Ruler Tool(I) to measure the distance. Since I styled the h3 and h4 with a 25px bottom margin in our base text format we need to reset it and change it to 0. This will make the h4 and h3 in the call section back to normal.
Next, I styled the navigation with a fixed width, height and a gradient, I applied a clear both to clear the above floating elements logo & call. All li are floated left except for the last li element, also it has a left and right border except for the the home there is no left border and for the last there is no right border. All a is styled 30px padding from left and right 0 for top and bottom, a height of 50, a text shadow, a line-height of 50 to make it center vertically. For the class home I pushed out the text and replace it with the home icon. Since the corner is rounded we need to specify another style hover for the home button that’s what I did below the a:hover.
Lastly, I styled the search input with a rounded radius, a green background, dark border on top and light border on bottom. Also to target placeholder attribute refer to the CSS which I comment to style place holder this is a part of css3 property.
Before previewing this to IE lower versions make sure to copy and paste the code below in the header section of our HTML file. This will enable HTML5 elements to work in older IE browsers.
Now our layout should look like this.
Step 5: Working on Slider Section
Now let’s add the content inside the slides element, here’s the HTML.
In the above HTML markup I added a class slides_container this will hold our slides elements which is wrapped by a div that contains an image, a div class of slides-right that holds the slide title, info, and read more link. Also I added a class for the heading slide-heading, paragraph info and for the read more readmore. This will be helpful since we will repeat the HTML code 3 times and they will have the same styles if we add the CSS later.
Now let’s style all the element, here’s the CSS.
#container{
width: 960px;
margin: 0 auto;
}
/* SLIDES */
#slides{
position: relative;
margin-top: 40px;
}
.slides_container{
height: 315px;
}
.slide-right{
position: absolute;
top: 0;
left: 385px;
}
.slide-heading{
background: url(images/slide-heading.png) no-repeat;
width: 494px;
height: 68px;
color: #fff;
font-size: 24px;
padding-top: 20px;
padding-left: 80px;
margin-top: 35px;
margin-bottom: 30px;
}
.slide-right .info{
width: 395px;
margin-bottom: 20px;
margin-left: 155px;
}
.slide-right .readmore{
margin-left: 155px;
}
.readmore{
font-style: italic;
text-decoration: none;
color: #509743;
padding-left: 15px;
background: url(images/more.png) no-repeat 0 50%;
}
.readmore:hover{
color: #c8c8c8;
}
.pagination{
position: absolute;
bottom: 25px;
left: 25px;
z-index: 99;
}
ul.pagination li{
float: left;
margin-right: 10px;
background: url(images/pagination.png) no-repeat;
background-position: top;
width: 14px;
height: 15px;
}
ul.pagination li.current{
background-position: bottom;
}
ul.pagination li a{
display: block;
text-indent: -999999px;
}
a.next{
position: absolute;
right: 25px;
bottom: 30px;
display: block;
width: 7px;
height: 13px;
background: transparent url(images/prev-next.png) no-repeat;
background-position: top right;
text-indent: -9999px;
}
a.prev{
position: absolute;
right: 50px;
bo