HTML & CSS
Create things for the web that are beautiful. HTML and CSS will help...and so will this page and its many tutorials, videos, examples, and other awesome things.
The Basics
- Introduction to HTML
- Anatomy of a CSS Style 101
- Where Will Your Styles Live?
- CSS Selectors: Type, Class, and ID
- CSS Attribute Selectors
- All About nth-of-type and nth-child Selector
- Using Firebug to Easily Inspect (and Diagnose!) CSS
CSS Tricks & Techniques
- Creating a 3x3 Grid
- Styling Links
- Rounding Corners
- Changing the Default Focus Styles
- Clipping Content
- Making the First Letter Stand Out
- Hiding Things using CSS
- Styling Placeholder Text using CSS
- The Cursor Property
- Removing the Space Between Images Using CSS
- Display an Outline (Not a Border!) on Hover
- Creating Circles Using HTML/CSS
- Preserve and Image's Aspect Ratio When Resized
- Avoid Using Vendor Prefixes
- Make <body> Take Up 100% of the Browser Height
- Rounded Image Links with a Sweet Hover Effect
- Creating Circular Bullseye Stripes
Layout
- Centering Vertically and Horizontally Using Flexbox
- Centering a Div Horizontally
- A Little About Color: RGB vs. HSV
- Fixing an Element's Position in CSS
-
Grabbing All Available Space
Color and Effects
- Changing Selection Color using CSS
- Drop Shadows
- CSS Filters
-
Animations &
Transitions (go to Animation section)
Putting it All Together
- The HTML5 Starting Template
- Creating an Awesome Search Box
- Create an Awesome Contact Page
- Creating a Vertical CSS List Menu
- Creating a Horizontal CSS List Menu
- Changing CSS using JavaScript
- Style Beautiful Tables Using Only CSS
