Udacity Intro to HTML and CSS layout sample
Unnecessary prefixes

Don't add prefixes unless you actually need them.  When in doubt, you can check can i use.  Otherwise, there are various autoprefixers you can use that will do it for you.

* {
  -ms-box-sizing: border-box; /* no browser supports this */
  box-sizing: border-box;
}


Subheadings marked up using hn elements


  h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.


Source: http://www.w3.org/TR/html5/common-idioms.html#sub-head

    &lt;h1&gt;Jane Doette&lt;/h1&gt;
    &lt;h2&gt;Front-end Ninja&lt;/h2&gt;


The W3C recommends either of these markup options for the subheading idiom:


   &lt;header&gt;
   &lt;h1&gt;HTML 5.1 Nightly&lt;/h1&gt;
   &lt;p&gt;A vocabulary and associated APIs for HTML and XHTML&lt;/p&gt;
   &lt;p&gt;Editor's Draft 9 May 2013&lt;/p&gt;
   &lt;/header&gt;



Or


   &lt;h1&gt;Ramones &lt;br&gt;
   &lt;span&gt;Hey! Ho! Let's Go&lt;/span&gt; 
   &lt;/h1&gt;



Poor contrast

The link color is extremely washed out and is barely legible on one of my displays.  Links, by their very nature, must stand out.  Blue is the recommended color for usability reasons, but if you need to change it, you need a good reason for it (and making it less visible than the surrounding content is not a good reason).

I get that this is probably a requirement for the exercise, but it is something you need to be aware of.  If a designer gives this to you, you need to push back and tell them that this is not acceptable (get support from your UX department if you have one).

Semantic class names

For the most part, you did a really good job of using semantic class names (eg. &lt;section class="featured-work"&gt;), which is why it kills me to see so many unsemantic class names thrown into the mix (eg &lt;img class="right" /&gt;, &lt;div class="row"&gt;, .col-1, etc.).

Semantic markup

You've got the right idea with your markup, but there's a lot of room for improvement here.  For instance, your screenshots use a lot more markup than they really need and it isn't very semantic.  You can slim this down by using lists and taking advantage of descendant selectors.

  &lt;div class="row"&gt;
    &lt;div&gt;
      &lt;div class="work-screenshot"&gt;&lt;img class="left" src="http://placehold.it/300x200"&gt;&lt;/div&gt;
      &lt;h3&gt;Appify&lt;/h3&gt;
      &lt;p&gt;&lt;a href="https://github.com/udacity/Appify/"&gt;https://github.com/udacity/Appify/&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div class="work-screenshot"&gt;&lt;img class="center" src="http://placehold.it/300x200"&gt;&lt;/div&gt;
      &lt;h3&gt;Sunflower&lt;/h3&gt;
      &lt;p&gt;&lt;a href="https://github.com/udacity/Sunflower/"&gt;https://github.com/udacity/Sunflower/&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;div class="work-screenshot"&gt;&lt;img class="right" src="http://placehold.it/300x200"&gt;&lt;/div&gt;
      &lt;h3&gt;Bokeh&lt;/h3&gt;
      &lt;p&gt;&lt;a href="https://github.com/udacity/Bokeh/"&gt;https://github.com/udacity/Bokeh/&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;


Can be rewritten like this:

http://codepen.io/cimmanon/pen/ZGGMNM

Markup

&lt;ul class="projects"&gt;
  &lt;li&gt;
    &lt;a href="https://github.com/udacity/Bokeh/"&gt;
      &lt;img class="center" src="http://placehold.it/300x200"&gt;
      Appify
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="https://github.com/udacity/Bokeh/"&gt;
      &lt;img class="center" src="http://placehold.it/300x200"&gt;
      Appify
    &lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;a href="https://github.com/udacity/Bokeh/"&gt;
      &lt;img class="center" src="http://placehold.it/300x200"&gt;
      Appify
    &lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;


CSS

ul.projects {
  display: table;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.3em;
}

ul.projects li {
  display: table-cell;
  width: 33%;
  text-align: center;
}

ul.projects img {
  display: block;
  margin: 0 auto .5em;
}

ul.projects a:after {
  display: block;
  content: attr(href);
  font-size: .769em;
  margin-top: .5em;
}


Depending on the content, though, it might be better to use background images instead of the image element (search for css image replacement to learn more).

Use Flexbox responsibly

Unless the effect you're trying to achieve is difficult or impossible to do without Flexbox, don't use Flexbox.  In this case, you can do the same thing with the table/table-cell display properties (as illustrated above) and it usually requires less CSS to do so.