How to Build a Site in 10 Minutes Part 2

Alright, you guys have convinced me to deviate from my original plan and come back to a part 2, 3, and maybe 4 of building a site in 10 minutes. If you haven’t watched part 1 yet, you might be a little lost, so make sure you go back and watch that.

Today we’re going to look at part 2, which ended up going a little bit over my 10 minute mark to 12 minutes (so I cut off the ending :P), but we’re talking gradients, the little refinements, and some cool CSS3 techniques to do it. To get help with CSS Gradients, we can use this tool that’s free and works great for both Webkit and Firefox browsers. If you’re using Chrome like me and want to download the Pendule tool I use to bring up a color pick, make sure to get the extension here.

Part 1 in the Building a Site in 10 minutes series, can be watched here. See you tomorrow for part 3!

Spread the word!

20 Responses

  1. It won’t play. There’s a no-go sign over it. I’m using an iPad right now but all other videos are ok. Tried to watch it on Vimeo but you seem to have stopped uploading there, right?

    • @sonneteer Is the video still not playing for you? I haven’t tired on an iPad, but this hosting provider seems to say they should work. We’re using non-flash embedding, so it should work.

  2. Hi AJ

    Video was fine for me.

    Interesting to see how you did the gradients.

    And no surprise that IE ignores the CSS.

    Regards Chrome – are you using it now instead of Firefox?

    I use Firefox because it has firebug to inspect elements, but I notice that you are using Chrome and the developer tools.

    Would you advise going the Chrome / developer tools route?

    • @wmwebdes Yah, I don’t remember if I mentioned that IE was going to ignore it. I believe that CSS Gradients are slated for IE10, but don’t quote me on that. 😛

      I use Chrome 100% of the time. I made one video with Firefox and remembered why I didn’t like it (it’s too slow and memory intensive on my Mac). I also love that Chrome/Safari have great built-in developer tools, so I don’t need to use Firebug anymore. Not to say that there’s still not any uses for Firebug, but I don’t have to go in there as much now. 🙂

  3. Why not use a tiled image for the gradients? Wouldn’t that work better for Internet Explorer, which is what most people still use? Or should you do both, perhaps?


    • @p888 Trying to keep within 10 minutes for each video I chose 1 way to show. I did mention this wouldn’t work in IE, but since I was on a Mac, I just used what I knew what would work. 🙂

  4. Video froze in Firefox, but played in Explorer and in Chrome. By the way, Firefox does have a nice little colorpicker add-on called ColorZilla.

    Off to part 3. So far, this is great. Thanks 🙂

  5. I would like to apply the same concept (using the linear gradients) to change my background wrapper color but I cant seem to be able to figure out how to target the background wrapper. What CSS would I need?Videos are great and very helpful. Thanks!

  6. Hi – please would you correct this syntax, I’m afraid I couldn’t read your screen:
    .block-type-navigation { background, -moz-linear-gradient(19% 75% 90deg,#000000, #464646), }

Leave a Reply to GrantGriffiths Cancel reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress