Magento 2 Areas

Magento has 5 areas types:

1. adminhtml: entry point for this area is index.php or pub/index.php. The Admin panel area includes the code needed for store management. The /app/design/adminhtml directory contains all the code for components you’ll see while working in the Admin panel.
2. frontend: entry point for this area is index.php or pub/index.php. The frontend contains template and layout files that define the appearance of your storefront.
3. base: used as a fallback for files absent in adminhtml and frontend areas.
4. webapi_rest: entry point for this area is index.php or pub/index.php. The REST area has a front controller that understands how to do URL lookups for REST-based URLs.
5. webapi_soap: entry point for this area is index.php or pub/index.php.

Create a module Magento 2

1) Create folder in app/code/<Vender>/<ModuleName>, For Example using Vendor as Mywork and ModuleName as HelloWorld
2) Declear module by creating module.xml in app/code/Mywork/HelloWorld/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Mywork_HelloWorld" setup_version="1.0.0" />
</config>
3) Register the module by registration.php in app/code/Mywork/HelloWorld/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Mywork_HelloWorld',
    __DIR__
);
4) Run command: php bin/magento setup:upgrade

Register Custom Theme in Magento 2

1) Create Folder in side app/design/frontend/<Vendor>/<ThemeName>
2) Declear your theme by creating theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Theme Name</title> <!-- your theme's name -->
    <parent>Magento/blank</parent> <!-- parent theme, in case your theme inherits from an existing theme -->
    <media>
        <preview_image>media/preview.jpg</preview_image> <!-- path of your theme's preview image -->
    </media>
</theme>

3) Register the theme by creating registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::THEME,

   'frontend/<Vendor>/<ThemeName>',

   __DIR__

);

4)Upgrade System:php bin/magneto setup:upgrade

Magento 2 admin url not working and Frontend is messy

1) In core config table change value for web/seo/use_rewrites to 0 

2) disable versioning form admin:

    System>Advanced>developer: Static Files Settings: No

Query to do this:

INSERT INTO 'core_config_data' ('path', 'value') VALUES
VALUES ('dev/static/sign', 0) ON DUPLICATE KEY UPDATE value
ON DUPLICATE KEY UPDATE value = 0;

3) Run command to clear a configuration cache:
     magento cache:clean config

Basic Commands for Magento 2

To clear cache
php bin/magneto clean:cache

To flush cache
php bin/magneto flush:cache

To enable a module
php bin/magento module:enable

To disable a module
php bin/magento module:disable

To update module in database tables
php bin/magneto setup:upgrade

To deploy static content
php bin/magento setup:stactic-content:deploy

To set mode
php bin/magento deploy:mode:set (developer/default/production)

To view enabled mode

php bin/magento deploy:mode:show

Commands to run after new theme installation

After changing default theme to custom theme run these commends

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

php bin/magento indexer:reindex

php bin/magento cache:flush

this only your theme contents and blocks indexing

Quick view on home page product listing

Install following module:
http://www.magentocommerce.com/magento-connect/md-quick-view-product-5915.html

It will set quickview link on your catalog product list.
For home page: Go to CMS->Pages->home page->Design and copy follow code to add css and js
<reference name="head">
<block type="page/html" name="top.Js" as="topJs" template="md/quickview/page/lablequickview.phtml"/>
              <action method="addJs"><script>md/quickview/js/jquery-1.7.2.min.js</script></action>
<action method="addJs"><script>md/quickview/thickbox/jquery.noconflict.js</script></action>
            <action method="addJs"><script>md/quickview/fancy/fancybox/jquery.fancybox-1.3.4.pack.js</script></action>
            <action method="addJs"><script>md/quickview/js/md_quickview.js</script></action>
            <action method="addJs"><script>varien/product.js</script></action>
            <action method="addJs"><script>md/quickview/configurable.js</script></action>
  <action method="addItem"><type>skin_js</type><name>js/bundle.js</name></action>
            <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/></action>
            <action method="addJs"><script>md/quickview/js/slides.min.jquery.js</script></action>
            <action method="addJs"><script>md/quickview/cloud-zoom.1.0.2.min.js</script></action>
 <action method="addCss"><stylesheet>md/quickview/css/jquery.fancybox-1.3.4.css</stylesheet></action>
 <action method="addCss"><stylesheet>md/quickview/css/stylefancy.css</stylesheet></action>
</reference>

AND add following code to your phtml file top
<script type="text/javascript">
!window.jQuery && document.write('<script type="text/javascript" src="<?php echo $this->getSkinUrl("quickview/js/jquery-1.7.2.min.js");?>" />');
</script>

<?php
    $_helper = $this->helper('catalog/output');
    $_dialogWidth   = Mage::helper('quickview/quickview')->getDialogWidth();
    $_dialogHeight  = Mage::helper('quickview/quickview')->getDialogHeight();
    $_isModal       = Mage::helper('quickview/quickview')->getIsModal();
    $_library       = Mage::helper('quickview/quickview')->getLibrary();
?>
AND
<a id="various<?php echo $_product->getId(); ?>" href="<?php echo $this->getUrl('quickview/product/view', array('id' => $_product->getId())); ?>?width=<?php echo $_dialogWidth; ?>&height=<?php echo $_dialogHeight; ?>&modal=<?php echo $_isModal; ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image-thickbox"><span>quickview</span></a>
before product image anchor tag.

For product view use view.pthml file:
app/design/frontend/default/default/template/md/quickview/catalog/product/view.phtml
and for css use jquery.fancybox-1.3.4.css file
skin/frontend/default/default/md/quickview/css/jquery.fancybox-1.3.4.css