Some People just Watch Our 250 Web Design Video Tutorials

CSS3, Bootstrap, Dreamweaver, Responsive, Photoshop, SEO and WordPress


50 hours of Web Design Video Tutorials

  private web design tutor

CSS3, Things You Must Know

What is CSS (CSS3)
2:47 minutes

Why all the Buzz about CSS, what the heck is CSS. Why use CSS? The mystery is about to be told when you see this video from Bill the Geek.

What is a CSS Rule?11:31 minutes

What is a CSS Rule? What is a CSS Selector? What is a CSS Property? Let Bill the Geek answer your questions right here.

CSS Syntax
5:231 minutes

Looking at the Syntax in CSS Rules.  Really a must to understand as you move ahead with CSS.

Classes, or Id´s.  When do I use which one?

It´s your kitchen, just follow the general rules.

Before we move ahead, sometimes it´s a good thing to save some code should you want to use it again and again again throughtout your life with Dreamweaver CC.

What is the difference between putting your css in the html document, in an external css document, or in the body tag of the html document.

Now that you know a little CSS, The CSS Designer Panel can help you do many things.

Some People just Watch Our 250 Web Design Video Tutorials

CSS3, Bootstrap, Dreamweaver, Responsive, Photoshop, SEO and WordPress


50 hours of Web Design Video Tutorials

  private web design tutor

CSS3, Layout Essentials

An Introduction to Laying out your boxes with Divs

Reset Your CSS, Center Your Page with CSS.  Reset is kind of strange.  But, you really need to understand WHY YOU NEED IT FOR SURE!

Float Left, Float Right, Clear Float.  These are concepts that must be understand for sure.

Talk, Talk, Talk.  All this talk and no Do.  Let’s put all of this stuff together and make a page using CSS and a 3 column layout.

Very Important, Padding and Margins

More CSS Padding
6:01 minutes

More Padding Just because it´s Fun!

Click a word, go to a different page. Control the link colors, make a rollover color. Click a link, have the page open in a new browser window. Click a link, allow the visitor to send an email.

Many times you need a title that is an H1 tag in the header, to have a different size or color in a different place of your html page. I would call this targeting an html tag, or class in a box.

In the past, Dreamweaver made rollover images pretty easy. To get it done that way was with Javascript. Now, you can use CSS and be WAY, more in Control of the images, and the page.

No more Spry Menus in Adobe CC. Everyone knows that with CSS you can get it done clean, easy, and you can be in control of your menus. See the Video, Download the Sample files.

Some People just Watch Our 250 Web Design Video Tutorials

CSS3, Bootstrap, Dreamweaver, Responsive, Photoshop, SEO and WordPress


50 hours of Web Design Video Tutorials

  private web design tutor

Managing Fonts

Using and manipulating Fonts in Dreamweaver CC is a Brand new world. I’ve been using Dreamweaver since the year 2000. This really threw me off when I tried to apply a font in CC. Check out this video is all I can say.

Kerning, leading and Tracking is something that you may know or not. If you don´t know anything about it and you have used any word processing application, then you have wanted to use Kerning, leading and tracking. This video is all about Kerning Leading and Tracking with Css.

The Powerful CSS3 List

List take up about 50 percent of web page space. Here we introduce html list tags and what you can do with list before we move on to vertical and horizontal list.

CSS Vertical List, margin, padding, remove bullets, adding a background, inserting text, tag options.

CSS Horozontal List, padding, width, height, remove bullets, adding a background, inserting text, tag options.

Images in a List
5:34 minutes

Images in a list.

Helpful Free online List.

Some People just Watch Our 250 Web Design Video Tutorials

CSS3, Bootstrap, Dreamweaver, Responsive, Photoshop, SEO and WordPress


50 hours of Web Design Video Tutorials

  private web design tutor

Building for Phones, Tablets, and Desktops

What is Responsive Web Design (RWD)? They say it was the biggest development in the history of the internet. Why? It´s a big world out there and people love the internet. People have figured out how to use the internet in ways that I can´t even believe. This is an introduction.

My clients always ask, “What is a Responsive Web Design Media Query?” I Tell them it´s more or less a question of “IF.” If this is true, show that, If that is true, show em this, of none of this or that is true, take a break and go to the beach.

Basic Responsive Code
13:47 minutes

In this video, we present an introduction to the code behind Responsive Web Design. With the video we provide a link to our web site where you can download the pages and play with the html and the css. This way you can adjust the main css as well as the media queries in the resize css files.

It’s your Kitchen. You can use pixels to build your pages or percentages. There are many models out there. I like percentages a lot. In this part of the series, we share our model concept with download sample files.

Scaling images is not really that hard. It only involves 2 real lines of code. Of course with any code, it depends on where you put them and the values used. Again, we include the code so that you can download it and play.

There are many concepts about RWD floating around the web. I fought this idea. But after days and days of many designs and multiple sites and projects, this concept has won me over.

The display:block, display:none, CSS Property can hide and show elements on your page. Show on a phone, hide on a big screen or vis versa. IT´S REALLY FREAKING COOL!!! Also, the Adobe Dreamweaver CC CSS Designer panel. Adobe did a very good job with this. VERY POWERFUL!

The CSS and Html to make a YouTube Video Responsive

Flash is Far from Dead. With Flash and Responsive Web Design, you can show every visitor to your site exactly what you want them to see.

Some People just Watch Our 250 Web Design Video Tutorials

CSS3, Bootstrap, Dreamweaver, Responsive, Photoshop, SEO and WordPress


50 hours of Web Design Video Tutorials

  private web design tutor

CSS Dropdown Menus

Howdy. Welcome to the land of Adobe Dreamweaver CC CSS Responsive Drop Down Menus. This is a four part series that started about a year ago when we had a single video about how to make CSS dropdown menus. Since then, so much has changed. Thus, we present this 5 part series, “Adobe Dreamweaver CC CSS Responsive Drop Down Menus.”

Introduction Video
4:22 minutes

In our Adobe Dreamweaver CC CSS Responsive Drop Down Menus series, we start out with an introduction showing you what each part of the series will cover. For each part of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series, you will see a download button at the bottom of the page, above the video.

After the introduction video, you will see Part 1 of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series. In this part we show you how to make your drop down menu. In this video, the end result gives you drop down menus, but they are not at all responsive.

Part 2 of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series get you to the point where we make the page responsive, but we don´t include the menus just yet. What you will also find in Part 2 is a lesson in itself about resizing a centering background images with the no-repeat CSS function.

In Part 3 of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series, we get to the responsive menu, but it´s not real snazzy. Of course, to get to this point, you may want to go to our video that is all about “display:block, display:none;”

Finally in Part 4 of the Adobe Dreamweaver CC CSS Responsive Drop Down Menus series, we get you to the point where you see the drop down type menu that you see in all the cool web pages, where you have a menu item, and you click on the menu item to reveal the entire menu.

Adobe Dreamweaver CC, CSS3 Responsive Slideshows

Introduction to the 6 Part Series

Making a basic one image slide do something.

Making a one basic image do many things using keyframes.

How to make the z-index ( stacking of images in layers ), work for you.

Making your slideshow 100% full screen width and Responsive Too ( YaaaaHOOOOO).

Let’s make a fading show instead of a sliding show.

Put the slideshow somewhere that works for you in a page.

Animated CSS Menu Tutorials

Here you will find 10 videos. Our goal in this 10 part , “ Animated CSS Menu Tutorials” series is to take you step by step in understanding how to build 100%, PURE CSS3 Menus. No JavaScript. No Jquery. Only CSS3.