Convert a Warm, Cheerful Web Design to HTML and CSS
videos

Convert a Warm, Cheerful Web Design to HTML and CSS

on Dec 7th 2010 with 551 comments
Tutorial Details
  • Topic: Building a Website
  • Skills Required: HTML, CSS
  • Length: 33 Minute Screencast

Final Product What You'll Be Creating

Download Source Files

Not long after our newest Tuts+ site, Webdesigntuts+, launched, they posted an excellent tutorial that details the process of designing a warm and cheerful home page in Photoshop. After high demand, we’ll take that completed design and convert it into a standards-compliant HTML and CSS web page. Along the way, we’ll review a variety of nifty techniques that will help you to improve your own workflow.

Even better, when we hit 80,000 RSS subscribers, we’ll take things even further and convert the finished product into a custom WordPress theme.

Rather than overload you with a massive 4-5 part series all at once, I’ll post a new episode in this miniseries every day. It’s my hope that, if you’re at the point in your career where you can benefit from a series like this, you’ll work along with me each lesson.

The Full Series

Chapter 2: Create the Markup

Press the HD button for a clearer picture.

Chapter 3: Slice the PSD

Press the HD button for a clearer picture.

Chapter 4: Integrate the 960 Grid System

Press the HD button for a clearer picture.

Chapter 5a: Build the Header Section

Press the HD button for a clearer picture.

Chapter 5b: Build the Banner Section

Press the HD button for a clearer picture.

Chapter 5c: Styling the Main Section

Press the HD button for a clearer picture.

Chapter 5d: Styling the Footer

Press the HD button for a clearer picture.

Chapter 6: Creating the Tabbing Functionality with JavaScript

Press the HD button for a clearer picture.

Chapter 7: Style the Form Elements

Press the HD button for a clearer picture.

Chapter 8: Compensate for Internet Explorer

Press the HD button for a clearer picture.

Chapter 9: Cleanup, Typography, and Bug Searching

Press the HD button for a clearer picture.

Conclusion

In the next, final episode, we’ll validate/test our site, work on the typography, and make last-minute adjustments. Stay tuned!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • Vinay Bhat

    Umm guys what are the sites you the recommend for a complete newbie on web development (HTML and CSS)

    I feel Nettuts+ is quite advanced :/ But the effort put by Jeffrey is great!
    Thank ya!

    • http://edwinhollen.com edwinhollen

      You are spot-on. Nettuts+ has more advanced tutorials than simple tutorials.

      “Complete newbies” should check out W3C Schools (Google). Even as a moderately learned developer, I use it on a daily basis to say the least.

    • Luke

      HV-Designs have a lot of great, easy to follow tutorials. However they might also be a bit advanced, I’d like to recommend both W3C Schools and Tizag.com, they are both rather good.

  • Neonailol

    why you skipper breadcrumbs section >.<
    btw is this right technique to display little arrow under current breadcrumbs active item?

    You’re here: Home > Welcome

    .b-breadcrumbs-current{
    display:inline-block; /* to take up all vertical space */
    position:relative; /* To move :after relative to this */
    }

    .b-breadcrumbs-current:after {
    content:”"; /* We need to trigger content property to see it */
    width:0;height:0; /* Using this to make pure css triangle */
    border-right:5px solid transparent; /* we dont want to see this border */
    border-left:5px solid transparent; /* and this one too */
    border-bottom:10px solid #D6C6A2; /* set the color equals our banner color, probably can use a border image but not necessary */
    position:absolute; /* move it */
    left:46%; /* our sprite has 10px width, so to center it we use something close to 50% */
    bottom:0; /* bottom of .b-breadcrumbs-current = bottom of #breadcrumbs due to display:inline-block; */
    }

    Works perfect in FF3/IE8/Chrome/Opera and don’t work in ie6/7
    Or simple use background image? like this

    .b-breadcrumbs-current{ display:inline-block; background:url(../img/arrow.png) no-repeat bottom center; }

    this one works in ie6/7, if load png with filters of course
    Also
    You don’t look at monitor when writing screen cast or you do it to show how to fix problems if any? also missed # at breadcrumbs background gradient
    and probably missed to add min-height: 180px; to #banner so it look correct even when it has not much content, but has images

    • Neonailol

      whoops, looks like parser eats my markup, where i apply class=”b-breadcrumbs-current” to “Welcome”

      You’re here: Home > Welcome

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yep – we’ll be working with pseudo classes in a future lesson.

      We’ll also review why applying a class of .rounded to elements isn’t a great idea either.

      • Neonailol

        can’t wait for it
        also, find the way to centre arrow perfectly, just use a negative margin on the left
        left:50%;margin-left:-5px;/* = border width/2 */

  • http://www.bootcamp4me.com Lonnie

    I am a small business owner who has hired two separate “large web design companies” and was underwhelmed at the customer service and 6+ month (both companies) in delivering the finished site. Even though with the 2nd company i gave them a pixel perfect PSD file and just said “make it like this”… i still came into problems when one part of the team had to do the vbulliten forum, and another had to do this or that… So instead of going through that process and spending “losing?” over $1500 each time, for just wanting 3 pages and a forum… i decided to learn how to build websites myself.

    In the last 12 months i have used dreamweaver cs4 and got myself a basic site up, but have been intimidated by trying to get involved with css and css based thingys.

    Having said all of that and watched dozens if not more tutorials on css, html and other tuts… this is the best that i have come across and finally i feel like i understand whats going on.

    Thank you for doing this EXACTLY like you have been. I have already enrolled at a local community college with classes starting in about a month… but i think this will help me and get me headed in the right direction.

    Again.. Thank You

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Lonnie!! Glad you’re enjoying these. :)

  • http://www.robert-block.de Robert

    Thanks for this wonderful tutorial and the explanations to the 960grid system. Your whole editing is perfectly illustrated and the video quality also is great! I’m looking forward for the next steps! Greetz from germany ;)

  • Demetre

    Hey Jeffery,

    I was wondering what are your vim plug-ins that you are currently using?

    Thanks

  • http://www.vernon-miller.com vernon Miller

    Thanks a lot for what you are doing. I a Web Designer making the move to Web Developer and with a focus on HTML 5 PHP and CMS. I have a feeling NetTuts is going to be a big help in that transition.

    Thanks again,

    Vern

    • http://www.pangomedia.se Christian

      I think your feeling is reliable. Once you go nettuts you cant stop. The good thing with these screencasts is that you learn hundreds of other things than the actual subject of the screencast. You notice small things while the author is writing that may even not be mentioned in the video but as a watcher you pay attention to it.

  • Nikita

    Thank you very much Jeffrey! It’s amazing screencasts, i learned lots of thing from it and i like that it’s easy to understand everything you are saying and doing, you are very talanted, keep on!

  • Mfawa Alfred Onen

    As usual Jeffrey, Thank you for this screen cast.

  • http://www.ilcroccante.it skill83

    For the chapter 3 i’ll suggest to don’t use automatic level selection but instead of it manual + “ctrl + click” or “command click”….,
    ctrl + click will show you a dropdown list of the level suggesting you the nearest;
    command + click will automatically select the level that you clicked on (but is not so accurate as ctrl+click);

    Thanks for the videos and i hope my suggestion can help.

  • http://jamiebrewer.com Jamie

    Will we going to get another video before the weekend?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey guys…might have to wait until Sunday. Allie and I rented a cabin for the weekend. Before we left, I exported the video and uploaded it to Blip.tv. We left for our trip while it was uploading, with the intention of posting it when we got to the cabin. But it’s not showing up for some reason…

      If that turns out to be the case, I’ll post the next episode on Sunday, and the following on Monday morning.

      • http://pangomedia.se Christian

        Kids always comes first :)

      • http://pangomedia.se Christian

        For some reason i assumed that was your daugher, don’t ask me why. Maybe I was wrong.

        Lets just say that family comes first instead.

      • Wolle

        Have fun ;)

      • http://pangomedia.se Christian

        Right… that was your wife :P

      • CSD

        Hi Jeff,

        If you have ‘Net access you may want to use something like Teamviewer to control your computer remotely. It’s a cross-platform remote desktop application that’s pretty secure. Not going to help now, but it maybe worth considering in the future.

        Been using it for a few years to control my systems/access data when on the move.

  • http://www.mispokdesign.com Kopeka Simposya

    Jeff, the main section was supposed to be availble yesterday according to the schedule. When do you think we will get it? Cannot wait to be honest. This is good stuff.

    • http://www.pangomedia.se Christian

      Jeffrey Way says:
      December 17, 2010 at 8:56 am

      Hey guys…might have to wait until Sunday. Allie and I rented a cabin for the weekend. Before we left, I exported the video and uploaded it to Blip.tv. We left for our trip while it was uploading, with the intention of posting it when we got to the cabin. But it’s not showing up for some reason…

      If that turns out to be the case, I’ll post the next episode on Sunday, and the following on Monday morning.

    • Al

      see the schedule posted at the top of the screen

      Jeffrey has gone to a cabin for the weekend and now it looks like the next screencast will be available Sunday, don’t bet your pension on it though

      unfortunately, dates were stated that have not been met for this series, I guess it will be there when its there and not before. been waiting anxiously for each part myself.

      Al

      • http://www.pangomedia.se Christian

        Jeffrey is making a totally free kind of deep screencast tutorial from scratch together with his colleagues, I cant say I blame him for being a couple of days delay since this is a huge free resource for us readers. I’m just thankful for what he’s doing and I think we all should be.

  • Nguyen

    Wow Jeffrey, your tut is amazing. You must be an experienced web designer. I am surprised that you use VIM instead of Dreamweaver.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Because it’s better. :)

      • Nguyen

        Why would you say it is better? Because it is free? Does it have any features that are as good as WYSIWYG in Dreamweaver?

      • http://www.lastrose.com Gabriel

        Price isn’t really a huge factor (it definitely helps though).
        WYSIWYG is for beginners, if you know what you are doing, you’re not going to be using wysiwyg as you know that the code it generates isn’t that great. In Dreamweaver, the preview would be good, if it was real time (As you type) and if it supported css3 and html5 elements (or if you could choose your rendering engine).

        Really what you want to look at is how it helps you code. Things like code-completion, shortcuts, high lighting, code hinting, formating, debugging etc. Use that with a few different browsers (chrome, IEtester(for IE6-8), IE9, Firefox, Opera). Use firebug, and/or chrome’s inspect element to debug,and play around with the css to get the exact look.
        .
        netTuts has looked at a bunch of code editors and IDE’s for a variety of different OS’s and it’s just a matter of finding which one works for you.

        Myself I use notepad++ for small stuff, and PHPstorm for larger projects (I swear by it, but find it resource heavy). I find dreamweaver lacks almost all the features of either of these, and takes too long to load up.

        Everyone has there own preferences, and at the end of the day, it’s a matter of what works best for you.

      • Nguyen

        Thank you so much for the explanation, Gabriel. I am a beginner and I am taking web design class in high school, so I use Dreamweaver a lot.

      • http://www.lastrose.com Gabriel

        Everyone has to start somewhere! :)
        And NetTuts is a great place to learn.
        I suggest using chrome’s inspect element and firebug in firefox to look at different websites, and try playing around with the css elements. (changing values, enabling/disabling various attributes).
        Learn from what others are doing, and from your own mistakes.
        This tutorial is great, play around with it a little thought, see what different attributes do,
        why did he use overflow:hidden? disable it and find out. Try to create your own layouts, and when you get stuck, or things aren’t rendering properly, play around in inspect element or firebug, and go online to look for answers. I’m sure there are seasoned css veterens who have spent countless hours trying to figure out why an element isn’t lining up properly or why X browser is displaying something wrong, so don’t get discouraged.
        Once you pick it up, you’ll find you can develop sites much faster, and better then you could using dreamweavers WYSIWYG.
        Best of luck in your class

  • Aarondo

    Great tutorial however, the alternate video source for “Chapter 4: Integrate the 960 Grid System” link is broken, please could you fix this as I’m unable to watch the normal videos on my PC for some reason. Many thanks

  • mike

    This post has damaged the reputation of Envato/tuts site.
    Take a look at your rss subscription – it has gone to 76K from almost 78K yesterday.

    I understand this tut needs more time, but the author’s mistake is he had posted it with exact dates of release.

    Think about it envato.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Mike – they’re completely unrelated. RSS numbers go up and down by a thousand or two every day.

  • http://www.idesignit.co.il/ Elron

    Hello, great tutorials!

    where can i download VimMac for windows?
    i tried downloading Vim, but when i type “link[type=stylesheet][src=style.css]” and hit enter, nothing happends. it staying the same…
    can u do a spesific tut for MacVim? i’d like that.

    Thanks!
    Keep on good work,
    Elron

    • http://edwinhollen.com edwinhollen

      Vim is a somewhat complex editor. I spent an entire half hour just learning my way around the interface. It’s not as easy as other programs. You cannot just click-and-insert in Vim. It requires keyboard shortcuts or commands every step of the way.

    • Kevinsturf
    • Jeremy Michel

      Vim is available for windows, MacVim is just the mac version, the windows version, I believe is the same. As for the “link[type=stylesheet][src=style.css]”, this is part of zencoding, which is also available for vim on windows. Here is a link to zencoding for vim. I believe it is clearly explained in the documentation on how to install the plugin, if I remember correctly, it is just a matter a copy and pasting some files in the vim folders, but make sure you read the doc before hand.

      Hope this was helpful

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      If you’re brand new to web development, you might stay away from Vim. Stick with a simple non WYSIWYG editor for now.

      That’s why I’ve used a combination of Espresso and Vim in this series. That way, people get a broader overview of the capabilities of two unique code editors.

  • Sebastian

    Hey Jeffrey, first of all, I really love this video series. Just a question though. You said that you were gonna make that little breadcrumb arrow in the banner video, but I think you missed it.

    Are you gonna do it in the main section video instead? Would really like to see how you’d make that one.

    Thanks
    /Sebastian

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hey Sebastian —

      Yep, that’ll be in a future video. :)

  • http://www.fdorado.com Fernando Dorado

    Hi Jeff, just wanted to say thank you for these awesome tutorials. I can honestly say that I learn more on tutsplus.com than in college. Keep up the great work!

  • Bizmut

    Hi, I’ve just finished the slicing tut and it’s great and all, but (I’m really surprised, that nobody mentioned it earlier) you really don’t have to flatten image or merge layers to copy selection “as it is”.

    You can just use the ‘Copy Merged’ command (default shortcut is CTRL+SHIFT+C on Windows). I discovered this nifty little bastard a couple weeks ago, and it made my life a lot easier (same as being informed, that clicking with a scroll wheel opens link in a new tab; now THAT was a revelation).

    Also, on the subject of code editors, I’m uising Komodo Edit myself, it’s functional, pretty (very important thing!) and it has support for Zen-Coding (something like Sparkup; I don’t know how to insert values into tags with it, but I think it generates nicer code, like having ‘li’ and ‘a’ tags in one line; maybe it’s customizable, idk).

    Nonetheless, very nice work, it’s nice to see basic + not so basic stuff in one place.

  • ed

    omg, subscriptions has gone down to 74K in a day!

    nice one jeff!

    i can see red lights blinking.

    • Al

      And with comments like that I’m sure he’ll be inspired to do more fantastic tuts for us all.

      Some people really grind my gears!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s cute that you guys are relating the RSS count to this tutorial. But, Feedburner is notorious for posting crazy changes each day. You have to take the average over a course of a week or so.

  • http://www.google.com Techeese

    Can’t wait for the next one, very good tutorial.
    Thank you

    also
    does anyone know a good CSS editor which has the live-preview like Espresso but for Windows(win7)?
    I’m currently using the Web Developer add-on for Mozilla…

  • pixelBender67

    Where are the rest, it’s the 20th and I’m reading to finish the main section :)
    Awesome tutorial, learned a lot here on nettuuts, and Jeffery you rock dude, you got me playing with VIM now :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      See my comment below. :)

  • pixelBender67

    Oh I see lol hope you had a nice weekend at the cabin, did you bring the ax (guitar) ?
    :) hopefully the screencast will be up soon ?

    Cheers

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Haha – nope, no guitars allowed. :) And yes, the next screencast is already up.

      The footer video will be available in about 8 hours as well.

      • pixelBender67

        you are the man !

  • frei

    So where is the screencasts of Main Section or Footer Section? Can’t wait for it…

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      The main section video is up. The footer video will be available at around 8:00 PM, EST.

  • Eliot

    Jeff, why do you post a schedule if you don’t stick to it?

    • http://www.addkolon.se Mattias Lager

      Eliot, Jeff is doing an awesome job and we can all watch it for FREE. I don´t care if he´s not is able to post it exactly on date. Be thankful insteed, I wouldn´t be suprised if has a ordinary job to take care of also.

      All cred to you Jeff, I think you´ve opened the eyes for many about the awesomenes of zen coding and in a really easy and pedagoic way!

      /Mattias

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Eliot – why do you complain when it’s Christmas time, this is supplementary content (on top of our daily posting schedule), and I noted that I had some issues uploading the video that was supposed to be posted on Friday?

      You are aware that this series is taking up a lot of my time, right?

      • Eliot

        Umm… Yeah… I’m sorry :P

  • FluxDevelopment

    A great series with understandabel delays. My one question is though on why you use the grid 960 container repeatedly in the document? Typically I wrap my entire body in a div with a container 12 or 24 depending on the system. Each div is then represented with a div class=”grid_x”

    Is there any reason you break the page up into multiple containers?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Right – but you can’t do that if you have multiple background images/textures that need to extend for the entire width of the browser window.

      With your method, all backgrounds will be restricted to that center 960px container.

      • FluxDevelopment

        Ah. Didn’t take that into account. Not sure if it was mentioned int he screen cast or not. Thanks for the quick response. This tutorial series prompted me to become a premium member in support of you guys. Keep up the good work

    • Gummiost

      When you want to have a section that is more than 960 px in width then you need to break out of the 960 grid. If you for example wanted your header or footer to span 100% across your page, you would not be able to do this inside the 960 grid, that’s why Jeffrey uses so many 960 containers.

      • Gummiost

        When i wrote my comment, Jeffreys comment was not there…we wrote it at the same time.

  • Sumit Mukhia

    Great tutorial…Waiting for the main section.

  • Robert Bailey

    Yes he is running a little late. But you guys have to remember this is free. I would be a little frustrated if this was under the Premium but its not.

    The RSS is a little crazy though. Maybe he should put the Chapter 8 in the premium section.

    Keep up the great tutorials Jeffery.

  • Jeremy Michel

    This may not be the right way to do it, but if you are extremely eager to see the chapter 5c tutorial, you can just watch it on blip.tv at http://nettuts.blip.tv/file/4536527/

  • Diogo

    hey Jeffrey in chapeter 5b you make a css3 gradient in banner bottom, but you forget put the second color with # , thats why he show all blue without gradient

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yeah – we’ll get all that fixed when we validate at the end. I’ve left a handful of mistakes like that in for this purpose. :)

  • http://edwinhollen.com edwinhollen

    Yay! Section 5c is here! Great work Jeffery.

    Don’t rush through these, despite the deadlines. This is such an awesome tutorial series so take all the time you need. Great work again.

  • Jesse

    Thanks for these videos! Really learned allot from these!

  • Eliot

    It’s not that I’m complaining. I believe it would be much better not to post any schedule, just upload another chapter when you have time, and in this way people won’t feel disappointed when they wait for another chapter, and it is not there ;)

    • ed

      exactly my point.

      anyways, it’s really great way to start.

      btw, we bought this wicked wordpress e-book weeks ago.
      and only now i started really reading it – i just found out jeff is one of the authors. :))

  • pixelBender67

    Nice new video is up :)
    These are awesome can’t wait to see it turned into a WP theme

    Cheers !

  • http://jamiebrewer.com Jamie

    Finally! I can’t wait to get home to watch the new screencast:)

    Thanks Jeff!

  • Johannes

    Will you put the completed site up for download in the end, or do we need to construct it ourselves? I don’t use/have VIM because I’m used to Dreamweaver. And it’s hard to follow some of your coding.
    All in all, this is a great tutorial!

    Thank you so much,

    Johannes

    • wolle

      how can it possibly be hard to follow his coding?
      no matter if he uses vim (he hasnt used vim at all) espresso or dreamweaver, the code is the same. its not like he would be using zen code or something like that…

      but i gotta agree with you in one point:

      this tutorial is pure awesomeness!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yes – the source code is included with each new episode.

      • Johannes

        Well, thank you again Mr. Way. I am a beginner at CSS and HTML, and this is the perfect beginning!
        The coding is hard for me to follow, since I cannot type as fast, and it takes me a while to understand exactly how it all works. This is EXACTLY what I’ve been looking for. Thanks for your hard work!
        (Do you have a donate page somewhere?)
        Thanks!

  • Lakeida

    I second Robert Bailey, those RSS numbers have got me worried and I too am anxious to take this project through to the end to wordpress theme. As I am a premium member as well maybe you could post it to the premium site until the 80k hits and you post it on the free side.

    Thank you for doing this, this is exactly what I was looking for.

    • pixelBender67

      Become a premium member that way you can take advantage of all the sites ‘members only’ material.
      for a about a pack of smokes ( don’t smoke ) you can have all the learning you can handle and help a great community keep rockin’ out these awesome tuts !

      Cheers

  • pixelBender67

    The numbers haven’t changed and I for one have signed up for the RSS feed on three of my email accounts and the number didn’t change ?
    @ Johannes IMHO I think you should follow along with Jeff and pause the video ( like me ) I don’t think anyone can type as fast as Jeffery lol plus he’s pasting the code in as he is moving along to make the videos a little shorter, it will also help if you do it as Jeffery does it so you can see what the CSS is effecting that way in the future you can apply some of these techniques in your own projects :)

    Again if anyone is liking these videos’s and if you can afford the $9 bucks a month which gives you access to all the tuts-plus sites than do it, lets support the boys from down under and help them keep making these sites the best resources on the net !

    I am in school and these sites definitely help me learn more than I would if I just did what is on the syllabi’s

    Thanks again to Mr. Way and the rest of the crew under the net-plus umbrella !

    Happy Holidays + Cheers to all :)

  • pixelBender67

    lol, I agree where is the holiday spirit ?

    Jeff is giving us all these tuts for free, like in a gift and I am sure he could be shredding on the ax or spending some time with the family, complaining is for old ladies that have nothing better to do,,, and grumpy old men like myself lol

    Cheers !

  • mysense

    Hmm i would love to see the WP theme, currently i am making my own theme for a school project and i just love the way jeffrey explains what every line of code does, so i can understand and put them into practice myself. But i am following the RSS count for some days now and it was looking good at almost 79k but now it’s seems to be stuck at 75.000 are they fooling us or is it just that allot of readers are leaving us?

  • Tom

    Hi

    How can we add a pointer cursor for the search button?

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      cursor: pointer

      • Tom

        Sorry what i meant was what html element do we target in css like the examples that i tried below:

        #header input img

        #header form input img

        #header nav input img

        i also tried

        header nav input img

        #nav input

        and alot of others but i could get it to work

    • Tom

      Would you be able to show us how to make the search button actually work?

  • http://www.almarhij.com Alaa Nayfeh

    Hey Jeff
    i just wanted to thank you for the great work you are doing..
    i also wanted to ask if its possible to convert the finished product into a joomla cms..
    i was wondering why most of you guys prefer WP .. what makes it better than joomla for you ?
    thanks again .

  • frei

    I think these screencast are the best ones ever published. Im so grateful, thanks again.

  • NE

    This is amazing and I am incredibly thankful for this tutorial.

    However, do you think you can help me with this hiccup?
    The gradient and the “searchicon” appear in firefox, but not chrome.
    here’s a direct copy of my style.css portion:

    header input{
    background:#247083;
    background-image: url(../img/searchicon.png) 98% 48% no-repeat, -webkit-gradient(linear, left top, left bottom, from (#247083), to(#339aa7));
    background: url(../img/searchicon.png) 98% 48% no-repeat,-moz-linear-gradient(top,#247083,#339aa7);
    background: url(../img/searchicon.png) 98% 48% no-repeat, linear-gradient(top,#247083,#339aa7);
    padding:5px 20px;
    border:1px solid #206577;
    color:white;
    margin-left:5px;
    }

    Did I make a mistake or is it a differnet reason?

    Thanks so much!!!

    • NE

      HAHA! I found my own mistake. It’s a bit pointless that it’s here now, but maybe someone could benefit from this error fix:

      Where I wrote:
      from (#247083), to(#339aa7));

      Notice there is a single space between the “from” and the “(#247083)”.
      That space makes the gradient not work at all. It can be very frustrating if you make that mistake and not find it…

      So I hope it was a good bit of knowledge for someone.

  • Ray

    I’m assuming your using the Web Developer Toolbar? If not remove the .. in the background: url’s.

    • NE

      Thanks Ray.
      I am using dreamwaever, actually. Although, I am starting to see that there is a whole other world out there for coding. I don’t particualrly need the WYSIWYG, I guess I just got used to it.

      Thanks for your help, although I eventually found my mistake, the the .. url was not it. I had an extra space.

  • http://www.triadamultimedia.com Carlos Ysusi

    Thanks for your tutorials are great and I really like, I wish you happy Christmas and New Year

  • http://www.joshjamesweb.co.uk JoshJames

    Thanks, sadly I have to do it all again after I got a virus, I suppose my HTML and CSS Skills will improve though.

  • Techeese

    nice more tutorials to watch and learn

    also a bit off topic
    Do you plan on making a part two of this?
    http://net.tutsplus.com/articles/news/how-to-build-a-login-system-for-a-simple-website/

    me and others are waiting for a part two of this?

    • ed

      hahaha. that’s too much of a demanding.

  • http://www.cornholeexpress.blogspot.com A.M.

    I just want to reiterate some gratitude your way Jeff! I hope you have a Merry Christmas! These tutorials have been great and I’m really looking forward to seeing how you convert this to a WordPress theme.

    80,000 here we come!!

    Thanks again Jeff ~

  • http://www.niklasrasmusson.se Niklas

    Jeffery you are awesome for doing these epic episodes. Thanks to you I am now attending a school for front-end developers :) Your tutorial helped me finish my work assignment.

  • NE

    Hey I noticed something in the javascript chapter.
    When I followed the tutorial it wasn’t working in any browser.

    The solution I found was that in the script line that specifies the source, the video does not show adding the type: “text/javascript”.

    I do not know if this is a must because for the author it works, but for me, it only worked after I added that.

    Also, thanks again for this amazing tutorial. It really helps make things more organized. For someone starting out on my own, it’s easy to get bad habits and not even know about them…

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Specifying the type isn’t necessary. What browser are you using?

      • NE

        I checked the website in Firefox (ver 3.6.13), Chrome (ver 8.0.552.224) and Safari (ver 4.0.4). I was getting an error that “hash” was not defined, and I checked my code a couple of times and there were no typos or anything.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        can you paste in your code?

← Older Comments
Newer Comments →