class: xhtml & css, for beginners
DESCRIPTION
XHTML and CSS2 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. So why do we bother with XHTML and CSS2 if responsive themes, HTML5 and CSS3 is already the top of the top? Because you need to first get the base technologies and then we will go exploring what's fashion and what gets you paid good bucks. 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.TRANSCRIPT
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: [email protected]
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: [email protected]