PSD to HTML Complete Course

Hi Friends Welcome to Edikas. as you know we here on Edikas provide you fully free courses about everything you need. that's why we came with PSD to HTML Complete Courses. Before we start to the tutorials lets understand how to start. you need to know that Photoshop is the first Part and HTML is the Second Part. before we go to tutorials let me explain you a little about PSD (Photoshop Design) and HTML (Hyper Text Markup Language).

PSD is short of PhotoShop Design. if you are a website designer or you want to be a website designer then you know that PSD is a Photoshop File. when we make a Design in photoshop and save this file as a Photoshop then its called photoshop default. Adobe Photoshop is a software which is used to make Website Designs. A PSD file can be opened in any software like CorelDraw, Photo paint but in these software this file is not completely editable only photoshop can completely edit this website.

HTML is a Hyper Text Markup Language. HTML is used to Develope Web Pages using ordinary Text. HTML is not a Programing Language. All the website have HTML Files. Every webpage is HTML File. you can not develop a website without HTML. HTML is a plain text. a Website have many HTML files which are linked to one another.

Outline of the Course:

(Click on any lesson and Watch Tutorial)

1) Introduction:

1)     Introduction

1.2)   Examining the Designs

2) Structuring the Site:

2.1)   Creating the Index File

2.2)   Structuring the Navigation

2.3)   Structuring the Feature Section

2.4)   Structuring the Portfolio Samples

2.5)   Structuring the Footer

3) Styling the Site:

3.1)   Creating a Stylesheet 

3.2)   Typekit and Google Fonts

3.3)   Setting Up the Navigation

3.4)   Styling the Menu Items

3.5)   Preparing the Social Icons

3.6)   Arranging the Social Media Icons

3.7)   Styling the Body Text

3.8)   Preparing the Featured Icons

3.9)   Preparing the Background Image

3.10)  Styling the Feature Section

3.11)  Preparing the Portfolio Images

3.12)  Laying Out the Columns

3.13)  Styling the Captions

3.14)  Setting Up the Footer

3.15)  Styling the Footer Content

4) Make it Responsive:

4.1)   Reviewing the Photoshop Files

4.2)   Our First Media Query

4.3)   Responsive Portfolio Items 

4.4)   Styling the Responsive Menu

4.5)   Arranging the Feature Section

4.6)   jQuery Navigation

5) Conclusion:

5.1)   Final Thoughts

Download Project File by Clicking Here