HTML5 & CSS3 Site Design

Coding websites doesn’t have to be rocket science. In fact, it can be a lot of fun! You’ll be feeling like a pro in no time!

This course includes…

  • Unlimited lifetime access
  • Downloadable project files
  • 30 day money-back guarantee

Start right now!

$69

Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

“Excellent course for building your own web site. The casual tone and clear instructions make it easy to follow and understand. I felt like Geoff was in the room instructing me personally! The step-by-step instructions helped me to feel more comfortable in tackling HTML coding, and Geoff’s insider tips on how to make a great site were invaluable.”

Holly

Discover how all the pieces fit together!

Find out how fundamental web components like HTML and CSS fit together and interact!

Integrate Photoshop and Illustrator into your web workflow!

See how you can work Photoshop and Illustrator into your web projects, and discover how to best handle your web graphics!

Take your site live to the web!

Find out how to go live with your web projects using simple approaches to move your content to a web server, !

Free course included!

Enrollment includes Foundations In Web Design, a free bonus course, at no extra cost!

  • Worksheets
  • Hands-on lessons
  • Other extras and goodies!

Let’s make sure this is a good fit

Before going further, let’s make sure you’re in the right spot. The info below will help…

Who is this course for?

Those wanting a solid understanding of web design, including…

  • People who don’t know where to start, who just want simple answers.
  • People who want to become full or part-time web designers.
  • Print designers who want to expand their skills into web design.
  • Employees who want to add to their skills, advance their careers, and become more marketable.
  • Small business owners who want complete control over their website.
  • Those who’ve been out of web design for a while, who feel out of touch, but who want to get back into the swing of things.
  • Those wanting to save the cost and headache of hiring an expensive web designer.
  • Non-profits, churches, and fundraising organizations.
  • Those who are retired, who want to supplement their income and help their community.
  • People with ideas for side-projects, small businesses, and creative online ventures.
  • Hobbyists and those interested in doing web design on the side.

Sound like a good fit? Then let’s get started! If not, then let’s find the right course for you.

Course description

Need to learn how to build a website, or brush up on your coding skills to enhance an existing site? This course will show you, step-by-step, how to set up a web site from scratch and tips and tricks of the trade to make your site more attractive and user-friendly. From what tools you need to build your site and creating and formatting pages, to what to test and look for before your site goes live, award-winning trainer Geoff Blake gives detailed and valuable information that will help you to master HTML coding skills. Geoff’s casual tone, real world examples, and the follow-along video make this course as entertaining as it is informative.

Course prerequisites

It’s a good idea to be familiar with the following before enrolling in this course:

  • General computer skills (comfortable copying and pasting, navigating through folders…the basics).
  • Comfortable using a web browser, navigating web pages, etc.
  • No prior experience with coding or web design is required.

Sound like a good fit? Then let’s get started! If not, then let’s find the right course for you.

“This course gave me a solid, strong foundation in web design and coding to build upon. I can now troubleshoot code more easily, and build pages and sites from scratch, whereas before I was just too intimidated. Well paced, easy to follow. Awesome course!”

Doug

Let a friend show you how

Hey, I’m Geoff. I help graphic designers, small business owners, and creative people just like you learn about web design, develop valuable, in-demand skills, launch online businesses and creative projects…and yeah, make more money! Learn more about me here.

Learning how to build websites is no different than figuring out perspective drawing, how to weave literary prose, or how to combine chords to make beautiful music. It’s like cooking or woodworking or learning how to fix your car…But for whatever reason, web design’s made out to be highly technical and overly complicated. Let’s change that.

Whatcha waitin’ for?!

Start right now!

$69

Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

What others are saying

People just like you are building dream web projects every day. A few would love to tell you how Ten Ton helped them get there.

“With Geoff’s excellent training, I graduated at the top of my 3-year college program in just 2 years.”

Ian’s story

“I fired my web designer and saved tons of money, thanks to Geoff’s videos.”

Bridgette’s story

“It’s because of Geoff that I can now call myself a web designer and can get paid for it.”

Patrick’s story

Start right now!

$69

Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

Course outline

Here’s a complete outline of all of the topics covered in this course

Introduction

  1. Welcome to HTML5 & CSS3! (Free Lesson!)
  2. A Look At What We'll Build (Free Lesson!)

Chapter 1: Let’s Get Started!

  1. Programs I'll Be Using (Free Lesson!)
  2. In The Beginning...HTML Fundamentals (Free Lesson!)
  3. Understanding What CSS is All About (Free Lesson!)
  4. Viewing A Page's Background Code (Free Lesson!)

Chapter 2: Gettin' Your Files Organized!

  1. Organizing Site Files
  2. Creating A Page and Understanding Index Files
  3. Setting Up An External Style Sheet

Chapter 3: Doin' Nuthin'? Let's Build A Web Layout From Scratch!

  1. Setting Up The Page Structure
  2. Connecting the External Style Sheet and Testing
  3. Inserting and Formatting the Site Header
  4. Finishing Up The Basic Layout
  5. Debugging for Internet Explorer
  6. Understanding How the Layout Works
  7. Using Divs for Page Layout
  8. A More Economical Approach to Layout and CSS
  9. Using Float And Clear
  10. Centering the Layout
  11. Nesting Layout Objects
  12. Spacing Apart the Layout
  13. Final Touches

Chapter 4: Insertin' And Formattin' Text!

  1. Inserting Text Into the Layout
  2. Setting Up Paragraphs and Headings
  3. Adjusting the Layout For Text, Part 1
  4. Adjusting the Layout For Text, Part 2
  5. Formatting HTML Headings with CSS
  6. Formatting Paragraphs
  7. Using Class Rules to Format Text
  8. More Formatting with Class Rules
  9. Working More Efficiently with CSS
  10. Inserting and Formatting Lists
  11. Using A List to Build The Main Navigation Menu
  12. Setting Up the Footer Navigation

Chapter 5: Now It's Time For Some Graphics!

  1. Inserting an Image
  2. Resizing Images with your Graphics Editor
  3. Controlling Graphics with CSS
  4. Inserting the FeatureBox Images
  5. Adjusting the FeatureBox Layout
  6. Setting Up the FeatureBox Titles
  7. Illustrator, Photoshop, HTML, and CSS Workflow

Chapter 6: Site Rollout: From A Single Page To A Multi-Page Site!

  1. Getting Ready for Site Rollout
  2. How to Not Roll Out A Website
  3. Rollout Part 1: Setting Internal Hyperlinks
  4. Rollout Part 2: Creating The Site's Pages
  5. Previewing And Testing The Site
  6. A Final Thought on Site Rollout

Chapter 7: Inserting Additional Page Elements!

  1. Adjusting the Site's Hyperlink Formatting
  2. Inserting A Simple Slideshow
  3. Inserting and Formatting Tables
  4. Inserting A Google Map
  5. Formatting A Customer Testimonial Page
  6. Setting Up A Contact Us Page
  7. Finalizing the Site
  8. Organizing the CSS File

Chapter 8: Going Live: Uploading the Completed Site!

  1. Setting the Remote Site Info
  2. Uploading the Local Site to the Remote Server
  3. Testing the Live Site
  4. Making Edits and Updating the Live Site
  5. Testing And Debugging For Other Browsers

Wrapping Up HTML5 & CSS3

  1. Where to Go from Here

Frequently Asked Questions

Got questions? We’ve got answers!

What is Ten Ton?

Hey, I’m Geoff, an award-winning teacher, artist, and designer. Ten Ton Online is my premium online training platform to help graphic designers, small business owners, hobbyists, and other creative rabble-rousers learn about web design. If you want to discover how to build beautiful looking websites, how you can develop valuable, in-demand skills, or how to launch and market online businesses and creative projects, you’re in the right spot! You can view the full list of courses here.

Can I sign up any time?

Yes. All courses are completely self-paced. This means you can enroll now, and start your course whenever you like.

How do I watch the videos?

After enrolling, you’ll be able to stream your course lessons on the web, to your computer, tablet, or smartphone.

Can I download the video lessons?

To best serve the community, lessons are provided as streaming video only. This is because courses are sometimes updated to provide users with the latest information and content.

How long will I have access to my courses?

All courses come with unlimited, lifetime access. This means you can access your course as often as you’d like, without any limitations.

Are there recurring monthly costs?

Nope. There’s just a single one-time enrollment fee for your course.

Are courses self-paced or scheduled?

Courses are completely self-paced, allowing you to work through lessons at your own speed. You can skip ahead or go back, and otherwise move through your courses as quickly or slowly as you’d like. You can find out more about how it all works right here.

Are project files included?

You bet! Courses come with downloadable project files, allowing you to get the most out of your learning experience. You’re encouraged to follow along, step-by-step, so you can gain real-world, hands-on skills.

What is your refund policy?

All courses come with a 30-day money back guarantee. If you’re not satisfied with your course within 30 days of purchase, let us know. We’re here to help.

Where should I start?

Start with my free Foundations In Web Design course. It’ll give you a solid foundation in web design, and help you determine which direction you should head in based on your interests and goals.

I have more questions, how can I contact you?

You can contact me right here.

Start right now!

$69

Enroll in this course
  • Project files included!
  • No recurring monthly fees!
  • Unlimited lifetime access!

How does it work?

“Geoff has given me a great foothold of knowledge and insight into web design from which to grow from. I was quite amazed by his knowledge of everything: web, print, design, production, etc. He’s the whole package. He’s a natural, with a myriad of talents.”

Steve
  • Pingback: Beginner's Course: Learn HTML5 & CSS3 Web Design – only $27! | WordPress Jackpot!()

  • Pingback: Beginner’s Course: Learn HTML5 & CSS3 Web Design – only $27! | What About Mac Bundles?()

  • Pingback: Links of the Week()

  • Pingback: Deal of the Week - Beginner's Course: Learn HTML5 & CSS3 Web Design - only $27!()

  • Chris Cambell

    I’m almost finished with this course–I absolutely loved it btw–but was wondering if you have anything for coding responsive sites without using dreamweaver?

    • Hi Chris, Thanks so much for the kind words — great to hear you loved the course! A “coding responsive sites” course is in the works at the moment, so stay tuned!

      • Chris Cambell

        Fantastic. Do you have a newsletter or something that alerts users when new courses are available?

        Also, I’ll write it all up in my review but I wanted to say thanks for breaking this stuff down. I’m a very techy kind of guy but experiences in the past with WYSIWYG programs had actually served to make hmtl and css seem more mysterious to me through a lack of understanding the principles of it all. Once I got in there, it’s so easy and makes so much sense that I’m kicking myself for ever using Adobe Muse and similar software. I much prefer coding, and learning the principles of the language in and of itself and checking my work in the browser.

        • Thanks in advance for the review — I totally hear you on the whole WYSIWYG thing…I’ve started working with Dreamweaver CC, and they’re really hyping the new CSS Designer panel…and I’m shaking my head going, “This is going to confuse a lot of people…”

          So no worries on breaking it all down…it’s what I love to do!

          For updates, just scroll all the way to the bottom of this page and you’ll see a Get Updates box on the right.

          Thanks again! -Geoff

  • John Pansini

    I’m back to this course to re-do another website. I’m also studying a JavaScript dvd, and I must admit, I am a bit lost. But if it were not for what I learned in this course and XHTML, I would be wandering aimlessly in the Land of Never Return. The fundamentals I’ve learned in Geoff’s courses have served me well in JS.

    Let’s begin a movement: Get Geoff to over a JS Fundamentals course, eh. Then I can go back to my JS intermediate course.

    • Chris Cambell

      Here here!

      • John and Chris…you guys are too kind!!! I’ve been rolling a JS course around for a while. But you know what’s holding me back? I wonder if people really want to learn how to code JS by hand…there’s so many great jQuery scripts and bits available that make it all so easy…maybe something like a “web interactivity” course that would incorporate JS and jQuery + some other goodies? Thoughts?

        • Christopher Cambell

          I see what you mean. Personally I’d find that really helpful.

          • Yeah, I’m thinking a course like this would be useful…and could showcase some pretty cool effects. I’ve added it to my short-term list!

            While I have you Chris, I replied to your comment over on the CSS Layouts course and wanted to make sure you saw it (http://www.tentononline.com/ten-ton-css-floating-layouts). If you’re interested in this course, shoot me an email and I can flip you a coupon code. Thanks! -Geoff

        • DB

          Geof,
          completing your HTML5/CSS course. :) Like some of these previous comments, I’m interested in more info on JS & Jquery interactivity. I’ve started a course on JS & it seems like overkill to learn all the coding. I’m primarily working in webflow & mainly interested in importing jquery plugins to my webflow pages. Do you have anything of the sort? I really like your courses & teaching style…

  • unusualfinds

    my feature boxes with not float left? they stay in a row . is it because im using subline text?

    • Hmmm…I’m 100% sure. Is there a link where I can see this online? -G

  • Martin Greg

    Since you were designing this site with HTML5 and CSS3, why wasn’t it a responsive. Like when you actually minimized the design to a mpbile phone size, you had to scroll left and right. Why didn’t you just teach a responsive design because that is the trend now.

    • Hi Martin, Thanks for your comment. The intention behind the course is to focus only on HTML and CSS for those just getting started. Throwing responsive design and everything that that entails on top of everything else that’s covered here would have proven too much for an introductory-level course. Imagine users who are nervous enough about coding and building websites by hand also having to contend with various display sizes, devices, multiple media queries and how they cascade, and so on. These and other issues are much better addressed in their own topic-specific course where they can be delved into in much more detail.

      Further, this 6-hour course would have easily become 8 hours or more, and that would impact the price as well. Now all this said, a responsive course is in the works right now for those who are interested in this aspect of web design — it assumes a level of experience, will be fast paced and in-depth, and will make for a wonderful continuation of this course. Thanks Martin! -Geoff

      • Martin Greg

        Good enough that the responsive design course in the works. Get it out soon. Responsive design is what we need to learn to make right now; this is what is in vogue so designers should know how to make this. By the way thanks for taking the time to reply my question, i’m waiting for a responsive design course.

        • My pleasure, Martin. Send an email to “info -at- tentononline.com” and I’ll make sure you get a discount code when the course is released. Thanks! -Geoff

  • Alex

    Hello Geoff,
    is their a code cheat sheet for the placement of different characters?
    ? ; () {} / ETC?

  • Pingback: Ten Ton – HTML5 And CSS3 Site Design()

  • Pingback: HTML5 & CSS3 Site Design | Download All You Want()

  • Pingback: Ten Ton - HTML5 And CSS3 Site Design by Geoff Blake - ReleaseLOG()

  • Pingback: Ten Ton - HTML5 And CSS3 Site Design Training Video - ReleaseLOG()

  • Letitia

    Hey Geoff! Love the class! I’ve been grotesquely fully fledged involved in the course for the past 4 days…Not because it’s a 4 day course, but just because I don’t want to miss anything! I have a question….I’m currently on the linking portion of the class in chapter 7 and somewhere along the way…I created a link to the ticket and rate page, by way of the “Our Location” .png that sits above the last feature box. I have looked and looked to see where I mistakenly made the connection and I can’t seem to find it. I was hoping you could take a look at it and help me out?! I was hoping there was a way to attach a screen shot, but unfortunately not so much…so I’ll send an email…or whichever way is best.
    Thanks in advance.
    Regards!
    Letitia

    • Hey Letitia, Really happy to hear you’re enjoying the course so much, that’s awesome! Regarding your link issue, look in and around that png for link code. It could even be further above somewhere, and perhaps not even a closed element, if that makes sense. If you can’t seem to find it, send it over to info@tentononline.com Thanks! -Geoff

  • Ramiz Nazarbaghi

    hi there
    please make the lesson as well available for android Tablet device, because they don’t support more flash.
    thanks ramiz

  • Guilly

    It is very helpful for a beginer/intermedite.
    I would like to buy more courses if a DVD back up would be offered.

    • Hi Guilly, Sorry it’s taken me a few days to respond. But I’d really like to talk with you about the DVD option, because it’s something that I’ve been thinking about for quite a while.

      Many moons ago, our training was available only on DVD, but the two big problems with that is printing/manufacturing, and shipping.

      That said, I know some people have asked about having a backup, or even live in a location that doesn’t have reliable internet, so DVD would be a good option.

      My big challenge is getting these issues sorted out, and I’d be very interested in getting your input on this. So for example, when someone buys a course on Ten Ton, should they also be given the option to purchase a back-up copy of the course on DVD? Do you think that would work? At what price? And of course, what about printing/manufacturing (do you think a blank/white label DVD would be okay rather than a fully printed product?) and what about shipping costs?

      It’s a lot to think about! But, let me know what you think. Maybe there’s a way to make this work.

      Geoff

      • Guilly

        Hi Geoff,

        I would continue the classes as is with the opportunity of getting the DVD for a low price just as a back up.
        About the DVD simple white label with the name of the course will be enough, it doesn’t have to be fancy.
        It is just a back up. A piece of mind for people that would like have it just in case.
        I would say $10.00 will do. Your income comes from your classes and your happy followers.
        With this gesture you make us even happier.
        By the way, you are a great teacher.

        • Hi Guilly, Thanks for the kind words! I’d really like to try to make something like this work, as I like the idea of people being able to have a backup. The whitelabel idea you have (just something simple) would be do-able…but what about shipping? That can get expensive. Do you think $10 for a backup DVD + $5 flat shipping is reasonable? Thanks for all your input on this! -Geoff

  • Jason

    This is exactly what I have been looking for. Your teaching style suits me perfectly!

    • Awesome to hear, Jason! If you have any ideas for future courses, let me know! -Geoff

  • finbear

    I keep getting unsecure messages when I try to sign in. I am using Foxfire

    • Hi Finbear, Can you send an email with a screenshot of what you’re seeing to info “at” tentononline.com?

Welcome to HTML5 & CSS3! (Free Lesson!)

A Look At What We'll Build (Free Lesson!)

Programs I'll Be Using (Free Lesson!)

In The Beginning...HTML Fundamentals (Free Lesson!)

Understanding What CSS is All About (Free Lesson!)

Viewing A Page's Background Code (Free Lesson!)