Having trouble displaying the "Work" page in Wordpress

According to "Displaying Custom Posts and Fields in a Template" lesson, i followed the instructor everything. However, it failed to display the title and the description of the Work page. It displayed only get_header() and get_footer(). It's like WP_Query() didn't work.

the link is as follows.

http://teamtreehouse.com/library/how-to-build-a-wordpress-theme/wordpress-theme-functions/displaying-custom-posts-and-fields-in-a-template-2

this is my code

<?php /* Template Name: Work Page */ get_header(); ?> <p>This is the work file.</p> <?php

$args = array(
    'post_type' => 'work'
);

$the_query = new WP_Query( $args );

?>

<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

<h3><a href="<?php the_permalink() ;?>"><?php the_title() ;?></a></h3>  
<?php the_field( 'description' ); ?>
<hr>

<?php endwhile; else: ?>

<p>There are no posts or pages here</p>

<?php endif; ?>

<?php get_footer(); ?>

Before this lesson, everything was ok except the permalink that i couldn't change from default to post name (everything went wrong when changing to post name). I'm sure my code is exactly the same as the project files but one thing that i did different from the instructor is that i used Appserv instead of XAMPP.

pls. help me figure out this problem.