Advertisement
Complete Websites

Basics: Create a Clean Magazine & Blog Theme (Day 3: Coding Part 1)

by

It's day three of the Basics Design tutorial! Today we'll be continuing on with the coding - specifically we'll be writing the HTML/CSS for the homepage and the blog single post page. Adi has recorded another HD video tutorial covering the crucial PSD > HTML conversion process. Whether you're a seasoned veteran or a new designer, we hope you enjoy the walkthrough! Let's start day 3...


About this Tutorial Series

Adi Purdila is going to walk us through an entire project - from design to coding - all here on Webdesigntuts this week! Here's the outline of what we'll be going over in each day:

  • Day 1. Homepage and blog single page PSD files
  • Day 2. Homepage PSD slicing and markup
  • Day 3. Styling the homepage and blog single page
  • Day 4. Let's create some more pages: gallery, contact, full width
  • Day 5. Finishing touches: installing and customizing SlideDeck and some JavaScript work


A note on the downloadable files for today
: the full HTML will be available for download in the next session of this series (Day 3), so today is going to be working from the same PSD files that we created in Day 1.

Now on to Day 3, the slicing and markup session!


Day Three: HTML/CSS for the Homepage and Blog

We've recorded these videos in full HD resolution, so be sure to turn on the full screen HD version if you're able to! This video includes the full slicing and markup session, recorded at 720p with full audio commentary throughout.


Video 4: Styling and Coding - 720p

Video 5: Styling and Coding - 720p

About the Author

"Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs.

If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest." - Adi

Related Posts
  • Web Design
    Typography
    Getting the Hang of Hanging PunctuationGrand motel text effect
    Hanging Punctuation is a powerful typographic tool for creating optically aligned bodies of text. Unfortunately, it has been largely forgotten on the web... until now. We’ll take a look at the value of hanging punctuation and how you can partially implement it using a little JavaScript and a CSS rule which has been around for years.Read More…
  • Design & Illustration
    News
    New Design Courses Available on Tuts+ PremiumNewdesigncourses
    Tuts+ Premium courses teach you a single skill from top to bottom, inside out. Currently, more than 15,000 members are sharpening their skills in web design, web development, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into. Today, we're highlighting a few of the latest and greatest course additions to Tuts+ Premium.Read More…
  • Web Design
    Complete Websites
    Basics: Create a Clean Magazine & Blog Theme (Day 5: Final Parts)Basicspreview
    It's day five of the Basics Design tutorial! Today we'll be finishing the final pieces of the project - including a detailed installation of SlideDeck and some Javascript work. Adi has recorded another HD video tutorial covering the crucial PSD > HTML conversion process. Whether you're a seasoned veteran or a new designer, we hope you enjoy the walkthrough! Let's start day 5...Read More…
  • Web Design
    Complete Websites
    Basics: Create a Clean Magazine & Blog Theme (Day 4: Coding Part 2)Basicspreview
    It's day four of the Basics Design tutorial! Today we'll be finishing the final pieces of the project - specifically we'll be writing the HTML/CSS for the support pages of the site. Adi has recorded another HD video tutorial covering the crucial PSD > HTML conversion process. Whether you're a seasoned veteran or a new designer, we hope you enjoy the walkthrough! Let's start day 4...Read More…
  • Web Design
    Complete Websites
    Basics: Create a Clean Magazine & Blog Theme (Day 2: Slicing and Markup)Basicspreview
    It's day two of the Basics Design tutorial! Having just finished the design session of this series, today we'll be continuing on with the PSD slicing and markup. Adi has recorded another HD video tutorial covering the crucial PSD > HTML conversion process. Whether you're a seasoned veteran or a new designer, we hope you enjoy the walkthrough!Read More…
  • Web Design
    Complete Websites
    Basics: Create a Clean Magazine & Blog Theme (Day 1: Design)Basicspreview
    In this series, Adi Purdila is going to walk us through how to design and code a great magazine/blog website theme in a step by step tutorial. There are going to be 5 days total in this video, which will give us plenty of time to go into each step in a great level of detail. Today, we'll be going over the intro to the project as well as the entire design phase. Let's get started!Read More…