Jika anda mulai tertarik belajar membangun sebuah template blog atau web sendiri, berikut ini video 'tutorial dasar' yang menarik dari CSS-Trick. Video tutorial ini sangat baik dalam menerangkan tahapan pembuatan sebuah template, baik itu hubungan antara CSS, HTML dan Image yang diperoleh dari Photoshop. Lewat video ini saya belajar banyak.
Video Teknik dasar HMTL dan CSS dalam membangun Situs
HTML & CSS - The VERY Basics
Running time: 32:15
As the title suggests, this video is the VERY basics of what HTML and CSS is, for the absolute beginner.
Video tutorial konvesi desain photoshop ke dalam situs
1: Converting a Photoshop Mockup (part 1 of 3)
Running time: 10:10
In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time.
2: Converting a Photoshop Mockup (part 2 of 3)
Running time: 17:10
In part two of this series on converting a Photoshop mockup to an HTML/CSS Website I continue on with the header/menu section of the site. I change the way in which the site is centered when I decide to wrap the entire site in a page-wrap div instead of centering each major page element. Then I plug in some “filler” content for the main area before I end with building the footer.
3: Converting a Photoshop Mockup (part 3 of 3)
Running time: 31:53
I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML/CSS website. This one focuses on the main content area. I create the the columns including the “quick links” section. I also talk a little bit about typography.
1: Converting a Photoshop Mockup: Part Two, Episode One
Running time: 22:03
There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion techniques so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!
2: Converting a Photoshop Mockup: Part Two, Episode Two
Running time: 25:45
In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover and “on” states for the tabs. We then create the main content area and footer.
3: Converting a Photoshop Mockup: Part Two, Episode Three
Running time: 23:58
We wrap up the mockup conversion here in Episode Three. We create the “article area” and the “sidebar” (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.
