How to implement Microdata for organization's product or service - schema.org

Question

If my company do it product (website, design, app), what should I apply Microdata to my HTML, if HTML structure look like below:
<div>
<h1>Company name</h1>
<p>Below is our portfolio</p>
<div itemscope itemtype="http://schema.org/???">
<h2>1. Website name</h2>
<p>Website info here...</p>
</div>
</div>

Answer 1

It depends on what this content is exactly about.
If it’s something your Organization offers (so the portfolio item is a placeholder for what your business offers), you could use:
makesOffer → Offer
If it’s something your Organization owns (so the portfolio item is something your business wants to show), you could use:
owns → Product
From the perspective of the CreativeWork, you could link to your Organization using the properties author/creator, contributor, copyrightHolder, provider, or publisher.

Answer 2

1- You can use, Like Unor said, the Organization, but there is some specific types of organizations.
You can use LocalBusiness and in your case, I will use another specific type of LocalBusiness wich calls https://schema.org/ProfessionalService. (provider)
An exemple of use :
<span itemscope itemtype="http://schema.org/ProfessionalService" style="display:none;">
<span itemprop="name">company name</span>
<span itemprop="description" style="display:none;">Description </span>
<img itemprop="logo" src="http://logo-url" alt="">
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Address</span>,
<span itemprop="addressLocality">Locality</span>
<span itemprop="addressCountry" >Canada</span>
<span itemprop="addressRegion">State_or_province</span>
<span itemprop="postalCode">Postal_code</span>
</span>
<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="45.5354467" />
<meta itemprop="longitude" content="-73.505216" />
</span>
</span>
I advise you to use the GeoCoordinates, because Google should promote your web site in your local area.
You can hide this information for users by an style="display:none".
2- For your portfolio, you have another schema : CreativeWork
3- For the use of offer : you have to indicate the price that could be show directly in search results. But in your case, I don't think you want it :).
Microdata can change the appearance of your page directly in search results. For more information, Google Developers