Video2Brain - Exploring CSS Positioning [repost]

CSS enables you to control the look and layout of a web page much more precisely than you could with HTML alone, but it can be time-consuming to learn. In this innovative workshop, expert developer Candyce Mairs makes it quick and easy, walking you through the process of adding content to a web page and using CSS to position that content. You will learn CSS positioning concepts like the CSS “box model,” “floats,” and “clears,” and gain a deeper understanding of how HTML and CSS work together to create the look of your web page. By speaking the same language as the browser, you will learn to work with the browser to place content accurately and easily.

In this workshop you'll get an in-depth look at using CSS to precisely control the positioning of elements on your web pages. The contents of this course include:

Getting Started
In this chapter you’ll see why CSS positioning is important and be introduced to some of the fundamental concepts. You’ll learn how to set up and use an HTML editor, preview pages in multiple browsers, and install browser extensions.

The Browser Team
In this chapter we’ll focus on HTML and CSS: what each one does, and how they work together to position content in the browser.

Building the Header Area
In this chapter we’ll begin creating an example web page by working on the header. We’ll plan the layout, build the header box, and position content with HTML and CSS.

Adding the Navigation Menu
The next item to build on the page is the navigation menu that will go below the header image. In this chapter we’ll set up the menu box, add links, and format the menu to make it look nice.

Creating the Middle Column
The design for this web page contains three columns: the navigation menu and two columns of content. Now that the web page has the header and menu area, in this chapter we will move on to add the first content column (the middle column on the page) and drop the text content into this new column.

Creating the Right Column
In this chapter we’ll add the final (right) column, which will contain both text and images, to the web page.

Positioning Using a Float
When working with CSS positioning, it is important to understand the float property, which allows content to move easily into a column structure. In this chapter you’ll learn how to apply and finish a float.

Adding Background Colors and Images
In order to make the web page match the original graphic design, we need to add background colors and images. In this chapter you’ll see how to do this using a footer, the clear property, nested divs, and negative CSS property values.

Adding the Final Touches
In this chapter we’ll apply a few finishing touches to our web page, modifying some rules for text and the background color, applying some new rules, and adding interactivity.

The lessons are wrapped in a feature-rich interface that lets you jump to any topic and bookmark individual sections for later review. Full-Screen mode provides a hi-def, immersive experience, and Watch-and-Work mode shrinks the video into a small window so you can play the videos alongside your application. Also included are exercise files that give you an easy way to try out the techniques you learn.

Content

Getting Started

Why CSS Positioning? 05:51
HTML Editors 03:18
Getting Set Up 03:39
Previewing Pages in Browsers 03:51
Customizing the HTML Editor 05:32
Exploring Browser Variances 05:17
Browser Extensions 05:54

The Browser Team

HTML vs. CSS: Which Does What? 09:55
HTML Div Tags 04:57
CSS Properties 06:21
The CSS Box Model 09:20

Building the Header Area

Planning the Page Layout 03:47
Building the Header Box 06:24
Positioning with HTML 03:36
Positioning with CSS 08:22
Foreground vs. Background Content 06:39

Adding the Navigation Menu

Building the Menu Box 05:07
Adding the Menu Links 04:58
Formatting the Menu with CSS 06:43
Positioning the Menu with CSS 08:56

Creating the Middle Column

Adding the Middle Column 06:29
Creating a CSS Rule for the Column 06:21
Adding CSS Rules for the Column 08:53

Creating the Right Column

Adding the Right Column and Inserting Images 07:33
Completing the Right Column Content 04:19
Formatting the Right Column Using CSS 07:59

Positioning Using a Float

Understanding the Float Property 06:06
Applying the Floats 06:02
Finishing the Floats 06:25
Adding CSS Properties to the Right Column 07:44

Adding Background Colors and Images

Setting Up for Background Colors 05:49
Adding a Footer 08:51
Adding the Background Colors 07:21
Positioning the Footer 09:01

Adding the Final Touches

Comparing the Web Page to the Graphic Design 06:50
Adjusting the Web Page as Needed 04:25
Adding the Final Touches 05:23

Closing Thoughts

Closing Thoughts 02:44