Advertisement
Complete Websites

Adaptive Blog Theme: Initial HTML Markup

by

We've finished working in Photoshop, so now it's time to begin translating our designs into working web pages. Let's begin by setting up a project and setting out some basic markup.


Homepage and Header Markup


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Article Markup


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

Sidebar and Footer Markup


Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube
Related Posts
  • Web Design
    CMS
    Tumblr Appearance Options: ImagesTumblr 22 retina
    Moving on with our coverage of Tumblr's Appearance Options, we're now going add an option whereby users will be able to set a background image to the theme.Read More…
  • Web Design
    CMS
    Reviewing and Merging Our Tumblr Theme's HTML and CSSTumblr 19 retina
    We've come a long way, having completed massive amounts of theme building; well done! Let's now review our markup and styling, so that we can combine the two and start adding options to our theme.Read More…
  • Web Design
    CMS
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    CMS
    Creating the Tumblr Post Footer and Notes Tumblr 12 retina
    Let's kick off this tutorial by reviewing the Tumblr theme markup we've built already. Once that's done, we can continue by sorting out the footer and "Post Notes".Read More…
  • Web Design
    CMS
    Starting Our Tumblr Theme's Post Markup Tumblr 8 retina
    In this video tutorial we're going to begin the main area of our Tumblr theme's page. In fact, we'll be using the <main> element to do so, but as mentioned in previous videos, you're welcome to use whatever specific markup you feel is most appropriate.Read More…
  • Web Design
    CMS
    Tumblr Theme Operators and VariablesTumblr 3 retina
    In this tutorial we'll be taking a detailed look at how Tumblr's theme operators and variables slot content into your theme markup.Read More…