SharePoint 2013 Design Manager

In SharePoint 2013 plenty of new things introduced, let's take a look on Design Manager for now.
Creating a custom master page in SharePoint was bit tedious, let's consider the days of SP2010, what you'll need to do to create the custom master page.

1. Take a copy of default master 
2. Start working on that copied master page
3. Take care of all the content place holder
4. If you'll delete any of them then it'll show you an error

But in SharePoint 2013 you can directly convert your HTML page into SharePoint Master page. How..? To know more continue reading the post.

Prerequisite  

Permission : At least Designer

Feature : Publishing Feature must be enabled

Things you'll required

1. HTML Page (which you want to convert in SharePoint Master page)
2. Images and .js files
3. HTML Editor (Any)
4. SharePoint 2013 Site with Publishing Feature

Step By Step Convert HTML Page to Master Page

1. First Click on the gear icon and click on the Site Settings link to navigate to the site settings page      
   
2. Now you'll find Design Manager link under the "Look and Feel" click on that                                          
   
3. Once you click on the Design Manager link you'll navigate to the below page, there are some simple steps on the left side of the page. Each step will help you in the branding of your site. There are total 7 steps. For now we will go to the step 2 which is Upload Design Files                               
4. On Upload Design Files page, you need to upload your design files to the Master page gallery. For that you should map your network drive with the site so you can easily upload design files at once. To map the network drive please see Here..                                                                                                     
5. After uploading design files, now start edit your master page. To do that click on Edit Master Pages link from the left side of the page. Here you'll find the link to convert HTML file to a SharePoint Master page, click on that link and it will open a popup of your master page gallery.             
6. Now select your HTML file from the popup and click on Insert button of the popup                                   
7. After inserting the HTML file it you can check the conversion status of your HTML file, if everything goes well you can see the Conversion Successful beside your HTML file                                                    
8. Now Click on the HTML file to check the preview of your converted master page. It will show you the master page with some important links on top like Change the Preview, Snippets, Location and Help                                                                                                                                                   
9. 
10. The cool thing about Design manager is Snippets, using which you can actually add some important SharePoint controls on your newly converted Master Page e.g : Site Logo, Top Navigation, Search Box etc.. Also you can add some web parts. To do so click on the Snippets link on right-top of the preview page. It will open a separate page for you                                                                                   
11. Now on Snippets page you'll find lots of things which can be added on your HTML Master page. For an example let's consider that you want to add OOTB Top Navigation to your converted master page. For that click on the Top Navigation button from the ribbon. It will provide preview as well as HTML Snippets as shown in above screenshot. Copy that HTML Snippets for the Top Navigation and paste it to the HTML page of your converted master page. Refresh your preview page and Top Navigation will be there.                                                                                                                            
12. After adding these SharePoint controls you are almost done with your master page and now you want to publish app the things. So go to the design manager page again and click on the Publish and Apply Design link from the left side of the page. On this page click on the Go to the Master Page Gallery and publish all your design files so the are visible for all.                                                                                                                                    
13. Once step 12 is done click on the Assign master pages to your site based on device channel and choose your master page for the site and devices.                                                                            

Note : After applying converted master page as default master, you'll find that Add an App Page is not working proper. Don't worry please put below code segment to your HTML Page(which refers to your master page). These are nothing but some content place holders which are missing when you are converting your HTML to SharePoint Master page. Make them all visible false and everything works as expected.

<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderLeftNavBar" BlockElement="true" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">-->
<!--SPM:</asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:AjaxDelta>-->
<!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">-->
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">-->
<!--SPM:</asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:AjaxDelta>-->