Building Money Sites the Fast and Furious Way

[Kurt]

What and Why W3.CSS

W3.CSS is a "framework" that helps design web pages. Over-simplified, a framework is instructions that CSS and HTML use for things like colors, fonts, layout, etc.

• W3.CSS is "mobile first" and responsive.
  
• W3.CSS is Open Source, which means we can legally and ethically use it.
  
• W3.CSS is the easiest platform to learn and use.
  
• W3.CSS is the fastest framework.
  

To repeat...W3.CSS is free, the easiest to use makes and the fastest web pages.

Bootstrap is probably the most used and well-known platform, and it's good. However, it uses JavaScript for things like fancy dropdown menus. We're making SEO-friendly direct marketing pages. We don't want or need these things. These abilities shouldn't be used by us marketers anyway, and only make Bootstrap pages a little slower and a little harder to design.

The templates are totally responsive as is. However, you can add things like images and tables that aren't responsive. Be careful with tables. It's impossible to put a lot of info into tables and expect them to look good on small handheld screens. Use them only to organize small bits of info and possibly to help with layout.

To make images responsive, you just need to use W3.CSS functions.

Use these code snippets to make images responsive and to align left, right or center.

Code:

<img src="image.jpg" alt="keyword" style="max-width:100%; float: left;  padding: 20px;">

<img src="image.jpg" alt="keyword" style="max-width:100%; float: right;  padding: 20px;">

<img src="image.jpg" alt="keyword" style="max-width:100%; float: center;  padding: 20px;">

 
Use this code snippet to make your embedded YouTube videos responsive:

Code:

<div class="embed-youtube">
    <iframe src="https://www.youtube.com/embed/22xJjwTRC10"></iframe>
</div>