Building Responsive Websites with HTML5 & CSS3

A no-nonsense approach to building web layouts for desktop, tablet, and mobile devices!

This course includes…

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

Start right now!

$39

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

How does it work?

“Great course! I’ve been an HTML coder since 1994 but I needed to really get into HTML5 and CSS3. Your course made it simple to understand and follow and I really got into it. Well worth my time. No matter how much experience I have, I learned “tons” through your lessons! I’ll definitely be recommending your courses!”

Nora

See how to use mulitple style sheets!

Get a foundational understanding of responsive design by learning how you can apply several style sheets to a single HTML document!

Create adaptive layouts!

Discover how to easily build beautiful layouts that respond and adapt themselves to the devices they’re being viewed on!

Test your layouts on various devices!

Discover tools you can use to test your repsonsive layouts on mulitple devices, at multiple screen sizes!

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.
  • Artists, writers, photographers, and other creative-types wanting to build a site to showcase their work.
  • 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

In this hands-on training course, award-winning veteran trainer Geoff Blake shows you, step-by-step, how to build beautifully designed, responsive websites that adjust and function perfectly on smartphones, tablets, and desktop displays. You’ll begin with the fundamentals of responsive design, beginning with multiple style sheets, media queries and various expressions. Next comes the fun part: you’ll be guided through several in-depth chapters that walk you through the responsive design workflow, building HTML structure and CSS formatting for mobile and desktop displays; including tablets, desktop screens, and smartphones. Geoff shows you how to plan out your work, handle common issues that arise in a responsive layout, and how to handle various page components between device displays. Finally, the course closes with additional tricks, advanced techniques, and testing methods to ensure that your layout looks fantastic.

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.
  • A basic understanding of HTML5 and CSS3 is very helpful (my HTML5 & CSS3 Site Design course or equivalent), but not required.

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

“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

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!

$39

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!

$39

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 (Free Lesson!)
  2. A Look At What We'll Build (Free Lesson!)

Chapter 1: Responsive Design Fundamentals

  1. Key Aspects of Responsive Design (Free Lesson!)
  2. Determining Device Resolutions to Target (Free Lesson!)
  3. Wireframing Responsive Layouts (Free Lesson!)

Chapter 2: The Basics: Multiple Style Sheets & Media Queries

  1. The Concept of Using Multiple CSS Files
  2. Media Queries & Multiple Style Sheets
  3. Building Media Queries into a Single CSS File
  4. Using Media Query Expressions

Chapter 3: Building HTML Structure & CSS For All Screens

  1. Setting Up The HTML & CSS Files
  2. Getting Started with the Header
  3. Inserting The Main Nav Menu
  4. Inserting the Search Field
  5. Problems with Applying Floats
  6. Integrating Google Fonts API
  7. Building the Hero Section Structure
  8. Formatting the Hero Section
  9. Inserting & Formatting A Call To Action Button
  10. Building the Features Section, Part One
  11. Building the Features Section, Part Two
  12. Inserting the Organize Section
  13. Building the Share Section
  14. Building the Call To Action Area
  15. Inserting and Formatting the Footer
  16. Finishing Touches for the High Resolution Layout

Chapter 4: Building the Tablet Layout

  1. Setting Up The Medium Resolution CSS & Testing The Media Query
  2. Formatting the Medium Res Header
  3. Formatting the Medium Res Hero Section
  4. Formatting the Features Section
  5. Formatting the Organize And Share Sections
  6. Building the Get Section & Finishing Up the Medium Res Layout

Chapter 5: Building the Smartphone Layout

  1. Setting Up The Low Res CSS & Testing The Media Query
  2. Formatting the Low Res Header
  3. Resolving Problems Caused By Floats
  4. Formatting the Low Res Hero Section
  5. Formatting the Features Section
  6. Formatting the Organize And Share Sections
  7. Building the Get Section & Finishing Up the Low Res Layout

Chapter 6: Advanced Techniques for Responsive Design

  1. Disabling Device Smart Zoom
  2. Testing Your Responsive Layouts
  3. Setting Up Retina Display Graphics

Chapter 7: Wrapping Up

  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!

$39

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

How does it work?

“Where were you a year ago when I was starting out?! You’ve enabled me to FINALLY see the connection between what HTML and CSS are, and how to tie it all together! You’ve not only taught me so much, but you clarified web design me. Well done and thank you!”

Anna
  • Per Johannessen

    great course Geoff. I have one question though. you start out by saying that the layout should be fluid before we build our media queries (in percentages) which I have also seen other places is the correct approach, but you build it fixed in pixels (containers, margins, padding etc.) – why don’t we build it on a fluid foundation?
    Thank you again for being an awesome teacher!

    • Thanks for your comment and your kind words, Per! Great to hear you enjoyed the course. Great question. Yes, absolutely we could have built the entire design using flexible widths in our media queries, but with this course, I wanted to show how you could combine flexible widths (smart phone and tablet layouts) with fixed widths (desktop layout). I believe I mention this approach early on in the course…but in case I didn’t, my apologies! -Geoff

      • Per Johannessen

        Okay I c. Maybe I missed it. It would just be awesome to learn calculating the percentages for containers, header, margins, paddings etc. – how you would approach that :-)

  • Mike Baker

    Geoff, the course moves at the perfect pace for those of us who have experience with HTLM5/CSS3. I always learn new stuff when I watch your tutorials. That is why I purchase them! You are a great teacher and easy to listen to – one of the best out there! I did notice that you place a semi-colon at the end of each CSS declaration string. When I was taking my classes at University of Phoenix for Web Design & Dev I learned that that last declaration in the series does not need a semi-colon. Supposedly the semicolon in CSS says, “Hey, there is more to come” – not using the last semi-colon supposedly saves load and parse time if the CSS file is large. It is all nominal in it’s effect of course.

    Thanks again for your great courses! Keep ’em coming!

    • Hey Mike, thanks for your very complimentary words! Great to hear you enjoyed the course. Regarding the semi-colon issue, that’s interesting. I’ve never heard that before. I guess, then, that it’s personal preference. Many new courses are in the cooker, keep your eyes peeled for new ones soon! Thanks again, -G

  • Karen Weber

    Hi Geoff, just finishing up this course and it is great. However, chapters 6 and 7 seem to be missing.

Welcome (Free Lesson!)

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

Key Aspects of Responsive Design (Free Lesson!)

Determining Device Resolutions to Target (Free Lesson!)

Wireframing Responsive Layouts (Free Lesson!)