Create a Website with Responsive Web Design

The future of web development is in Responsive Web Design

That simply means building one website that can be accessed with any device: desktop, laptop, tablet, cell phone and anything in between.

As Promised Easy Flexbox
It's copy and paste. Flexbox can be as confusing as you want to make it. Start simple with these working examples.

• Flexbox Template
• 3 Equal Columns
• 3 Columns with Sidebars
• 2 Columns with Fixed Header
• More to come!!

Easy Flexbox tutorial is finally HERE.

7 easy copy and paste lessons. You'll also learn how to use the clamp function and the art of nesting in style sheets for more manageable CSS.
Start Lesson #1

Note: Nesting in style sheets is new and a lot of HTML editors don't support it yet. One that does: Geany (cross platform).

Seeing + Doing = Learning

That's our philosophy on teaching and the approach we use in our tutorials. You'll See the HTML Code, Preview it in a browser, add the CSS to define its appearance and Preview again in a browser. You'll actually See firsthand what the CSS does. It's all Copy and Paste

The Old Way

We offer a 9 Step Tutorial where you'll create very simple responsive web pages with reponsive columns and images.

The tutorial will also show you how to build a Drop Down Menu. It will introduce you to the W3C Validator for checking your code and the Web Developer's Emulator Tool where you can simulate testing your pages in various different size devices.

 

We'll also introduce you to the cornerstone of Responsive Design, the Media Query. We'll show you how to use Web Developer tools to estimate break points and how to use those Media Queries at those break points.

Whether you plan to Build a Website Yourself, are thinking about a career in Web Development or just want a better understanding of the process, you can get started right by spending a few minutes with us.

You'll see how responsive web pages are built by first SEEING and then DOING just that.

Your finished web page will be Mobile Ready with Responsive Web Design features.

Start the 9 Step Tutor NOW!

Note: The information presented here is entry level for beginners. Get grounded in the BASICS early and it will be easier when you realize the magnitude of what CSS has brought to the web development industry.

Free 5 Page Responsive Web Design Kits

Once through the tutor, grab one of our free 5 page Responsive Web Design Template Kits 500 Series and experience a mini tutorial on making images responsive and creating responsive columns.

 

Our Purpose

The purpose of this website is to help beginners in the field of web development to get grounded in the Basic Fundamentals of HTML5 and CSS.

If you have a basic understanding of the process involved in building web pages, you'll be better prepared to invest your time in learning the more modern techniques of Flexbox and CSS Grid for flexible and efficient layouts.

Knowing the basics of CSS will prepare you to leverage frameworks like Bootstrap or Tailwind CSS for pre-designed components and responsive grids to speed up development and ensure consistency across the site.

Let me help you to build a solid HTML foundation, then enhance with CSS and a SMIDGE of JavaScript for advanced features.

Yes, I'm old school, but I still get tickled pink every time someone tells me I got them started down the Road to Responsive Web Design

We're Teaching. They're Selling.

The Road to Responsive Web Design

Our newest template kits 500 Series aren't just templates. They're mini tutorials on making images responsive, creating multiple responsive columns and using Media Queries.

They include a choice of 6 different horizontal and vertical menu systems from our navbar collection and the new Toggle Menu that kicks in for smaller devices.

The kits include 5 web pages with various column designs, 3 style sheets and the lmenu.html page.

Test Drive Template Kit #501
Download Template Kit #501

It comes ready to perform on a full size desk top or cellphone. Download it and run it through the Web Developers Emulator tool.

Or you can test drive the entire 500 Series collection.

 

9 Step Tutorial (Using a Text Editor - Copy and Paste)

• 🔵1...HTML Page Structure - Create Style Sheet(CSS)
• 🔵2...Styling the header, footer and division tag with CSS
• 🔵3...Add an H1 tag and style it using CSS
• 🔵4...Add Nav Element and Use List to build a menu
• 🔵5...Add content using paragraph tag
• 🔵5a..Use Web Tools and Media Queries
• 🔵5b..Add lmenu System for Small Devices
• 🔵6...Add an image
• 🔵7...Build a drop down menu and make it Mobile Ready with Media Queries

Beginners are encouraged to work through the 9 Step tutorial several times. You'll be surprised at how much of the information sinks in about the third time through just by copying and pasting.

 

Our Tutorial Process

Beginners will start with a simple approach to learning: Seeing + Doing = Learning

<html>
<body>
<p>Paragraph code</p>
</body>
</html>

p {
  font-family: arial, tahoma, serif;
  font-size: 1rem
}

<p><a href="#heading" class="top-button">Top</a></p>

Specify the location you want to jump to like so:

<header id="heading">

p a.top-button {
/*Button*/
position: fixed; /*Make it Sticky*/
bottom: 2rem;
right: 1.5rem;
width: 2rem;
height: 1.75rem;
padding: .75rem ;
background: #0066cc;
border: solid 4px #ffff00;
border-radius: 50%;
box-shadow: 1px 1px 4px #000;
/*Button Text*/
font-family: arial, serif;
color: #fff !important;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
text-indent:0;
text-shadow : 1px 1px 2px #000;
}


p a:hover.top-button {
color: #000 !important;
background-color: #fff;
box-shadow: 1px 1px 4px #000 inset !important;
text-shadow:none;
border: solid 1px #000;
}