Learn How CSS Positioning Works?

In this Course you'll get an in-depth look at using CSS to control the positioning of elements on your web page!

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 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.