Building PHP Web Sites

Class: “XHTML & CSS”Level 1: Beginners

Who am I?

My name is Ivan.

I have 5 years of experience in Web development.

I have had the luck to start my career being mentored by great developers with lots of experience.

I have been involved in websites of various complexity, and sometimes I have taught people and consulted developers.

I found that I LOVE to share knowledge and help.

…and here I am. This is my mission.

How is the class structured?

A class is organized into lessons.

Each lesson costs 12$ and takes hour and a half at most to be completed.

There are numerous exercises at the end of each lesson and a big boss ( practical ) exercise at the end.

What is expected from you?

When you purchase a class, we are going to work with a Skype audio-video chat.

Before purchasing the class, please buy a headset if you lack one. ( note: you don’t need a camera ).

Also, make sure you can dedicate 1 hour and a half ( at most ) for a lesson.

At the end of each lesson, I give out assignments ( home works ) – be ready to do your home works.

General Information

Definitions

XHTML and CSS are the technologies used for describing how your website looks like.

This class will give you perspective on how to create valid HTML documents, optimized for search engines.

We are going to pay attention to the semantic rules of the web and why it is important to have good XHTML structure of your website.

End Goals

Understanding XHTML, CSS and their exact purpose in website’s frontend creation.

Converting Adobe Photoshop designs into valid, well-structured HTML documents.

Solving CSS cross-browser inconsistencies.

Timeframe

8 lessons 4-part “boss” exercise

Interested? We can start right away!

Contact Details: Skype: ivan.zanev2 Email: ivan.ivanov.zanev@gmail.com

Next part of the presentation provides overview of the class structure…

Lesson Structure

Lesson #1: XHTML Basics

Preparations Installing Web Developer Add-on Applications ( Firefox )

▪ Firebug▪ Web Developer Toolbar▪ HTML Validation

Overview History and purpose of HTML Elements of the XHTML

▪ Tags▪ Attributes▪ Entities ( for reserved characters )

DOCTYPE Basic Elements of the HTML document.

Text Styles▪ Headings▪ Paragraphs▪ Block Write ( new line )▪ Emphasizing Text▪ Quotations / Citations▪ Subscription / Superscription▪ Abbreviation▪ Code and Program Output▪ Escaping Special Characters ( HTML Entities )

Images Links Lists

▪ Ordered / Unordered Lists▪ Definition Lists

Exercises Examine Websites for their layout structure Convert Microsoft Word® Document to an HTML document

Lesson #2: XHTML Forms

Introduction to XHTML Forms Form Controls

Buttons▪ Submit▪ Reset▪ Push

Checkboxes Radio Buttons Menus

▪ Select▪ Multiple-Select

Text input Controls▪ Textbox▪ Text Area

File Selectors Hidden Controls

Enrich Controls Behavior Labels Tab Index Access Keys

Exercises Create a Form

Lesson #3: XHTML Tables

Introduction to XHTML Tables When to use tables, when not to use tables ( table layouts

vs. real tabular data ) Table Elements▪ Rows▪ Cells

Spanning Spanning Columns Spanning Rows

Grouping Grouping Rows ( head, body, foot ) Grouping Columns ( colgroup, col )

Exercises Create a Table

Lesson #4: XHTML Meta-Information and SEO

Introduction What have we learned so far, what is

XHTML used for? Meta Tags

Are they used in Search Engine Optimization?

Page Keywords Document Description Page Author Meta Refresh

Lesson #5: Introduction to CSS

What is CSS? What is it used for? Loading and Applying CSS Rules to an XHTML document

Inline vs. Block Elements▪ The <div>▪ The <span>

Loading CSS Rules▪ The <link> tag▪ The <style> tag

Applying CSS Rules▪ The “id” attribute – “#” selector▪ The “class” attribute” – “.” selector▪ The “style” attribute”▪ Pseudo-Classes

Grouping CSS Rules Exercises

Lesson #6: Inline-Block Formatting Inline-level Formatting

Font ▪ Family▪ Size▪ Color▪ Style and Decoration

Letter / Word Spacing Case Transformation

Block-level Formatting Elements of the Box Model

▪ Content Box▪ Width

HeightMinimum / Maximum Width / Height

▪ Padding▪ Border▪ Margin▪ Outline

Line Spacing Line Height Text Indentation

Exercises Styling Links Styling Lists Styling Paragraphs

Lesson #7: Working with the Background

Working with the Background Background Color Background Image▪ URL▪ Position▪ Repeat

Using Sprites When to use Sprites

Dealing with PNG Images Solving IE6-related problems

Exercises

Lesson #8: Rendering

Display Change the way an element is displayed ( block / inline ). Change element’s visibility.

Floating Block Elements Examples of float with block / inline elements. Clearing the float.

Positioning Elements Static Fixed Relative Absolute z-Index

Aligning Elements Vertical

▪ Using the line height.▪ Using vertical align

Horizontal▪ Using automatic margins.▪ Using relative positioning.

Controlling content’s overflow Exercises

Boss Exercise

Convert PSD to valid XHTML & CSS ( part 1 )

Planning and Preparations Overview of the website and planning

ahead. Cutting the parts in Photoshop.▪ Saving Images for Web Devices▪ Formats

Convert PSD to valid XHTML & CSS ( part 2 )

Creating the Main Page Layout. Creating the Header Tree Menu

Convert PSD to valid XHTML & CSS ( part 3 )

Styling the About Us Page ( Paragraphs, Images, Aligning ).

Styling the Catalog Page Styling the Product Page Styling the Contact Us Page

( Contact Form ). Styling the Home Page.

Convert PSD to valid XHTML & CSS ( part 4 )

Checking for cross-browser inconsistencies and solving IE-related problems.

What now?

Interested? We can start right away!

Contact Details: Skype: ivan.zanev2 Email: ivan.ivanov.zanev@gmail.com