Review of HTML markup for this blog concept
Your img is missing the alt attribute.



&lt;a href="#" class="readMore"&gt;
  &lt;i class="fa fa-list-ul"&gt;&lt;/i&gt;
&lt;/a&gt;


I assume that here a graphic will be inserted via CSS? Then this will not be accessible by users without CSS support, and it will probably not be accessible by screen reader and/or keyboard users. The link should have content, i.e., an img (with alt attribute) or text ("Read more") (which can be visually hidden, if required).

Also, you shouldn’t use the i element in such a case (as your use doesn’t match i’s definition). Go with span if you need an element.



Why did you skip a heading level (from h2 to h4)? Either use h3 for the second heading, or go with h1 everywhere (but then you need to use sectioning elements explicitly!):

&lt;article&gt;
  &lt;h1&gt;Skating Down Venice Beach&lt;/h1&gt;

  &lt;section&gt;
    &lt;h1&gt;Venice Beach&lt;/h1&gt;
  &lt;/section&gt;
&lt;/article&gt;


If the text titled "Venice Beach" is just some general information about it (not unique to this image), consider to use the aside element instead of section.