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.
Understanding CSS Selector Types
4:35 minutes
Classes, or Id´s. When do I use which one?
Use a Class, or Use an Id?
4:27 minutes
It´s your kitchen, just follow the general rules.
Saving Code You Use Frequently, Code Snippets
6:43 minutes
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.
The Adobe Dreamweaver CC, CSS Designer Panel
16:098 minutes
Now that you know a little CSS, The CSS Designer Panel can help you do many things.
CSS3, Layout Essentials
Introduction to CSS Layout with Divs
2:36 minutes
An Introduction to Laying out your boxes with Divs
CSS Reset Code and Centering a Page
8:47 minutes
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.
Three Column Layout.
2:56 minutes
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!
Creating Links in Web Pages Using CSS
10:35 minutes
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.
Same Page, Different Link Colors
8:59 minutes
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.
CSS Rollover Images and other Rollovers.
11:21 minutes
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.
CSS Drop Down Menus
8:45 minutes
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.
Managing Fonts
Managing Fonts in Adobe Dreamweaver CC
10:43 minutes
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.
CSS Kerning, Leading and Tracking
12:17 minutes
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
An Introduction to CSS Lists
6:03 minutes
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.
The CSS Vertical List
9:49 minutes
CSS Vertical List, margin, padding, remove bullets, adding a background, inserting text, tag options.
The CSS Horizontal List
12:19 minutes
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.
Free CSS Lists and List Help
2:07 minutes
Helpful Free online List.
Building for Phones, Tablets, and Desktops
What is Responsive Web Design (RWD)?
4:59 minutes
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.
What is a Responsive Web Design Media Query
10:16 minutes
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.
Why Design for the Phone First?
6:20 minutes
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!
Scaling YouTube Videos
8:14 minutes
The CSS and Html to make a YouTube Video Responsive
Flash Lives with Responsive Web Design
9:25 minutes
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.
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
Responsive Slideshows Main Page
Text Only
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.