See the Pen Simple Home Page by Rounak Polley (@cfjr) on CodePen.

Firstly, there is no specific way a homepage should look it all depends on personal taste and the purpose of making the website. Even though some features tend to remain more or less constant. Like all home pages have a navigation bar, a hero area, call to action buttons, gorgeous background image and perhaps a tag line.

So, we first need to decide how much content we want on our home-page. According to that we can determine how many tabs we need in the navigation bar do we need a search box or perhaps a drop-down list etc. Other deciding factors are the call to action buttons (like Log-in, Sign-up, Explore etc).

After deciding on all the 'primary requirements' there are still some simple yet cool effects that we can use to make our Home Page look great and can be incorporated in almost all design scenarios. A few of these I will describe here.

Navbar

The most important part of our home page. Sometimes we want the nav-bar to stick on top of our page or maybe change the font size of nav-bar links (For example - the font size is bigger initial at the top of the and as the user scrolls down it gradually becomes smaller etc).

$(document).scroll(function() 
    {
            scroll_position = $(this).scrollTop(); //current vertical position of the scroll bar 
            if(scroll_position > threshold)
            {   
                //style of navbar after crossing 'threshold'
            } 
            else 
            {   
                //style of navbar before crossing 'threshold'
            }
     });

Here, the threshold can be a value in pixels or something like $('#threshold__element_id').offset().top such that crossing a particular element triggers the change in style.
Using the Bootstrap frame work makes the life a lot more easier because we can easily resize the nav-bar to a Hamburger menu button for mobile devices.
Note : for a more gradual effect we can use if else if .. else ladder andd change the styling step by step.

Background

Certainly a beautiful and appropriate background image or graphics works nicely be adding a subtle effect like parallax effect. Parallax effect when the background image moves at a different speed than the foreground content while scrolling and the background image smoothly transforms.
The trick is to keep the foreground content's height much smaller than the actual viewpoint height.

Scroll Assist or Auto Scroll

Again this is very common because most of the webpages features some sort of buttons or icons like 'Top' or 'Back to Top'. This can be done easily be using an anchor element <a href="#target_id">Auto Scroll</a>.
But this makes the scroll abrupt what we can do to make it more elegant is by adding a simple animation to the click event handler of the desired element.
$('html, body').animate({ scrollTop: $('#scroll_to_id').offset().top }, 1000);
1000 is nothing but the time period of animation in miliseconds (i.e. 1s).

For the entire code and explanation...

See the Pen Simple Home Page by Rounak Polley (@cfjr) on CodePen.