recent posts for different categories

I’m developing a theme that will have two recent posts section on the home page- one section for recent portfolio updates and the other for recent blog posts. I’m struggling with implementing these functions in the theme; I know it’s something to do with wp_query, I’m just not entirely sure how to go about this.
Any and all help is greatly appreciated.

HTML:

    <div id="recent">
        <div id="recent-work">
                <p><span>Recent Work</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                        <div class="next"><a href="#"><img src="img/next.png" alt="Click for more information" /></a></div>
        </div><!-- end recent-work -->
        <div class="divider">
                <img src="img/divider.png" alt="Section divider" />
        </div><!-- end divider -->
        <div id="recent-blog">
                <p><span>Recent Blog</span></p>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                <a href="#"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
                        <div class="next"><a href="#"><img src="img/next.png" alt="Click for more information" /></a></div>
        </div><!-- end recent-blog -->
</div><!-- end recent -->

CSS

#recent {
    border-top: 1px solid #202020;
    padding-bottom: 40px;
    padding-top: 40px;
}

#recent .divider {
    display: block;
    float: left;
    margin-left: 20px;
    padding-bottom: 20px;
}

#recent #recent-work {
    display: block;
    float: left;
    position:relative;
}

#recent #recent-work p {
    padding-bottom: 20px;
}

#recent #recent-work p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#recent #recent-work a {
    padding-bottom: 40px;
    padding-right: 20px;
}

#recent #recent-blog {
    display: block;
    float: right;
    position:relative;
}

#recent #recent-blog p {
    padding-bottom: 20px;
}

#recent #recent-blog p span {
    font-family: nevis-webfont;
    font-size: 112.5%;
    font-weight: normal;
    letter-spacing: 1px;
    padding-left: 20px;
    text-transform: uppercase;
}

#recent #recent-blog a {
    padding-bottom: 40px;
    padding-left: 20px;
}

#recent .next {
    position: absolute;
    bottom: -40px;
    right: 0px;
}

Solutions Collecting From Web of "recent posts for different categories"

If the blog / portfolio items are grouped into categories, you can do this at the top of your template file:

<?php
$portfolio_query = new WP_Query('posts_per_page=3&category_name=portfolio'); // note 'portfolio' is the category slug
$blog_query = new WP_Query('posts_per_page=3&category_name=blog'); // note 'blog' is the category slug
?>

Then in your markup:

<?php if ($portfolio_query->have_posts()) : ?>
<div id="recent">
    <div id="recent-work">
            <p><span>Recent Work</span></p>
            <?php while ( $portfolio_query->have_posts() ) : $portfolio_query->the_post(); ?>
            <a href="<?php the_permalink(); ?>"><img src="http://lorempixel.com/130/130/" alt="Click for more information" /></a>
            <?php endwhile; ?>
                    <div class="next"><a href="#"><img src="img/next.png" alt="Click for more information" /></a></div>
    </div><!-- end recent-work -->
<?php endif; ?>
    <div class="divider">
            <img src="img/divider.png" alt="Section divider" />
    </div><!-- end divider -->

<?php // repeat the whole if clause here for the blog posts, just replace $blog_query with $portfolio_query ?>