Create first ASP.NET Core application

To create new application, we need an editor. It is not compulsory to use only Microsoft Editor. You can use any editor by your choice.

I will be using Microsoft Visual Studio Professional 2017.

To create new ASP.NET Core application, follow steps:

Open File menu -> New -> Project (Shortcut Ctrl + Shift + N), it will open New Project Wizard.

Now expand Visual C# in Installed section, then .NET Core. In the middle section you can multiple options for .NET Core project. Choose ASP.NET Core Web Application, give appropriate Name for project and select Location for the same. We can use Solution Name same as Name, otherwise can also change it.

Then New ASP.NET Core Web Application wizard will open for you project. See below screenshot.

There are already selected options on the top. One is .NET Core, and another is ASP.NET Core 2.1. First option defines project type, and second defines version.

For the .NET Core with ASP.NET Core 2.1 version it provides several templates.

Empty

An empty project template for creating an ASP.NET Core Application. This template does not have any content in it.

API

A project template for creating an ASP.NET Core Application with an example Controller for a RESTful HTTP service. This template can also be used for ASP.NET Core MVC Views and Controllers.

Web Application

A project template for creating an ASP.NET Core Application with example ASP.NET Core Razor Pages content.

Web Application (Model-View-Controller)

A project template for creating an ASP.NET Core Application with example ASP.NET Core MVC Views and Controllers. This template can also be used for RESTful HTTP service.

Angular

A project template for creating an ASP.NET Core Application with Angular.

React.js

A project template for creating an ASP.NET Core Application with React.js.

React.js and Redux

A project template for creating an ASP.NET Core Application with React.js and Redux.

We will go for an empty template. And uncheck Configure for HTTPS option. Set authentication to No Authentication.

It will work on your project for moments.

In Solution Explorer, you can see predefined files in your project. Which includes, Connected Services, Dependencies, Properties, wwwroot, Program.cs file, Startup.cs file.

Startup.cs

Program.cs

Both files will be discussed in relevant tutorials.

Mean while run the project by clicking on IIS Express or F5.

And its done. First application is ready for execution.

Introduction to ASP.NET Core

ASP.NET Core is a new framework with cross-platform compatibility and high-performance platform for building modern and could-based web app for different platforms(Windows, macOS or Linux).

If you have any experience with ASP.NET MVC or Web API over the last few years, you will notice some familiar environment. It combines the feature of MVC and Web API into a single web programming framework.

Advantages of ASP.NET Core:

• A unified story for building web UI and Web APIs.
• Integration of modern, client-side frameworks and development workflows.
• A cloud-ready, environment-based configuration system.
• Build-in dependency injection.
• A lightweight, high-performance, and modular HTTP request pipeline.
• Ability to host on IIS, Nginx, Apache, Docker, or self-host in your own process.
• Side-by-side app versioning when targeting .NET Core.
• Tooling that simplifies modern web development.
• Ability to build and run on Windows, macOS and Linux.
• Open-source and community-focused.

How to Install:

For Windows:
https://www.microsoft.com/net/learn/get-started/windows

For Linux:
https://www.microsoft.com/net/learn/get-started/linux/ubuntu18-04

For macOS:
https://www.microsoft.com/net/learn/get-started/macos

What is jQuery?

jQuery is a free, open JavaScript library. It simplifies the task of creating highly responsive web pages.jQuery works across modern browsers. It abstracts away browser specific features, and allowing you to concentrate on design.
It focuses on simplifying common scripting tasks like:
   - Getting and Manipulating page content
   - Working with the modern browser event model
   - Adding sophisticated effect
Most modern web development scenario involve common patterns.



Benifits of using jQuery:
   - It will leverages your existing knowledge of CSS.
   - It will work sets of elements.
   - Performs multiple operations on a set of elements with one line of code (known as statement chaining)
   - Hides versions browser quirks (So you can concentrate on the end result)
   - Is extensible (So you can use third party-plugins to perform specialized tasks on write your own)

How to create a Bubble effect with CSS

Demo

• 
• 
• 
•        

Here is the CSS code:

<style type="text/css">      div#content{
          margin:20px;
          text-align:center;
     }

     #bubble {
          list-style: none;
  margin: 20px 0px 0px;
padding: 0px;
     }
     #bubble li {
display: inline-block;
margin: 0px 5px;
padding: 0px;
width: 72px;
height: 72px;
     }
     #bubble li a img {
position: relative;
border: none;
     }
     #bubble li a img.large {
display: none;
     }
     #bubble li a:hover img.small {
display: none;
z-index: 0;
     }
     #bubble li a:hover img.large {
display: block;
margin-top: -28px;
margin-left: -28px;
z-index: 1000;
     }
</style>

Here is the HTML code:

<div id="content">

<ul id="bubble"> 

     <li> 
          <a href="http://twitter.com/anklet1989" title="Follow me on Twitter"><img class="small" src="images/twitter.png" alt="Follow me on Twitter" /><img class="large" src="images/twitter_large.png" alt="Follow me on Twitter" /> 
          </a> 
     </li>
     <li> 
          <a href="http://facebook.com/duylamng" title="I'm on Facebook"><img class="small" src="images/facebook.png" alt="I'm on Facebook" /><img class="large" src="images/facebook_large.png" alt="I'm on Facebook" /> 
          </a> 
     </li> 
     <li> 
          <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=http://aext.net&amp;title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Save me"><img class="small" src="images/delicious.png" alt="Save me" /><img class="large" src="images/delicious_large.png" alt="Save me" /> 
          </a> 
     </li> 
     <li>
          <a href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Fave me on Technorati"><img class="small" src="images/technorati.png" alt="Fave me on Technorati" /><img class="large" src="images/technorati_large.png" alt="Fave me on Technorati" /></a>
     </li> 
</ul>
</div>

How to create a horizontal css menu

The Horizontal CSS Menu is used in many web sites. This kind of menus are looks very attractive and good for web page's design. It increase the look of the web pages design.
So here we go:

Here is the CSS code:

#nav{
     float:right; 
     font-family:Arial, Helvetica, sans-serif; 
     font-weight:bold;
     font-size:12px;
     z-index:9999;
     color:#fff;
}
#nav a:link, #nav a:active{
     display:block;
     padding: 14px 35px;
     color:#999999;
     text-decoration:none;
     text-transform:uppercase; 
     background-image:url(nav_button_bg.jpg); 
     background-position:top left;
}
#nav li{
     float:left;
     position:relative;
}
#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none; 
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
     background-color:#2e2e2e;
     background-image:none;
}
#nav ul{
     position:absolute;
     width:13em;
     top:3.8em;
     display:none;
     z-index:1;
}
#nav li ul a{
     width:9em;
     float:left;
     background-color:#2e2e2e;
     background-image:none;
}
#nav a:hover,#nav li ul a:hover{
     color:#fff; 
     background-color:#292929;
}
#nav ul ul{
     top:auto;
}
#nav li ul ul{
     left:12em;
     margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
     display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
     display:block;
}

Here is the HTML code:

<ul id="nav">

     <li><a href="#">Home</a></li>
<li><a href="#">About</a>
          <ul>
  <li><a href="#">Philosophy</a></li>
               <li><a href="#">Work Ethic</a></li>
  <li><a href="">Team Member</a>
  <ul>
  <li><a href="#">Member One</a></li>
  <li><a href="#">Member Two</a></li>
  <li><a href="#">Member Three</a></li>
  </ul>
               </li>
  </ul>
  </li>
  <li><a href="#">Portfolio</a>
  <ul>
  <li><a href="#">Web Design</a></li>
  <li><a href="#">Identity</a></li>
  </ul>
  </li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>

How to create an Overlay message box

Here is the CSS code:

<style>  
    a.activator{
        font-family:"Courier New", Courier, monospace;
        font-size:36px;
text-decoration:none;
color:#666666;
font-weight:bold;
    }
  
    /* Style for overlay and box */
    .overlay{
        background:transparent url(images/overlay.png) repeat top left;
        position:fixed;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        z-index:100;
    }
    .box{
        position:fixed;
top:40%;
        left:-450px;
        background-color:#fff;
        color:#7F7F7F;
        padding:20px;
        border:2px solid #ccc;
        -moz-border-radius: 20px;
        -webkit-border-radius:20px;
        -khtml-border-radius:20px;
        -moz-box-shadow: 0 1px 5px #333;
        -webkit-box-shadow: 0 1px 5px #333;
        z-index:101;
    }
    .box h1{
        border-bottom: 1px dashed #7F7F7F;
        margin:-20px -20px 0px -20px;
        padding:10px;
        background-color:#FFFFFF;
        color:#666666;
        -moz-border-radius:20px 20px 0px 0px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-top-right-radius: 20px;
        -khtml-border-top-left-radius: 20px;
        -khtml-border-top-right-radius: 20px;
    }
    a.boxclose{
        float:right;
        width:26px;
        height:26px;
        background:transparent url(images/cancel.png) repeat top left;
        margin-top:-30px;
        margin-right:-30px;
        cursor:pointer;
    }
</style>

Here is the HTML code:

<!-- The overlay and the box -->
<a id="activator" class="activator" href="#">Click Me!</a>
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
    <a class="boxclose" id="boxclose"></a>
    <h1>Your Own Message</h1>
    <p>The Message will be over hear.</p>
    <p>You can do any thing in this box. Just make it. And enjoy it.</p>
</div>

Here is the jQuery code:

<!-- The JavaScript -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
    $(function() {
        $('#activator').click(function(){
            $('#overlay').fadeIn('fast',function(){
                $('#box').animate({'left':'410px'},500);
            });
        });
        $('#boxclose').click(function(){
            $('#box').animate({'left':'-450px'},500,function(){
                $('#overlay').fadeOut('fast');
            });
        });
    });
</script>

The Real Thought.....